scorer-ui-kit 2.2.5 → 2.3.0

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 (23) hide show
  1. package/dist/Alerts/atom/Tooltip.d.ts +13 -0
  2. package/dist/Alerts/index.d.ts +4 -2
  3. package/dist/Filters/atoms/FilterButton.d.ts +2 -0
  4. package/dist/Filters/atoms/FilterDropHandler.d.ts +2 -0
  5. package/dist/Filters/index.d.ts +2 -1
  6. package/dist/Filters/molecules/FilterDropdown.d.ts +2 -0
  7. package/dist/Filters/molecules/SortDropdown.d.ts +2 -0
  8. package/dist/index.d.ts +4 -4
  9. package/dist/index.js +1103 -1227
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.modern.js +1103 -1228
  12. package/dist/index.modern.js.map +1 -1
  13. package/dist/theme/index.d.ts +0 -132
  14. package/dist/theme/legacy/styles.d.ts +0 -40
  15. package/dist/theme/legacy/typography.d.ts +0 -92
  16. package/dist/theme/variables/Animation.d.ts +1 -0
  17. package/dist/themes/common.d.ts +99 -0
  18. package/dist/themes/light/colors.d.ts +42 -0
  19. package/dist/themes/light/custom.d.ts +148 -0
  20. package/dist/themes/light/light.d.ts +1626 -0
  21. package/dist/themes/light/styles.d.ts +540 -0
  22. package/dist/themes/light/typography.d.ts +794 -0
  23. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -372,98 +372,6 @@ var typography = {
372
372
  }
373
373
  }
374
374
  },
375
- "global": {
376
- "mainMenu": {
377
- "menuItem": {
378
- "default": {
379
- "textAlign": "left",
380
- "fontSize": "16px",
381
- "fontWeight": 300,
382
- "textDecoration": "none",
383
- "color": "var(--grey-a11)"
384
- },
385
- "active": {
386
- "textAlign": "left",
387
- "fontSize": "16px",
388
- "fontWeight": 300,
389
- "textDecoration": "none",
390
- "color": "var(--grey-a11)"
391
- },
392
- "hover": {
393
- "textAlign": "left",
394
- "fontSize": "16px",
395
- "fontWeight": 300,
396
- "textDecoration": "none",
397
- "color": "var(--grey-a11)"
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": "var(--grey-a11)"
408
- },
409
- "hidePrompt": {
410
- "textAlign": "left",
411
- "fontSize": "14px",
412
- "fontWeight": 300,
413
- "textDecoration": "none",
414
- "color": "var(--grey-11)"
415
- },
416
- "subItem": {
417
- "default": {
418
- "textAlign": "left",
419
- "fontSize": "14px",
420
- "fontWeight": 300,
421
- "textDecoration": "none",
422
- "color": "var(--grey-a11)"
423
- },
424
- "active": {
425
- "textAlign": "left",
426
- "fontSize": "14px",
427
- "fontWeight": 600,
428
- "textDecoration": "none",
429
- "color": "var(--grey-8)"
430
- },
431
- "hover": {
432
- "textAlign": "left",
433
- "fontSize": "14px",
434
- "fontWeight": 300,
435
- "textDecoration": "none",
436
- "color": "var(--grey-8)"
437
- }
438
- },
439
- "identity": {
440
- "textAlign": "left",
441
- "fontSize": "12px",
442
- "fontWeight": 400,
443
- "textDecoration": "none",
444
- "color": "var(--grey-a11)"
445
- }
446
- },
447
- "topBar": {
448
- "search": {
449
- "value": {
450
- "textAlign": "left",
451
- "fontSize": "14px",
452
- "fontWeight": 300,
453
- "textDecoration": "none",
454
- "color": "var(--grey-12)"
455
- },
456
- "placeholder": {
457
- "textAlign": "left",
458
- "fontStyle": "italic",
459
- "fontSize": "14px",
460
- "fontWeight": 300,
461
- "textDecoration": "none",
462
- "color": "var(--grey-11)"
463
- }
464
- }
465
- }
466
- },
467
375
  "content": {
468
376
  "section-H2": {
469
377
  "textAlign": "left",
@@ -1289,46 +1197,6 @@ var styles = {
1289
1197
  }
1290
1198
  }
1291
1199
  },
1292
- "global": {
1293
- "mainMenu": {
1294
- "iconBackground": {
1295
- "active": {
1296
- "backgroundColor": colors.menu.active
1297
- },
1298
- "hover": {
1299
- "backgroundColor": colors.menu.hover
1300
- },
1301
- "default": {
1302
- "backgroundColor": colors.menu["default"]
1303
- }
1304
- },
1305
- "background": {
1306
- "boxShadow": "5px 0px 10px 0px var(--white-a2)",
1307
- "backgroundColor": "var(--grey-1)"
1308
- },
1309
- "lines": {
1310
- "backgroundColor": "var(--grey-6)"
1311
- },
1312
- "footerBackground": {
1313
- "backgroundColor": "var(--grey-1)"
1314
- }
1315
- },
1316
- "background": {
1317
- "backgroundColor": "var(--grey-2)",
1318
- "backgroundImage": "linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%)"
1319
- },
1320
- "drawer": {
1321
- "background": {
1322
- "boxShadow": "-5px 0px 10px 0px var(--white-a2)",
1323
- "backgroundColor": "var(--grey-1)"
1324
- }
1325
- },
1326
- "topBar": {
1327
- "lines": {
1328
- "backgroundColor": "var(--grey-6)"
1329
- }
1330
- }
1331
- },
1332
1200
  "indicators": {
1333
1201
  "spinner": {
1334
1202
  "danger": {
@@ -1699,16 +1567,19 @@ var _templateObject;
1699
1567
  var layoutVariables = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n /** Layouts */\n :root {\n --max-content-width: 1840px;\n }\n\n .content-layout {\n \n &-default {\n --content-layout-padding-top: 32px;\n --content-layout-padding-right: 48px;\n --content-layout-padding-bottom: 64px;\n --content-layout-padding-left: 64px;\n --utility-header-padding-top: 48px;\n\n @media ", "{\n --content-layout-padding-top: 32px;\n --content-layout-padding-right: 96px;\n --content-layout-padding-bottom: 64px;\n --content-layout-padding-left: 96px;\n --utility-header-padding-top: 48px;\n }\n\n @media ", "{\n --content-layout-padding-top: 30px;\n --content-layout-padding-right: 120px;\n --content-layout-padding-bottom: 64px;\n --content-layout-padding-left: 120px;\n --utility-header-padding-top: 48px;\n }\n }\n\n &-fullscreen {\n --content-layout-padding-top: 0px;\n --content-layout-padding-right: 0px;\n --content-layout-padding-bottom: 0px;\n --content-layout-padding-left: 0px;\n --utility-header-padding-top: 0px;\n --max-content-width: none;\n }\n\n &-dashboard {\n --content-layout-padding-top: 32px;\n --content-layout-padding-right: 32px;\n --content-layout-padding-bottom: 32px;\n --content-layout-padding-left: 32px;\n --utility-header-padding-top: 32px;\n --max-content-width: none;\n }\n }\n"])), deviceMediaQuery.xlarge, deviceMediaQuery.xxlarge);
1700
1568
 
1701
1569
  var _templateObject$1;
1702
- var colorVariables = styled.css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n.light-theme {\n /* Light Mode */\n --grey-1: #fcfcfd;\n --primary-1: #fcfdff;\n --primary-2: #f5f9ff;\n --primary-3: #eaf3ff;\n --primary-4: #dbecff;\n --primary-5: #c9e2ff;\n --primary-6: #b5d5ff;\n --primary-7: #9bc3fa;\n --primary-8: #76aaf4;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #3c6eb3;\n --primary-12: #0b3162;\n --primary-a12: #00285bf4;\n --primary-a11: #00429cc3;\n --primary-a10: #0062e98a;\n --primary-a9: #006bff7f;\n --primary-a8: #0061eb89;\n --primary-a7: #0066f364;\n --primary-a6: #016fff4a;\n --primary-a5: #0077ff36;\n --primary-a4: #0079ff24;\n --primary-a3: #006eff15;\n --primary-a2: #0066ff0a;\n --primary-a1: #0055ff03;\n --info-1: #fafefd;\n --info-2: #f1fcfa;\n --info-3: #e7f9f5;\n --info-4: #d9f3ee;\n --info-5: #c7ebe5;\n --info-6: #afdfd7;\n --info-7: #8dcec3;\n --info-8: #53b9ab;\n --info-9: #12a594;\n --info-10: #0e9888;\n --info-11: #067a6f;\n --info-12: #10302b;\n --info-a12: #00221def;\n --info-a11: #00776bf9;\n --info-a10: #009281f1;\n --info-a9: #009e8ced;\n --info-a8: #009783ac;\n --info-a7: #01927a72;\n --info-a6: #00998050;\n --info-a5: #00a48938;\n --info-a4: #02af8c26;\n --info-a3: #02c09718;\n --info-a2: #01c8a40e;\n --info-a1: #05cd9b05;\n --success-1: #0d1912;\n --success-2: #0c1f17;\n --success-3: #0f291e;\n --success-4: #113123;\n --success-5: #133929;\n --success-6: #164430;\n --success-7: #1b543a;\n --success-8: #236e4a;\n --success-9: #30a46c;\n --success-10: #3cb179;\n --success-11: #4cc38a;\n --success-12: #e5fbeb;\n --success-a12: #eafff0fa;\n --success-a11: #62ffb3bd;\n --success-a10: #54ffafa9;\n --success-a9: #47ffa69a;\n --success-a8: #49ffaa5e;\n --success-a7: #43ffad42;\n --success-a6: #3dffb130;\n --success-a5: #38feb524;\n --success-a4: #33feb31b;\n --success-a3: #2afebe12;\n --success-a2: #00f7ca07;\n --success-a1: #0000;\n --caution-1: #1f1206;\n --caution-2: #2b1400;\n --caution-3: #391a03;\n --caution-4: #441f04;\n --caution-5: #4f2305;\n --caution-6: #5f2a06;\n --caution-7: #763205;\n --caution-8: #943e00;\n --caution-9: #f76808;\n --caution-10: #ff802b;\n --caution-11: #ff8b3e;\n --caution-12: #feeadd;\n --caution-a12: #ffeee1fa;\n --caution-a11: #ff8c3ffa;\n --caution-a10: #ff842cfa;\n --caution-a9: #ff6b08f6;\n --caution-a8: #fe660085;\n --caution-a7: #ff640363;\n --caution-a6: #ff650649;\n --caution-a5: #fe620137;\n --caution-a4: #fe61002a;\n --caution-a3: #fd54001e;\n --caution-a2: #fd37000e;\n --caution-a1: #0000;\n --warning-1: #150f0f;\n --warning-2: #1e1413;\n --warning-3: #361717;\n --warning-4: #49191a;\n --warning-5: #582122;\n --warning-6: #692e2e;\n --warning-7: #813e3e;\n --warning-8: #a75252;\n --warning-9: #d16565;\n --warning-10: #c35959;\n --warning-11: #ff9795;\n --warning-12: #f9d5d3;\n --warning-a12: #ffdad8f9;\n --warning-a11: #ff9795ef;\n --warning-a10: #ff7272bf;\n --warning-a9: #ff7979ce;\n --warning-a8: #ff7878a1;\n --warning-a7: #ff717178;\n --warning-a6: #fd5f5f5f;\n --warning-a5: #fd464a4d;\n --warning-a4: #ff33383c;\n --warning-a3: #fd383828;\n --warning-a2: #fe48360e;\n --warning-a1: #de000005;\n --green-1: #fbfefc;\n --green-2: #f2fcf5;\n --green-3: #e9f9ee;\n --green-4: #ddf3e4;\n --green-5: #ccebd7;\n --green-6: #b4dfc4;\n --green-7: #92ceac;\n --green-8: #5bb98c;\n --green-9: #30a46c;\n --green-10: #299764;\n --green-11: #18794e;\n --green-12: #153226;\n --green-a12: #002012ea;\n --green-a11: #006b3be7;\n --green-a10: #008346d6;\n --green-a9: #008f4acf;\n --green-a8: #00934ca4;\n --green-a7: #008c3d6d;\n --green-a6: #0193364b;\n --green-a5: #009b3633;\n --green-a4: #01a63522;\n --green-a3: #02ba3c16;\n --green-a2: #00c43b0d;\n --green-a1: #05c04304;\n --orange-1: #fefcfb;\n --red-1: #fefcfc;\n --red-2: #fdf8f8;\n --red-3: #faedec;\n --red-4: #fddfdd;\n --red-5: #f8d2d0;\n --red-6: #f1c3c1;\n --red-7: #e6b1ae;\n --red-8: #da9996;\n --red-9: #d16565;\n --red-10: #c45859;\n --red-11: #b64d4e;\n --red-12: #592525;\n --red-a12: #3d0000da;\n --red-a11: #970002b2;\n --red-a10: #a50002a7;\n --red-a9: #b300009a;\n --red-a8: #a6080069;\n --red-a7: #b10a0051;\n --red-a6: #c609003e;\n --red-a5: #da0b002f;\n --red-a4: #f00f0022;\n --red-a3: #bc0e0013;\n --red-a2: #b7000007;\n --red-a1: #aa000003;\n --black-1: #000000;\n --black-a12: #000000e8;\n --black-a11: #00000090;\n --black-a10: #0000007a;\n --black-a9: #00000070;\n --black-a8: #00000038;\n --black-a7: #00000024;\n --black-a6: #0000001d;\n --black-a5: #00000017;\n --black-a4: #00000012;\n --black-a3: #0000000c;\n --black-a2: #00000007;\n --black-a1: #00000003;\n --orange-2: #fef8f4;\n --orange-3: #fff1e7;\n --orange-4: #ffe8d7;\n --orange-5: #ffdcc3;\n --orange-6: #ffcca7;\n --orange-7: #ffb381;\n --orange-8: #fa934e;\n --orange-9: #f76808;\n --orange-10: #ed5f00;\n --orange-11: #bd4b00;\n --orange-12: #451e11;\n --orange-a12: #380e00ee;\n --orange-a11: #bc4800fa;\n --orange-a10: #ed5b00fa;\n --orange-a9: #f76300f7;\n --orange-a8: #f86300b1;\n --orange-a7: #ff66017e;\n --orange-a6: #ff6b0158;\n --orange-a5: #ff6b013c;\n --orange-a4: #ff6e0028;\n --orange-a3: #ff6c0318;\n --orange-a2: #e860050b;\n --orange-a1: #c0430504;\n --grey-2: #f9f9fb;\n --grey-3: #f0f0f3;\n --grey-4: #e8e8ec;\n --grey-5: #e0e1e6;\n --grey-6: #d9d9e0e0;\n --grey-7: #cdced6;\n --grey-8: #b9bbc6;\n --grey-9: #8b8d98;\n --grey-10: #80838d;\n --grey-11: #717989;\n --grey-12: #5a6671;\n --grey-a12: #020b1de3;\n --grey-a11: #020b1d9f;\n --grey-a10: #00071b7f;\n --grey-a9: #00051d74;\n --grey-a8: #00083046;\n --grey-a7: #00062e32;\n --grey-a6: #00002f26;\n --grey-a5: #0009321f;\n --grey-a4: #00002d17;\n --grey-a3: #00003310;\n --grey-a2: #00005506;\n --grey-a1: #00005503;\n --white-1: #FFFFFF;\n --white-a12: #ffffffeb;\n --white-a11: #ffffff97;\n --white-a10: #ffffff72;\n --white-a9: #ffffff62;\n --white-a8: #ffffff3f;\n --white-a7: #ffffff2d;\n --white-a6: #ffffff20;\n --white-a5: #ffffff16;\n --white-a4: #ffffff0e;\n --white-a3: #ffffff09;\n --white-a2: #ffffff03;\n --white-a1: #fff0;\n\n /* feedback */\n --error: var(--warning-8);\n --info: var(--primary-7);\n --neutral: var(--grey-9);\n --success: var(--success-8);\n --warning: var(--caution-8);\n\n /* icons */\n --inverse: var(--grey-1);\n --mono: var(--grey-12);\n --dimmed: var(--grey-11);\n --subtle: var(--grey-10);\n --primary: var(--primary-9);\n --danger: var(--warning-9);\n --white: var(--white-1);\n\n --spinner-danger: var(--warning-8);\n --spinner-secondary: var(--grey-8);\n --spinner-primary: var(--primary-6);\n --spinner-simple: var(--grey-a8);\n\n --main-background-gradient: linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%);\n --main-background-color: var(--grey-3);\n }\n\n .dark-theme {\n /* Dark mode */\n\n --grey-1: #111113;\n --primary-1: #000;\n --primary-2: #09121e;\n --primary-3: #0e2341;\n --primary-4: #0c2f5d;\n --primary-5: #153c70;\n --primary-6: #214a81;\n --primary-7: #2d5a97;\n --primary-8: #366bb5;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #81b7ff;\n --primary-12: #cee3ff;\n --primary-a12: #cee3ff;\n --primary-a11: #81b7ff;\n --primary-a10: #7bb2fff3;\n --primary-a9: #80b5ff;\n --primary-a8: #4c97ffb5;\n --primary-a7: #4c98ff97;\n --primary-a6: #4293ff81;\n --primary-a5: #3089ff70;\n --primary-a4: #2181ff5d;\n --primary-a3: #378aff41;\n --primary-a2: #4d99ff1e;\n --primary-a1: #0000;\n --info-1: #091915;\n --info-2: #04201b;\n --info-3: #062923;\n --info-4: #07312b;\n --info-5: #083932;\n --info-6: #09443c;\n --info-7: #0b544a;\n --info-8: #0c6d62;\n --info-9: #12a594;\n --info-10: #10b3a3;\n --info-11: #0ac5b3;\n --info-12: #e1faf4;\n --info-a12: #e6fff9fa;\n --info-a11: #0affe7bf;\n --info-a10: #13ffe7ab;\n --info-a9: #18ffe49b;\n --info-a8: #11ffe75d;\n --info-a7: #11ffe342;\n --info-a6: #09ffe630;\n --info-a5: #02fee424;\n --info-a4: #00fde81b;\n --info-a3: #00fddc12;\n --info-a2: #00fbd508;\n --info-a1: #0000;\n --success-1: #0d1912;\n --success-2: #0c1f17;\n --success-3: #0f291e;\n --success-4: #113123;\n --success-5: #133929;\n --success-6: #164430;\n --success-7: #1b543a;\n --success-8: #236e4a;\n --success-9: #30a46c;\n --success-10: #3cb179;\n --success-11: #4cc38a;\n --success-12: #e5fbeb;\n --success-a12: #eafff0fa;\n --success-a11: #62ffb3bd;\n --success-a10: #54ffafa9;\n --success-a9: #47ffa69a;\n --success-a8: #49ffaa5e;\n --success-a7: #43ffad42;\n --success-a6: #3dffb130;\n --success-a5: #38feb524;\n --success-a4: #33feb31b;\n --success-a3: #2afebe12;\n --success-a2: #00f7ca07;\n --success-a1: #0000;\n --caution-1: #1f1206;\n --caution-2: #2b1400;\n --caution-3: #391a03;\n --caution-4: #441f04;\n --caution-5: #4f2305;\n --caution-6: #5f2a06;\n --caution-7: #763205;\n --caution-8: #943e00;\n --caution-9: #f76808;\n --caution-10: #ff802b;\n --caution-11: #ff8b3e;\n --caution-12: #feeadd;\n --caution-a12: #ffeee1fa;\n --caution-a11: #ff8c3ffa;\n --caution-a10: #ff842cfa;\n --caution-a9: #ff6b08f6;\n --caution-a8: #fe660085;\n --caution-a7: #ff640363;\n --caution-a6: #ff650649;\n --caution-a5: #fe620137;\n --caution-a4: #fe61002a;\n --caution-a3: #fd54001e;\n --caution-a2: #fd37000e;\n --caution-a1: #0000;\n --warning-1: #150f0f;\n --warning-2: #1e1413;\n --warning-3: #361717;\n --warning-4: #49191a;\n --warning-5: #582122;\n --warning-6: #692e2e;\n --warning-7: #813e3e;\n --warning-8: #a75252;\n --warning-9: #d16565;\n --warning-10: #c35959;\n --warning-11: #ff9795;\n --warning-12: #f9d5d3;\n --warning-a12: #ffdad8f9;\n --warning-a11: #ff9795ef;\n --warning-a10: #ff7272bf;\n --warning-a9: #ff7979ce;\n --warning-a8: #ff7878a1;\n --warning-a7: #ff717178;\n --warning-a6: #fd5f5f5f;\n --warning-a5: #fd464a4d;\n --warning-a4: #ff33383c;\n --warning-a3: #fd383828;\n --warning-a2: #fe48360e;\n --warning-a1: #de000005;\n --green-1: #0d1912;\n --green-2: #0c1f17;\n --green-3: #0f291e;\n --green-4: #113123;\n --green-5: #133929;\n --green-6: #164430;\n --green-7: #1b543a;\n --green-8: #236e4a;\n --green-9: #30a46c;\n --green-10: #3cb179;\n --green-11: #4cc38a;\n --green-12: #e5fbeb;\n --green-a12: #eafff0fa;\n --green-a11: #62ffb3bd;\n --green-a10: #54ffafa9;\n --green-a9: #47ffa69a;\n --green-a8: #49ffaa5e;\n --green-a7: #43ffad42;\n --green-a6: #3dffb130;\n --green-a5: #38feb524;\n --green-a4: #33feb31b;\n --green-a3: #2afebe12;\n --green-a2: #00f7ca07;\n --green-a1: #0000;\n --orange-1: #1f1206;\n --red-1: #150f0f;\n --red-2: #1e1413;\n --red-3: #361717;\n --red-4: #49191a;\n --red-5: #582122;\n --red-6: #692e2e;\n --red-7: #813e3e;\n --red-8: #a75252;\n --red-9: #d16565;\n --red-10: #c35959;\n --red-11: #ff9795;\n --red-12: #f9d5d3;\n --red-a12: #ffdad8f9;\n --red-a11: #ff9795ef;\n --red-a10: #ff7272bf;\n --red-a9: #ff7979ce;\n --red-a8: #ff7878a1;\n --red-a7: #ff717178;\n --red-a6: #fd5f5f5f;\n --red-a5: #fd464a4d;\n --red-a4: #ff33383c;\n --red-a3: #fd383828;\n --red-a2: #fe48360e;\n --red-a1: #de000005;\n --black-1: #000;\n --black-a12: #000000e8;\n --black-a11: #00000090;\n --black-a10: #0000007a;\n --black-a9: #00000070;\n --black-a8: #00000038;\n --black-a7: #00000024;\n --black-a6: #0000001d;\n --black-a5: #00000017;\n --black-a4: #00000012;\n --black-a3: #0000000c;\n --black-a2: #00000007;\n --black-a1: #00000003;\n --orange-2: #2b1400;\n --orange-3: #391a03;\n --orange-4: #441f04;\n --orange-5: #4f2305;\n --orange-6: #5f2a06;\n --orange-7: #763205;\n --orange-8: #943e00;\n --orange-9: #f76808;\n --orange-10: #ff802b;\n --orange-11: #ff8b3e;\n --orange-12: #feeadd;\n --orange-a12: #ffeee1fa;\n --orange-a11: #ff8c3ffa;\n --orange-a10: #ff842cfa;\n --orange-a9: #ff6b08f6;\n --orange-a8: #fe660085;\n --orange-a7: #ff640363;\n --orange-a6: #ff650649;\n --orange-a5: #fe620137;\n --orange-a4: #fe61002a;\n --orange-a3: #fd54001e;\n --orange-a2: #fd37000e;\n --orange-a1: #0000;\n --grey-2: #18191b;\n --grey-3: #212225;\n --grey-4: #272a2d;\n --grey-5: #2e3135;\n --grey-6: #363a3f;\n --grey-7: #43484e;\n --grey-8: #5a6169;\n --grey-9: #696e77;\n --grey-10: #777b84;\n --grey-11: #9a9fa7;\n --grey-12: #d5d8dc;\n --grey-a12: #fcfdffef;\n --grey-a11: #f1f7feb5;\n --grey-a10: #e5edfd7b;\n --grey-a9: #dfebfd;\n --grey-a8: #d9edff5d;\n --grey-a7: #d9edff40;\n --grey-a6: #d6ebfd30;\n --grey-a5: #d9edfe25;\n --grey-a4: #d3edf81d;\n --grey-a3: #ddeaf814;\n --grey-a2: #d8f4f609;\n --grey-a1: #0000;\n --white-1: #fff;\n --white-a12: #ffffffeb;\n --white-a11: #ffffff97;\n --white-a10: #ffffff72;\n --white-a9: #ffffff62;\n --white-a8: #ffffff3f;\n --white-a7: #ffffff2d;\n --white-a6: #ffffff20;\n --white-a5: #ffffff16;\n --white-a4: #ffffff0e;\n --white-a3: #ffffff09;\n --white-a2: #ffffff03;\n --white-a1: #fff0;\n\n /* feedback */\n --error: var(--warning-8);\n --info: var(--primary-7);\n --neutral: var(--grey-9);\n --success: var(--success-8);\n --warning: var(--caution-8);\n\n /* icons */\n --inverse: var(--white-1);\n --mono: var(--grey-12);\n --dimmed: var(--grey-11);\n --subtle: var(--grey-10);\n --primary: var(--primary-9);\n --danger: var(--warning-9);\n --white: var(--white-1);\n\n --spinner-danger: var(--warning-8);\n --spinner-secondary: var(--grey-8);\n --spinner-primary: var(--primary-6);\n --spinner-simple: var(--grey-a8);\n\n --main-background-gradient: linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%);\n --main-background-color: var(--grey-3);\n }\n\n"])));
1570
+ var animationVariables = styled.css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n :root {\n\n --easing-primary-in-out: cubic-bezier(0.87, 0, 0.13, 1);\n --easing-primary-in: cubic-bezier(0.16, 1, 0.3, 1);\n --easing-primary-out: cubic-bezier(0.7, 0, 0.84, 0);\n \n --speed-faster: 0.085s;\n --speed-fast: 0.175s;\n --speed-normal: 0.35s;\n --speed-slow: 0.7s;\n --speed-slower: 1.4s;\n --speed-slowest: 2.8s;\n \n }\n"])));
1703
1571
 
1704
1572
  var _templateObject$2;
1705
- var ThemeVariables = styled.createGlobalStyle(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n\n", ";\n", ";\n\n :root {\n\n --font-ui: Monorale, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n --font-data: Lato, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n\n --font-size: 14px;\n\n --button-font-size: 14px;\n --button-height: 32px;\n --button-h-padding: 8px;\n --button-lift-default-x: 0px;\n --button-lift-default-y: 2px;\n --button-lift-default-blur: 4px;\n --button-lift-default-spread: 2px;\n\n --button-icon-size: 14px;\n --button-icon-h-padding: 8px;\n\n --input-height: 40px;\n \n }\n\n .button-small {\n --button-font-size: 12px;\n --button-height: 24px;\n --button-h-padding: 4px;\n --button-icon-size: 12px;\n --button-icon-h-padding: 8px;\n }\n\n .button-large {\n --button-font-size: 16px;\n --button-height: 40px;\n --button-h-padding: 8px;\n --button-icon-size: 16px;\n --button-icon-h-padding: 8px;\n }\n\n .split-button-primary {\n --border-color: var(--primary-9);\n --border-active-color: var(--primary-11);\n --toggle-icon-border: var(--primary-9);\n --gradient-1: #72C3EE;\n --gradient-2: #5CACEE;\n --button-lift-default-color: rgba(221, 234, 248, 0.08);\n --text-color: var(--white-a12);\n --text-disabled-color: var(--white-a11);\n --button-hover-bg: var(--primary-a3);\n --button-active-bg: var(--primary-10);\n --toggle-icon-hover-bg: var(--white-a7);\n --toggle-icon-active-bg: var(--black-a6);\n --toggle-icon: var(--white-a12);\n --toggle-icon-active: var(--white-a11);\n --toggle-icon-disabled: var(--white-a10);\n }\n\n .split-button-secondary {\n --border-color: var(--grey-7);\n --border-active-color: var(--grey-7);\n --toggle-icon-border: var(--grey-6);\n --gradient-1: #2E3135;\n --gradient-2: #363A3F;\n --button-lift-default-color: rgba(221, 234, 248, 0.08);\n --text-color: var(--grey-12);\n --text-disabled-color: var(--grey-a11);\n --button-hover-bg: var(--grey-a6);\n --button-active-bg: var(--grey-a3);\n --toggle-icon-hover-bg: var(--grey-a6);\n --toggle-icon-active-bg: var(--grey-a3);\n --toggle-icon: var(--grey-12);\n --toggle-icon-active: var(--grey-a11);\n --toggle-icon-disabled: var(--grey-10);\n }\n\n .split-button-danger {\n --border-color: var(--warning-10);\n --border-active-color: var(--warning-10);\n --toggle-icon-border: var(--warning-9);\n --gradient-1: #D16565;\n --gradient-2: #E76F6F;\n --button-lift-default-color: rgba(255, 113, 113, 0.47);\n --text-color: var(--white-a12);\n --text-disabled-color: var(--white-a11);\n --button-hover-bg: var(--warning-a7);\n --button-active-bg: var(--warning-8);\n --toggle-icon-hover-bg: var(--warning-a7);\n --toggle-icon-active-bg: var(--warning-a5);\n --toggle-icon: var(--white-a12);\n --toggle-icon-active: var(--white-a11);\n --toggle-icon-disabled: var(--white-a10);\n }\n\n .split-button-custom {\n --border-color: var(--info-10);\n --border-active-color: var(--info-10);\n --toggle-icon-border: var(--info-9);\n --gradient-1: var(--info-10);\n --gradient-2: var(--info-9);\n --button-lift-default-color: var(--info-a3);\n --text-color: var(--white-a12);\n --text-disabled-color: var(--white-a11);\n --button-hover-bg: var(--info-a7);\n --button-active-bg: var(--info-8);\n --toggle-icon-hover-bg: var(--info-a7);\n --toggle-icon-active-bg: var(--info-a5);\n --toggle-icon: var(--white-a12);\n --toggle-icon-active: var(--white-a11);\n --toggle-icon-disabled: var(--white-a10);\n }\n \n"])), layoutVariables, colorVariables);
1573
+ var colorVariables = styled.css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n .light-theme {\n /* --- Light Mode --- */\n --primary-1: #fcfdff;\n --primary-2: #f5f9ff;\n --primary-3: #eaf3ff;\n --primary-4: #dbecff;\n --primary-5: #c9e2ff;\n --primary-6: #b5d5ff;\n --primary-7: #9bc3fa;\n --primary-8: #76aaf4;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #3c6eb3;\n --primary-12: #0b3162;\n --primary-a1: #0055ff03;\n --primary-a2: #0066ff0a;\n --primary-a3: #006eff15;\n --primary-a4: #0079ff24;\n --primary-a5: #0077ff36;\n --primary-a6: #016fff4a;\n --primary-a7: #0066f364;\n --primary-a8: #0061eb89;\n --primary-a9: #006bff7f;\n --primary-a10: #0062e98a;\n --primary-a11: #00429cc3;\n --primary-a12: #00285bf4;\n\n --secondary-1: #fafefd;\n --secondary-2: #f1fcfa;\n --secondary-3: #e7f9f5;\n --secondary-4: #d9f3ee;\n --secondary-5: #c7ebe5;\n --secondary-6: #afdfd7;\n --secondary-7: #8dcec3;\n --secondary-8: #53b9ab;\n --secondary-9: #12a594;\n --secondary-10: #0e9888;\n --secondary-11: #067a6f;\n --secondary-12: #10302b;\n --secondary-a1: #05cd9b05;\n --secondary-a2: #01c8a40e;\n --secondary-a3: #02c09718;\n --secondary-a4: #02af8c26;\n --secondary-a5: #00a48938;\n --secondary-a6: #00998050;\n --secondary-a7: #01927a72;\n --secondary-a8: #009783ac;\n --secondary-a9: #009e8ced;\n --secondary-a10: #009281f1;\n --secondary-a11: #00776bf9;\n --secondary-a12: #00221def;\n\n --grey-1: #fcfcfd;\n --grey-2: #f9f9fb;\n --grey-3: #f0f0f3;\n --grey-4: #e8e8ec;\n --grey-5: #e0e1e6;\n --grey-6: #d9d9e0e0;\n --grey-7: #cdced6;\n --grey-8: #b9bbc6;\n --grey-9: #8b8d98;\n --grey-10: #80838d;\n --grey-11: #717989;\n --grey-12: #5a6671;\n --grey-a1: #00005503;\n --grey-a2: #00005506;\n --grey-a3: #00003310;\n --grey-a4: #00002d17;\n --grey-a5: #0009321f;\n --grey-a6: #00002f26;\n --grey-a7: #00062e32;\n --grey-a8: #00083046;\n --grey-a9: #00051d74;\n --grey-a10: #00071b7f;\n --grey-a11: #020b1d9f;\n --grey-a12: #020b1de3;\n\n --green-1: #fbfefc;\n --green-2: #f2fcf5;\n --green-3: #e9f9ee;\n --green-4: #ddf3e4;\n --green-5: #ccebd7;\n --green-6: #b4dfc4;\n --green-7: #92ceac;\n --green-8: #5bb98c;\n --green-9: #30a46c;\n --green-10: #299764;\n --green-11: #18794e;\n --green-12: #153226;\n --green-a1: #05c04304;\n --green-a2: #00c43b0d;\n --green-a3: #02ba3c16;\n --green-a4: #01a63522;\n --green-a5: #009b3633;\n --green-a6: #0193364b;\n --green-a7: #008c3d6d;\n --green-a8: #00934ca4;\n --green-a9: #008f4acf;\n --green-a10: #008346d6;\n --green-a11: #006b3be7;\n --green-a12: #002012ea;\n\n --orange-1: #fefcfb;\n --orange-2: #fef8f4;\n --orange-3: #fff1e7;\n --orange-4: #ffe8d7;\n --orange-5: #ffdcc3;\n --orange-6: #ffcca7;\n --orange-7: #ffb381;\n --orange-8: #fa934e;\n --orange-9: #f76808;\n --orange-10: #ed5f00;\n --orange-11: #bd4b00;\n --orange-12: #451e11;\n --orange-a1: #c0430504;\n --orange-a2: #e860050b;\n --orange-a3: #ff6c0318;\n --orange-a4: #ff6e0028;\n --orange-a5: #ff6b013c;\n --orange-a6: #ff6b0158;\n --orange-a7: #ff66017e;\n --orange-a8: #f86300b1;\n --orange-a9: #f76300f7;\n --orange-a10: #ed5b00fa;\n --orange-a11: #bc4800fa;\n --orange-a12: #380e00ee;\n\n --red-1: #fefcfc;\n --red-2: #fdf8f8;\n --red-3: #faedec;\n --red-4: #fddfdd;\n --red-5: #f8d2d0;\n --red-6: #f1c3c1;\n --red-7: #e6b1ae;\n --red-8: #da9996;\n --red-9: #d16565;\n --red-10: #c45859;\n --red-11: #b64d4e;\n --red-12: #592525;\n --red-a1: #aa000003;\n --red-a2: #b7000007;\n --red-a3: #bc0e0013;\n --red-a4: #f00f0022;\n --red-a5: #da0b002f;\n --red-a6: #c609003e;\n --red-a7: #b10a0051;\n --red-a8: #a6080069;\n --red-a9: #b300009a;\n --red-a10: #a50002a7;\n --red-a11: #970002b2;\n --red-a12: #3d0000da;\n\n }\n\n .dark-theme {\n /* --- Dark mode --- */\n --primary-1: #000;\n --primary-2: #09121e;\n --primary-3: #0e2341;\n --primary-4: #0c2f5d;\n --primary-5: #153c70;\n --primary-6: #214a81;\n --primary-7: #2d5a97;\n --primary-8: #366bb5;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #81b7ff;\n --primary-12: #cee3ff;\n --primary-a1: #0000;\n --primary-a2: #4d99ff1e;\n --primary-a3: #378aff41;\n --primary-a4: #2181ff5d;\n --primary-a5: #3089ff70;\n --primary-a6: #4293ff81;\n --primary-a7: #4c98ff97;\n --primary-a8: #4c97ffb5;\n --primary-a9: #80b5ff;\n --primary-a10: #7bb2fff3;\n --primary-a11: #81b7ff;\n --primary-a12: #cee3ff;\n\n --secondary-1: #091915;\n --secondary-2: #04201b;\n --secondary-3: #062923;\n --secondary-4: #07312b;\n --secondary-5: #083932;\n --secondary-6: #09443c;\n --secondary-7: #0b544a;\n --secondary-8: #0c6d62;\n --secondary-9: #12a594;\n --secondary-10: #10b3a3;\n --secondary-11: #0ac5b3;\n --secondary-12: #e1faf4;\n --secondary-a1: #0000;\n --secondary-a2: #00fbd508;\n --secondary-a3: #00fddc12;\n --secondary-a4: #00fde81b;\n --secondary-a5: #02fee424;\n --secondary-a6: #09ffe630;\n --secondary-a7: #11ffe342;\n --secondary-a8: #11ffe75d;\n --secondary-a9: #18ffe49b;\n --secondary-a10: #13ffe7ab;\n --secondary-a11: #0affe7bf;\n --secondary-a12: #e6fff9fa;\n\n --grey-1: #111113;\n --grey-2: #18191b;\n --grey-3: #212225;\n --grey-4: #272a2d;\n --grey-5: #2e3135;\n --grey-6: #363a3f;\n --grey-7: #43484e;\n --grey-8: #5a6169;\n --grey-9: #696e77;\n --grey-10: #777b84;\n --grey-11: #9a9fa7;\n --grey-12: #d5d8dc;\n --grey-a1: #0000;\n --grey-a2: #d8f4f609;\n --grey-a3: #ddeaf814;\n --grey-a4: #d3edf81d;\n --grey-a5: #d9edfe25;\n --grey-a6: #d6ebfd30;\n --grey-a7: #d9edff40;\n --grey-a8: #d9edff5d;\n --grey-a9: #dfebfd6d;\n --grey-a10: #e5edfd7b;\n --grey-a11: #f1f7feb5;\n --grey-a12: #fcfdffef;\n\n --green-1: #0d1912;\n --green-2: #0c1f17;\n --green-3: #0f291e;\n --green-4: #113123;\n --green-5: #133929;\n --green-6: #164430;\n --green-7: #1b543a;\n --green-8: #236e4a;\n --green-9: #30a46c;\n --green-10: #3cb179;\n --green-11: #4cc38a;\n --green-12: #e5fbeb;\n --green-a1: #0000;\n --green-a2: #00f7ca07;\n --green-a3: #2afebe12;\n --green-a4: #33feb31b;\n --green-a5: #38feb524;\n --green-a6: #3dffb130;\n --green-a7: #43ffad42;\n --green-a8: #49ffaa5e;\n --green-a9: #47ffa69a;\n --green-a10: #54ffafa9;\n --green-a11: #62ffb3bd;\n --green-a12: #eafff0fa;\n\n --orange-1: #1f1206;\n --orange-2: #2b1400;\n --orange-3: #391a03;\n --orange-4: #441f04;\n --orange-5: #4f2305;\n --orange-6: #5f2a06;\n --orange-7: #763205;\n --orange-8: #943e00;\n --orange-9: #f76808;\n --orange-10: #ff802b;\n --orange-11: #ff8b3e;\n --orange-12: #feeadd;\n --orange-a1: #0000;\n --orange-a2: #fd37000e;\n --orange-a3: #fd54001e;\n --orange-a4: #fe61002a;\n --orange-a5: #fe620137;\n --orange-a6: #ff650649;\n --orange-a7: #ff640363;\n --orange-a8: #fe660085;\n --orange-a9: #ff6b08f6;\n --orange-a10: #ff842cfa;\n --orange-a11: #ff8c3ffa;\n --orange-a12: #ffeee1fa;\n\n --red-1: #150f0f;\n --red-2: #1e1413;\n --red-3: #361717;\n --red-4: #49191a;\n --red-5: #582122;\n --red-6: #692e2e;\n --red-7: #813e3e;\n --red-8: #a75252;\n --red-9: #d16565;\n --red-10: #c35959;\n --red-11: #ff9795;\n --red-12: #f9d5d3;\n --red-a1: #de000005;\n --red-a2: #fe48360e;\n --red-a3: #fd383828;\n --red-a4: #ff33383c;\n --red-a5: #fd464a4d;\n --red-a6: #fd5f5f5f;\n --red-a7: #ff717178;\n --red-a8: #ff7878a1;\n --red-a9: #ff7979ce;\n --red-a10: #ff7272bf;\n --red-a11: #ff9795ef;\n --red-a12: #ffdad8f9;\n\n }\n\n .light-theme, .dark-theme {\n\n /* --- Constant Colors --- */\n // The should not change between light and dark.\n --white: #FFFFFF;\n --white-1: var(--white);\n --white-2: var(--white);\n --white-3: var(--white);\n --white-4: var(--white);\n --white-5: var(--white);\n --white-6: var(--white);\n --white-7: var(--white);\n --white-8: var(--white);\n --white-9: var(--white);\n --white-10: var(--white);\n --white-11: var(--white);\n --white-12: var(--white);\n\n --white-a1: #fff0;\n --white-a2: #ffffff03;\n --white-a3: #ffffff09;\n --white-a4: #ffffff0e;\n --white-a5: #ffffff16;\n --white-a6: #ffffff20;\n --white-a7: #ffffff2d;\n --white-a8: #ffffff3f;\n --white-a9: #ffffff62;\n --white-a10: #ffffff72;\n --white-a11: #ffffff97;\n --white-a12: #ffffffeb;\n\n --black: #000;\n --black-1: var(--black);\n --black-2: var(--black);\n --black-3: var(--black);\n --black-4: var(--black);\n --black-5: var(--black);\n --black-6: var(--black);\n --black-7: var(--black);\n --black-8: var(--black);\n --black-9: var(--black);\n --black-10: var(--black);\n --black-11: var(--black);\n --black-12: var(--black);\n\n --black-a1: #00000003;\n --black-a2: #00000007;\n --black-a3: #0000000c;\n --black-a4: #00000012;\n --black-a5: #00000017;\n --black-a6: #0000001d;\n --black-a7: #00000024;\n --black-a8: #00000038;\n --black-a9: #00000070;\n --black-a10: #0000007a;\n --black-a11: #00000090;\n --black-a12: #000000e8;\n\n }\n\n\n /** --- Color Aliases --- */\n // Used for state based variable names that can be detached later from base colors if needed.\n .light-theme, .dark-theme {\n\n --info-1: var(--secondary-1);\n --info-2: var(--secondary-2);\n --info-3: var(--secondary-3);\n --info-4: var(--secondary-4);\n --info-5: var(--secondary-5);\n --info-6: var(--secondary-6);\n --info-7: var(--secondary-7);\n --info-8: var(--secondary-8);\n --info-9: var(--secondary-9);\n --info-10: var(--secondary-10);\n --info-11: var(--secondary-11);\n --info-12: var(--secondary-12);\n --info-a1: var(--secondary-a1);\n --info-a2: var(--secondary-a2);\n --info-a3: var(--secondary-a3);\n --info-a4: var(--secondary-a4);\n --info-a5: var(--secondary-a5);\n --info-a6: var(--secondary-a6);\n --info-a7: var(--secondary-a7);\n --info-a8: var(--secondary-a8);\n --info-a9: var(--secondary-a9);\n --info-a10: var(--secondary-a10);\n --info-a11: var(--secondary-a11);\n --info-a12: var(--secondary-a12);\n\n --success-1: var(--green-1);\n --success-2: var(--green-2);\n --success-3: var(--green-3);\n --success-4: var(--green-4);\n --success-5: var(--green-5);\n --success-6: var(--green-6);\n --success-7: var(--green-7);\n --success-8: var(--green-8);\n --success-9: var(--green-9);\n --success-10: var(--green-10);\n --success-11: var(--green-11);\n --success-12: var(--green-12);\n --success-a1: var(--green-a1);\n --success-a2: var(--green-a2);\n --success-a3: var(--green-a3);\n --success-a4: var(--green-a4);\n --success-a5: var(--green-a5);\n --success-a6: var(--green-a6);\n --success-a7: var(--green-a7);\n --success-a8: var(--green-a8);\n --success-a9: var(--green-a9);\n --success-a10: var(--green-a10);\n --success-a11: var(--green-a11);\n --success-a12: var(--green-a12);\n\n --caution-1: var(--orange-1);\n --caution-2: var(--orange-2);\n --caution-3: var(--orange-3);\n --caution-4: var(--orange-4);\n --caution-5: var(--orange-5);\n --caution-6: var(--orange-6);\n --caution-7: var(--orange-7);\n --caution-8: var(--orange-8);\n --caution-9: var(--orange-9);\n --caution-10: var(--orange-10);\n --caution-11: var(--orange-11);\n --caution-12: var(--orange-12);\n --caution-a1: var(--orange-a1);\n --caution-a2: var(--orange-a2);\n --caution-a3: var(--orange-a3);\n --caution-a4: var(--orange-a4);\n --caution-a5: var(--orange-a5);\n --caution-a6: var(--orange-a6);\n --caution-a7: var(--orange-a7);\n --caution-a8: var(--orange-a8);\n --caution-a9: var(--orange-a9);\n --caution-a10: var(--orange-a10);\n --caution-a11: var(--orange-a11);\n --caution-a12: var(--orange-a12);\n\n --warning-1: var(--red-1);\n --warning-2: var(--red-2);\n --warning-3: var(--red-3);\n --warning-4: var(--red-4);\n --warning-5: var(--red-5);\n --warning-6: var(--red-6);\n --warning-7: var(--red-7);\n --warning-8: var(--red-8);\n --warning-9: var(--red-9);\n --warning-10: var(--red-10);\n --warning-11: var(--red-11);\n --warning-12: var(--red-12);\n --warning-a1: var(--red-a1);\n --warning-a2: var(--red-a2);\n --warning-a3: var(--red-a3);\n --warning-a4: var(--red-a4);\n --warning-a5: var(--red-a5);\n --warning-a6: var(--red-a6);\n --warning-a7: var(--red-a7);\n --warning-a8: var(--red-a8);\n --warning-a9: var(--red-a9);\n --warning-a10: var(--red-a10);\n --warning-a11: var(--red-a11);\n --warning-a12: var(--red-a12);\n\n }\n\n /* --- Component Aliases --- */\n // For specific component uses within the UI Kit.\n .light-theme, .dark-theme {\n /* feedback */\n --error: var(--warning-8);\n --info: var(--primary-7);\n --neutral: var(--grey-9);\n --success: var(--success-8);\n --warning: var(--caution-8);\n\n /* tooltip */\n --tooltip-warning: var(--warning-a9);\n --tooltip-warning-arrow: var(--warning-9);\n --tooltip-warning-border: var(--warning-a7);\n\n --tooltip-success: var(--success-9);\n --tooltip-success-arrow: var(--success-8);\n --tooltip-success-border: var(--success-a7);\n\n --tooltip-info: var(--primary-8);\n --tooltip-info-arrow: var(--primary-8);\n --tooltip-info-border: var(--primary-a8);\n\n --tooltip-neutral: var(--grey-8);\n --tooltip-neutral-arrow: var(--grey-7);\n --tooltip-neutral-border: var(--grey-7);\n\n /* icons */\n --inverse: var(--white-1);\n --mono: var(--grey-12);\n --dimmed: var(--grey-11);\n --subtle: var(--grey-10);\n --primary: var(--primary-9);\n --danger: var(--warning-9);\n\n\n --spinner-danger: var(--warning-8);\n --spinner-secondary: var(--grey-8);\n --spinner-primary: var(--primary-6);\n --spinner-simple: var(--grey-a8);\n\n /* Global */\n --main-background-gradient: radial-gradient(200% 200% at 50% -10%, var(--grey-2) 0%, var(--grey-3) 100%);\n --main-background-color: var(--grey-3);\n \n --dividing-line: var(--grey-4);\n --global-element-background: var(--grey-2);\n --global-menu-icon-background-default: transparent;\n --global-menu-icon-background-hover: var(--primary-8);\n --global-menu-icon-background-active: var(--primary-9);\n\n /* Inputs */\n --input-border-default: var(--grey-6);\n --input-border-default-focused: var(--grey-8);\n --input-border-disabled: var(--grey-6);\n --input-border-required: var(--primary-6);\n --input-border-valid: var(--success-9);\n --input-border-invalid: var(--warning-9);\n --input-border-processing: var(--primary-10);\n\n --input-background-default: var(--grey-1);\n --input-background-disabled: var(--grey-3);\n --input-background-required: var(--primary-1);\n --input-background-valid: var(--success-1);\n --input-background-invalid: var(--warning-1);\n --input-background-processing: var(--primary-2);\n\n --input-color-default: var(--grey-12);\n --input-color-disabled: var(--grey-10);\n --input-color-placeholder: var(--grey-10);\n --input-color-unit: var(--grey-10);\n\n --input-focused-shadow-color: var(--black-a5);\n\n }\n\n"])));
1706
1574
 
1707
1575
  var _templateObject$3;
1708
- var BaseStyles = styled.css(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\n * , body{\n box-sizing: border-box;\n }\n body, html , #root {\n min-width: 100%;\n min-height: 100vh;\n margin: 0;\n }\n\n body {\n font-family: var(--font-ui);\n color: var(--grey-11);\n background: linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%) var(--grey-3); \n }\n \n"])));
1576
+ var ThemeVariables = styled.createGlobalStyle(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\n ", ";\n ", ";\n ", ";\n\n :root {\n\n --font-ui: Monorale, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n --font-data: Lato, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n\n --common-height: 32px;\n\n --font-size: 14px;\n\n --global-menu-width-closed: 80px;\n --global-menu-width-open: 280px;\n\n --button-font-size: 14px;\n --button-height: 32px;\n --button-h-padding: 8px;\n --button-lift-default-x: 0px;\n --button-lift-default-y: 2px;\n --button-lift-default-blur: 4px;\n --button-lift-default-spread: 2px;\n\n --button-icon-size: 14px;\n --button-icon-h-padding: 8px;\n\n --input-height: 40px;\n\n }\n\n .button-small {\n --button-font-size: 12px;\n --button-height: 24px;\n --button-h-padding: 4px;\n --button-icon-size: 12px;\n --button-icon-h-padding: 8px;\n }\n\n .button-large {\n --button-font-size: 16px;\n --button-height: 40px;\n --button-h-padding: 8px;\n --button-icon-size: 16px;\n --button-icon-h-padding: 8px;\n }\n\n .split-button-primary {\n --border-color: var(--primary-9);\n --border-active-color: var(--primary-11);\n --toggle-icon-border: var(--primary-9);\n --gradient-1: #72C3EE;\n --gradient-2: #5CACEE;\n --button-lift-default-color: rgba(221, 234, 248, 0.08);\n --text-color: var(--white-a12);\n --text-disabled-color: var(--white-a11);\n --button-hover-bg: var(--primary-a3);\n --button-active-bg: var(--primary-10);\n --toggle-icon-hover-bg: var(--white-a7);\n --toggle-icon-active-bg: var(--black-a6);\n --toggle-icon: var(--white-a12);\n --toggle-icon-active: var(--white-a11);\n --toggle-icon-disabled: var(--white-a10);\n }\n\n .split-button-secondary {\n --border-color: var(--grey-7);\n --border-active-color: var(--grey-7);\n --toggle-icon-border: var(--grey-6);\n --gradient-1: #2E3135;\n --gradient-2: #363A3F;\n --button-lift-default-color: rgba(221, 234, 248, 0.08);\n --text-color: var(--grey-12);\n --text-disabled-color: var(--grey-a11);\n --button-hover-bg: var(--grey-a6);\n --button-active-bg: var(--grey-a3);\n --toggle-icon-hover-bg: var(--grey-a6);\n --toggle-icon-active-bg: var(--grey-a3);\n --toggle-icon: var(--grey-12);\n --toggle-icon-active: var(--grey-a11);\n --toggle-icon-disabled: var(--grey-10);\n }\n\n .split-button-danger {\n --border-color: var(--warning-10);\n --border-active-color: var(--warning-10);\n --toggle-icon-border: var(--warning-9);\n --gradient-1: #D16565;\n --gradient-2: #E76F6F;\n --button-lift-default-color: rgba(255, 113, 113, 0.47);\n --text-color: var(--white-a12);\n --text-disabled-color: var(--white-a11);\n --button-hover-bg: var(--warning-a7);\n --button-active-bg: var(--warning-8);\n --toggle-icon-hover-bg: var(--warning-a7);\n --toggle-icon-active-bg: var(--warning-a5);\n --toggle-icon: var(--white-a12);\n --toggle-icon-active: var(--white-a11);\n --toggle-icon-disabled: var(--white-a10);\n }\n\n .split-button-custom {\n --border-color: var(--info-10);\n --border-active-color: var(--info-10);\n --toggle-icon-border: var(--info-9);\n --gradient-1: var(--info-10);\n --gradient-2: var(--info-9);\n --button-lift-default-color: var(--info-a3);\n --text-color: var(--white-a12);\n --text-disabled-color: var(--white-a11);\n --button-hover-bg: var(--info-a7);\n --button-active-bg: var(--info-8);\n --toggle-icon-hover-bg: var(--info-a7);\n --toggle-icon-active-bg: var(--info-a5);\n --toggle-icon: var(--white-a12);\n --toggle-icon-active: var(--white-a11);\n --toggle-icon-disabled: var(--white-a10);\n }\n\n"])), layoutVariables, animationVariables, colorVariables);
1577
+
1578
+ var _templateObject$4;
1579
+ var BaseStyles = styled.css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\n * , body{\n box-sizing: border-box;\n }\n body, html , #root {\n min-width: 100%;\n min-height: 100vh;\n margin: 0;\n }\n\n body {\n font-family: var(--font-ui);\n color: var(--grey-11);\n background: var(--main-background-gradient);\n background-attachment: fixed;\n }\n \n"])));
1709
1580
 
1710
- var _templateObject$4, _templateObject2, _templateObject3;
1711
- var wrapperCss = styled.css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n svg {\n overflow: visible;\n vector-effect: non-scaling-stroke;\n\n line, path, circle, ellipse, foreignObject, polygon, polyline, rect, text, textPath, tspan {\n vector-effect: non-scaling-stroke;\n }\n }\n"])));
1581
+ var _templateObject$5, _templateObject2, _templateObject3;
1582
+ var wrapperCss = styled.css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n svg {\n overflow: visible;\n vector-effect: non-scaling-stroke;\n\n line, path, circle, ellipse, foreignObject, polygon, polyline, rect, text, textPath, tspan {\n vector-effect: non-scaling-stroke;\n }\n }\n"])));
1712
1583
  var IconWrapper = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
1713
1584
  var IconWrapperForSVG = styled__default.g(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
1714
1585
 
@@ -1735,8 +1606,8 @@ var Icon = function Icon(_ref) {
1735
1606
  })) : null;
1736
1607
  };
1737
1608
 
1738
- var _templateObject$5, _templateObject2$1;
1739
- var Arrow = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 10px;\n height: 10px;\n border: 2px solid var(--grey-10);\n border-left: 0;\n border-bottom: 0;\n border-radius: 0 3px 0 0;\n\n &.t { top: 24px; }\n &.b { bottom: 24px; }\n &.l { left: 24px; }\n &.r { right: 24px; }\n"])));
1609
+ var _templateObject$6, _templateObject2$1;
1610
+ var Arrow = styled__default.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 10px;\n height: 10px;\n border: 2px solid var(--grey-10);\n border-left: 0;\n border-bottom: 0;\n border-radius: 0 3px 0 0;\n\n &.t { top: 24px; }\n &.b { bottom: 24px; }\n &.l { left: 24px; }\n &.r { right: 24px; }\n"])));
1740
1611
  var Container = styled__default.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n height: 100%;\n background: var(--grey-3);\n border: 12px solid var(--grey-6);\n box-sizing: border-box;\n flex: 1;\n justify-content: center;\n align-items: center;\n letter-spacing: 1.2px;\n color: var(--grey-10);\n"])));
1741
1612
  var FlexContentPlaceholder = function FlexContentPlaceholder(_ref) {
1742
1613
  var _ref$title = _ref.title,
@@ -1764,15 +1635,15 @@ var FlexContentPlaceholder = function FlexContentPlaceholder(_ref) {
1764
1635
  }));
1765
1636
  };
1766
1637
 
1767
- var _templateObject$6, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5;
1768
- var RowCss = styled.css(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n position:relative;\n display: flex;\n flex-direction: row;\n align-items:center;\n"])));
1638
+ var _templateObject$7, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5;
1639
+ var RowCss = styled.css(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n position:relative;\n display: flex;\n flex-direction: row;\n align-items:center;\n"])));
1769
1640
  var ColumnCss = styled.css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
1770
1641
  var resetButtonStyles = styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n background: transparent;\n border: none;\n cursor: pointer;\n outline: none;\n padding: 0;\n appearance: none;\n user-select: none;\n"])));
1771
1642
  var removeAutoFillStyle = styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active{\n transition: background-color 600000s 0s, color 600000s 0s;\n }\n"])));
1772
1643
  var EllipsisStyles = styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
1773
1644
 
1774
- var _templateObject$7, _templateObject2$3, _templateObject3$2, _templateObject4$1;
1775
- var IconButton = styled__default.button(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n ", ";\n ", "\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n opacity: .8;\n }\n &:active:enabled {\n opacity: .9;\n }\n &:disabled {\n opacity: 0.1;\n }\n"])), resetButtonStyles, function (_ref) {
1645
+ var _templateObject$8, _templateObject2$3, _templateObject3$2, _templateObject4$1;
1646
+ var IconButton = styled__default.button(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n ", ";\n ", "\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n opacity: .8;\n }\n &:active:enabled {\n opacity: .9;\n }\n &:disabled {\n opacity: 0.1;\n }\n"])), resetButtonStyles, function (_ref) {
1776
1647
  var _ref$selected = _ref.selected,
1777
1648
  selected = _ref$selected === void 0 ? false : _ref$selected;
1778
1649
  return selected && styled.css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
@@ -1819,8 +1690,8 @@ var AlertBar = function AlertBar(_ref3) {
1819
1690
  }))) : null;
1820
1691
  };
1821
1692
 
1822
- var _templateObject$8, _templateObject2$4, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
1823
- var initAnimation = styled.keyframes(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: translate(-50%, -100%);\n }\n 100% {\n transform: translate(-50%, 0%);\n }\n"])));
1693
+ var _templateObject$9, _templateObject2$4, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
1694
+ var initAnimation = styled.keyframes(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: translate(-50%, -100%);\n }\n 100% {\n transform: translate(-50%, 0%);\n }\n"])));
1824
1695
  var closeAnimation = styled.keyframes(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: translate(-50%, 0);\n }\n 100% {\n transform: translate(-50%, -100%);\n }\n"])));
1825
1696
  var Container$1 = styled__default.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n min-height: 50px;\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: 0 14px;\n width: 900px;\n position: fixed;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n z-index: 999;\n\n font-family: ", ";\n background-color: ", ";\n text-align: left;\n font-size: 14px;\n font-weight: 400;\n line-height: 15px;\n letter-spacing: -0.2px;\n text-decoration: none;\n color: var(--white-1);\n\n ", ";\n\n ", ";\n\n ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n }\n"])), fontFamily.ui, function (_ref) {
1826
1697
  var type = _ref.type;
@@ -1949,14 +1820,199 @@ var Notification = function Notification(_ref6) {
1949
1820
  }))), document.body) : null;
1950
1821
  };
1951
1822
 
1823
+ var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$3, _templateObject5$2;
1824
+ var ARROW_SIZE = 8;
1825
+ var ARROW_MARGIN = 16;
1826
+ var Arrow$1 = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n content:'';\n display:block;\n width:0;\n height:0;\n border-left: ", "px solid transparent;\n border-right: ", "px solid transparent;\n border-bottom: ", "px solid ", ";\n"])), ARROW_SIZE, ARROW_SIZE, ARROW_SIZE, function (_ref) {
1827
+ var type = _ref.type;
1828
+ return "var(--tooltip-" + type + "-arrow)";
1829
+ });
1830
+ var TooltipWrapper = styled__default.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: flex;\n ", ";\n ", ";\n"])), function (_ref2) {
1831
+ var maxWidth = _ref2.maxWidth;
1832
+ return maxWidth && styled.css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose([" max-width: ", ""])), maxWidth);
1833
+ }, function (_ref3) {
1834
+ var directionStyle = _ref3.directionStyle;
1835
+ return directionStyle && styled.css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["", ""])), directionStyle);
1836
+ });
1837
+ var MessageWrapper = styled__default.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n border-radius: 3px;\n border: 1px solid ", ";\n box-shadow: 0px 2px var(--input-focused-blur, 3px) 0px rgba(0, 16, 64, 0.06);\n backdrop-filter: blur(2px);\n display: flex;\n padding: 12px 16px;\n justify-content: center;\n align-items: center;\n gap: 16px;\n color: var(--white-a12);\n font-feature-settings: 'liga' off, 'clig' off;\n font-size: 13px;\n font-weight: 600;\n line-height: 16px;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref4) {
1838
+ var type = _ref4.type;
1839
+ return "var(--tooltip-" + type + ")";
1840
+ }, function (_ref5) {
1841
+ var type = _ref5.type;
1842
+ return "var(--tooltip-" + type + "-border)";
1843
+ }, IconWrapper);
1844
+
1845
+ var getDirectionStyle = function getDirectionStyle(state, coords) {
1846
+ var left = coords.left,
1847
+ top = coords.top,
1848
+ width = coords.width,
1849
+ height = coords.height;
1850
+ var currentTop = top + window.scrollY;
1851
+ var currentLeft = left + window.scrollX;
1852
+
1853
+ switch (state) {
1854
+ case 'bottom-right':
1855
+ return "\n flex-direction: column;\n top: " + (currentTop + height) + "px;\n left: " + (currentLeft - ARROW_SIZE - ARROW_MARGIN + width / 2) + "px;\n " + Arrow$1 + " {\n margin-left: " + ARROW_MARGIN + "px;\n }\n ";
1856
+
1857
+ case 'bottom-left':
1858
+ return "\n flex-direction: column;\n align-items: end;\n top: " + (currentTop + height) + "px;\n left: " + (currentLeft + ARROW_SIZE + ARROW_MARGIN + width / 2) + "px;\n transform: translateX(-100%);\n " + Arrow$1 + " {\n margin-right: " + ARROW_MARGIN + "px;\n }\n ";
1859
+
1860
+ case 'right-bottom':
1861
+ return "\n flex-direction: row;\n top: " + (currentTop - ARROW_SIZE / 2 - ARROW_MARGIN + height / 2) + "px;\n left: " + (currentLeft + width) + "px;\n " + Arrow$1 + " {\n transform: rotate(-90deg);\n margin-right: -" + ARROW_SIZE / 2 + "px;\n margin-top: " + ARROW_MARGIN + "px;\n }\n ";
1862
+
1863
+ case 'right':
1864
+ return "\n flex-direction: row;\n align-items: center;\n top: " + (currentTop + height / 2) + "px;\n left: " + (currentLeft + width) + "px;\n transform: translateY(-50%);\n " + Arrow$1 + " {\n transform: rotate(-90deg);\n margin-right: -" + ARROW_SIZE / 2 + "px;\n }\n ";
1865
+
1866
+ case 'right-top':
1867
+ return "\n flex-direction: row;\n align-items: end;\n top: " + (currentTop + ARROW_SIZE / 2 + ARROW_MARGIN + height / 2) + "px;\n left: " + (currentLeft + width) + "px;\n transform: translateY(-100%);\n " + Arrow$1 + " {\n transform: rotate(-90deg);\n margin-right: -" + ARROW_SIZE / 2 + "px;\n margin-bottom: " + ARROW_MARGIN + "px;\n }\n ";
1868
+
1869
+ case 'left-bottom':
1870
+ return "\n flex-direction: row-reverse;\n top: " + (currentTop - ARROW_SIZE / 2 - ARROW_MARGIN + height / 2) + "px;\n left: " + currentLeft + "px;\n transform: translateX(-100%);\n " + Arrow$1 + " {\n transform: rotate(90deg);\n margin-left: -" + ARROW_SIZE / 2 + "px;\n margin-top: " + ARROW_MARGIN + "px;\n }\n ";
1871
+
1872
+ case 'left':
1873
+ return "\n flex-direction: row-reverse;\n align-items: center;\n top: " + (currentTop + height / 2) + "px;\n left: " + currentLeft + "px;\n transform: translate(-100%, -50%);\n " + Arrow$1 + " {\n transform: rotate(90deg);\n margin-left: -" + ARROW_SIZE / 2 + "px;\n }\n ";
1874
+
1875
+ case 'left-top':
1876
+ return "\n flex-direction: row-reverse;\n align-items: end;\n top: " + (currentTop + ARROW_SIZE / 2 + ARROW_MARGIN + height / 2) + "px;\n left: " + currentLeft + "px;\n transform: translate(-100%, -100%);\n " + Arrow$1 + " {\n transform: rotate(90deg);\n margin-left: -" + ARROW_SIZE / 2 + "px;\n margin-bottom: " + ARROW_MARGIN + "px;\n }\n ";
1877
+
1878
+ case 'top-right':
1879
+ return "\n flex-direction: column-reverse;\n top: " + currentTop + "px;\n left: " + (currentLeft - ARROW_SIZE - ARROW_MARGIN + width / 2) + "px;\n transform: translateY(-100%);\n " + Arrow$1 + " {\n transform: rotate(180deg);\n margin-left: " + ARROW_MARGIN + "px;\n }\n ";
1880
+
1881
+ case 'top':
1882
+ return "\n flex-direction: column-reverse;\n align-items: center;\n top: " + currentTop + "px;\n left: " + (currentLeft + width / 2) + "px;\n transform: translate(-50%, -100%);\n " + Arrow$1 + " {\n transform: rotate(180deg);\n }\n ";
1883
+
1884
+ case 'top-left':
1885
+ return "\n flex-direction: column-reverse;\n align-items: end;\n top: " + currentTop + "px;\n left: " + (currentLeft + ARROW_SIZE + ARROW_MARGIN + width / 2) + "px;\n transform: translate(-100%, -100%);\n " + Arrow$1 + " {\n transform: rotate(180deg);\n margin-right: " + ARROW_MARGIN + "px;\n }\n ";
1886
+
1887
+ default:
1888
+ return "\n flex-direction: column;\n top: " + (currentTop + height) + "px;\n left: " + (currentLeft + width / 2) + "px;\n transform: translateX(-50%);\n align-items: center;\n ";
1889
+ }
1890
+ };
1891
+
1892
+ var getDynamicPosition = function getDynamicPosition(coords, width, height) {
1893
+ var isOverflowingRight = coords.left + (width || 0) + 30 > window.innerWidth;
1894
+ var isOverflowingBottom = coords.bottom + (height || 0) > window.innerHeight;
1895
+ var isOverflowingLeft = coords.left - (width || 0) < 0;
1896
+ var isOverflowingTop = coords.top - (height || 0) < 0;
1897
+
1898
+ if (isOverflowingTop && isOverflowingRight && isOverflowingBottom) {
1899
+ return 'left';
1900
+ }
1901
+
1902
+ if (isOverflowingTop && isOverflowingLeft && isOverflowingBottom) {
1903
+ return 'right';
1904
+ }
1905
+
1906
+ if (isOverflowingTop && isOverflowingLeft) {
1907
+ return 'bottom-right';
1908
+ }
1909
+
1910
+ if (isOverflowingTop && isOverflowingRight) {
1911
+ return 'bottom-left';
1912
+ }
1913
+
1914
+ if (isOverflowingBottom && isOverflowingLeft) {
1915
+ return 'top-right';
1916
+ }
1917
+
1918
+ if (isOverflowingBottom && isOverflowingRight) {
1919
+ return 'top-left';
1920
+ }
1921
+
1922
+ if (isOverflowingLeft) {
1923
+ return 'right';
1924
+ }
1925
+
1926
+ if (isOverflowingRight) {
1927
+ return 'left';
1928
+ }
1929
+
1930
+ if (isOverflowingBottom) {
1931
+ return 'top';
1932
+ }
1933
+
1934
+ return 'bottom';
1935
+ };
1936
+
1937
+ var Tooltip = function Tooltip(_ref6) {
1938
+ var icon = _ref6.icon,
1939
+ message = _ref6.message,
1940
+ type = _ref6.type,
1941
+ tooltipFor = _ref6.tooltipFor,
1942
+ tooltipPosition = _ref6.tooltipPosition,
1943
+ maxWidth = _ref6.maxWidth;
1944
+
1945
+ var _useState = React.useState(null),
1946
+ coords = _useState[0],
1947
+ setCoords = _useState[1];
1948
+
1949
+ var _useState2 = React.useState(false),
1950
+ visible = _useState2[0],
1951
+ setVisible = _useState2[1];
1952
+
1953
+ var _useState3 = React.useState('top'),
1954
+ dynamicPosition = _useState3[0],
1955
+ setDynamicPosition = _useState3[1];
1956
+
1957
+ var tooltipRef = React.useRef(null);
1958
+ var handleMouseOver = React.useCallback(function () {
1959
+ if (tooltipFor && tooltipFor.current) {
1960
+ var rect = tooltipFor.current.getBoundingClientRect();
1961
+ setCoords(rect);
1962
+ setVisible(true);
1963
+ setDynamicPosition(getDynamicPosition(rect, tooltipFor.current.offsetWidth, tooltipFor.current.offsetHeight));
1964
+ }
1965
+ }, [tooltipFor]);
1966
+ var handleMouseOut = React.useCallback(function () {
1967
+ setVisible(false);
1968
+ }, []);
1969
+ var updateCoords = React.useCallback(function () {
1970
+ if (tooltipFor && tooltipFor.current) {
1971
+ var rect = tooltipFor.current.getBoundingClientRect();
1972
+ setCoords(rect);
1973
+ }
1974
+ }, [tooltipFor]);
1975
+ React.useEffect(function () {
1976
+ var currentRef = null;
1977
+
1978
+ if (tooltipFor && tooltipFor.current) {
1979
+ currentRef = tooltipFor.current;
1980
+ tooltipFor.current.addEventListener('mouseover', handleMouseOver);
1981
+ tooltipFor.current.addEventListener('mouseout', handleMouseOut);
1982
+ updateCoords();
1983
+ }
1984
+
1985
+ return function () {
1986
+ if (currentRef) {
1987
+ currentRef.removeEventListener('mouseover', handleMouseOver);
1988
+ currentRef.removeEventListener('mouseout', handleMouseOut);
1989
+ }
1990
+ };
1991
+ }, [handleMouseOut, handleMouseOver, tooltipFor, updateCoords]);
1992
+ if (!visible || !coords) return null;
1993
+ return ReactDom.createPortal(React__default.createElement(TooltipWrapper, {
1994
+ ref: tooltipRef,
1995
+ maxWidth: maxWidth,
1996
+ directionStyle: getDirectionStyle(tooltipPosition || dynamicPosition, coords)
1997
+ }, React__default.createElement(Arrow$1, {
1998
+ type: type || 'neutral'
1999
+ }), React__default.createElement(MessageWrapper, {
2000
+ type: type || 'neutral'
2001
+ }, icon && React__default.createElement(Icon, {
2002
+ icon: icon,
2003
+ size: 16,
2004
+ color: 'white-a12'
2005
+ }), message)), document.body);
2006
+ };
2007
+
1952
2008
  var _excluded = ["design", "size", "children"];
1953
2009
 
1954
- var _templateObject$9, _templateObject2$5;
1955
- var StyledButton = styled__default.button(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n ", ";\n\n overflow: hidden;\n border: none;\n cursor: pointer;\n border-radius: 3px;\n outline: none;\n\n button + button {\n margin-left: 20px;\n }\n\n"])), function (_ref) {
2010
+ var _templateObject$b, _templateObject2$6;
2011
+ var StyledButton = styled__default.button(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n ", ";\n\n overflow: hidden;\n border: none;\n cursor: pointer;\n border-radius: 3px;\n outline: none;\n\n button + button {\n margin-left: 20px;\n }\n\n"])), function (_ref) {
1956
2012
  var theme = _ref.theme,
1957
2013
  design = _ref.design,
1958
2014
  size = _ref.size;
1959
- return styled.css(_templateObject2$5 || (_templateObject2$5 = _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);
2015
+ return styled.css(_templateObject2$6 || (_templateObject2$6 = _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);
1960
2016
  });
1961
2017
 
1962
2018
  var Button = function Button(_ref2) {
@@ -1977,16 +2033,16 @@ var Button = function Button(_ref2) {
1977
2033
 
1978
2034
  var _excluded$1 = ["design", "size", "onClick", "disabled", "position", "icon", "children"];
1979
2035
 
1980
- var _templateObject$a, _templateObject2$6, _templateObject3$4, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1;
1981
- var TextContainer = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n height: inherit;\n flex: 1;\n order: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n white-space: nowrap;\n\n ", "\n\n ", "\n"])), function (_ref) {
2036
+ var _templateObject$c, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7$1;
2037
+ var TextContainer = styled__default.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n height: inherit;\n flex: 1;\n order: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n white-space: nowrap;\n\n ", "\n\n ", "\n"])), function (_ref) {
1982
2038
  var position = _ref.position,
1983
2039
  size = _ref.size;
1984
- return position && position === 'left' ? styled.css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n padding-left: ", ";\n "])), size === 'xsmall' ? "10px" : "20px") : styled.css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n padding-right: ", ";\n "])), size === 'xsmall' ? "10px" : "20px");
2040
+ return position && position === 'left' ? styled.css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n padding-left: ", ";\n "])), size === 'xsmall' ? "10px" : "20px") : styled.css(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n padding-right: ", ";\n "])), size === 'xsmall' ? "10px" : "20px");
1985
2041
  }, function (_ref2) {
1986
2042
  var theme = _ref2.theme;
1987
- return theme && styled.css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n transition: padding ", " ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
2043
+ return theme && styled.css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n transition: padding ", " ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
1988
2044
  });
1989
- var IconContainer = styled__default.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n flex-shrink: 0;\n\n ", "\n\n svg {\n display:block;\n path, rect, circle, d {\n stroke: var(--white-1);\n }\n }\n"])), function (_ref3) {
2045
+ var IconContainer = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n flex-shrink: 0;\n\n ", "\n\n svg {\n display:block;\n path, rect, circle, d {\n stroke: var(--white-1);\n }\n }\n"])), function (_ref3) {
1990
2046
  var position = _ref3.position;
1991
2047
  return styled.css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n order: ", ";\n "])), position && position === 'left' ? 0 : 2);
1992
2048
  });
@@ -2023,7 +2079,7 @@ var ButtonWithIcon = function ButtonWithIcon(_ref4) {
2023
2079
  }))));
2024
2080
  };
2025
2081
 
2026
- var _templateObject$b, _templateObject2$7, _templateObject3$5, _templateObject4$4;
2082
+ var _templateObject$d, _templateObject2$8, _templateObject3$6, _templateObject4$5;
2027
2083
 
2028
2084
  var circumference = function circumference(radius) {
2029
2085
  return 2 * 3.1416 * radius;
@@ -2031,15 +2087,15 @@ var circumference = function circumference(radius) {
2031
2087
 
2032
2088
  var animation$1 = function animation(radius) {
2033
2089
  var c = circumference(radius);
2034
- return styled.keyframes(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n 0% {\n stroke-dashoffset: -", ";\n }\n 50% {\n stroke-dashoffset: -", ";\n }\n 100% {\n stroke-dashoffset: -", ";\n }\n "])), c * 0.85, c * 0.5, c * 0.85);
2090
+ return styled.keyframes(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n 0% {\n stroke-dashoffset: -", ";\n }\n 50% {\n stroke-dashoffset: -", ";\n }\n 100% {\n stroke-dashoffset: -", ";\n }\n "])), c * 0.85, c * 0.5, c * 0.85);
2035
2091
  };
2036
2092
 
2037
- var rotate = styled.keyframes(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
2038
- var BaseCircle = styled__default.circle(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n stroke: ", ";\n fill: none;\n"])), function (_ref) {
2093
+ var rotate = styled.keyframes(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
2094
+ var BaseCircle = styled__default.circle(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n stroke: ", ";\n fill: none;\n"])), function (_ref) {
2039
2095
  var styling = _ref.styling;
2040
2096
  return "var(--spinner-" + styling + ", --grey-a8)";
2041
2097
  });
2042
- var RotatingCircle = styled__default.circle(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n stroke: var(--white-1);\n fill: none;\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n animation:\n ", " 4s linear infinite,\n ", " 1s linear infinite;\n stroke-linecap: round;\n"])), function (_ref2) {
2098
+ var RotatingCircle = styled__default.circle(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n stroke: var(--white-1);\n fill: none;\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n animation:\n ", " 4s linear infinite,\n ", " 1s linear infinite;\n stroke-linecap: round;\n"])), function (_ref2) {
2043
2099
  var r = _ref2.r;
2044
2100
  return circumference(r);
2045
2101
  }, function (_ref3) {
@@ -2110,17 +2166,17 @@ var Spinner = function Spinner(_ref5) {
2110
2166
 
2111
2167
  var _excluded$2 = ["design", "size", "onClick", "disabled", "position", "loading", "children"];
2112
2168
 
2113
- var _templateObject$c, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11;
2114
- var LoadingButton = styled__default(Button)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
2169
+ var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11;
2170
+ var LoadingButton = styled__default(Button)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
2115
2171
  var $loading = _ref.$loading,
2116
2172
  theme = _ref.theme;
2117
- return $loading && styled.css(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n cursor: wait;\n background: ", ";\n padding: 0 20px;\n &:disabled {\n opacity: 1;\n }\n "])), theme.styles.form.button['primary'].active);
2173
+ return $loading && styled.css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n cursor: wait;\n background: ", ";\n padding: 0 20px;\n &:disabled {\n opacity: 1;\n }\n "])), theme.styles.form.button['primary'].active);
2118
2174
  });
2119
- var TextContainer$1 = styled__default.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n height: inherit;\n flex: 1;\n order: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n white-space: nowrap;\n ", "\n\n"])), function (_ref2) {
2175
+ var TextContainer$1 = styled__default.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n height: inherit;\n flex: 1;\n order: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n white-space: nowrap;\n ", "\n\n"])), function (_ref2) {
2120
2176
  var theme = _ref2.theme;
2121
- return theme && styled.css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n transition: padding ", " ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
2177
+ return theme && styled.css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n transition: padding ", " ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
2122
2178
  });
2123
- var LoadingContainer = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n height: inherit;\n flex: 0 0 36px;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n opacity: 0;\n\n ", "\n\n svg {\n display:block;\n }\n"])), function (_ref3) {
2179
+ var LoadingContainer = styled__default.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n height: inherit;\n flex: 0 0 36px;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n opacity: 0;\n\n ", "\n\n svg {\n display:block;\n }\n"])), function (_ref3) {
2124
2180
  var theme = _ref3.theme,
2125
2181
  position = _ref3.position;
2126
2182
  return styled.css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n transition:\n flex ", " ", " ", ",\n opacity ", " ", ";\n\n order: ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut, theme.animation.speed.slow, theme.animation.speed.slow, theme.animation.easing.primary.easeInOut, position && position === 'left' ? 0 : 2);
@@ -2172,8 +2228,8 @@ var ButtonWithLoading = function ButtonWithLoading(_ref6) {
2172
2228
 
2173
2229
  var _excluded$3 = ["icon", "size", "weight", "color", "hoverColor"];
2174
2230
 
2175
- var _templateObject$d;
2176
- var StyledButton$1 = styled__default.button(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n ", ";\n [stroke]{\n stroke: ", ";\n }\n &:hover {\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n"])), resetButtonStyles, function (_ref) {
2231
+ var _templateObject$f;
2232
+ var StyledButton$1 = styled__default.button(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n ", ";\n [stroke]{\n stroke: ", ";\n }\n &:hover {\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n"])), resetButtonStyles, function (_ref) {
2177
2233
  var color = _ref.color;
2178
2234
  return color;
2179
2235
  }, IconWrapper, function (_ref2) {
@@ -2204,17 +2260,17 @@ var IconButton$2 = function IconButton(_ref3) {
2204
2260
  }));
2205
2261
  };
2206
2262
 
2207
- var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4;
2208
- var StyledIconButton = styled__default(IconButton$2)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose([""])));
2209
- var Container$2 = styled__default.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n display: flex;\n ", " {\n margin-left: 15px;\n }\n ", ":first-child {\n margin-left: 0px;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n"])), StyledIconButton, StyledIconButton, function (_ref) {
2263
+ var _templateObject$g, _templateObject2$a, _templateObject3$8, _templateObject4$7, _templateObject5$5;
2264
+ var StyledIconButton = styled__default(IconButton$2)(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose([""])));
2265
+ var Container$2 = styled__default.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n display: flex;\n ", " {\n margin-left: 15px;\n }\n ", ":first-child {\n margin-left: 0px;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n"])), StyledIconButton, StyledIconButton, function (_ref) {
2210
2266
  var alignment = _ref.alignment;
2211
- return alignment === 'left' && styled.css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n justify-content: flex-start;\n "])));
2267
+ return alignment === 'left' && styled.css(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n justify-content: flex-start;\n "])));
2212
2268
  }, function (_ref2) {
2213
2269
  var alignment = _ref2.alignment;
2214
- return alignment === 'center' && styled.css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
2270
+ return alignment === 'center' && styled.css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
2215
2271
  }, function (_ref3) {
2216
2272
  var alignment = _ref3.alignment;
2217
- return alignment === 'right' && styled.css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n "])));
2273
+ return alignment === 'right' && styled.css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n "])));
2218
2274
  });
2219
2275
 
2220
2276
  var ActionButtons = function ActionButtons(_ref4) {
@@ -2244,16 +2300,16 @@ var ActionButtons = function ActionButtons(_ref4) {
2244
2300
 
2245
2301
  var _excluded$4 = ["type", "placeholder", "defaultValue", "fieldState", "feedbackMessage", "actionCallback", "actionIcon", "postfix"];
2246
2302
 
2247
- var _templateObject$f, _templateObject2$a, _templateObject3$8, _templateObject4$7, _templateObject5$5, _templateObject6$3, _templateObject7$3, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
2248
- var ActionContainer = styled__default.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 0;\n top: 0;\n"])));
2303
+ var _templateObject$h, _templateObject2$b, _templateObject3$9, _templateObject4$8, _templateObject5$6, _templateObject6$3, _templateObject7$3, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
2304
+ var ActionContainer = styled__default.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 0;\n top: 0;\n"])));
2249
2305
  var InputActionButton = styled__default.button.attrs({
2250
2306
  type: "button"
2251
- })(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n width: 40px;\n height: 40px;\n background: transparent;\n border: none;\n cursor: pointer;\n outline: none;\n"])));
2252
- var FeedbackContainer = styled__default.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n\n background-color: transparent;\n ", ";\n\n border-left: none;\n border-radius: 0 3px 3px 0;\n overflow: hidden;\n\n display:flex;\n justify-content:left;\n align-items:center;\n"])), function (_ref) {
2307
+ })(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n width: 40px;\n height: 40px;\n background: transparent;\n border: none;\n cursor: pointer;\n outline: none;\n"])));
2308
+ var FeedbackContainer = styled__default.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n\n background-color: transparent;\n ", ";\n\n border-left: none;\n border-radius: 0 3px 3px 0;\n overflow: hidden;\n\n display:flex;\n justify-content:left;\n align-items:center;\n"])), function (_ref) {
2253
2309
  var theme = _ref.theme;
2254
- return styled.css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n border: 1px solid ", ";\n "])), theme.styles.form.input["default"].normal.borderColor);
2310
+ return styled.css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n border: 1px solid ", ";\n "])), theme.styles.form.input["default"].normal.borderColor);
2255
2311
  });
2256
- var FeedbackMessage = styled__default.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n flex: 0 1 400px;\n padding: 0 10px 0 0;\n\n ", ";\n"])), function (_ref2) {
2312
+ var FeedbackMessage = styled__default.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n flex: 0 1 400px;\n padding: 0 10px 0 0;\n\n ", ";\n"])), function (_ref2) {
2257
2313
  var theme = _ref2.theme;
2258
2314
  return theme.typography.form.feedback.message;
2259
2315
  });
@@ -2366,15 +2422,15 @@ var Input = function Input(_ref13) {
2366
2422
 
2367
2423
  var _excluded$5 = ["htmlFor", "labelText", "rightAlign", "children"];
2368
2424
 
2369
- var _templateObject$g, _templateObject2$b;
2370
- var StyledLabel = styled__default.label(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-10);\n font-size: 14px;\n font-weight: 500;\n ", ";\n"])), function (_ref) {
2425
+ var _templateObject$i, _templateObject2$c;
2426
+ var StyledLabel = styled__default.label(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-11);\n font-size: 14px;\n font-weight: 500;\n ", ";\n"])), function (_ref) {
2371
2427
  var theme = _ref.theme;
2372
2428
  return theme.fontFamily.ui;
2373
2429
  }, function (_ref2) {
2374
2430
  var rightAlign = _ref2.rightAlign;
2375
2431
  return rightAlign ? "\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n justify-content: left;\n " : "\n display: block;\n margin-bottom: 20px;\n ";
2376
2432
  });
2377
- var LabelText = styled__default.span(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n display: block;\n ", "\n"])), function (_ref3) {
2433
+ var LabelText = styled__default.span(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n display: block;\n ", "\n"])), function (_ref3) {
2378
2434
  var rightAlign = _ref3.rightAlign;
2379
2435
  return rightAlign ? "\n margin-left: 12px;\n " : "\n margin-bottom: 10px;\n ";
2380
2436
  });
@@ -2397,81 +2453,49 @@ var Label = function Label(_ref4) {
2397
2453
 
2398
2454
  var _excluded$6 = ["unit", "label", "name", "type", "placeholder", "defaultValue", "fieldState", "className"];
2399
2455
 
2400
- var _templateObject$h, _templateObject2$c, _templateObject3$9, _templateObject4$8, _templateObject5$6, _templateObject6$4, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$3;
2401
- var StyledInput$1 = styled__default.input(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n\n height: 100%;\n width: 100%;\n border-radius: 3px;\n\n padding: 0 22px 0 10px;\n box-sizing: border-box;\n outline: none;\n\n ", ";\n\n ", "\n\n &:disabled {\n cursor: not-allowed;\n }\n"])), removeAutoFillStyle, function (_ref) {
2402
- var theme = _ref.theme,
2403
- fieldState = _ref.fieldState;
2404
- return styled.css(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n min-height: 30px;\n font-family: ", ";\n border: 1px solid ", ";\n "])), theme.fontFamily.data, theme.styles.form.input[fieldState].normal.borderColor);
2456
+ var _templateObject$j, _templateObject2$d, _templateObject3$a, _templateObject4$9, _templateObject5$7, _templateObject6$4;
2457
+ var StyledInput$1 = styled__default.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n ", ";\n\n font-family: var(--font-data);\n line-height: var(--common-height);\n\n font-size: 14px;\n flex: 1;\n color: var(--input-color-default);\n width: 100%;\n border: none;\n background-color: transparent;\n box-sizing: border-box;\n outline: none;\n \n &::placeholder {\n color: var(--input-color-placeholder);\n font-style: italic;\n }\n\n &:disabled {\n cursor: not-allowed;\n color: var(--input-color-disabled);\n }\n"])), removeAutoFillStyle);
2458
+ var InputContainer$1 = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n display: flex;\n height: var(--common-height);\n padding: 0 8px;\n align-items: center;\n gap: 8px;\n position: relative;\n border-radius: 3px;\n \n ", ";\n\n ", "\n\n"])), function (_ref) {
2459
+ var fieldState = _ref.fieldState;
2460
+ return styled.css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n border: 1px solid var(--input-border-", ");\n background: var(--input-background-", ");\n transition: \n border var(--speed-normal) var(--easing-primary-in),\n background var(--speed-normal) var(--easing-primary-in);\n "])), fieldState, fieldState);
2405
2461
  }, function (_ref2) {
2406
- var typography = _ref2.theme.typography;
2407
- return styled.css(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n ", ";\n &::placeholder {\n ", ";\n }\n "])), typography.form.input.value.compact, typography.form.input.placeholder.compact);
2408
- }, function (p) {
2409
- return p.padRight && styled.css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n padding-right: ", "px;\n "])), p.padRight + 17);
2410
- });
2411
- var InputContainer$1 = styled__default.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n\n flex: 1;\n position: relative;\n\n ", "\n\n"])), function (_ref3) {
2412
- var hasAction = _ref3.hasAction;
2413
- return hasAction && styled.css(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n ", "{\n padding-right: 200px;\n\n // Used to control password manager injection.\n background-position: calc(100% - 50px) 50% !important;\n }\n "])), StyledInput$1);
2414
- });
2415
- var UnitKey = styled__default.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 10px;\n bottom: 0;\n top:0;\n font-family: ", ";\n font-size: 12px;\n color: var(--grey-10);\n line-height:30px;\n"])), function (_ref4) {
2416
- var theme = _ref4.theme;
2417
- return theme.fontFamily.ui;
2418
- });
2419
- var Container$4 = styled__default.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n\n display: flex;\n position: relative;\n\n ", "{\n ", ";\n\n &:focus {}\n\n ", "\n }\n\n &:focus-within ", " {\n ", "\n\n"])), StyledInput$1, function (_ref5) {
2420
- var theme = _ref5.theme,
2421
- fieldState = _ref5.fieldState;
2422
- return theme.styles.form.input[fieldState].normal;
2423
- }, function (_ref6) {
2424
- var fieldState = _ref6.fieldState;
2425
- return ['default', 'disabled'].indexOf(fieldState) === -1 && styled.css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n "])));
2426
- }, InputContainer$1, function (_ref7) {
2427
- var theme = _ref7.theme,
2428
- fieldState = _ref7.fieldState;
2429
- return fieldState !== 'disabled' && styled.css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n border-color:", ";\n "])), theme.styles.form.input[fieldState].focused.borderColor);
2430
- });
2431
-
2432
- var SmallInput = function SmallInput(_ref8) {
2433
- var unit = _ref8.unit,
2434
- label = _ref8.label,
2435
- name = _ref8.name,
2436
- _ref8$type = _ref8.type,
2437
- type = _ref8$type === void 0 ? 'text' : _ref8$type,
2438
- _ref8$placeholder = _ref8.placeholder,
2439
- placeholder = _ref8$placeholder === void 0 ? '' : _ref8$placeholder,
2440
- defaultValue = _ref8.defaultValue,
2441
- _ref8$fieldState = _ref8.fieldState,
2442
- fieldState = _ref8$fieldState === void 0 ? 'default' : _ref8$fieldState,
2443
- className = _ref8.className,
2444
- props = _objectWithoutPropertiesLoose(_ref8, _excluded$6);
2462
+ var hasAction = _ref2.hasAction;
2463
+ return hasAction && styled.css(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n ", "{\n padding-right: 200px;\n\n // Used to control password manager injection.\n background-position: calc(100% - 50px) 50% !important;\n }\n "])), StyledInput$1);
2464
+ });
2465
+ var UnitKey = styled__default.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n flex: 0 1;\n font-size: 12px;\n font-family: var(--font-ui);\n line-height: var(--common-height);\n color: var(--input-color-unit);\n"])));
2466
+ var Container$4 = styled__default.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n position: relative;\n\n &:focus-within ", " {\n transition: boxShadow var(--speed-fast) var(--easing-primary-in-out);\n box-shadow: 0 3px 3px var(--input-focused-shadow-color);\n }\n"])), InputContainer$1);
2467
+
2468
+ var SmallInput = function SmallInput(_ref3) {
2469
+ var unit = _ref3.unit,
2470
+ label = _ref3.label,
2471
+ name = _ref3.name,
2472
+ _ref3$type = _ref3.type,
2473
+ type = _ref3$type === void 0 ? 'text' : _ref3$type,
2474
+ _ref3$placeholder = _ref3.placeholder,
2475
+ placeholder = _ref3$placeholder === void 0 ? '' : _ref3$placeholder,
2476
+ defaultValue = _ref3.defaultValue,
2477
+ _ref3$fieldState = _ref3.fieldState,
2478
+ fieldState = _ref3$fieldState === void 0 ? 'default' : _ref3$fieldState,
2479
+ className = _ref3.className,
2480
+ props = _objectWithoutPropertiesLoose(_ref3, _excluded$6);
2445
2481
 
2446
- var unitElement = React.useRef(null);
2447
-
2448
- var _useState = React.useState(0),
2449
- unitElementWidth = _useState[0],
2450
- setUnitElementWidth = _useState[1];
2451
-
2452
- React.useEffect(function () {
2453
- if (unitElement && unitElement.current) {
2454
- setUnitElementWidth(unitElement.current.clientWidth || 0);
2455
- }
2456
- }, [unitElement, setUnitElementWidth, unit]);
2457
2482
  return React__default.createElement(Container$4, {
2458
2483
  className: className,
2459
2484
  fieldState: fieldState || 'default'
2460
2485
  }, React__default.createElement(Label, {
2461
2486
  labelText: label,
2462
2487
  htmlFor: name || ''
2463
- }, React__default.createElement(InputContainer$1, null, React__default.createElement(StyledInput$1, Object.assign({
2464
- padRight: unitElementWidth,
2488
+ }, React__default.createElement(InputContainer$1, {
2489
+ fieldState: fieldState || 'default'
2490
+ }, React__default.createElement(StyledInput$1, Object.assign({
2465
2491
  fieldState: fieldState || 'default',
2466
2492
  type: type,
2467
2493
  placeholder: placeholder,
2468
2494
  defaultValue: defaultValue
2469
- }, props)), unit ? React__default.createElement(UnitKey, {
2470
- ref: unitElement
2471
- }, unit) : null)));
2495
+ }, props)), unit ? React__default.createElement(UnitKey, null, unit) : null)));
2472
2496
  };
2473
2497
 
2474
- var _templateObject$i, _templateObject2$d, _templateObject3$a, _templateObject4$9, _templateObject5$7, _templateObject6$5, _templateObject7$5, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$2;
2498
+ var _templateObject$k, _templateObject2$e, _templateObject3$b, _templateObject4$a, _templateObject5$8, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$3, _templateObject11$2;
2475
2499
  var SwitchPosition;
2476
2500
 
2477
2501
  (function (SwitchPosition) {
@@ -2487,8 +2511,8 @@ var intentPosition = function intentPosition(left, checked) {
2487
2511
  return intentLeft + "px";
2488
2512
  };
2489
2513
 
2490
- var RealInput = styled__default.input(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
2491
- var SwitchOuter = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n"])));
2514
+ var RealInput = styled__default.input(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
2515
+ var SwitchOuter = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n"])));
2492
2516
 
2493
2517
  var getPositionKey = function getPositionKey(switchPos) {
2494
2518
  switch (switchPos) {
@@ -2509,8 +2533,8 @@ var getPositionKey = function getPositionKey(switchPos) {
2509
2533
  }
2510
2534
  };
2511
2535
 
2512
- var SwitchInner = styled__default.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n position: absolute;\n box-sizing: border-box;\n"])));
2513
- var LabelText$1 = styled__default.span(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n\n flex: 1;\n margin-left: 10px;\n display: block;\n\n line-height: ", ";\n\n ", ";\n"])), function (_ref) {
2536
+ var SwitchInner = styled__default.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n box-sizing: border-box;\n"])));
2537
+ var LabelText$1 = styled__default.span(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n\n flex: 1;\n margin-left: 10px;\n display: block;\n\n line-height: ", ";\n\n ", ";\n"])), function (_ref) {
2514
2538
  var theme = _ref.theme;
2515
2539
  return theme.fontFamily.ui;
2516
2540
  }, function (p) {
@@ -2518,18 +2542,18 @@ var LabelText$1 = styled__default.span(_templateObject4$9 || (_templateObject4$9
2518
2542
  }, function (p) {
2519
2543
  return p.theme.typography.form.input.label;
2520
2544
  });
2521
- var IconWrapper$1 = styled__default.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: inherit;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n display: block;\n }\n"])));
2545
+ var IconWrapper$1 = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: inherit;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n display: block;\n }\n"])));
2522
2546
  var SpinnerWrapper = styled__default.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n margin-top: 1px;\n"])));
2523
- var Container$5 = styled__default.label(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n ", "{\n ", "\n\n ", "\n\n ", "\n }\n\n ", "{\n ", "\n }\n\n &:hover {\n ", "{\n left: ", ";\n }\n }\n"])), SwitchInner, function (_ref2) {
2547
+ var Container$5 = styled__default.label(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n ", "{\n ", "\n\n ", "\n\n ", "\n }\n\n ", "{\n ", "\n }\n\n &:hover {\n ", "{\n left: ", ";\n }\n }\n"])), SwitchInner, function (_ref2) {
2524
2548
  var theme = _ref2.theme,
2525
2549
  position = _ref2.position,
2526
2550
  themeState = _ref2.themeState,
2527
2551
  activeTheming = _ref2.activeTheming;
2528
- return theme && styled.css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n ", ";\n left: ", ";\n top: ", ";\n transition:\n left ", " ", ",\n border ", " ", ",\n width ", " ", ";\n\n ", "\n "])), theme.dimensions.form["switch"].inner, theme.dimensions.form["switch"].positions[getPositionKey(position)], theme.dimensions.form["switch"].positions.top, theme.animation.speed.normal, theme.animation.easing.primary.out, theme.animation.speed.normal, theme.animation.easing.primary.out, theme.animation.speed.normal, theme.animation.easing.primary.out, theme.styles.form["switch"][activeTheming][themeState].inner);
2552
+ return theme && styled.css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n ", ";\n left: ", ";\n top: ", ";\n transition:\n left ", " ", ",\n border ", " ", ",\n width ", " ", ";\n\n ", "\n "])), theme.dimensions.form["switch"].inner, theme.dimensions.form["switch"].positions[getPositionKey(position)], theme.dimensions.form["switch"].positions.top, theme.animation.speed.normal, theme.animation.easing.primary.out, theme.animation.speed.normal, theme.animation.easing.primary.out, theme.animation.speed.normal, theme.animation.easing.primary.out, theme.styles.form["switch"][activeTheming][themeState].inner);
2529
2553
  }, function (p) {
2530
- return p.activeTheming === 'locked' && styled.css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n width: calc(100% - ", "px);\n "])), parseInt(p.theme.dimensions.form["switch"].positions.locked) * 2);
2554
+ return p.activeTheming === 'locked' && styled.css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n width: calc(100% - ", "px);\n "])), parseInt(p.theme.dimensions.form["switch"].positions.locked) * 2);
2531
2555
  }, function (p) {
2532
- return p.$loading && styled.css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n background: transparent;\n top: 1px;\n "])));
2556
+ return p.$loading && styled.css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n background: transparent;\n top: 1px;\n "])));
2533
2557
  }, SwitchOuter, function (_ref3) {
2534
2558
  var theme = _ref3.theme,
2535
2559
  activeTheming = _ref3.activeTheming,
@@ -2769,7 +2793,7 @@ function SvgNoImage() {
2769
2793
  }));
2770
2794
  }
2771
2795
 
2772
- var _templateObject$j, _templateObject2$e, _templateObject3$b, _templateObject4$a, _templateObject5$8, _templateObject6$6, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$3, _templateObject12$1, _templateObject13$1;
2796
+ var _templateObject$l, _templateObject2$f, _templateObject3$c, _templateObject4$b, _templateObject5$9, _templateObject6$6, _templateObject7$5, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$3, _templateObject12$1, _templateObject13$1;
2773
2797
  var CheckboxState;
2774
2798
 
2775
2799
  (function (CheckboxState) {
@@ -2778,21 +2802,21 @@ var CheckboxState;
2778
2802
  CheckboxState["Indeterminate"] = "indeterminate";
2779
2803
  })(CheckboxState || (CheckboxState = {}));
2780
2804
 
2781
- var RealInput$1 = styled__default.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
2782
- var CheckboxOuter = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n\n box-sizing: border-box;\n position: relative;\n width: 18px;\n height: 18px;\n border-radius: 5px;\n border-width: 2px;\n border-style: solid;\n"])));
2783
- var CheckboxInner = styled__default.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n box-sizing: border-box;\n"])));
2784
- var IconWrapper$2 = styled__default.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n display: block;\n [stroke]{\n stroke: transparent;\n }\n [fill] {\n fill: ", ";\n }\n }\n"])), function (_ref) {
2805
+ var RealInput$1 = styled__default.input(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
2806
+ var CheckboxOuter = styled__default.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n\n box-sizing: border-box;\n position: relative;\n width: 18px;\n height: 18px;\n border-radius: 5px;\n border-width: 2px;\n border-style: solid;\n"])));
2807
+ var CheckboxInner = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n box-sizing: border-box;\n"])));
2808
+ var IconWrapper$2 = styled__default.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n display: block;\n [stroke]{\n stroke: transparent;\n }\n [fill] {\n fill: ", ";\n }\n }\n"])), function (_ref) {
2785
2809
  var color = _ref.color;
2786
2810
  return "var(--" + color + ")";
2787
2811
  });
2788
- var Container$6 = styled__default.label(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n user-select: none;\n\n\n ", "\n\n ", "\n\n ", "\n\n"])), function (_ref2) {
2812
+ var Container$6 = styled__default.label(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n user-select: none;\n\n\n ", "\n\n ", "\n\n ", "\n\n"])), function (_ref2) {
2789
2813
  var visualState = _ref2.visualState,
2790
2814
  disabled = _ref2.disabled;
2791
- return visualState === CheckboxState.Off && styled.css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n ", "{\n border-color: var(--grey-9);\n border: var(--grey-9) 2px solid;\n }\n\n ", ";\n\n ", "\n "])), CheckboxOuter, !disabled && styled.css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n &:hover ", " {\n border-color: var(--primary-8);\n border: var(--primary-8) 2px solid;\n }"])), CheckboxOuter), disabled && styled.css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n ", "{\n background-color: var(--grey-1);\n border-color: var(--grey-6);\n border: var(--grey-6) 2px solid;\n cursor: not-allowed;\n }\n "])), CheckboxOuter));
2815
+ return visualState === CheckboxState.Off && styled.css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n ", "{\n border-color: var(--grey-9);\n border: var(--grey-9) 2px solid;\n }\n\n ", ";\n\n ", "\n "])), CheckboxOuter, !disabled && styled.css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n &:hover ", " {\n border-color: var(--primary-8);\n border: var(--primary-8) 2px solid;\n }"])), CheckboxOuter), disabled && styled.css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n ", "{\n background-color: var(--grey-1);\n border-color: var(--grey-6);\n border: var(--grey-6) 2px solid;\n cursor: not-allowed;\n }\n "])), CheckboxOuter));
2792
2816
  }, function (_ref3) {
2793
2817
  var visualState = _ref3.visualState,
2794
2818
  disabled = _ref3.disabled;
2795
- return visualState === CheckboxState.On && styled.css(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n ", "{\n box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n background-color: var(--primary-8);\n border: none;\n }\n ", ";\n\n ", "\n "])), CheckboxOuter, !disabled && styled.css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n &:hover ", "{\n box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n background-color: var(--primary-8);\n border: none;\n }"])), CheckboxOuter), disabled && styled.css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n ", "{\n box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n background-color: var(--grey-6);\n cursor: not-allowed;\n }\n "])), CheckboxOuter));
2819
+ return visualState === CheckboxState.On && styled.css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n ", "{\n box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n background-color: var(--primary-8);\n border: none;\n }\n ", ";\n\n ", "\n "])), CheckboxOuter, !disabled && styled.css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n &:hover ", "{\n box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n background-color: var(--primary-8);\n border: none;\n }"])), CheckboxOuter), disabled && styled.css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n ", "{\n box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n background-color: var(--grey-6);\n cursor: not-allowed;\n }\n "])), CheckboxOuter));
2796
2820
  }, function (_ref4) {
2797
2821
  var visualState = _ref4.visualState,
2798
2822
  disabled = _ref4.disabled;
@@ -2854,16 +2878,16 @@ var Checkbox = function Checkbox(_ref5) {
2854
2878
  })), " ");
2855
2879
  };
2856
2880
 
2857
- var _templateObject$k, _templateObject2$f, _templateObject3$c, _templateObject4$b, _templateObject5$9, _templateObject6$7, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$6;
2858
- var InnerRadio = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
2859
- var OuterRadio = styled__default.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n border-radius: 50%;\n border-width: 2px;\n border-style: solid;\n user-select: none;\n\n ", ";\n"])), function (_ref) {
2881
+ var _templateObject$m, _templateObject2$g, _templateObject3$d, _templateObject4$c, _templateObject5$a, _templateObject6$7, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$5;
2882
+ var InnerRadio = styled__default.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
2883
+ var OuterRadio = styled__default.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n border-radius: 50%;\n border-width: 2px;\n border-style: solid;\n user-select: none;\n\n ", ";\n"])), function (_ref) {
2860
2884
  var styles = _ref.theme.styles,
2861
2885
  isChecked = _ref.isChecked,
2862
2886
  disabled = _ref.disabled;
2863
- return styles && styled.css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n border-color: ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n "])), styles.form.checkbox.unchecked["default"].borderColor, !disabled && styled.css(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: ", ";\n }\n "])), styles.form.checkbox.unchecked.hover.borderColor), isChecked && !disabled && styled.css(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n "])), styles.form.checkbox.checked["default"].backgroundColor, InnerRadio, styles.form.checkbox.checked["default"].backgroundColor), isChecked && !disabled && styled.css(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n }\n "])), styles.form.checkbox.checked.hover.backgroundColor, InnerRadio, styles.form.checkbox.checked.hover.backgroundColor), isChecked && disabled && styled.css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n "])), styles.form.checkbox.checked.disabled.backgroundColor, InnerRadio, styles.form.checkbox.checked.disabled.backgroundColor), !isChecked && disabled && styled.css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n "])), styles.form.checkbox.unchecked.disabled.borderColor, InnerRadio, styles.form.checkbox.unchecked.disabled.backgroundColor));
2887
+ return styles && styled.css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n border-color: ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n "])), styles.form.checkbox.unchecked["default"].borderColor, !disabled && styled.css(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: ", ";\n }\n "])), styles.form.checkbox.unchecked.hover.borderColor), isChecked && !disabled && styled.css(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n "])), styles.form.checkbox.checked["default"].backgroundColor, InnerRadio, styles.form.checkbox.checked["default"].backgroundColor), isChecked && !disabled && styled.css(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n }\n "])), styles.form.checkbox.checked.hover.backgroundColor, InnerRadio, styles.form.checkbox.checked.hover.backgroundColor), isChecked && disabled && styled.css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n "])), styles.form.checkbox.checked.disabled.backgroundColor, InnerRadio, styles.form.checkbox.checked.disabled.backgroundColor), !isChecked && disabled && styled.css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n "])), styles.form.checkbox.unchecked.disabled.borderColor, InnerRadio, styles.form.checkbox.unchecked.disabled.backgroundColor));
2864
2888
  });
2865
- var HiddenInput = styled__default.input(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n padding:0;\n opacity: 0;\n"])));
2866
- var Container$7 = styled__default.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n width: 18px;\n height: 18px;\n user-select: none;\n border-radius: 50%;\n"])));
2889
+ var HiddenInput = styled__default.input(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n padding:0;\n opacity: 0;\n"])));
2890
+ var Container$7 = styled__default.div(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n width: 18px;\n height: 18px;\n user-select: none;\n border-radius: 50%;\n"])));
2867
2891
 
2868
2892
  var RadioButton = function RadioButton(_ref2) {
2869
2893
  var id = _ref2.id,
@@ -2899,31 +2923,31 @@ var RadioButton = function RadioButton(_ref2) {
2899
2923
 
2900
2924
  var _excluded$7 = ["placeholder", "fieldState", "feedbackMessage", "children"];
2901
2925
 
2902
- var _templateObject$l, _templateObject2$g, _templateObject3$d, _templateObject4$c, _templateObject5$a, _templateObject6$8, _templateObject7$8, _templateObject8$7, _templateObject9$7, _templateObject10$7;
2903
- var FeedbackIcon$1 = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n flex: 0 0 40px;\n width: 40px;\n display: flex;\n justify-content:center;\n align-items:center;\n padding-top: 2px;\n"])));
2904
- var StyledTextArea = styled__default.textarea(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n\n", ";\n\n padding: 8px 15px;\n box-sizing: border-box;\n outline: none;\n height: 100%;\n width: 100%;\n border-radius: 3px;\n\n ", ";\n"])), function (_ref) {
2926
+ var _templateObject$n, _templateObject2$h, _templateObject3$e, _templateObject4$d, _templateObject5$b, _templateObject6$8, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$6;
2927
+ var FeedbackIcon$1 = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n flex: 0 0 40px;\n width: 40px;\n display: flex;\n justify-content:center;\n align-items:center;\n padding-top: 2px;\n"])));
2928
+ var StyledTextArea = styled__default.textarea(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n\n", ";\n\n padding: 8px 15px;\n box-sizing: border-box;\n outline: none;\n height: 100%;\n width: 100%;\n border-radius: 3px;\n\n ", ";\n"])), function (_ref) {
2905
2929
  var theme = _ref.theme,
2906
2930
  fieldState = _ref.fieldState;
2907
- return styled.css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n border: 1px solid ", ";\n"])), theme.fontFamily.data, theme.styles.form.input[fieldState].normal.borderColor);
2931
+ return styled.css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n border: 1px solid ", ";\n"])), theme.fontFamily.data, theme.styles.form.input[fieldState].normal.borderColor);
2908
2932
  }, function (_ref2) {
2909
2933
  var typography = _ref2.theme.typography;
2910
- return styled.css(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n ", ";\n &::placeholder {\n ", ";\n }\n"])), typography.form.input.value.normal, typography.form.input.placeholder.normal);
2934
+ return styled.css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n ", ";\n &::placeholder {\n ", ";\n }\n"])), typography.form.input.value.normal, typography.form.input.placeholder.normal);
2911
2935
  });
2912
- var FeedbackContainer$1 = styled__default.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n padding: 8px 0;\n background-color: transparent;\n ", ";\n\n border-left: none;\n border-radius: 0 0 3px 3px;\n overflow: hidden;\n\n display:flex;\n justify-content:left;\n align-items:center;\n"])), function (_ref3) {
2936
+ var FeedbackContainer$1 = styled__default.div(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n padding: 8px 0;\n background-color: transparent;\n ", ";\n\n border-left: none;\n border-radius: 0 0 3px 3px;\n overflow: hidden;\n\n display:flex;\n justify-content:left;\n align-items:center;\n"])), function (_ref3) {
2913
2937
  var theme = _ref3.theme;
2914
2938
  return styled.css(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n border: 1px solid ", ";\n "])), theme.styles.form.input["default"].normal.borderColor);
2915
2939
  });
2916
- var FeedbackMessage$1 = styled__default.div(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n flex: 0 1 400px;\n padding: 0 10px 0 0;\n ", ";\n"])), function (_ref4) {
2940
+ var FeedbackMessage$1 = styled__default.div(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n flex: 0 1 400px;\n padding: 0 10px 0 0;\n ", ";\n"])), function (_ref4) {
2917
2941
  var theme = _ref4.theme;
2918
2942
  return theme.typography.form.feedback.message;
2919
2943
  });
2920
- var Container$8 = styled__default.div(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex-direction: column;\n ", "{\n ", ";\n\n &:focus {\n box-shadow: 0px 3px 7px 0px var(--primary-a3);\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", "\n }\n\n ", " {\n background: ", ";\n border-color: ", ";\n\n ", "\n }\n\n &:focus-within ", " {\n ", ";\n\n ", ";\n\n ", ";\n }\n\n"])), StyledTextArea, function (_ref5) {
2944
+ var Container$8 = styled__default.div(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex-direction: column;\n ", "{\n ", ";\n\n &:focus {\n box-shadow: 0px 3px 7px 0px var(--primary-a3);\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", "\n }\n\n ", " {\n background: ", ";\n border-color: ", ";\n\n ", "\n }\n\n &:focus-within ", " {\n ", ";\n\n ", ";\n\n ", ";\n }\n\n"])), StyledTextArea, function (_ref5) {
2921
2945
  var theme = _ref5.theme,
2922
2946
  fieldState = _ref5.fieldState;
2923
2947
  return theme.styles.form.input[fieldState].normal;
2924
2948
  }, function (_ref6) {
2925
2949
  var fieldState = _ref6.fieldState;
2926
- return ['default', 'disabled'].indexOf(fieldState) === -1 && styled.css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "])));
2950
+ return ['default', 'disabled'].indexOf(fieldState) === -1 && styled.css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "])));
2927
2951
  }, FeedbackContainer$1, function (_ref7) {
2928
2952
  var theme = _ref7.theme,
2929
2953
  fieldState = _ref7.fieldState;
@@ -2934,7 +2958,7 @@ var Container$8 = styled__default.div(_templateObject8$7 || (_templateObject8$7
2934
2958
  return theme.styles.form.input[fieldState].normal.borderColor;
2935
2959
  }, function (_ref9) {
2936
2960
  var fieldState = _ref9.fieldState;
2937
- return ['default', 'disabled'].indexOf(fieldState) !== -1 && styled.css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n display:none;\n "])));
2961
+ return ['default', 'disabled'].indexOf(fieldState) !== -1 && styled.css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n display:none;\n "])));
2938
2962
  }, FeedbackContainer$1, function (_ref10) {
2939
2963
  var fieldState = _ref10.fieldState;
2940
2964
  return fieldState === 'required' ? "\n box-shadow: 0px 3px 7px 0px var(--primary-a3);\n " : null;
@@ -3003,32 +3027,32 @@ var TextArea = function TextArea(_ref13) {
3003
3027
 
3004
3028
  var _excluded$8 = ["placeholder", "label", "isCompact", "defaultValue", "changeCallback", "children"];
3005
3029
 
3006
- var _templateObject$m, _templateObject2$h, _templateObject3$e, _templateObject4$d, _templateObject5$b, _templateObject6$9, _templateObject7$9, _templateObject8$8, _templateObject9$8, _templateObject10$8, _templateObject11$4, _templateObject12$2, _templateObject13$2;
3007
- var SelectWrapper = styled__default.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n width: 100%;\n\n ", " {\n position: absolute;\n top: calc(50% - 7px);\n right: 10px;\n pointer-events: none;\n }\n"])), IconWrapper);
3008
- var StyledSelect = styled__default.select(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n outline: none;\n border-radius: 3px;\n height: 40px;\n padding: 0 25px 0 15px;\n appearance: none;\n line-height: 1.56;\n width: 100%;\n cursor: pointer;\n ", "\n\n &:disabled {\n ", "\n cursor: not-allowed;\n }\n\n &::-ms-expand {\n display: none;\n }\n"])), function (_ref) {
3030
+ var _templateObject$o, _templateObject2$i, _templateObject3$f, _templateObject4$e, _templateObject5$c, _templateObject6$9, _templateObject7$8, _templateObject8$7, _templateObject9$7, _templateObject10$7, _templateObject11$4, _templateObject12$2, _templateObject13$2;
3031
+ var SelectWrapper = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n width: 100%;\n\n ", " {\n position: absolute;\n top: calc(50% - 7px);\n right: 10px;\n pointer-events: none;\n }\n"])), IconWrapper);
3032
+ var StyledSelect = styled__default.select(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n outline: none;\n border-radius: 3px;\n height: 40px;\n padding: 0 25px 0 15px;\n appearance: none;\n line-height: 1.56;\n width: 100%;\n cursor: pointer;\n ", "\n\n &:disabled {\n ", "\n cursor: not-allowed;\n }\n\n &::-ms-expand {\n display: none;\n }\n"])), function (_ref) {
3009
3033
  var styles = _ref.theme.styles;
3010
- return styled.css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input["default"].normal);
3034
+ return styled.css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input["default"].normal);
3011
3035
  }, function (_ref2) {
3012
3036
  var styles = _ref2.theme.styles;
3013
- return styled.css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input.disabled.normal);
3037
+ return styled.css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input.disabled.normal);
3014
3038
  });
3015
- var Container$9 = styled__default.div(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n\n", "\n\n", ";\n\n ", " {\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n option {\n font-style: normal;\n ", ";\n\n ", ";\n }\n font-weight: 400;\n }\n"])), function (_ref3) {
3039
+ var Container$9 = styled__default.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n\n", "\n\n", ";\n\n ", " {\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n option {\n font-style: normal;\n ", ";\n\n ", ";\n }\n font-weight: 400;\n }\n"])), function (_ref3) {
3016
3040
  var isCompact = _ref3.isCompact;
3017
3041
  return isCompact && styled.css(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n ", " {\n span {\n margin-bottom: 6px;\n }\n }\n "])), StyledLabel);
3018
3042
  }, function (_ref4) {
3019
3043
  var isLabelSameRow = _ref4.isLabelSameRow;
3020
- return isLabelSameRow && styled.css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n ", " {\n display: flex;\n align-items: center;\n span {\n margin: 0 10px 0 0;\n }\n }\n"])), StyledLabel);
3044
+ return isLabelSameRow && styled.css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n ", " {\n display: flex;\n align-items: center;\n span {\n margin: 0 10px 0 0;\n }\n }\n"])), StyledLabel);
3021
3045
  }, StyledSelect, function (_ref5) {
3022
3046
  var theme = _ref5.theme;
3023
- return styled.css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n border: 1px solid ", ";\n font-family: ", ";\n ", ";\n "])), theme.styles.form.input["default"].normal.borderColor, theme.fontFamily.data, theme.typography.form.input.value.normal);
3047
+ return styled.css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n border: 1px solid ", ";\n font-family: ", ";\n ", ";\n "])), theme.styles.form.input["default"].normal.borderColor, theme.fontFamily.data, theme.typography.form.input.value.normal);
3024
3048
  }, function (_ref6) {
3025
3049
  var typography = _ref6.theme.typography,
3026
3050
  isCompact = _ref6.isCompact;
3027
- return isCompact && styled.css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n height: 30px;\n padding: 0 25px 0 10px;\n ", ";\n "])), typography.form.input.value.compact);
3051
+ return isCompact && styled.css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n height: 30px;\n padding: 0 25px 0 10px;\n ", ";\n "])), typography.form.input.value.compact);
3028
3052
  }, function (_ref7) {
3029
3053
  var theme = _ref7.theme,
3030
3054
  activePlaceholder = _ref7.activePlaceholder;
3031
- return activePlaceholder && styled.css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.form.input.placeholder.normal);
3055
+ return activePlaceholder && styled.css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.form.input.placeholder.normal);
3032
3056
  }, function (_ref8) {
3033
3057
  var theme = _ref8.theme,
3034
3058
  isCompact = _ref8.isCompact,
@@ -3167,21 +3191,21 @@ var isNotNumber = function isNotNumber(value) {
3167
3191
 
3168
3192
  var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
3169
3193
 
3170
- var _templateObject$n, _templateObject2$i, _templateObject3$f, _templateObject4$e, _templateObject5$c, _templateObject6$a, _templateObject7$a, _templateObject8$9, _templateObject9$9, _templateObject10$9, _templateObject11$5, _templateObject12$3;
3194
+ var _templateObject$p, _templateObject2$j, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$a, _templateObject7$9, _templateObject8$8, _templateObject9$8, _templateObject10$8, _templateObject11$5, _templateObject12$3;
3171
3195
  var ThumbDiameter = 16;
3172
- var SliderWrapper = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n position: relative;\n height: 30px;\n margin-top: 20px;\n ", ";\n"])), function (_ref) {
3196
+ var SliderWrapper = styled__default.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n position: relative;\n height: 30px;\n margin-top: 20px;\n ", ";\n"])), function (_ref) {
3173
3197
  var theme = _ref.theme;
3174
3198
  return theme.fontFamily.data;
3175
3199
  }, function (_ref2) {
3176
3200
  var disabled = _ref2.disabled;
3177
- return disabled && styled.css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n opacity: .5;\n "])));
3201
+ return disabled && styled.css(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n opacity: .5;\n "])));
3178
3202
  });
3179
- var HiddenInput$1 = styled__default.input(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n width: 100%;\n margin: 0;\n padding:0;\n opacity: .001;\n z-index: 99;\n cursor: ", ";\n"])), function (_ref3) {
3203
+ var HiddenInput$1 = styled__default.input(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n width: 100%;\n margin: 0;\n padding:0;\n opacity: .001;\n z-index: 99;\n cursor: ", ";\n"])), function (_ref3) {
3180
3204
  var disabled = _ref3.disabled;
3181
3205
  return disabled ? "not-allowed" : "pointer";
3182
3206
  });
3183
- var Rail = styled__default.div(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", "px;\n top: 10px;\n width: calc(100% - ", "px);\n height: 2px;\n border-radius: 11px;\n background-image: linear-gradient(to bottom, var(--grey-10), var(--primary-10) 98%);\n"])), ThumbDiameter / 2, ThumbDiameter);
3184
- var Mark = styled__default.span(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: -3px;\n left: ", ";\n width: 1px;\n height: 9px;\n opacity: 0.25;\n background-color: var(--primary-11);\n"])), function (_ref4) {
3207
+ var Rail = styled__default.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", "px;\n top: 10px;\n width: calc(100% - ", "px);\n height: 2px;\n border-radius: 11px;\n background-image: linear-gradient(to bottom, var(--grey-10), var(--primary-10) 98%);\n"])), ThumbDiameter / 2, ThumbDiameter);
3208
+ var Mark = styled__default.span(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: -3px;\n left: ", ";\n width: 1px;\n height: 9px;\n opacity: 0.25;\n background-color: var(--primary-11);\n"])), function (_ref4) {
3185
3209
  var leftValue = _ref4.leftValue;
3186
3210
  return "calc(" + leftValue + "% + 7px)";
3187
3211
  });
@@ -3190,15 +3214,15 @@ var MarkLabel = styled__default.span(_templateObject6$a || (_templateObject6$a =
3190
3214
  return "calc(" + leftValue + "% + 7px)";
3191
3215
  }, function (_ref6) {
3192
3216
  var alignment = _ref6.alignment;
3193
- return alignment === 'center' && styled.css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["transform: translateX(-50%);;"])));
3217
+ return alignment === 'center' && styled.css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["transform: translateX(-50%);;"])));
3194
3218
  }, function (_ref7) {
3195
3219
  var alignment = _ref7.alignment;
3196
- return alignment === 'right' && styled.css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["transform: translateX(5%);"])));
3220
+ return alignment === 'right' && styled.css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["transform: translateX(5%);"])));
3197
3221
  }, function (_ref8) {
3198
3222
  var alignment = _ref8.alignment;
3199
- return alignment === 'left' && styled.css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["transform: translateX(-95%);"])));
3223
+ return alignment === 'left' && styled.css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["transform: translateX(-95%);"])));
3200
3224
  });
3201
- var ThumbWrapper = styled__default.div(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-right: 16px;\n left: 0;\n top: 10px;\n width: calc(100% - ", "px);\n height: 2px;\n"])), ThumbDiameter);
3225
+ var ThumbWrapper = styled__default.div(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-right: 16px;\n left: 0;\n top: 10px;\n width: calc(100% - ", "px);\n height: 2px;\n"])), ThumbDiameter);
3202
3226
  var Thumb = styled__default.span(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n width: ", "px;\n height: ", "px;\n border-radius: 8px;\n background-color: ", ";\n position: absolute;\n top: -7.5px;\n left: ", ";\n"])), ThumbDiameter, ThumbDiameter, function (_ref9) {
3203
3227
  var theme = _ref9.theme,
3204
3228
  bgColor = _ref9.bgColor;
@@ -3413,10 +3437,10 @@ var SliderInput = function SliderInput(_ref12) {
3413
3437
 
3414
3438
  var _excluded$a = ["text", "buttonDesign", "buttonSize", "inputCallback"];
3415
3439
 
3416
- var _templateObject$o, _templateObject2$j, _templateObject3$g;
3417
- var Container$a = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose([""])));
3418
- var HiddenInput$2 = styled__default.input(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
3419
- var StyledButton$2 = styled__default(Button)(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n text-align: center;\n"])));
3440
+ var _templateObject$q, _templateObject2$k, _templateObject3$h;
3441
+ var Container$a = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose([""])));
3442
+ var HiddenInput$2 = styled__default.input(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
3443
+ var StyledButton$2 = styled__default(Button)(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n text-align: center;\n"])));
3420
3444
 
3421
3445
  var InputFileButton = function InputFileButton(_ref) {
3422
3446
  var text = _ref.text,
@@ -3462,18 +3486,18 @@ var InputFileButton = function InputFileButton(_ref) {
3462
3486
 
3463
3487
  var _excluded$b = ["max", "min", "defaultValue", "title", "timeUnit", "controlledValue", "inputCallback"];
3464
3488
 
3465
- var _templateObject$p, _templateObject2$k, _templateObject3$h, _templateObject4$f, _templateObject5$d;
3466
- var Container$b = styled__default.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose([""])));
3467
- var Headers = styled__default.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-between;\n margin-bottom: 30px;\n padding: 0 6px;\n"])));
3468
- var ValueLabel = styled__default(Label)(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-bottom: 0;\n"])), function (_ref) {
3489
+ var _templateObject$r, _templateObject2$l, _templateObject3$i, _templateObject4$g, _templateObject5$e;
3490
+ var Container$b = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose([""])));
3491
+ var Headers = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-between;\n margin-bottom: 30px;\n padding: 0 6px;\n"])));
3492
+ var ValueLabel = styled__default(Label)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-bottom: 0;\n"])), function (_ref) {
3469
3493
  var theme = _ref.theme;
3470
3494
  return theme.fontFamily.ui;
3471
3495
  });
3472
- var Unit = styled__default.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-a11);\n font-style: italic;\n font-size: 12px;\n line-height: 1.5;\n"])), function (_ref2) {
3496
+ var Unit = styled__default.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-a11);\n font-style: italic;\n font-size: 12px;\n line-height: 1.5;\n"])), function (_ref2) {
3473
3497
  var theme = _ref2.theme;
3474
3498
  return theme.fontFamily.data;
3475
3499
  });
3476
- var ValueTitle = styled__default.div(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
3500
+ var ValueTitle = styled__default.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
3477
3501
 
3478
3502
  var DurationSlider = function DurationSlider(_ref3) {
3479
3503
  var max = _ref3.max,
@@ -3517,13 +3541,13 @@ var DurationSlider = function DurationSlider(_ref3) {
3517
3541
 
3518
3542
  var _excluded$c = ["defaultValue", "inputCallback", "updateThumbColor", "updateTitle", "showValue", "allMarkCentered"];
3519
3543
 
3520
- var _templateObject$q, _templateObject2$l, _templateObject3$i;
3521
- var Container$c = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose([""])));
3522
- var Headers$1 = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n ", ";\n"])), function (_ref) {
3544
+ var _templateObject$s, _templateObject2$m, _templateObject3$j;
3545
+ var Container$c = styled__default.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose([""])));
3546
+ var Headers$1 = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n ", ";\n"])), function (_ref) {
3523
3547
  var allMarkCentered = _ref.allMarkCentered;
3524
3548
  return allMarkCentered ? "padding: 0;" : "padding: 0 6px;";
3525
3549
  });
3526
- var ValueTitle$1 = styled__default(Label)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref2) {
3550
+ var ValueTitle$1 = styled__default(Label)(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref2) {
3527
3551
  var theme = _ref2.theme;
3528
3552
  return theme.fontFamily.data;
3529
3553
  });
@@ -3674,12 +3698,12 @@ var TextAreaField = function TextAreaField(_ref) {
3674
3698
 
3675
3699
  var _excluded$g = ["height", "text", "dropCallback"];
3676
3700
 
3677
- var _templateObject$r, _templateObject2$m;
3678
- var Container$d = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n ", ";\n position: relative;\n"])), function (_ref) {
3701
+ var _templateObject$t, _templateObject2$n;
3702
+ var Container$d = styled__default.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n ", ";\n position: relative;\n"])), function (_ref) {
3679
3703
  var height = _ref.height;
3680
3704
  return height ? "height: " + height : null;
3681
3705
  });
3682
- var DragAndDrop = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n"])), function (_ref2) {
3706
+ var DragAndDrop = styled__default.div(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n"])), function (_ref2) {
3683
3707
  var inDropZone = _ref2.inDropZone;
3684
3708
  return inDropZone ? "dashed var(--grey-8) 2px" : null;
3685
3709
  });
@@ -4003,20 +4027,20 @@ var areDimensionsDiff = function areDimensionsDiff(oldDimensions, newValues) {
4003
4027
  return isDifferent;
4004
4028
  };
4005
4029
 
4006
- var _templateObject$s, _templateObject2$n, _templateObject3$j, _templateObject4$g, _templateObject5$e, _templateObject6$b, _templateObject7$b, _templateObject8$a, _templateObject9$a, _templateObject10$a, _templateObject11$6, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
4007
- var CropLineStyle = styled.css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: block;\n opacity: 0.1;\n"])));
4008
- var TopLine = styled__default.div(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: n-resize;\n width: 100%;\n height: 5px;\n left: 0;\n top: -3px;\n"])), CropLineStyle);
4009
- var RightLine = styled__default.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: e-resize;\n right: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
4010
- var BottomLine = styled__default.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n ", "\n cursor: s-resize;\n bottom: -3px;\n height: 5px;\n width: 100%;\n left: 0;\n"])), CropLineStyle);
4011
- var LeftLine = styled__default.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: w-resize;\n left: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
4030
+ var _templateObject$u, _templateObject2$o, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$b, _templateObject7$a, _templateObject8$9, _templateObject9$9, _templateObject10$9, _templateObject11$6, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
4031
+ var CropLineStyle = styled.css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: block;\n opacity: 0.1;\n"])));
4032
+ var TopLine = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: n-resize;\n width: 100%;\n height: 5px;\n left: 0;\n top: -3px;\n"])), CropLineStyle);
4033
+ var RightLine = styled__default.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: e-resize;\n right: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
4034
+ var BottomLine = styled__default.div(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n ", "\n cursor: s-resize;\n bottom: -3px;\n height: 5px;\n width: 100%;\n left: 0;\n"])), CropLineStyle);
4035
+ var LeftLine = styled__default.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: w-resize;\n left: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
4012
4036
  var resizeSquaresCss = styled.css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 10px;\n height: 10px;\n border: solid 1px var(--black-a12);\n background-color: var(--white-1);\n"])));
4013
- var PointN = styled__default.div(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n margin-left: -5px;\n left: 50%;\n ", ";\n"])), resizeSquaresCss, function (_ref) {
4037
+ var PointN = styled__default.div(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n margin-left: -5px;\n left: 50%;\n ", ";\n"])), resizeSquaresCss, function (_ref) {
4014
4038
  var isResizable = _ref.isResizable;
4015
- return isResizable && styled.css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n cursor: n-resize;\n "])));
4039
+ return isResizable && styled.css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n cursor: n-resize;\n "])));
4016
4040
  });
4017
- var PointNW = styled__default.div(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n left: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref2) {
4041
+ var PointNW = styled__default.div(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n left: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref2) {
4018
4042
  var isResizable = _ref2.isResizable;
4019
- return isResizable && styled.css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n cursor: nw-resize;\n "])));
4043
+ return isResizable && styled.css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n cursor: nw-resize;\n "])));
4020
4044
  });
4021
4045
  var PointNE = styled__default.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n right: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref3) {
4022
4046
  var isResizable = _ref3.isResizable;
@@ -4081,15 +4105,15 @@ var CropArea = function CropArea(_ref9) {
4081
4105
  })));
4082
4106
  };
4083
4107
 
4084
- var _templateObject$t, _templateObject2$o, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$c, _templateObject7$c, _templateObject8$b, _templateObject9$b;
4085
- var Container$e = styled__default.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-3);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n font-family: ", ";\n z-index: 999;\n"])), function (_ref) {
4108
+ var _templateObject$v, _templateObject2$p, _templateObject3$l, _templateObject4$i, _templateObject5$g, _templateObject6$c, _templateObject7$b, _templateObject8$a, _templateObject9$a;
4109
+ var Container$e = styled__default.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-3);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n font-family: ", ";\n z-index: 999;\n"])), function (_ref) {
4086
4110
  var theme = _ref.theme;
4087
4111
  return theme.fontFamily.ui;
4088
4112
  });
4089
- var InnerContainer$2 = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: 99;\n"])));
4090
- var ToolHeader = styled__default.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 17px;\n"])));
4091
- var TextGroup = styled__default.div(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 20px;\n font-weight: 500;\n color: var(--mono);\n\n ", " {\n display: flex;\n align-items: center;\n margin-right: 14px;\n }\n"])), IconWrapper);
4092
- var ButtonsGroup = styled__default.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n button + button {\n margin-left: 10px;\n }\n"])));
4113
+ var InnerContainer$2 = styled__default.div(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: 99;\n"])));
4114
+ var ToolHeader = styled__default.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 17px;\n"])));
4115
+ var TextGroup = styled__default.div(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 20px;\n font-weight: 500;\n color: var(--mono);\n\n ", " {\n display: flex;\n align-items: center;\n margin-right: 14px;\n }\n"])), IconWrapper);
4116
+ var ButtonsGroup = styled__default.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n button + button {\n margin-left: 10px;\n }\n"])));
4093
4117
  var PreviewArea = styled__default.div(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n height: ", ";\n width: ", ";\n border-radius: 5px;\n background-color: var(--grey-3);\n background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, var(--white-a10) 35px, var(--white-a10) 70px);\n"])), function (_ref2) {
4094
4118
  var canvasHeight = _ref2.canvasHeight;
4095
4119
  return canvasHeight ? canvasHeight + "px" : "462px";
@@ -4097,13 +4121,13 @@ var PreviewArea = styled__default.div(_templateObject6$c || (_templateObject6$c
4097
4121
  var canvasWidth = _ref3.canvasWidth;
4098
4122
  return canvasWidth ? canvasWidth + "px" : "485px";
4099
4123
  });
4100
- var HiddenImage = styled__default.img(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
4101
- var SelectedArea = styled__default.div(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n border: dashed 1px var(--black-a12);\n box-shadow: 0 0 0 9999em var(--black-a11);\n ", ";\n cursor: move;\n"])), function (_ref4) {
4124
+ var HiddenImage = styled__default.img(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
4125
+ var SelectedArea = styled__default.div(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n position: absolute;\n border: dashed 1px var(--black-a12);\n box-shadow: 0 0 0 9999em var(--black-a11);\n ", ";\n cursor: move;\n"])), function (_ref4) {
4102
4126
  var cropLeft = _ref4.cropLeft,
4103
4127
  cropTop = _ref4.cropTop,
4104
4128
  cropWidth = _ref4.cropWidth,
4105
4129
  cropHeight = _ref4.cropHeight;
4106
- return styled.css(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n top: ", "px;\n left: ", "px;\n width: ", "px;\n height: ", "px;\n "])), cropTop, cropLeft, cropWidth, cropHeight);
4130
+ return styled.css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n top: ", "px;\n left: ", "px;\n width: ", "px;\n height: ", "px;\n "])), cropTop, cropLeft, cropWidth, cropHeight);
4107
4131
  });
4108
4132
  var viewDimensions = {
4109
4133
  cropLeft: 0,
@@ -4409,7 +4433,7 @@ var CropTool = function CropTool(_ref5) {
4409
4433
  })))))), document.body);
4410
4434
  };
4411
4435
 
4412
- var _templateObject$u, _templateObject2$p, _templateObject3$l, _templateObject4$i, _templateObject5$g, _templateObject6$d, _templateObject7$d, _templateObject8$c, _templateObject9$c;
4436
+ var _templateObject$w, _templateObject2$q, _templateObject3$m, _templateObject4$j, _templateObject5$h, _templateObject6$d, _templateObject7$c, _templateObject8$b, _templateObject9$b;
4413
4437
  var CROP_HEIGHT_AREA = 500;
4414
4438
  var CROP_WIDTH_AREA = 475;
4415
4439
  var CANVAS_HEIGHT = 490;
@@ -4417,17 +4441,17 @@ var CANVAS_WIDTH = 460;
4417
4441
  var ratio = Math.round(CROP_WIDTH_AREA / CROP_HEIGHT_AREA * 100) / 100;
4418
4442
  var PHOTO_HEIGHT = "150px";
4419
4443
  var PHOTO_WIDTH = "142px";
4420
- var Container$f = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n position: relative;\n width: ", ";\n ", "\n button {\n width: 100%;\n }\n"])), PHOTO_WIDTH, function (_ref) {
4444
+ var Container$f = styled__default.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n position: relative;\n width: ", ";\n ", "\n button {\n width: 100%;\n }\n"])), PHOTO_WIDTH, function (_ref) {
4421
4445
  var theme = _ref.theme;
4422
- return styled.css(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
4446
+ return styled.css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
4423
4447
  });
4424
- var PreviewImageGroup = styled__default.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-bottom: 17px;\n height: ", ";\n width: ", ";\n"])), PHOTO_HEIGHT, PHOTO_WIDTH);
4425
- var PhotoContainerStyle = styled.css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 5px;\n background-color: var(--grey-5);\n"])));
4426
- var PreviewImage = styled__default.img(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n ", "\n object-fit: cover;\n"])), PhotoContainerStyle);
4448
+ var PreviewImageGroup = styled__default.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-bottom: 17px;\n height: ", ";\n width: ", ";\n"])), PHOTO_HEIGHT, PHOTO_WIDTH);
4449
+ var PhotoContainerStyle = styled.css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 5px;\n background-color: var(--grey-5);\n"])));
4450
+ var PreviewImage = styled__default.img(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n ", "\n object-fit: cover;\n"])), PhotoContainerStyle);
4427
4451
  var PlaceholderText = styled__default.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n color: var(--grey-10);\n font-size: 14px;\n"])));
4428
- var NoPhoto = styled__default.div(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n ", "\n padding-top: 15px;\n ", " {\n margin-top: 18px;\n }\n"])), PhotoContainerStyle, PlaceholderText);
4429
- var StyledInputFileButton = styled__default(InputFileButton)(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
4430
- var ButtonsWrapper = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n button {\n margin-bottom: 10px;\n }\n\n"])));
4452
+ var NoPhoto = styled__default.div(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n ", "\n padding-top: 15px;\n ", " {\n margin-top: 18px;\n }\n"])), PhotoContainerStyle, PlaceholderText);
4453
+ var StyledInputFileButton = styled__default(InputFileButton)(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
4454
+ var ButtonsWrapper = styled__default.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n button {\n margin-bottom: 10px;\n }\n\n"])));
4431
4455
 
4432
4456
  var AvatarUploader = function AvatarUploader(_ref2) {
4433
4457
  var _ref2$title = _ref2.title,
@@ -4579,10 +4603,10 @@ var AvatarUploader = function AvatarUploader(_ref2) {
4579
4603
 
4580
4604
  var _excluded$h = ["icons", "color", "size", "weight"];
4581
4605
 
4582
- var _templateObject$v, _templateObject2$q, _templateObject3$m;
4583
- var Container$g = styled__default.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 27px;\n ", " {\n display: flex;\n align-items: center;\n }\n"])), IconWrapper);
4584
- var PlusIcon = styled__default(Icon)(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose([""])));
4585
- var PlusIconWrapper = styled__default.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n margin: 0 30px;\n ", "{\n transform: rotate(45deg);\n [stroke]{\n stroke: var(--primary-7);\n }\n }\n"])), IconWrapper);
4606
+ var _templateObject$x, _templateObject2$r, _templateObject3$n;
4607
+ var Container$g = styled__default.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 27px;\n ", " {\n display: flex;\n align-items: center;\n }\n"])), IconWrapper);
4608
+ var PlusIcon = styled__default(Icon)(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose([""])));
4609
+ var PlusIconWrapper = styled__default.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n margin: 0 30px;\n ", "{\n transform: rotate(45deg);\n [stroke]{\n stroke: var(--primary-7);\n }\n }\n"])), IconWrapper);
4586
4610
 
4587
4611
  var BigIconsSummary = function BigIconsSummary(_ref) {
4588
4612
  var icons = _ref.icons,
@@ -4610,18 +4634,18 @@ var BigIconsSummary = function BigIconsSummary(_ref) {
4610
4634
  }));
4611
4635
  };
4612
4636
 
4613
- var _templateObject$w, _templateObject2$r, _templateObject3$n, _templateObject4$j, _templateObject5$h, _templateObject6$e;
4614
- var Container$h = styled__default.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref) {
4637
+ var _templateObject$y, _templateObject2$s, _templateObject3$o, _templateObject4$k, _templateObject5$i, _templateObject6$e;
4638
+ var Container$h = styled__default.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref) {
4615
4639
  var theme = _ref.theme;
4616
4640
  return theme.fontFamily.ui;
4617
4641
  });
4618
- var StyledDropArea = styled__default(DropArea)(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
4619
- var InputButtonWrapper = styled__default.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n z-index: 99;\n margin-top: 20px;\n display: flex;\n gap: 20px;\n"])));
4620
- var FilesUploadGroup = styled__default.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n padding: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 5px;\n background-color: var(--grey-4);\n position: relative;\n"])), function (_ref2) {
4642
+ var StyledDropArea = styled__default(DropArea)(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
4643
+ var InputButtonWrapper = styled__default.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n z-index: 99;\n margin-top: 20px;\n display: flex;\n gap: 20px;\n"])));
4644
+ var FilesUploadGroup = styled__default.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n padding: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 5px;\n background-color: var(--grey-4);\n position: relative;\n"])), function (_ref2) {
4621
4645
  var hasFiles = _ref2.hasFiles;
4622
4646
  return hasFiles ? '26px 0 20px 0' : '65px 0 42px 0';
4623
4647
  });
4624
- var Title = styled__default.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n color: var(--grey-11);\n font-size: 20px;\n"])));
4648
+ var Title = styled__default.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n color: var(--grey-11);\n font-size: 20px;\n"])));
4625
4649
  var Description = styled__default.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n line-height: 2.14;\n text-align: center;\n color: var(--grey-10);\n margin-top: 10px;\n max-width: 386px;\n"])));
4626
4650
 
4627
4651
  var getUpdateFiles = function getUpdateFiles(newFiles, files, allowedFileTypes) {
@@ -4742,10 +4766,10 @@ var AreaUploadManager = function AreaUploadManager(_ref3) {
4742
4766
 
4743
4767
  var _excluded$i = ["children", "spacing"];
4744
4768
 
4745
- var _templateObject$x, _templateObject2$s;
4746
- var FormContainer = styled__default.form(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
4769
+ var _templateObject$z, _templateObject2$t;
4770
+ var FormContainer = styled__default.form(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
4747
4771
  var spacing = _ref.spacing;
4748
- return spacing && styled.css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n & > ", " {\n margin-bottom: ", ";\n }\n "])), StyledLabel, spacing);
4772
+ return spacing && styled.css(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n & > ", " {\n margin-bottom: ", ";\n }\n "])), StyledLabel, spacing);
4749
4773
  });
4750
4774
 
4751
4775
  var Form = function Form(_ref2) {
@@ -4761,22 +4785,22 @@ var Form = function Form(_ref2) {
4761
4785
 
4762
4786
  var _excluded$j = ["text", "icon", "design", "noBorderTop", "textMaxWidth", "size", "onClickCallback", "closeCallback", "hasOnSelectLoading"];
4763
4787
 
4764
- var _templateObject$y, _templateObject2$t, _templateObject3$o, _templateObject4$k, _templateObject5$i, _templateObject6$f, _templateObject7$e, _templateObject8$d;
4765
- var StyledButton$3 = styled__default.button(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n ", "\n ", ";\n\n color: var(--text-color);\n height: var(--button-height);\n display: flex;\n flex: 1 0 0;\n align-items: center;\n align-self: stretch;\n\n &:hover:enabled {\n background: var(--button-hover-bg);\n\n ", " {\n svg g, svg path {\n stroke: var(--white-a12);\n }\n }\n }\n\n &:active:enabled {\n background: var(--button-active-bg);\n\n ", ";\n\n ", " {\n svg g, svg path {\n stroke: var(--white-a12);\n }\n }\n }\n\n &:disabled {\n color: var(--text-disabled-color);\n cursor: not-allowed;\n }\n"])), resetButtonStyles, function (_ref) {
4788
+ var _templateObject$A, _templateObject2$u, _templateObject3$p, _templateObject4$l, _templateObject5$j, _templateObject6$f, _templateObject7$d, _templateObject8$c;
4789
+ var StyledButton$3 = styled__default.button(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n ", "\n ", ";\n\n color: var(--text-color);\n height: var(--button-height);\n display: flex;\n flex: 1 0 0;\n align-items: center;\n align-self: stretch;\n\n &:hover:enabled {\n background: var(--button-hover-bg);\n\n ", " {\n svg g, svg path {\n stroke: var(--white-a12);\n }\n }\n }\n\n &:active:enabled {\n background: var(--button-active-bg);\n\n ", ";\n\n ", " {\n svg g, svg path {\n stroke: var(--white-a12);\n }\n }\n }\n\n &:disabled {\n color: var(--text-disabled-color);\n cursor: not-allowed;\n }\n"])), resetButtonStyles, function (_ref) {
4766
4790
  var noBorderTop = _ref.noBorderTop;
4767
- return noBorderTop ? "border-top: none" : styled.css(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-color)"])));
4791
+ return noBorderTop ? "border-top: none" : styled.css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-color)"])));
4768
4792
  }, IconWrapper, function (_ref2) {
4769
4793
  var noBorderTop = _ref2.noBorderTop;
4770
- return noBorderTop ? "border-top: none" : styled.css(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-active-color)"])));
4794
+ return noBorderTop ? "border-top: none" : styled.css(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-active-color)"])));
4771
4795
  }, IconWrapper);
4772
- var OptionText = styled__default.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n font-size: var(--button-font-size);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n text-align: center;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n"])));
4773
- var TextWrapper = styled__default.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n ", "\n display: flex;\n padding: 0px var(--button-h-padding);\n justify-content: center;\n align-items: center;\n gap: 8px;\n align-self: stretch;\n"])), function (_ref3) {
4796
+ var OptionText = styled__default.div(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n font-size: var(--button-font-size);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n text-align: center;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n"])));
4797
+ var TextWrapper = styled__default.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n ", "\n display: flex;\n padding: 0px var(--button-h-padding);\n justify-content: center;\n align-items: center;\n gap: 8px;\n align-self: stretch;\n"])), function (_ref3) {
4774
4798
  var textMaxWidth = _ref3.textMaxWidth;
4775
4799
  return textMaxWidth && styled.css(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["max-width: ", ";"])), textMaxWidth);
4776
4800
  });
4777
- var LeftIconWrapper = styled__default.div(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n ", ";\n\n height: var(--button-height);\n display: flex;\n padding: 3px var(--button-icon-h-padding);\n align-items: center;\n align-self: stretch;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n display: flex;\n justify-content: center;\n align-items: center;\n height: var(--button-icon-size);\n width: var(--button-icon-size);\n g, path {\n stroke: var(--white-a10);\n }\n }\n }\n"])), function (_ref4) {
4801
+ var LeftIconWrapper = styled__default.div(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n ", ";\n\n height: var(--button-height);\n display: flex;\n padding: 3px var(--button-icon-h-padding);\n align-items: center;\n align-self: stretch;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n display: flex;\n justify-content: center;\n align-items: center;\n height: var(--button-icon-size);\n width: var(--button-icon-size);\n g, path {\n stroke: var(--white-a10);\n }\n }\n }\n"])), function (_ref4) {
4778
4802
  var isAscendingIcon = _ref4.isAscendingIcon;
4779
- return isAscendingIcon && styled.css(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
4803
+ return isAscendingIcon && styled.css(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
4780
4804
  }, IconWrapper);
4781
4805
 
4782
4806
  var SplitButtonOption = function SplitButtonOption(_ref5) {
@@ -4979,10 +5003,10 @@ function useClickOutside(elRef, elCallback) {
4979
5003
  }, [elCallback, elRef]);
4980
5004
  }
4981
5005
 
4982
- var _templateObject$z, _templateObject2$u, _templateObject3$p, _templateObject4$l, _templateObject5$j, _templateObject6$g, _templateObject7$f;
4983
- var Container$i = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-3);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n z-index: 999;\n ", "\n\n font-family: ", ";\n ", ";\n"])), function (_ref) {
5006
+ var _templateObject$B, _templateObject2$v, _templateObject3$q, _templateObject4$m, _templateObject5$k, _templateObject6$g, _templateObject7$e;
5007
+ var Container$i = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-3);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n z-index: 999;\n ", "\n\n font-family: ", ";\n ", ";\n"])), function (_ref) {
4984
5008
  var theme = _ref.theme;
4985
- return theme && styled.css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose([""])));
5009
+ return theme && styled.css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose([""])));
4986
5010
  }, function (_ref2) {
4987
5011
  var theme = _ref2.theme;
4988
5012
  return theme.fontFamily.ui;
@@ -4990,16 +5014,16 @@ var Container$i = styled__default.div(_templateObject$z || (_templateObject$z =
4990
5014
  var theme = _ref3.theme;
4991
5015
  return theme.styles.modal.overlay;
4992
5016
  });
4993
- var CloseIcon = styled__default(Icon)(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose([""])));
4994
- var CloseButton = styled__default.button(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n right: 0;\n top: -30px;\n color: var(--mono);\n font-size: 14px;\n font-weight: 500;\n\n ", " {\n display: flex;\n margin-left: 12px;\n }\n ", "\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n opacity: .9;\n }\n &:disabled {\n opacity: 0.1;\n }\n"])), resetButtonStyles, IconWrapper, function (_ref4) {
5017
+ var CloseIcon = styled__default(Icon)(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose([""])));
5018
+ var CloseButton = styled__default.button(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n right: 0;\n top: -30px;\n color: var(--mono);\n font-size: 14px;\n font-weight: 500;\n\n ", " {\n display: flex;\n margin-left: 12px;\n }\n ", "\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n opacity: .9;\n }\n &:disabled {\n opacity: 0.1;\n }\n"])), resetButtonStyles, IconWrapper, function (_ref4) {
4995
5019
  var _ref4$selected = _ref4.selected,
4996
5020
  selected = _ref4$selected === void 0 ? false : _ref4$selected;
4997
- return selected && styled.css(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
5021
+ return selected && styled.css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
4998
5022
  }, function (_ref5) {
4999
5023
  var theme = _ref5.theme;
5000
5024
  return theme && styled.css(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n opacity: .8;\n transition: transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.inOut);
5001
5025
  });
5002
- var LightBox = styled__default.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n position: relative;\n margin: 27px 0 0;\n z-index: 9999;\n width: ", ";\n padding: ", ";\n border-radius: 5px;\n ", ";\n"])), function (_ref6) {
5026
+ var LightBox = styled__default.div(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n position: relative;\n margin: 27px 0 0;\n z-index: 9999;\n width: ", ";\n padding: ", ";\n border-radius: 5px;\n ", ";\n"])), function (_ref6) {
5003
5027
  var width = _ref6.width;
5004
5028
  return width ? width : "580px";
5005
5029
  }, function (_ref7) {
@@ -5383,8 +5407,8 @@ function SvgNoImageBig(props) {
5383
5407
 
5384
5408
  var _excluded$k = ["loop", "autoPlay", "controls", "muted"];
5385
5409
 
5386
- var _templateObject$A, _templateObject2$v, _templateObject3$q, _templateObject4$m, _templateObject5$k, _templateObject6$h, _templateObject7$g, _templateObject8$e;
5387
- var MediaBoxWrapper = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n ", ";\n ", ";\n"])), function (_ref) {
5410
+ var _templateObject$C, _templateObject2$w, _templateObject3$r, _templateObject4$n, _templateObject5$l, _templateObject6$h, _templateObject7$f, _templateObject8$d;
5411
+ var MediaBoxWrapper = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n ", ";\n ", ";\n"])), function (_ref) {
5388
5412
  var minHeight = _ref.minHeight;
5389
5413
  return minHeight && "min-height: " + minHeight;
5390
5414
  }, function (_ref2) {
@@ -5392,18 +5416,18 @@ var MediaBoxWrapper = styled__default.div(_templateObject$A || (_templateObject$
5392
5416
  return minWidth && "min-width: " + minWidth;
5393
5417
  });
5394
5418
  var mediaStyle = "\n max-width: 100%;\n max-height: 100%;\n border-radius: 3px;\n background-color: var(--grey-11);\n";
5395
- var LoadingOverlay = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
5396
- var Video = styled__default.video(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n ", ";\n outline: none;\n\n ", ";\n"])), mediaStyle, function (_ref3) {
5419
+ var LoadingOverlay = styled__default.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
5420
+ var Video = styled__default.video(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n ", ";\n outline: none;\n\n ", ";\n"])), mediaStyle, function (_ref3) {
5397
5421
  var theme = _ref3.theme,
5398
5422
  isLoaded = _ref3.isLoaded,
5399
5423
  hasModalLimits = _ref3.hasModalLimits;
5400
- return styled.css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n opacity: ", ";\n\n ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "1" : "0", hasModalLimits && styled.css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
5424
+ return styled.css(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n opacity: ", ";\n\n ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "1" : "0", hasModalLimits && styled.css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
5401
5425
  });
5402
5426
  var StyledImage = styled__default.img(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), mediaStyle, function (_ref4) {
5403
5427
  var theme = _ref4.theme,
5404
5428
  isLoaded = _ref4.isLoaded,
5405
5429
  hasModalLimits = _ref4.hasModalLimits;
5406
- return styled.css(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n opacity: ", ";\n\n ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "1" : "0", hasModalLimits && styled.css(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
5430
+ return styled.css(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n opacity: ", ";\n\n ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "1" : "0", hasModalLimits && styled.css(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
5407
5431
  });
5408
5432
 
5409
5433
  var MediaBox = function MediaBox(_ref5) {
@@ -5687,15 +5711,15 @@ var _excluded$l = ["mainButtonId", "buttonList", "design", "size", "textMaxWidth
5687
5711
  _excluded2 = ["id", "text", "icon", "disabled"],
5688
5712
  _excluded3 = ["id", "text", "icon", "disabled"];
5689
5713
 
5690
- var _templateObject$B, _templateObject2$w, _templateObject3$r, _templateObject4$n;
5714
+ var _templateObject$D, _templateObject2$x, _templateObject3$s, _templateObject4$o;
5691
5715
  var TOGGLE_ICON_WIDTH = 30;
5692
- var Container$j = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n height: var(--button-height);\n overflow: visible;\n"])));
5693
- var ButtonsWrapper$1 = styled__default.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: var(--font-ui);\n position: relative;\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n border-radius: 3px;\n border: 1px solid var(--border);\n background: linear-gradient(135deg, var(--gradient-1) 0%, var(--gradient-2) 100%);\n box-shadow: var(--button-lift-default-x, 0px) var(--button-lift-default-y, 2px) var(--button-lift-default-blur, 4px) var(--button-lift-default-spread, 2px) var(--button-lift-default-color, rgba(221, 234, 248, 0.08));\n"])), function (_ref) {
5716
+ var Container$j = styled__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n height: var(--button-height);\n overflow: visible;\n"])));
5717
+ var ButtonsWrapper$1 = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: var(--font-ui);\n position: relative;\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n border-radius: 3px;\n border: 1px solid var(--border);\n background: linear-gradient(135deg, var(--gradient-1) 0%, var(--gradient-2) 100%);\n box-shadow: var(--button-lift-default-x, 0px) var(--button-lift-default-y, 2px) var(--button-lift-default-blur, 4px) var(--button-lift-default-spread, 2px) var(--button-lift-default-color, rgba(221, 234, 248, 0.08));\n"])), function (_ref) {
5694
5718
  var isOpen = _ref.isOpen;
5695
5719
  return isOpen && "z-index: 100";
5696
5720
  });
5697
- var MainButtonWrapper = styled__default.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n align-self: stretch;\n"])));
5698
- var ToggleIcon = styled__default.button(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n ", "\n display: flex;\n height: var(--button-height);\n padding: 3px var(--button-icon-h-padding);\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n border-left: 1px solid var(--toggle-icon-border);\n cursor: pointer;\n\n ", " {\n svg {\n display: flex;\n justify-content: center;\n align-items: center;\n path, g {\n stroke: var(--toggle-icon);\n }\n }\n }\n\n &:hover:enabled {\n background: var(--toggle-icon-hover-bg);\n }\n\n &:active:enabled {\n background: var(--toggle-icon-active-bg);\n ", " {\n svg path, svg g {\n stroke: var(--toggle-icon-active);\n }\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n\n ", " {\n svg path {\n stroke: var(--toggle-icon-disabled);\n }\n }\n }\n\n"])), resetButtonStyles, IconWrapper, IconWrapper, IconWrapper);
5721
+ var MainButtonWrapper = styled__default.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n align-self: stretch;\n"])));
5722
+ var ToggleIcon = styled__default.button(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n ", "\n display: flex;\n height: var(--button-height);\n padding: 3px var(--button-icon-h-padding);\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n border-left: 1px solid var(--toggle-icon-border);\n cursor: pointer;\n\n ", " {\n svg {\n display: flex;\n justify-content: center;\n align-items: center;\n path, g {\n stroke: var(--toggle-icon);\n }\n }\n }\n\n &:hover:enabled {\n background: var(--toggle-icon-hover-bg);\n }\n\n &:active:enabled {\n background: var(--toggle-icon-active-bg);\n ", " {\n svg path, svg g {\n stroke: var(--toggle-icon-active);\n }\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n\n ", " {\n svg path {\n stroke: var(--toggle-icon-disabled);\n }\n }\n }\n\n"])), resetButtonStyles, IconWrapper, IconWrapper, IconWrapper);
5699
5723
 
5700
5724
  var validateMaxWidth = function validateMaxWidth(btnTextMaxWidth, textMaxWidth) {
5701
5725
  if (textMaxWidth) return textMaxWidth;
@@ -5790,8 +5814,8 @@ var SplitButton = function SplitButton(_ref2) {
5790
5814
 
5791
5815
  var _excluded$m = ["id", "buttonType", "icon", "text", "iconPosition", "size"];
5792
5816
 
5793
- var _templateObject$C;
5794
- var Container$k = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n button {\n text-wrap: nowrap;\n }\n"])));
5817
+ var _templateObject$E;
5818
+ var Container$k = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n button {\n text-wrap: nowrap;\n }\n"])));
5795
5819
 
5796
5820
  var ButtonsStack = function ButtonsStack(_ref) {
5797
5821
  var buttons = _ref.buttons;
@@ -5817,14 +5841,14 @@ var ButtonsStack = function ButtonsStack(_ref) {
5817
5841
  }));
5818
5842
  };
5819
5843
 
5820
- var _templateObject$D, _templateObject2$x, _templateObject3$s, _templateObject4$o, _templateObject5$l, _templateObject6$i, _templateObject7$h, _templateObject8$f;
5821
- var Container$l = styled__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n ", "\n"])), function (_ref) {
5844
+ var _templateObject$F, _templateObject2$y, _templateObject3$t, _templateObject4$p, _templateObject5$m, _templateObject6$i, _templateObject7$g, _templateObject8$e;
5845
+ var Container$l = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n ", "\n"])), function (_ref) {
5822
5846
  var hide = _ref.hide;
5823
- return hide && styled.css(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n display: none;\n "])));
5847
+ return hide && styled.css(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n display: none;\n "])));
5824
5848
  });
5825
- var Label$1 = styled__default.label(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n text-align: left;\n font-size: 14px;\n font-weight: 300;\n text-decoration: none;\n color: var(--grey-11);\n padding: 12px;\n border-bottom: var(--grey-6) 1px solid;\n"])), fontFamily.ui);
5826
- var Item = styled__default.div(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n padding: 12px;\n display: flex;\n justify-content: left;\n"])));
5827
- var IconWrap = styled__default.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n flex: 0 0 40px;\n padding-top: 2px;\n"])));
5849
+ var Label$1 = styled__default.label(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n text-align: left;\n font-size: 14px;\n font-weight: 300;\n text-decoration: none;\n color: var(--grey-11);\n padding: 12px;\n border-bottom: var(--grey-6) 1px solid;\n"])), fontFamily.ui);
5850
+ var Item = styled__default.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n padding: 12px;\n display: flex;\n justify-content: left;\n"])));
5851
+ var IconWrap = styled__default.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n flex: 0 0 40px;\n padding-top: 2px;\n"])));
5828
5852
  var Input$1 = styled__default.input(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n text-align: left;\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.2px;\n text-decoration: none;\n color: var(--grey-11);\n background-color: transparent;\n\n width: 100%;\n border: ", ";\n outline: none;\n flex: 1;\n justify-content: space-between;\n border-radius: 3px;\n\n &:focus, &:hover {\n\n border-color: ", ";\n }\n"])), fontFamily.data, function (_ref2) {
5829
5853
  var isTimeInput = _ref2.isTimeInput;
5830
5854
  return isTimeInput ? function (_ref3) {
@@ -5838,8 +5862,8 @@ var Input$1 = styled__default.input(_templateObject6$i || (_templateObject6$i =
5838
5862
  return isTimeRangeValid ? 'blue' : 'var(--warning-a9)';
5839
5863
  } : 'transparent';
5840
5864
  });
5841
- var TimeColon = styled__default.div(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n text-align: center;\n"])));
5842
- var InputWrap = styled__default.div(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n box-sizing: border-box;\n border-radius: 3px;\n\n &:focus-within {\n background: var(--primary-a7);\n box-shadow: 0px 0px 0px 5px var(--primary-a7);\n\n ", "{\n color: var(--black-1);\n text-align: center;\n }\n }\n"])), TimeColon);
5865
+ var TimeColon = styled__default.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n text-align: center;\n"])));
5866
+ var InputWrap = styled__default.div(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n box-sizing: border-box;\n border-radius: 3px;\n\n &:focus-within {\n background: var(--primary-a7);\n box-shadow: 0px 0px 0px 5px var(--primary-a7);\n\n ", "{\n color: var(--black-1);\n text-align: center;\n }\n }\n"])), TimeColon);
5843
5867
 
5844
5868
  var DateTimeBlock = function DateTimeBlock(_ref6) {
5845
5869
  var _ref6$allowAfterMidni = _ref6.allowAfterMidnight,
@@ -6020,7 +6044,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
6020
6044
  })))));
6021
6045
  };
6022
6046
 
6023
- var _templateObject$E, _templateObject2$y, _templateObject3$t, _templateObject4$p, _templateObject5$m, _templateObject6$j, _templateObject7$i, _templateObject8$g, _templateObject9$d, _templateObject10$b, _templateObject11$7, _templateObject12$5, _templateObject13$4, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23;
6047
+ var _templateObject$G, _templateObject2$z, _templateObject3$u, _templateObject4$q, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$f, _templateObject9$c, _templateObject10$a, _templateObject11$7, _templateObject12$5, _templateObject13$4, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23;
6024
6048
 
6025
6049
  var initializeInterval = function initializeInterval(day) {
6026
6050
  return {
@@ -6034,16 +6058,16 @@ var initializeInterval = function initializeInterval(day) {
6034
6058
 
6035
6059
  var TODAY = new Date();
6036
6060
  var TODAY_INTERVAL = initializeInterval(dateFns.startOfDay(new Date()));
6037
- var Container$m = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
6038
- var DateTimeArea = styled__default.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n border-right: var(--grey-6) 1px solid;\n width: 170px;\n display: flex;\n flex-direction: column;\n"])));
6039
- var TimeZoneOption = styled__default.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n border-top: var(--grey-6) 1px solid;\n margin-top: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n box-sizing: border-box;\n"])));
6040
- var TimeZoneLabel = styled__default.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n text-align: left;\n font-size: 12px;\n font-weight: 300;\n color: var(--grey-11);\n"])), fontFamily.ui);
6041
- var TimeZoneValue = styled__default.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n text-align: left;\n font-size: 12px;\n font-weight: 300;\n color: var(--grey-11);\n"])), fontFamily.data);
6061
+ var Container$m = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
6062
+ var DateTimeArea = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n border-right: var(--grey-6) 1px solid;\n width: 170px;\n display: flex;\n flex-direction: column;\n"])));
6063
+ var TimeZoneOption = styled__default.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n border-top: var(--grey-6) 1px solid;\n margin-top: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n box-sizing: border-box;\n"])));
6064
+ var TimeZoneLabel = styled__default.div(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n text-align: left;\n font-size: 12px;\n font-weight: 300;\n color: var(--grey-11);\n"])), fontFamily.ui);
6065
+ var TimeZoneValue = styled__default.div(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n text-align: left;\n font-size: 12px;\n font-weight: 300;\n color: var(--grey-11);\n"])), fontFamily.data);
6042
6066
  var CalendarArea = styled__default.div(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
6043
- var CalendarHeader = styled__default.div(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 70px;\n border-bottom: var(--grey-6) 1px solid;\n text-align: center;\n"])));
6044
- var CurrentMonth = styled__default.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n flex: 1;\n flex-direction: column;\n display: flex;\n align-items: center;\n justify-content: center;\n\n text-align: center;\n font-size: 20px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0.5px;\n color: var(--grey-11);\n\n span {\n display: block;\n flex: 0;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.33px;\n }\n"])));
6045
- var IconWrap$1 = styled__default.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n [stroke]{\n stroke: var(--grey-8);\n }\n"])));
6046
- var PaginateMonth = styled__default.button(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n flex: 0 0 90px;\n border: none;\n background: transparent;\n outline: none;\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n line-height: 20px;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--grey-8);\n display: flex;\n justify-content: space-around;\n align-items: center;\n\n &:hover {\n color: var(--grey-12);\n\n ", "{\n [stroke]{\n stroke: var(--grey-12);\n }\n }\n }\n"])), IconWrap$1);
6067
+ var CalendarHeader = styled__default.div(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 70px;\n border-bottom: var(--grey-6) 1px solid;\n text-align: center;\n"])));
6068
+ var CurrentMonth = styled__default.div(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n flex: 1;\n flex-direction: column;\n display: flex;\n align-items: center;\n justify-content: center;\n\n text-align: center;\n font-size: 20px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0.5px;\n color: var(--grey-11);\n\n span {\n display: block;\n flex: 0;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.33px;\n }\n"])));
6069
+ var IconWrap$1 = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n [stroke]{\n stroke: var(--grey-8);\n }\n"])));
6070
+ var PaginateMonth = styled__default.button(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n flex: 0 0 90px;\n border: none;\n background: transparent;\n outline: none;\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n line-height: 20px;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--grey-8);\n display: flex;\n justify-content: space-around;\n align-items: center;\n\n &:hover {\n color: var(--grey-12);\n\n ", "{\n [stroke]{\n stroke: var(--grey-12);\n }\n }\n }\n"])), IconWrap$1);
6047
6071
  var CalBody = styled__default.div(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n padding: 5px 0;\n"])));
6048
6072
  var CalRow = styled__default.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(7, 40px);\n height: 40px;\n box-sizing: border-box;\n\n padding: 0 10px;\n"])));
6049
6073
  var CalHRow = styled__default(CalRow)(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n border-bottom: var(--grey-6) 1px solid;\n"])));
@@ -6337,9 +6361,9 @@ var getInitialValue = function getInitialValue(hasEmptyValue, initialValue) {
6337
6361
 
6338
6362
  var _excluded$n = ["children"];
6339
6363
 
6340
- var _templateObject$F, _templateObject2$z;
6341
- var Container$n = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 5px 25px 0px var(--primary-a1);\n background-color: var(--grey-1);\n border: var(--grey-6) 1px solid;\n border-radius: 3px;\n position: relative;\n display: inline-flex;\n overflow: hidden;\n padding-top: 5px;\n\n &::before {\n background-color: var(--primary-7);\n content: '';\n\n display: block;\n height: 5px;\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n }\n\n"])));
6342
- var Inner = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n"])));
6364
+ var _templateObject$H, _templateObject2$A;
6365
+ var Container$n = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 5px 25px 0px var(--primary-a1);\n background-color: var(--grey-1);\n border: var(--grey-6) 1px solid;\n border-radius: 3px;\n position: relative;\n display: inline-flex;\n overflow: hidden;\n padding-top: 5px;\n\n &::before {\n background-color: var(--primary-7);\n content: '';\n\n display: block;\n height: 5px;\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n }\n\n"])));
6366
+ var Inner = styled__default.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n"])));
6343
6367
 
6344
6368
  var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
6345
6369
  var children = _ref.children,
@@ -6348,23 +6372,23 @@ var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
6348
6372
  return React__default.createElement(Container$n, Object.assign({}, props), React__default.createElement(Inner, null, children));
6349
6373
  };
6350
6374
 
6351
- var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "children"];
6375
+ var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "design", "children"];
6352
6376
 
6353
- var _templateObject$G, _templateObject2$A, _templateObject3$u, _templateObject4$q, _templateObject5$n, _templateObject6$k, _templateObject7$j;
6354
- var FlipWrapper = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
6377
+ var _templateObject$I, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$o, _templateObject6$k;
6378
+ var FlipWrapper = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
6355
6379
  var isSortAscending = _ref.isSortAscending;
6356
- return isSortAscending && styled.css(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
6380
+ return isSortAscending && styled.css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
6357
6381
  });
6358
- var StyledButton$4 = styled__default.button(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n ", ";\n border-radius: 3px;\n height: 30px;\n\n ", ";\n\n ", ";\n"])), resetButtonStyles, function (_ref2) {
6359
- var animation = _ref2.theme.animation;
6360
- return styled.css(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n\n box-shadow: 0px 4px 9px 0px var(--primary-a1);\n background-color: var(--grey-1);\n border: var(--grey-7) 1px solid;\n text-align: left;\n font-size: 12px;\n font-weight: 400;\n text-decoration: none;\n color: var(--grey-11);\n\n font-family: ", ";\n transition: opacity ", " ", ";\n\n ", " {\n padding: 0 9px;\n display: flex;\n align-items: center;\n [stroke]{\n stroke: var(--dimmed);\n }\n }\n\n &:hover:enabled {\n background-color: var(--primary-7);\n border-color: var(--primary-7);\n border: var(--primary-7) 1px solid;\n color: var(--white-1);\n transition:\n background ", " ", ",\n border ", " ", ";\n }\n\n &:active:enabled {\n background-color: var(--primary-7);\n border-color: var(--primary-7);\n border: var(--primary-7) 1px solid;\n color: var(--white-1);\n }\n\n &:hover:enabled, &:active:enabled {\n ", " {\n [stroke]{\n transition: stroke ", " ", ";\n stroke: var(--white-1);\n }\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 50%;\n }\n"])), fontFamily.ui, animation.speed.normal, animation.easing.primary.inOut, IconWrapper, animation.speed.fast, animation.easing.primary.inOut, animation.speed.fast, animation.easing.primary.inOut, IconWrapper, animation.speed.faster, animation.easing.primary.inOut);
6361
- }, function (_ref3) {
6382
+ var StyledButton$4 = styled__default.button(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n ", ";\n border-radius: 3px;\n height: var(--common-height);\n\n ", ";\n\n box-shadow: 0px 4px 9px 0px var(--primary-a1);\n text-align: left;\n font-size: 12px;\n font-weight: 400;\n text-decoration: none;\n color: var(--grey-11);\n font-family: var(--font-ui);\n transition:\n opacity ", " ", ",\n background ", " ", ",\n color ", " ", ",\n border ", " ", ";\n\n ", " {\n padding: 0 9px;\n display: flex;\n align-items: center;\n }\n\n &:hover:enabled, &:active:enabled {\n background-color: var(--primary-7);\n border-color: var(--primary-7);\n border: var(--primary-7) 1px solid;\n color: var(--white-1);\n }\n\n &:hover:enabled, &:active:enabled {\n ", " {\n [stroke]{\n stroke: var(--white-1);\n transition: stroke ", " ", ";\n }\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 50%;\n }\n\n ", ";\n"])), resetButtonStyles, function (_ref2) {
6383
+ var design = _ref2.design;
6384
+ return design === 'basic' ? "\n background-color: transparent;\n border: 1px solid transparent;\n " : "\n background-color: var(--grey-1);\n border: var(--grey-7) 1px solid;\n ";
6385
+ }, animation.speed.normal, animation.easing.primary.inOut, animation.speed.fast, animation.easing.primary.inOut, animation.speed.fast, animation.easing.primary.inOut, animation.speed.fast, animation.easing.primary.inOut, IconWrapper, IconWrapper, animation.speed.fast, animation.easing.primary.inOut, function (_ref3) {
6362
6386
  var isOpen = _ref3.isOpen,
6363
6387
  hasFlipArrow = _ref3.hasFlipArrow;
6364
- return isOpen && hasFlipArrow && styled.css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-7);\n border: solid 1px var(--primary-7);\n color: var(--white-1);\n\n ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n }\n "])), IconWrapper);
6388
+ return isOpen && hasFlipArrow && styled.css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-7);\n border: solid 1px var(--primary-7);\n color: var(--white-1);\n\n ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n }\n "])), IconWrapper);
6365
6389
  });
6366
- var InnerContainer$3 = styled__default.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
6367
- var ButtonText = styled__default.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n padding-right: ", ";\n"])), function (_ref4) {
6390
+ var InnerContainer$3 = styled__default.div(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
6391
+ var ButtonText = styled__default.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n padding-right: ", ";\n"])), function (_ref4) {
6368
6392
  var hasFlipArrow = _ref4.hasFlipArrow;
6369
6393
  return hasFlipArrow ? '3px' : '20px';
6370
6394
  });
@@ -6376,6 +6400,8 @@ var FilterButton = function FilterButton(_ref5) {
6376
6400
  _ref5$isSortAscending = _ref5.isSortAscending,
6377
6401
  isSortAscending = _ref5$isSortAscending === void 0 ? false : _ref5$isSortAscending,
6378
6402
  isOpen = _ref5.isOpen,
6403
+ _ref5$design = _ref5.design,
6404
+ design = _ref5$design === void 0 ? 'default' : _ref5$design,
6379
6405
  children = _ref5.children,
6380
6406
  props = _objectWithoutPropertiesLoose(_ref5, _excluded$o);
6381
6407
 
@@ -6383,13 +6409,15 @@ var FilterButton = function FilterButton(_ref5) {
6383
6409
  type: 'button'
6384
6410
  }, props, {
6385
6411
  isOpen: isOpen,
6386
- hasFlipArrow: hasFlipArrow
6412
+ hasFlipArrow: hasFlipArrow,
6413
+ design: design
6387
6414
  }), React__default.createElement(InnerContainer$3, null, React__default.createElement(FlipWrapper, Object.assign({}, {
6388
6415
  isSortAscending: isSortAscending
6389
6416
  }), React__default.createElement(Icon, {
6390
6417
  icon: icon,
6391
6418
  size: 12,
6392
- weight: 'light'
6419
+ weight: 'light',
6420
+ color: 'grey-10'
6393
6421
  })), React__default.createElement(ButtonText, Object.assign({}, {
6394
6422
  hasFlipArrow: hasFlipArrow
6395
6423
  }), children), hasFlipArrow && React__default.createElement(Icon, {
@@ -6400,21 +6428,21 @@ var FilterButton = function FilterButton(_ref5) {
6400
6428
 
6401
6429
  var _excluded$p = ["title", "value", "optionType", "selected", "disabled", "onClick"];
6402
6430
 
6403
- var _templateObject$H, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$o, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$e, _templateObject10$c;
6404
- var Title$1 = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n display: block;\n color: var(--grey-9);\n font-size: 14px;\n font-weight: 500;\n margin-left: 12px;\n user-select: none;\n pointer-events: none;\n"])), function (_ref) {
6431
+ var _templateObject$J, _templateObject2$C, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$l, _templateObject7$i, _templateObject8$g, _templateObject9$d, _templateObject10$b;
6432
+ var Title$1 = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n display: block;\n color: var(--grey-9);\n font-size: 14px;\n font-weight: 500;\n margin-left: 12px;\n user-select: none;\n pointer-events: none;\n"])), function (_ref) {
6405
6433
  var theme = _ref.theme;
6406
6434
  return theme.fontFamily.data;
6407
6435
  });
6408
- var FakeCheckbox = styled__default.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n position: relative;\n width: 18px;\n height: 18px;\n border-radius: 5px;\n border-width: 2px;\n border-style: solid;\n"])));
6409
- var FakeCheckboxInner = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n box-sizing: border-box;\n"])));
6410
- var CheckMarkWrapper = styled__default.div(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n display: block;\n [stroke]{\n stroke: transparent;\n }\n [fill] {\n fill: var(--inverse);\n }\n }\n"])));
6411
- var FakeRadioButton = styled__default.div(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n width: 18px;\n height: 18px;\n user-select: none;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-width: 2px;\n border-style: solid;\n"])));
6436
+ var FakeCheckbox = styled__default.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n position: relative;\n width: 18px;\n height: 18px;\n border-radius: 5px;\n border-width: 2px;\n border-style: solid;\n"])));
6437
+ var FakeCheckboxInner = styled__default.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n box-sizing: border-box;\n"])));
6438
+ var CheckMarkWrapper = styled__default.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n display: block;\n [stroke]{\n stroke: transparent;\n }\n [fill] {\n fill: var(--inverse);\n }\n }\n"])));
6439
+ var FakeRadioButton = styled__default.div(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n width: 18px;\n height: 18px;\n user-select: none;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-width: 2px;\n border-style: solid;\n"])));
6412
6440
  var FakeInnerRadio = styled__default.div(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
6413
- var Container$o = styled__default.div(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n\n ", ";\n"])), function (_ref2) {
6441
+ var Container$o = styled__default.div(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n\n ", ";\n"])), function (_ref2) {
6414
6442
  var styles = _ref2.theme.styles,
6415
6443
  selected = _ref2.selected,
6416
6444
  disabled = _ref2.disabled;
6417
- return styles && styled.css(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n ", ", ", " {\n ", ";\n }\n\n &:hover {\n cursor: pointer;\n ", " {\n color: ", ";\n }\n\n ", " {\n ", ";\n }\n\n ", " {\n border-color: ", ";\n }\n }\n\n ", ";\n\n ", ";\n "])), FakeCheckbox, FakeRadioButton, styles.form.checkbox.unchecked["default"], Title$1, styles.form.checkbox.unchecked.hover.borderColor, FakeCheckbox, styles.form.checkbox.unchecked.hover, FakeRadioButton, styles.form.checkbox.unchecked.hover.borderColor, selected && styled.css(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n ", " {\n color: ", ";\n }\n ", " {\n ", ";\n border: none;\n }\n\n ", " {\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n }\n\n &:hover {\n ", "{\n ", ";\n }\n\n ", " {\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n }\n }\n "])), Title$1, styles.form.checkbox.checked["default"].backgroundColor, FakeCheckbox, styles.form.checkbox.checked["default"], FakeRadioButton, styles.form.checkbox.checked["default"].backgroundColor, FakeInnerRadio, styles.form.checkbox.checked["default"].backgroundColor, FakeCheckbox, styles.form.checkbox.checked.hover, FakeRadioButton, styles.form.checkbox.checked.hover.backgroundColor, FakeInnerRadio, styles.form.checkbox.checked.hover.backgroundColor), disabled && styled.css(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))));
6445
+ return styles && styled.css(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n ", ", ", " {\n ", ";\n }\n\n &:hover {\n cursor: pointer;\n ", " {\n color: ", ";\n }\n\n ", " {\n ", ";\n }\n\n ", " {\n border-color: ", ";\n }\n }\n\n ", ";\n\n ", ";\n "])), FakeCheckbox, FakeRadioButton, styles.form.checkbox.unchecked["default"], Title$1, styles.form.checkbox.unchecked.hover.borderColor, FakeCheckbox, styles.form.checkbox.unchecked.hover, FakeRadioButton, styles.form.checkbox.unchecked.hover.borderColor, selected && styled.css(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n ", " {\n color: ", ";\n }\n ", " {\n ", ";\n border: none;\n }\n\n ", " {\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n }\n\n &:hover {\n ", "{\n ", ";\n }\n\n ", " {\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n }\n }\n "])), Title$1, styles.form.checkbox.checked["default"].backgroundColor, FakeCheckbox, styles.form.checkbox.checked["default"], FakeRadioButton, styles.form.checkbox.checked["default"].backgroundColor, FakeInnerRadio, styles.form.checkbox.checked["default"].backgroundColor, FakeCheckbox, styles.form.checkbox.checked.hover, FakeRadioButton, styles.form.checkbox.checked.hover.backgroundColor, FakeInnerRadio, styles.form.checkbox.checked.hover.backgroundColor), disabled && styled.css(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))));
6418
6446
  });
6419
6447
 
6420
6448
  var FilterOption = function FilterOption(_ref3) {
@@ -6444,22 +6472,22 @@ var FilterOption = function FilterOption(_ref3) {
6444
6472
 
6445
6473
  var _excluded$q = ["color", "hasBorder", "iconSize", "disabled", "noBackground", "hasCrossButton", "onCrossClick", "width"];
6446
6474
 
6447
- var _templateObject$I, _templateObject2$C, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$m, _templateObject7$l, _templateObject8$i;
6448
- var Container$p = styled__default.div(_templateObject$I || (_templateObject$I = _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) {
6475
+ var _templateObject$K, _templateObject2$D, _templateObject3$x, _templateObject4$t, _templateObject5$q, _templateObject6$m, _templateObject7$j, _templateObject8$h;
6476
+ var Container$p = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", " {\n flex-shrink: 0;\n display: flex;\n }\n\n height: var(--common-height);\n padding: 0 0 0 8px;\n align-items: center;\n display: flex;\n border-radius: 3px;\n"])), function (_ref) {
6449
6477
  var styles = _ref.theme.styles,
6450
6478
  theme = _ref.theme,
6451
6479
  hasBorder = _ref.hasBorder,
6452
6480
  disabled = _ref.disabled,
6453
6481
  noBackground = _ref.noBackground,
6454
6482
  width = _ref.width;
6455
- return styled.css(_templateObject2$C || (_templateObject2$C = _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$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n border: ", ";\n box-shadow: ", ";\n "])), styles.filters.searchInput["default"].border, styles.filters.searchInput["default"].boxShadow), disabled && styled.css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && styled.css(_templateObject5$p || (_templateObject5$p = _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);
6483
+ return styled.css(_templateObject2$D || (_templateObject2$D = _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$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n border: ", ";\n box-shadow: ", ";\n "])), styles.filters.searchInput["default"].border, styles.filters.searchInput["default"].boxShadow), disabled && styled.css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && styled.css(_templateObject5$q || (_templateObject5$q = _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);
6456
6484
  }, IconWrapper);
6457
6485
  var CrossButton = styled__default.button(_templateObject6$m || (_templateObject6$m = _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);
6458
- var StyledInput$2 = styled__default.input(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n ", ";\n\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"])), removeAutoFillStyle, function (_ref2) {
6486
+ var StyledInput$2 = styled__default.input(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n ", ";\n\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"])), removeAutoFillStyle, function (_ref2) {
6459
6487
  var typography = _ref2.theme.typography,
6460
6488
  theme = _ref2.theme,
6461
6489
  color = _ref2.color;
6462
- return styled.css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n\n &::placeholder {\n ", ";\n color: var(--", ");\n font-size: 12px;\n }\n "])), theme.fontFamily.ui, typography.filters.searchInput.value, typography.filters.searchInput.placeholder, color);
6490
+ return styled.css(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n\n &::placeholder {\n ", ";\n color: var(--", ");\n font-size: 12px;\n }\n "])), theme.fontFamily.ui, typography.filters.searchInput.value, typography.filters.searchInput.placeholder, color);
6463
6491
  });
6464
6492
 
6465
6493
  var BasicSearchInput = function BasicSearchInput(_ref3) {
@@ -6519,18 +6547,18 @@ var isFilterItem = function isFilterItem(item) {
6519
6547
  return (typeof item.value === 'number' || typeof item.value === 'string') && typeof item.text === 'string';
6520
6548
  };
6521
6549
 
6522
- var _excluded$r = ["buttonIcon", "buttonText", "disabled", "minWidth", "minHeight", "isSortAscending", "children", "onToggleOpenCallback", "onCloseCallback"];
6550
+ var _excluded$r = ["buttonIcon", "buttonText", "disabled", "minWidth", "minHeight", "isSortAscending", "design", "children", "onToggleOpenCallback", "onCloseCallback"];
6523
6551
 
6524
- var _templateObject$J, _templateObject2$D, _templateObject3$x, _templateObject4$t;
6525
- var Container$q = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
6526
- var ButtonWrapper = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
6527
- var ContentBox = styled__default.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n z-index: 100;\n min-width: ", "px;\n position: absolute;\n\n ", ";\n"])), function (_ref) {
6552
+ var _templateObject$L, _templateObject2$E, _templateObject3$y, _templateObject4$u;
6553
+ var Container$q = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
6554
+ var ButtonWrapper = styled__default.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
6555
+ var ContentBox = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n z-index: 100;\n min-width: ", "px;\n position: absolute;\n\n ", ";\n"])), function (_ref) {
6528
6556
  var minWidth = _ref.minWidth;
6529
6557
  return minWidth;
6530
6558
  }, function (_ref2) {
6531
6559
  var openState = _ref2.openState,
6532
6560
  disabled = _ref2.disabled;
6533
- return openState && styled.css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n display: ", ";\n display: ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && "\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n ", openState.position === 'bottom-left' && "\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n ", openState.position === 'top-left' && "\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n ", openState.position === 'top-right' && "\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n ");
6561
+ return openState && styled.css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n display: ", ";\n display: ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && "\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n ", openState.position === 'bottom-left' && "\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n ", openState.position === 'top-left' && "\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n ", openState.position === 'top-right' && "\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n ");
6534
6562
  });
6535
6563
 
6536
6564
  var getDropPosition = function getDropPosition(buttonRect, minWidth, minHeight) {
@@ -6564,6 +6592,8 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
6564
6592
  _ref3$minHeight = _ref3.minHeight,
6565
6593
  minHeight = _ref3$minHeight === void 0 ? 190 : _ref3$minHeight,
6566
6594
  isSortAscending = _ref3.isSortAscending,
6595
+ _ref3$design = _ref3.design,
6596
+ design = _ref3$design === void 0 ? 'default' : _ref3$design,
6567
6597
  children = _ref3.children,
6568
6598
  _ref3$onToggleOpenCal = _ref3.onToggleOpenCallback,
6569
6599
  onToggleOpenCallback = _ref3$onToggleOpenCal === void 0 ? function () {} : _ref3$onToggleOpenCal,
@@ -6626,7 +6656,8 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
6626
6656
  }
6627
6657
  }, {
6628
6658
  disabled: disabled,
6629
- isSortAscending: isSortAscending
6659
+ isSortAscending: isSortAscending,
6660
+ design: design
6630
6661
  }, {
6631
6662
  hasFlipArrow: true
6632
6663
  }), buttonText)), React__default.createElement(ContentBox, Object.assign({}, {
@@ -6636,9 +6667,9 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
6636
6667
  }), children));
6637
6668
  };
6638
6669
 
6639
- var _templateObject$K, _templateObject2$E;
6640
- var Container$r = styled__default.div(_templateObject$K || (_templateObject$K = _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 var(--grey-5);\n"])));
6641
- var LoadingText = styled__default.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-11);\n font-size: 12px;\n font-style: italic;\n padding: 15px 0;\n"])), fontFamily.data);
6670
+ var _templateObject$M, _templateObject2$F;
6671
+ var Container$r = styled__default.div(_templateObject$M || (_templateObject$M = _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 var(--grey-5);\n"])));
6672
+ var LoadingText = styled__default.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-11);\n font-size: 12px;\n font-style: italic;\n padding: 15px 0;\n"])), fontFamily.data);
6642
6673
 
6643
6674
  var LoadingBox = function LoadingBox(_ref) {
6644
6675
  var loadingText = _ref.loadingText;
@@ -6648,22 +6679,22 @@ var LoadingBox = function LoadingBox(_ref) {
6648
6679
  }), React__default.createElement(LoadingText, null, loadingText));
6649
6680
  };
6650
6681
 
6651
- var _excluded$s = ["buttonIcon", "buttonText", "list", "selected", "disabled", "isLoading", "loadingText", "optionType", "hasOptionsFilter", "searchPlaceholder", "maxDisplayedItems", "searchResultText", "emptyResultText", "onSelect"];
6682
+ var _excluded$s = ["buttonIcon", "buttonText", "list", "selected", "disabled", "isLoading", "loadingText", "optionType", "hasOptionsFilter", "searchPlaceholder", "maxDisplayedItems", "searchResultText", "emptyResultText", "design", "onSelect"];
6652
6683
 
6653
- var _templateObject$L, _templateObject2$F, _templateObject3$y, _templateObject4$u, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$j, _templateObject9$f, _templateObject10$d;
6654
- var Container$s = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
6655
- var TopLine$1 = styled__default.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-7);\n height: 3px;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n"])));
6656
- var InnerBox = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 4px 9px 0 var(--grey-a2);\n border-right: solid 1px var(--grey-7);\n border-bottom: solid 1px var(--grey-7);\n border-left: solid 1px var(--grey-7);\n background-color: var(--grey-2);\n"])));
6657
- var StyledFilterOption = styled__default(FilterOption)(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
6658
- var OptionList = styled__default.div(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n max-height: ", ";\n min-height: 40px;\n position: relative;\n overflow-y: auto;\n margin-right: 2px;\n\n ", " {\n height: 35px;\n padding-left: 10px;\n }\n"])), function (_ref) {
6684
+ var _templateObject$N, _templateObject2$G, _templateObject3$z, _templateObject4$v, _templateObject5$r, _templateObject6$n, _templateObject7$k, _templateObject8$i, _templateObject9$e, _templateObject10$c;
6685
+ var Container$s = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
6686
+ var TopLine$1 = styled__default.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-7);\n height: 3px;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n"])));
6687
+ var InnerBox = styled__default.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 4px 9px 0 var(--grey-a2);\n border-right: solid 1px var(--grey-7);\n border-bottom: solid 1px var(--grey-7);\n border-left: solid 1px var(--grey-7);\n background-color: var(--grey-2);\n"])));
6688
+ var StyledFilterOption = styled__default(FilterOption)(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
6689
+ var OptionList = styled__default.div(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n max-height: ", ";\n min-height: 40px;\n position: relative;\n overflow-y: auto;\n margin-right: 2px;\n\n ", " {\n height: 35px;\n padding-left: 10px;\n }\n"])), function (_ref) {
6659
6690
  var moreItem = _ref.moreItem;
6660
6691
  return moreItem ? '168px' : '175px';
6661
6692
  }, StyledFilterOption);
6662
6693
  var ResultsContainer = styled__default.div(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--grey-5);\n padding-bottom: 8px;\n"])));
6663
- var ResultCounter = styled__default.div(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n opacity: 0.75;\n font-family: ", ";\n color: var(--grey-10);\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 var(--grey-5);\n"])), fontFamily.data);
6664
- var SearchWrapper = styled__default.div(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n height: 41px;\n display: flex;\n align-items: center;\n"])));
6665
- var EmptyResultText = styled__default.div(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n display: block;\n color: var(--grey-10);\n margin-left: 12px;\n user-select: none;\n pointer-events: none;\n height: 35px;\n display: flex;\n align-items: center;\n font-size: 12px;\n"])));
6666
- var Gradient = styled__default.div(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 1px;\n height: 15px;\n background-image: linear-gradient(to bottom, transparent, var(--grey-3));\n width: 99%;\n left: 50%;\n transform: translateX(-50%);\n pointer-events: none;\n"])));
6694
+ var ResultCounter = styled__default.div(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n opacity: 0.75;\n font-family: ", ";\n color: var(--grey-10);\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 var(--grey-5);\n"])), fontFamily.data);
6695
+ var SearchWrapper = styled__default.div(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n height: 41px;\n display: flex;\n align-items: center;\n"])));
6696
+ var EmptyResultText = styled__default.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n display: block;\n color: var(--grey-10);\n margin-left: 12px;\n user-select: none;\n pointer-events: none;\n height: 35px;\n display: flex;\n align-items: center;\n font-size: 12px;\n"])));
6697
+ var Gradient = styled__default.div(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 1px;\n height: 15px;\n background-image: linear-gradient(to bottom, transparent, var(--grey-3));\n width: 99%;\n left: 50%;\n transform: translateX(-50%);\n pointer-events: none;\n"])));
6667
6698
 
6668
6699
  var isValueSelected = function isValueSelected(item, selected) {
6669
6700
  var isItemSelected = false;
@@ -6809,6 +6840,8 @@ var FilterDropdown = function FilterDropdown(_ref2) {
6809
6840
  _ref2$searchResultTex = _ref2.searchResultText,
6810
6841
  searchResultText = _ref2$searchResultTex === void 0 ? 'Showing [VISIBLE] of [TOTAL]' : _ref2$searchResultTex,
6811
6842
  emptyResultText = _ref2.emptyResultText,
6843
+ _ref2$design = _ref2.design,
6844
+ design = _ref2$design === void 0 ? 'default' : _ref2$design,
6812
6845
  _ref2$onSelect = _ref2.onSelect,
6813
6846
  onSelect = _ref2$onSelect === void 0 ? function () {} : _ref2$onSelect,
6814
6847
  props = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
@@ -6861,7 +6894,8 @@ var FilterDropdown = function FilterDropdown(_ref2) {
6861
6894
  return React__default.createElement(Container$s, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({}, {
6862
6895
  buttonIcon: buttonIcon,
6863
6896
  buttonText: buttonText,
6864
- disabled: disabled
6897
+ disabled: disabled,
6898
+ design: design
6865
6899
  }, {
6866
6900
  onCloseCallback: handleClose,
6867
6901
  onToggleOpenCallback: handleToggleOpen
@@ -6895,18 +6929,18 @@ var FilterDropdown = function FilterDropdown(_ref2) {
6895
6929
  }) : React__default.createElement(EmptyResultText, null, emptyResultText)), list.length > 5 && React__default.createElement(Gradient, null)))));
6896
6930
  };
6897
6931
 
6898
- var _excluded$t = ["buttonText", "disabled", "list", "isLoading", "loadingText", "isSortAscending", "selected", "descendingText", "ascendingText", "onSelect"];
6932
+ var _excluded$t = ["buttonText", "disabled", "list", "isLoading", "loadingText", "isSortAscending", "selected", "descendingText", "ascendingText", "design", "onSelect"];
6899
6933
 
6900
- var _templateObject$M, _templateObject2$G, _templateObject3$z, _templateObject4$v, _templateObject5$r, _templateObject6$o, _templateObject7$n, _templateObject8$k, _templateObject9$g;
6901
- var Container$t = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
6902
- var TopLine$2 = styled__default.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-7);\n height: 3px;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n"])));
6903
- var InnerBox$1 = styled__default.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border-top: unset;\n box-shadow: 0px 5px 25px 0px var(--primary-a1);\n background-color: var(--grey-1);\n border-color: var(--grey-6);\n border: var(--grey-6) 1px solid;\n"])));
6904
- var StyledFilterOption$1 = styled__default(FilterOption)(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
6905
- var OptionList$1 = styled__default.div(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n ", " {\n height: 35px;\n padding-left: 10px;\n }\n"])), StyledFilterOption$1);
6934
+ var _templateObject$O, _templateObject2$H, _templateObject3$A, _templateObject4$w, _templateObject5$s, _templateObject6$o, _templateObject7$l, _templateObject8$j, _templateObject9$f;
6935
+ var Container$t = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
6936
+ var TopLine$2 = styled__default.div(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-7);\n height: 3px;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n"])));
6937
+ var InnerBox$1 = styled__default.div(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border-top: unset;\n box-shadow: 0px 5px 25px 0px var(--primary-a1);\n background-color: var(--grey-1);\n border-color: var(--grey-6);\n border: var(--grey-6) 1px solid;\n"])));
6938
+ var StyledFilterOption$1 = styled__default(FilterOption)(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
6939
+ var OptionList$1 = styled__default.div(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n ", " {\n height: 35px;\n padding-left: 10px;\n }\n"])), StyledFilterOption$1);
6906
6940
  var OrderGroup = styled__default.div(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n display: flex;\n border-top: var(--grey-6) 1px solid;\n margin-top: 5px;\n button:first-child {\n border-right: var(--grey-6) 1px solid;\n }\n"])));
6907
- var OrderButton = styled__default.button(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n ", ";\n width: 100%;\n display: flex;\n align-items: center;\n font-family: ", ";\n color: var(--grey-12);\n font-size: 14px;\n height: 35px;\n ", "\n"])), resetButtonStyles, fontFamily.data, function (_ref) {
6941
+ var OrderButton = styled__default.button(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n ", ";\n width: 100%;\n display: flex;\n align-items: center;\n font-family: ", ";\n color: var(--grey-12);\n font-size: 14px;\n height: 35px;\n ", "\n"])), resetButtonStyles, fontFamily.data, function (_ref) {
6908
6942
  var isSelected = _ref.isSelected;
6909
- return styled.css(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n\n ", " {\n margin-left: 10px;\n display: flex;\n align-items: center;\n [stroke]{\n stroke: var(--dimmed);\n }\n }\n\n &:hover {\n ", " {\n [stroke]{\n stroke: var(--primary-8);\n }\n }\n }\n\n ", "\n "])), IconWrapper, IconWrapper, isSelected && styled.css(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n ", " {\n [stroke]{\n stroke: var(--primary-8);\n }\n }\n "])), IconWrapper));
6943
+ return styled.css(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n\n ", " {\n margin-left: 10px;\n display: flex;\n align-items: center;\n [stroke]{\n stroke: var(--dimmed);\n }\n }\n\n &:hover {\n ", " {\n [stroke]{\n stroke: var(--primary-8);\n }\n }\n }\n\n ", "\n "])), IconWrapper, IconWrapper, isSelected && styled.css(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n ", " {\n [stroke]{\n stroke: var(--primary-8);\n }\n }\n "])), IconWrapper));
6910
6944
  });
6911
6945
 
6912
6946
  var SortDropdown = function SortDropdown(_ref2) {
@@ -6922,6 +6956,8 @@ var SortDropdown = function SortDropdown(_ref2) {
6922
6956
  descendingText = _ref2$descendingText === void 0 ? 'Descending' : _ref2$descendingText,
6923
6957
  _ref2$ascendingText = _ref2.ascendingText,
6924
6958
  ascendingText = _ref2$ascendingText === void 0 ? 'Ascending' : _ref2$ascendingText,
6959
+ _ref2$design = _ref2.design,
6960
+ design = _ref2$design === void 0 ? 'basic' : _ref2$design,
6925
6961
  onSelect = _ref2.onSelect,
6926
6962
  props = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
6927
6963
 
@@ -6942,7 +6978,8 @@ var SortDropdown = function SortDropdown(_ref2) {
6942
6978
  return React__default.createElement(Container$t, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({}, {
6943
6979
  buttonText: buttonText,
6944
6980
  disabled: disabled,
6945
- isSortAscending: isSortAscending
6981
+ isSortAscending: isSortAscending,
6982
+ design: design
6946
6983
  }, {
6947
6984
  buttonIcon: 'FilterSorting'
6948
6985
  }), React__default.createElement(TopLine$2, null), React__default.createElement(InnerBox$1, null, isLoading || list.length === 0 ? React__default.createElement(LoadingBox, Object.assign({}, {
@@ -6984,27 +7021,27 @@ var SortDropdown = function SortDropdown(_ref2) {
6984
7021
  }))))));
6985
7022
  };
6986
7023
 
6987
- var _templateObject$N, _templateObject2$H, _templateObject3$A, _templateObject4$w, _templateObject5$s, _templateObject6$p, _templateObject7$o, _templateObject8$l, _templateObject9$h, _templateObject10$e, _templateObject11$8, _templateObject12$6, _templateObject13$5, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$2, _templateObject23$1;
6988
- var Container$u = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
6989
- var ContextActionBaseCSS = styled.css(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n border: none;\n background: none;\n display: flex;\n justify-content:left;\n align-items:center;\n flex-wrap: wrap;\n cursor: pointer;\n outline: none;\n text-decoration: none;\n padding: 0;\n"])));
6990
- var ContextIcon = styled__default.div(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n ", ";\n width: 30px;\n height: 30px;\n border-radius: 3px;\n display:flex;\n justify-content:center;\n align-items:center;\n svg {\n display: block;\n }\n"])), function (_ref) {
7024
+ var _templateObject$P, _templateObject2$I, _templateObject3$B, _templateObject4$x, _templateObject5$t, _templateObject6$p, _templateObject7$m, _templateObject8$k, _templateObject9$g, _templateObject10$d, _templateObject11$8, _templateObject12$6, _templateObject13$5, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$2, _templateObject23$1;
7025
+ var Container$u = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
7026
+ var ContextActionBaseCSS = styled.css(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n border: none;\n background: none;\n display: flex;\n justify-content:left;\n align-items:center;\n flex-wrap: wrap;\n cursor: pointer;\n outline: none;\n text-decoration: none;\n padding: 0;\n"])));
7027
+ var ContextIcon = styled__default.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n ", ";\n width: 30px;\n height: 30px;\n border-radius: 3px;\n display:flex;\n justify-content:center;\n align-items:center;\n svg {\n display: block;\n }\n"])), function (_ref) {
6991
7028
  var theme = _ref.theme;
6992
- return styled.css(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-2);\n transition: background ", " ", ";\n "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
7029
+ return styled.css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-2);\n transition: background ", " ", ";\n "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
6993
7030
  });
6994
- var ContextActionButton = styled__default.button(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n ", "\n ", "{\n cursor: pointer;\n }\n &:hover {\n div > svg > g {\n stroke: var(--white-1);\n }\n }\n &:hover ", "{\n background-color: var(--primary-8);\n }\n }\n ", "\n ", "\n"])), ContextActionBaseCSS, ContextIcon, ContextIcon, function (_ref2) {
7031
+ var ContextActionButton = styled__default.button(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n ", "\n ", "{\n cursor: pointer;\n }\n &:hover {\n div > svg > g {\n stroke: var(--white-1);\n }\n }\n &:hover ", "{\n background-color: var(--primary-8);\n }\n }\n ", "\n ", "\n"])), ContextActionBaseCSS, ContextIcon, ContextIcon, function (_ref2) {
6995
7032
  var isActive = _ref2.isActive;
6996
7033
  return isActive && styled.css(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n ", " {\n background-color: var(--primary-8);\n [stroke]{\n stroke: var(--white-1);\n }\n }\n &:hover ", "{\n background-color: var(--primary-7);\n cursor: pointer;\n }\n "])), ContextIcon, ContextIcon);
6997
7034
  }, function (_ref3) {
6998
7035
  var isInnerContextButton = _ref3.isInnerContextButton;
6999
- return isInnerContextButton && styled.css(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n margin-right: 5px;\n "])));
7036
+ return isInnerContextButton && styled.css(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n margin-right: 5px;\n "])));
7000
7037
  });
7001
- var ContentBox$1 = styled__default.div(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n z-index: 100;\n min-width: ", "px;\n position: absolute;\n ", ";\n"])), function (_ref4) {
7038
+ var ContentBox$1 = styled__default.div(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n z-index: 100;\n min-width: ", "px;\n position: absolute;\n ", ";\n"])), function (_ref4) {
7002
7039
  var minWidth = _ref4.minWidth;
7003
7040
  return minWidth;
7004
7041
  }, function (_ref5) {
7005
7042
  var openState = _ref5.openState,
7006
7043
  disabled = _ref5.disabled;
7007
- return openState && styled.css(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n display: ", ";\n display: ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && styled.css(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'bottom-left' && styled.css(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'top-left' && styled.css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))), openState.position === 'top-right' && styled.css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))));
7044
+ return openState && styled.css(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n display: ", ";\n display: ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && styled.css(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'bottom-left' && styled.css(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'top-left' && styled.css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))), openState.position === 'top-right' && styled.css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))));
7008
7045
  });
7009
7046
  var ButtonWrapper$1 = styled__default.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
7010
7047
  var TopLine$3 = styled__default.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-7);\n height: 3px;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n"])));
@@ -7172,10 +7209,10 @@ var FilterLayout = function FilterLayout(_ref6) {
7172
7209
 
7173
7210
  var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "onCloseCallback", "onUpdateCallback", "onToggleCallback"];
7174
7211
 
7175
- var _templateObject$O;
7212
+ var _templateObject$Q;
7176
7213
  var MIN_WIDTH = 470;
7177
7214
  var MIN_HEIGHT = 360;
7178
- var Container$v = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose([""])));
7215
+ var Container$v = styled__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose([""])));
7179
7216
 
7180
7217
  var DropdownDatePicker = function DropdownDatePicker(_ref) {
7181
7218
  var buttonIcon = _ref.buttonIcon,
@@ -7269,17 +7306,17 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
7269
7306
 
7270
7307
  var _excluded$v = ["hasShowMore", "searchFilters", "datePickerFilters", "dropdownFilters", "showMoreText", "showLessText"];
7271
7308
 
7272
- var _templateObject$P, _templateObject2$I, _templateObject3$B, _templateObject4$x, _templateObject5$t, _templateObject6$q, _templateObject7$p, _templateObject8$m;
7273
- var fadeInAnimation = styled.keyframes(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n 0% {\n width: 50%;\n opacity: .5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n width: 100%;\n }\n"])));
7274
- var SearchInputWrapper = styled__default.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n flex: 1 1 200px;\n max-width: 320px;\n"])));
7275
- var CloseSearchInputWrapper = styled__default.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
7309
+ var _templateObject$R, _templateObject2$J, _templateObject3$C, _templateObject4$y, _templateObject5$u, _templateObject6$q, _templateObject7$n, _templateObject8$l;
7310
+ var fadeInAnimation = styled.keyframes(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n 0% {\n width: 50%;\n opacity: .5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n width: 100%;\n }\n"])));
7311
+ var SearchInputWrapper = styled__default.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n flex: 1 1 200px;\n max-width: 320px;\n"])));
7312
+ var CloseSearchInputWrapper = styled__default.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
7276
7313
  var theme = _ref.theme;
7277
- return theme && styled.css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n animation: ", " ", " ", ";\n "])), fadeInAnimation, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
7314
+ return theme && styled.css(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n animation: ", " ", " ", ";\n "])), fadeInAnimation, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
7278
7315
  });
7279
- var StyledFilterButton = styled__default(FilterButton)(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose([""])));
7316
+ var StyledFilterButton = styled__default(FilterButton)(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose([""])));
7280
7317
  var StyledDropdown = styled__default(FilterDropdown)(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose([""])));
7281
- var StyledDropdownDatePicker = styled__default(DropdownDatePicker)(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose([""])));
7282
- var Container$w = styled__default.div(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n ", ", ", ", ", ", ", " {\n margin: 0 3px 10px 3px;\n }\n"])), SearchInputWrapper, StyledDropdown, StyledFilterButton, StyledDropdownDatePicker);
7318
+ var StyledDropdownDatePicker = styled__default(DropdownDatePicker)(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose([""])));
7319
+ var Container$w = styled__default.div(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n ", ", ", ", ", ", ", " {\n margin: 0 3px 10px 3px;\n }\n"])), SearchInputWrapper, StyledDropdown, StyledFilterButton, StyledDropdownDatePicker);
7283
7320
 
7284
7321
  var renderDropdowns = function renderDropdowns(dropdownFilters, showMoreDropdowns, hasShowMore) {
7285
7322
  return dropdownFilters.map(function (dropdown) {
@@ -7395,17 +7432,17 @@ var FilterInputs = function FilterInputs(_ref2) {
7395
7432
 
7396
7433
  var _excluded$w = ["labelLists", "totalResults", "resultTextTemplate", "clearText", "resultsDateFormat", "onRemoveFilter", "onClearAll"];
7397
7434
 
7398
- var _templateObject$Q, _templateObject2$J, _templateObject3$C, _templateObject4$y, _templateObject5$u, _templateObject6$r, _templateObject7$q;
7399
- var Container$x = styled__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 12px;\n min-height: 22px;\n"])));
7400
- var ResultsTextWrapper = styled__default.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-9);\n"])), fontFamily.ui);
7401
- var FilterLabel = styled__default.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n height: 18px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n padding: 0 11px 0 8px;\n margin-left: 3px;\n color: var(--grey-9);\n font-family: ", ";\n\n ", " {\n display: flex;\n align-items: center;\n }\n border-right: 1px solid var(--grey-8);\n"])), fontFamily.data, IconWrapper);
7402
- var FilterLabelText = styled__default.div(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n padding: ", ";\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 300px;\n"])), function (_ref) {
7435
+ var _templateObject$S, _templateObject2$K, _templateObject3$D, _templateObject4$z, _templateObject5$v, _templateObject6$r, _templateObject7$o;
7436
+ var Container$x = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 12px;\n min-height: 22px;\n"])));
7437
+ var ResultsTextWrapper = styled__default.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-9);\n"])), fontFamily.ui);
7438
+ var FilterLabel = styled__default.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n height: 18px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n padding: 0 11px 0 8px;\n margin-left: 3px;\n color: var(--grey-9);\n font-family: ", ";\n\n ", " {\n display: flex;\n align-items: center;\n }\n border-right: 1px solid var(--grey-8);\n"])), fontFamily.data, IconWrapper);
7439
+ var FilterLabelText = styled__default.div(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n padding: ", ";\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 300px;\n"])), function (_ref) {
7403
7440
  var hasIcon = _ref.hasIcon;
7404
7441
  return hasIcon ? '0 15px 0 9px' : '0 15px 0 0';
7405
7442
  });
7406
- var ClearTextButton = styled__default.button(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: ", ";\n color: var(--grey-10);\n margin-left: 11px;\n font-size: 12px;\n"])), resetButtonStyles, fontFamily.data);
7443
+ var ClearTextButton = styled__default.button(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: ", ";\n color: var(--grey-10);\n margin-left: 11px;\n font-size: 12px;\n"])), resetButtonStyles, fontFamily.data);
7407
7444
  var RemoveButton = styled__default.button(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n ", ";\n"])), resetButtonStyles);
7408
- var FilterLabelsGroup = styled__default.div(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n margin-left: 10px;\n"])));
7445
+ var FilterLabelsGroup = styled__default.div(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n margin-left: 10px;\n"])));
7409
7446
 
7410
7447
  var validWithMidnight = function validWithMidnight(endDate, resultsDateFormat) {
7411
7448
  if (endDate.getHours() === 23 && endDate.getSeconds() > 0) {
@@ -7505,10 +7542,10 @@ var FiltersResults = function FiltersResults(_ref2) {
7505
7542
 
7506
7543
  var _excluded$x = ["filtersTitle", "hasShowMore", "searchersConfig", "dropdownsConfig", "datePickersConfig", "showMoreText", "showLessText", "resultTextTemplate", "clearText", "totalResults", "singleFilter", "resultsDateFormat", "onChangeCallback"];
7507
7544
 
7508
- var _templateObject$R, _templateObject2$K, _templateObject3$D;
7509
- var Title$2 = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-10);\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 17px;\n"])), fontFamily.ui);
7510
- var StyledFilterResults = styled__default(FiltersResults)(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose([""])));
7511
- var Container$y = styled__default.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n ", " {\n margin-top: 29px;\n min-height: 19px;\n }\n"])), StyledFilterResults);
7545
+ var _templateObject$T, _templateObject2$L, _templateObject3$E;
7546
+ var Title$2 = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-10);\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 17px;\n"])), fontFamily.ui);
7547
+ var StyledFilterResults = styled__default(FiltersResults)(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose([""])));
7548
+ var Container$y = styled__default.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n ", " {\n margin-top: 29px;\n min-height: 19px;\n }\n"])), StyledFilterResults);
7512
7549
 
7513
7550
  var getDisableValue = function getDisableValue(filtersValues, singleFilter, filter) {
7514
7551
  var disabled = false;
@@ -7936,31 +7973,25 @@ var FilterBar = function FilterBar(_ref4) {
7936
7973
  })));
7937
7974
  };
7938
7975
 
7939
- var _templateObject$S, _templateObject2$L, _templateObject3$E, _templateObject4$z, _templateObject5$v;
7940
- var Container$z = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n"])));
7941
- var StatusCounter = styled__default.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 14px;;\n top: -12px;\n border-radius: 4px;\n height: 14px;\n min-width: 14px;\n padding: 2px;\n font-size: 10px;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n ", "\n background-color: ", ";\n"])), function (_ref) {
7942
- var animation = _ref.theme.animation;
7943
- return styled.css(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n transition: background-color ", " ", ";\n "])), animation.speed.slow, animation.easing.primary.easeInOut);
7944
- }, function (_ref2) {
7945
- var theme = _ref2.theme,
7946
- color = _ref2.color;
7976
+ var _templateObject$U, _templateObject2$M, _templateObject3$F;
7977
+ var Container$z = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n"])));
7978
+ var StatusCounter = styled__default.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 14px;;\n top: -12px;\n border-radius: 4px;\n height: 14px;\n min-width: 14px;\n padding: 2px;\n font-size: 10px;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color var(--speed-slow) var(--easing-primary-in-out);\n background-color: ", ";\n"])), function (_ref) {
7979
+ var theme = _ref.theme,
7980
+ color = _ref.color;
7947
7981
  return color ? theme.colors.status[color] : 'var(--grey-5)';
7948
7982
  });
7949
- var StatusDot = styled__default.div(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border: solid 2px var(--grey-1);\n border-radius: 50%;\n position: absolute;\n top: -6px;\n right: -9px;\n ", "\n background-color: ", ";\n"])), function (_ref3) {
7950
- var animation = _ref3.theme.animation;
7951
- return styled.css(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n transition: background-color ", " ", ";\n "])), animation.speed.slow, animation.easing.primary.easeInOut);
7952
- }, function (_ref4) {
7953
- var theme = _ref4.theme,
7954
- color = _ref4.color;
7983
+ var StatusDot = styled__default.div(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n width: 6px;\n height: 6px;\n border-radius: 50%;\n position: absolute;\n top: -6px;\n right: -6px;\n transition: background-color var(--speed-slow) var(--easing-primary-in-out);\n background-color: ", ";\n"])), function (_ref2) {
7984
+ var theme = _ref2.theme,
7985
+ color = _ref2.color;
7955
7986
  return color ? theme.colors.status[color] : 'var(--grey-5)';
7956
7987
  });
7957
7988
 
7958
- var StatusIcon = function StatusIcon(_ref5) {
7959
- var icon = _ref5.icon,
7960
- status = _ref5.status,
7961
- counter = _ref5.counter,
7962
- _ref5$maxCounter = _ref5.maxCounter,
7963
- maxCounter = _ref5$maxCounter === void 0 ? 999 : _ref5$maxCounter;
7989
+ var StatusIcon = function StatusIcon(_ref3) {
7990
+ var icon = _ref3.icon,
7991
+ status = _ref3.status,
7992
+ counter = _ref3.counter,
7993
+ _ref3$maxCounter = _ref3.maxCounter,
7994
+ maxCounter = _ref3$maxCounter === void 0 ? 999 : _ref3$maxCounter;
7964
7995
  return React__default.createElement(Container$z, null, status && counter === undefined ? React__default.createElement(StatusDot, {
7965
7996
  color: status
7966
7997
  }) : counter === undefined ? null : React__default.createElement(StatusCounter, {
@@ -7972,10 +8003,10 @@ var StatusIcon = function StatusIcon(_ref5) {
7972
8003
  }));
7973
8004
  };
7974
8005
 
7975
- var _templateObject$T, _templateObject2$M, _templateObject3$F, _templateObject4$A, _templateObject5$w, _templateObject6$s, _templateObject7$r, _templateObject8$n, _templateObject9$i, _templateObject10$f, _templateObject11$9, _templateObject12$7, _templateObject13$6, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3;
7976
- var HandleTouchReactionKeyframes = styled.keyframes(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n 0% {\n transform: scale(1);\n }\n\n 75% {\n transform: scale(3);\n }\n\n 100% {\n transform: scale(1.75);\n }\n"])));
7977
- var HandleMouseReactionKeyframes = styled.keyframes(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n 0% {\n transform: scale(1);\n }\n\n 75% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0.5);\n }\n"])));
7978
- var HandleBase = styled__default.svg(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n overflow: visible;\n cursor: pointer;\n fill: ", ";\n appearance: none;\n"])), function (_ref) {
8006
+ var _templateObject$V, _templateObject2$N, _templateObject3$G, _templateObject4$A, _templateObject5$w, _templateObject6$s, _templateObject7$p, _templateObject8$m, _templateObject9$h, _templateObject10$e, _templateObject11$9, _templateObject12$7, _templateObject13$6, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3;
8007
+ var HandleTouchReactionKeyframes = styled.keyframes(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n 0% {\n transform: scale(1);\n }\n\n 75% {\n transform: scale(3);\n }\n\n 100% {\n transform: scale(1.75);\n }\n"])));
8008
+ var HandleMouseReactionKeyframes = styled.keyframes(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n 0% {\n transform: scale(1);\n }\n\n 75% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0.5);\n }\n"])));
8009
+ var HandleBase = styled__default.svg(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n overflow: visible;\n cursor: pointer;\n fill: ", ";\n appearance: none;\n"])), function (_ref) {
7979
8010
  var theme = _ref.theme,
7980
8011
  styling = _ref.styling;
7981
8012
  return theme.custom.lines[styling].handleBase.fill;
@@ -7990,19 +8021,19 @@ var HandleRingLayer = styled__default.circle(_templateObject4$A || (_templateObj
7990
8021
  var HandleReactiveGroup = styled__default.g(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose(["\n opacity: 0.65;\n cursor: pointer;\n transform: scale(1);\n\n ", "\n\n ", "\n\n"])), function (props) {
7991
8022
  return props.touchDragging && styled.css(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n animation: ", " 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n "])), HandleTouchReactionKeyframes);
7992
8023
  }, function (props) {
7993
- return props.mouseDragging && styled.css(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n animation: ", " 0.25s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n "])), HandleMouseReactionKeyframes);
8024
+ return props.mouseDragging && styled.css(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n animation: ", " 0.25s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n "])), HandleMouseReactionKeyframes);
7994
8025
  });
7995
- var HandleReactiveFill = styled__default.circle(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n mix-blend-mode: multiply;\n fill: ", ";\n stroke: none;\n"])), function (_ref3) {
8026
+ var HandleReactiveFill = styled__default.circle(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n mix-blend-mode: multiply;\n fill: ", ";\n stroke: none;\n"])), function (_ref3) {
7996
8027
  var theme = _ref3.theme,
7997
8028
  styling = _ref3.styling;
7998
8029
  return theme.custom.lines[styling].handleReactiveFill.fill;
7999
8030
  });
8000
- var HandleReactiveRing = styled__default.circle(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref4) {
8031
+ var HandleReactiveRing = styled__default.circle(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref4) {
8001
8032
  var theme = _ref4.theme,
8002
8033
  styling = _ref4.styling;
8003
8034
  return theme.custom.lines[styling].handleReactiveRing.stroke;
8004
8035
  });
8005
- var HandleContrastLayer = styled__default.circle(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n overflow: visible;\n mix-blend-mode: multiply;\n fill: none;\n stroke: ", ";\n"])), function (_ref5) {
8036
+ var HandleContrastLayer = styled__default.circle(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n overflow: visible;\n mix-blend-mode: multiply;\n fill: none;\n stroke: ", ";\n"])), function (_ref5) {
8006
8037
  var theme = _ref5.theme,
8007
8038
  styling = _ref5.styling;
8008
8039
  return theme.custom.lines[styling].handleContrastLayer.stroke;
@@ -8221,8 +8252,8 @@ var HandleUnit = function HandleUnit(props) {
8221
8252
  }, index + pointIndexOffset))));
8222
8253
  };
8223
8254
 
8224
- var _templateObject$U, _templateObject2$N, _templateObject3$G, _templateObject4$B, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$o, _templateObject9$j, _templateObject10$g, _templateObject11$a, _templateObject12$8, _templateObject13$7, _templateObject14$5;
8225
- var ContrastLine = styled__default.line(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n stroke: ", ";\n mix-blend-mode: multiply;\n stroke-width: ", "px;\n stroke-opacity: ", ";\n cursor: pointer;\n"])), function (_ref) {
8255
+ var _templateObject$W, _templateObject2$O, _templateObject3$H, _templateObject4$B, _templateObject5$x, _templateObject6$t, _templateObject7$q, _templateObject8$n, _templateObject9$i, _templateObject10$f, _templateObject11$a, _templateObject12$8, _templateObject13$7, _templateObject14$5;
8256
+ var ContrastLine = styled__default.line(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n stroke: ", ";\n mix-blend-mode: multiply;\n stroke-width: ", "px;\n stroke-opacity: ", ";\n cursor: pointer;\n"])), function (_ref) {
8226
8257
  var theme = _ref.theme,
8227
8258
  styling = _ref.styling;
8228
8259
  return theme.custom.lines[styling].contrastLine.stroke;
@@ -8233,12 +8264,12 @@ var ContrastLine = styled__default.line(_templateObject$U || (_templateObject$U
8233
8264
  var showLineBorder = _ref3.showLineBorder;
8234
8265
  return showLineBorder ? '0.35' : '0';
8235
8266
  });
8236
- var HighlightLine = styled__default.line(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n pointer-events: none;\n stroke: ", ";\n"])), function (_ref4) {
8267
+ var HighlightLine = styled__default.line(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n pointer-events: none;\n stroke: ", ";\n"])), function (_ref4) {
8237
8268
  var theme = _ref4.theme,
8238
8269
  styling = _ref4.styling;
8239
8270
  return theme.custom.lines[styling].highlightLineBorder.stroke;
8240
8271
  });
8241
- var GrabHandle = styled__default.circle(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n fill: ", ";\n stroke: ", ";\n opacity: 1;\n transition: opacity 250ms ease;\n cursor: grab;\n\n ", ";\n"])), function (_ref5) {
8272
+ var GrabHandle = styled__default.circle(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n fill: ", ";\n stroke: ", ";\n opacity: 1;\n transition: opacity 250ms ease;\n cursor: grab;\n\n ", ";\n"])), function (_ref5) {
8242
8273
  var theme = _ref5.theme,
8243
8274
  styling = _ref5.styling;
8244
8275
  return theme.custom.lines[styling].grabHandle.fill;
@@ -8252,20 +8283,20 @@ var GrabHandle = styled__default.circle(_templateObject3$G || (_templateObject3$
8252
8283
  var GrabHandleIndexGroup$1 = styled__default.g(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n opacity: 0;\n pointer-events: none;\n ", ";\n\n"])), function (props) {
8253
8284
  return props.showIndex && styled.css(_templateObject6$t || (_templateObject6$t = _taggedTemplateLiteralLoose(["\n opacity: 1;\n "])));
8254
8285
  });
8255
- var GrabHandleIndexText$1 = styled__default.text(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n pointer-events: none;\n"])), function (_ref7) {
8286
+ var GrabHandleIndexText$1 = styled__default.text(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n pointer-events: none;\n"])), function (_ref7) {
8256
8287
  var theme = _ref7.theme,
8257
8288
  styling = _ref7.styling;
8258
8289
  return theme.custom.lines[styling].grabHandleText.stroke;
8259
8290
  });
8260
- var LabelText$2 = styled__default.text(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n cursor: pointer;\n ", "\n"])), function (_ref8) {
8291
+ var LabelText$2 = styled__default.text(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n cursor: pointer;\n ", "\n"])), function (_ref8) {
8261
8292
  var theme = _ref8.theme,
8262
8293
  styling = _ref8.styling;
8263
8294
  return theme.custom.lines[styling].label.fill;
8264
8295
  }, function (_ref9) {
8265
8296
  var showLabelShadow = _ref9.showLabelShadow;
8266
- return showLabelShadow && styled.css(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n text-shadow:\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000;\n "])));
8297
+ return showLabelShadow && styled.css(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n text-shadow:\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000;\n "])));
8267
8298
  });
8268
- var GrabHandleContrast = styled__default(GrabHandle)(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref10) {
8299
+ var GrabHandleContrast = styled__default(GrabHandle)(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref10) {
8269
8300
  var theme = _ref10.theme,
8270
8301
  styling = _ref10.styling;
8271
8302
  return theme.custom.lines[styling].grabHandleContrast.stroke;
@@ -8511,20 +8542,20 @@ var LineUnit = function LineUnit(props) {
8511
8542
 
8512
8543
  var LineSetContext = React.createContext({});
8513
8544
 
8514
- var _templateObject$V, _templateObject2$O, _templateObject3$H, _templateObject4$C;
8515
- var FilledPolygon = styled__default.polygon(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n fill: ", ";\n opacity: ", ";\n"])), function (_ref) {
8545
+ var _templateObject$X, _templateObject2$P, _templateObject3$I, _templateObject4$C;
8546
+ var FilledPolygon = styled__default.polygon(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n fill: ", ";\n opacity: ", ";\n"])), function (_ref) {
8516
8547
  var color = _ref.color;
8517
8548
  return color;
8518
8549
  }, function (_ref2) {
8519
8550
  var opacity = _ref2.opacity;
8520
8551
  return opacity;
8521
8552
  });
8522
- var Point = styled__default.circle(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n fill: ", ";\n"])), function (_ref3) {
8553
+ var Point = styled__default.circle(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n fill: ", ";\n"])), function (_ref3) {
8523
8554
  var theme = _ref3.theme,
8524
8555
  styling = _ref3.styling;
8525
8556
  return theme.custom.lines[styling].point.fill;
8526
8557
  });
8527
- var AreaLabelText = styled__default.text(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n pointer-events: none;\n ", "\n"])), function (_ref4) {
8558
+ var AreaLabelText = styled__default.text(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n pointer-events: none;\n ", "\n"])), function (_ref4) {
8528
8559
  var theme = _ref4.theme,
8529
8560
  styling = _ref4.styling;
8530
8561
  return theme.custom.lines[styling].label.fill;
@@ -8795,10 +8826,10 @@ var LineSet = function LineSet(_ref8) {
8795
8826
  }));
8796
8827
  };
8797
8828
 
8798
- var _templateObject$W, _templateObject2$P, _templateObject3$I, _templateObject4$D, _templateObject5$y;
8799
- var Container$A = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n\n"])));
8800
- var LoadingOverlay$1 = styled__default.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
8801
- var Frame = styled__default.svg(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
8829
+ var _templateObject$Y, _templateObject2$Q, _templateObject3$J, _templateObject4$D, _templateObject5$y;
8830
+ var Container$A = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n\n"])));
8831
+ var LoadingOverlay$1 = styled__default.div(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
8832
+ var Frame = styled__default.svg(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
8802
8833
  return props.transculent && styled.css(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
8803
8834
  });
8804
8835
  var Image$1 = styled__default.img(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n object-fit: contain;\n width: 100%;\n height: 100%;\n"])));
@@ -9004,10 +9035,10 @@ var LineUI = function LineUI(_ref) {
9004
9035
 
9005
9036
  var _excluded$y = ["loop", "autoPlay", "controls", "muted"];
9006
9037
 
9007
- var _templateObject$X, _templateObject2$Q, _templateObject3$J, _templateObject4$E, _templateObject5$z;
9008
- var Container$B = styled__default.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n"])));
9009
- var Video$1 = styled__default.video(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
9010
- var LoadingOverlay$2 = styled__default.div(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
9038
+ var _templateObject$Z, _templateObject2$R, _templateObject3$K, _templateObject4$E, _templateObject5$z;
9039
+ var Container$B = styled__default.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n"])));
9040
+ var Video$1 = styled__default.video(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
9041
+ var LoadingOverlay$2 = styled__default.div(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
9011
9042
  var Frame$1 = styled__default.svg(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
9012
9043
  return props.transcalent && styled.css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
9013
9044
  });
@@ -9232,8 +9263,8 @@ var LineUIVideo = function LineUIVideo(_ref) {
9232
9263
 
9233
9264
  var _excluded$z = ["id", "enabled", "peerAddress", "maxConnectionAttempts", "rtcConfiguration", "setStatus", "setError", "autoPlay", "muted"];
9234
9265
 
9235
- var _templateObject$Y;
9236
- var Video$2 = styled__default.video(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n /* width: 800px; */\n"])));
9266
+ var _templateObject$_;
9267
+ var Video$2 = styled__default.video(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n /* width: 800px; */\n"])));
9237
9268
 
9238
9269
  var WebRTCPlayer = function WebRTCPlayer(_ref) {
9239
9270
  var _ref$id = _ref.id,
@@ -9557,10 +9588,10 @@ function getPeerId(id) {
9557
9588
  return 'WRP_' + id + '_' + Math.floor(Math.random() * (9000 - 10) + 10).toString();
9558
9589
  }
9559
9590
 
9560
- var _templateObject$Z, _templateObject2$R, _templateObject3$K, _templateObject4$F, _templateObject5$A;
9561
- var Container$C = styled__default.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n"])));
9562
- var Video$3 = styled__default(WebRTCPlayer)(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
9563
- var LoadingOverlay$3 = styled__default.div(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
9591
+ var _templateObject$$, _templateObject2$S, _templateObject3$L, _templateObject4$F, _templateObject5$A;
9592
+ var Container$C = styled__default.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n"])));
9593
+ var Video$3 = styled__default(WebRTCPlayer)(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
9594
+ var LoadingOverlay$3 = styled__default.div(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
9564
9595
  var Frame$2 = styled__default.svg(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
9565
9596
  return props.transcalent && styled.css(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
9566
9597
  });
@@ -9908,20 +9939,20 @@ var LineReducer = (function (state, action) {
9908
9939
  }
9909
9940
  });
9910
9941
 
9911
- var _templateObject$_, _templateObject2$S, _templateObject3$L, _templateObject4$G, _templateObject5$B, _templateObject6$u, _templateObject7$t;
9942
+ var _templateObject$10, _templateObject2$T, _templateObject3$M, _templateObject4$G, _templateObject5$B, _templateObject6$u, _templateObject7$r;
9912
9943
  var ICON_SIZE = 24;
9913
9944
  var GAP_LEFT = 20;
9914
9945
  var ICON_MARGIN_LEFT = -GAP_LEFT - ICON_SIZE;
9915
- var Container$D = styled__default.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n @media ", " {\n gap: ", "px;\n flex-direction: row;\n }\n"])), deviceMediaQuery.large, GAP_LEFT);
9916
- var TitlesWrapper = styled__default.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n flex-direction: ", ";\n gap: 4px;\n"])), function (_ref) {
9946
+ var Container$D = styled__default.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n @media ", " {\n gap: ", "px;\n flex-direction: row;\n }\n"])), deviceMediaQuery.large, GAP_LEFT);
9947
+ var TitlesWrapper = styled__default.div(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n flex-direction: ", ";\n gap: 4px;\n"])), function (_ref) {
9917
9948
  var areaTitleBottom = _ref.areaTitleBottom;
9918
9949
  return areaTitleBottom ? "column-reverse" : "column";
9919
9950
  });
9920
- var IconContainer$1 = styled__default.div(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-left: 0px;\n justify-content: left;\n\n @media ", " {\n margin-left: ", "px;\n justify-content: center;\n }\n\n svg {\n display: block;\n }\n"])), deviceMediaQuery.large, ICON_MARGIN_LEFT);
9951
+ var IconContainer$1 = styled__default.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-left: 0px;\n justify-content: left;\n\n @media ", " {\n margin-left: ", "px;\n justify-content: center;\n }\n\n svg {\n display: block;\n }\n"])), deviceMediaQuery.large, ICON_MARGIN_LEFT);
9921
9952
  var Title$3 = styled__default.h1(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n text-align: left;\n font-size: 26px;\n font-weight: 600;\n text-decoration: none;\n color: var(--grey-12);\n margin: 0;\n"])));
9922
9953
  var AreaTitleCss = styled.css(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n text-align: left;\n font-size: 18px;\n font-weight: 600;\n text-decoration: none;\n color: var(--grey-11);\n"])));
9923
9954
  var AreaTitle = styled__default.div(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n ", "\n"])), AreaTitleCss);
9924
- var AreaLinkTitle = styled__default(reactRouterDom.Link)(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n ", "\n &:hover {\n text-decoration: underline;\n }\n"])), AreaTitleCss);
9955
+ var AreaLinkTitle = styled__default(reactRouterDom.Link)(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n ", "\n &:hover {\n text-decoration: underline;\n }\n"])), AreaTitleCss);
9925
9956
 
9926
9957
  var PageTitle = function PageTitle(_ref2) {
9927
9958
  var title = _ref2.title,
@@ -9949,23 +9980,20 @@ var PageTitle = function PageTitle(_ref2) {
9949
9980
  }, areaTitle) : areaTitle && React__default.createElement(AreaTitle, null, areaTitle), React__default.createElement(Title$3, null, title)));
9950
9981
  };
9951
9982
 
9952
- var _templateObject$$, _templateObject2$T;
9953
- var Container$E = styled__default.p(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
9954
- var theme = _ref.theme;
9955
- return styled.css(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.pageHeader.introduction);
9956
- });
9983
+ var _templateObject$11;
9984
+ var Container$E = styled__default.p(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n color: var(--grey-11);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px; /* 142.857% */\n"])));
9957
9985
 
9958
- var IntroductionText = function IntroductionText(_ref2) {
9959
- var children = _ref2.children;
9986
+ var IntroductionText = function IntroductionText(_ref) {
9987
+ var children = _ref.children;
9960
9988
  return React__default.createElement(Container$E, null, children);
9961
9989
  };
9962
9990
 
9963
9991
  var _excluded$B = ["icon", "size", "weight", "label", "linkTo", "noBorder", "tagSize"];
9964
9992
 
9965
- var _templateObject$10, _templateObject2$U, _templateObject3$M, _templateObject4$H, _templateObject5$C, _templateObject6$v, _templateObject7$u;
9966
- var TextContainer$2 = styled__default.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
9993
+ var _templateObject$12, _templateObject2$U, _templateObject3$N, _templateObject4$H, _templateObject5$C, _templateObject6$v, _templateObject7$s;
9994
+ var TextContainer$2 = styled__default.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
9967
9995
  var StyledLink = styled__default(reactRouterDom.Link)(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n"])));
9968
- var TagWrapper = styled__default.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n font-size: ", "px;\n font-weight: 500;\n color: var(--grey-11);\n padding: 4px 10px;\n\n ", ";\n\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n gap: 8px;\n\n ", ";\n\n ", ";\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n ", ";\n"])), function (_ref) {
9996
+ var TagWrapper = styled__default.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n font-size: ", "px;\n font-weight: 500;\n color: var(--grey-11);\n padding: 4px 10px;\n\n ", ";\n\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n gap: 8px;\n\n ", ";\n\n ", ";\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n ", ";\n"])), function (_ref) {
9969
9997
  var size = _ref.size;
9970
9998
  return size;
9971
9999
  }, function (_ref2) {
@@ -9980,7 +10008,7 @@ var TagWrapper = styled__default.div(_templateObject3$M || (_templateObject3$M =
9980
10008
  }, IconWrapper, function (_ref5) {
9981
10009
  var hoverColor = _ref5.hoverColor,
9982
10010
  enableHover = _ref5.enableHover;
9983
- return enableHover && styled.css(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: var(--", ");\n color: var(--", ");\n ", " {\n [stroke]{\n stroke: var(--", ");\n }\n }\n }\n "])), hoverColor, hoverColor, IconWrapper, hoverColor);
10011
+ return enableHover && styled.css(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: var(--", ");\n color: var(--", ");\n ", " {\n [stroke]{\n stroke: var(--", ");\n }\n }\n }\n "])), hoverColor, hoverColor, IconWrapper, hoverColor);
9984
10012
  });
9985
10013
 
9986
10014
  var Tag = function Tag(_ref6) {
@@ -10024,14 +10052,15 @@ var Tag = function Tag(_ref6) {
10024
10052
  }, renderTag()) : renderTag();
10025
10053
  };
10026
10054
 
10027
- var _templateObject$11, _templateObject2$V, _templateObject3$N, _templateObject4$I, _templateObject5$D;
10028
- var Container$F = styled__default.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n gap: 32px;\n"])));
10055
+ var _templateObject$13, _templateObject2$V, _templateObject3$O, _templateObject4$I, _templateObject5$D, _templateObject6$w;
10056
+ var Container$F = styled__default.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n gap: 32px;\n"])));
10029
10057
  var LeftPanel = styled__default.div(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n"])));
10030
- var RightPanel = styled__default.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n padding-top: 0px;\n }\n\n"])), function (_ref) {
10058
+ var IntroductionTextWrapper = styled__default.div(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n max-width: 648px;\n"])));
10059
+ var RightPanel = styled__default.div(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n padding-top: 0px;\n }\n\n"])), function (_ref) {
10031
10060
  var iconLeftPanel = _ref.iconLeftPanel;
10032
- return iconLeftPanel && styled.css(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n padding-top: 32px;\n "])));
10061
+ return iconLeftPanel && styled.css(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n padding-top: 32px;\n "])));
10033
10062
  }, deviceMediaQuery.large);
10034
- var TagListWrapper = styled__default.div(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: flex-start;\n flex-wrap: wrap;\n gap: 4px;\n margin-bottom: 5px;\n margin-top: 29px;\n"])));
10063
+ var TagListWrapper = styled__default.div(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: flex-start;\n flex-wrap: wrap;\n gap: 4px;\n margin-bottom: 5px;\n margin-top: 29px;\n"])));
10035
10064
 
10036
10065
  var PageHeader = function PageHeader(_ref2) {
10037
10066
  var title = _ref2.title,
@@ -10070,13 +10099,13 @@ var PageHeader = function PageHeader(_ref2) {
10070
10099
  label: label,
10071
10100
  linkTo: linkTo
10072
10101
  }));
10073
- })), introductionText ? React__default.createElement(IntroductionText, null, introductionText) : null), rightContent ? React__default.createElement(RightPanel, {
10102
+ })), introductionText ? React__default.createElement(IntroductionTextWrapper, null, React__default.createElement(IntroductionText, null, introductionText)) : null), rightContent ? React__default.createElement(RightPanel, {
10074
10103
  iconLeftPanel: !!icon
10075
10104
  }, rightContent) : null);
10076
10105
  };
10077
10106
 
10078
- var _templateObject$12;
10079
- var Container$G = styled__default.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
10107
+ var _templateObject$14;
10108
+ var Container$G = styled__default.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
10080
10109
 
10081
10110
  var MultilineContent = function MultilineContent(_ref) {
10082
10111
  var contentArray = _ref.contentArray;
@@ -10087,21 +10116,21 @@ var MultilineContent = function MultilineContent(_ref) {
10087
10116
  }));
10088
10117
  };
10089
10118
 
10090
- var _templateObject$13, _templateObject2$W, _templateObject3$O, _templateObject4$J, _templateObject5$E, _templateObject6$w, _templateObject7$v;
10091
- var Container$H = styled__default.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n position: relative;\n height: inherit;\n background: grey;\n border-radius: 3px;\n overflow: hidden;\n width: 55px;\n height: auto;\n opacity: 0.65;\n margin-right: 10px;\n\n &::after {\n content: '';\n display: block;\n padding-bottom: 75%;\n ", "\n }\n\n ", "\n\n &:hover {\n cursor: pointer;\n\n ", "\n }\n\n"])), function (_ref) {
10119
+ var _templateObject$15, _templateObject2$W, _templateObject3$P, _templateObject4$J, _templateObject5$E, _templateObject6$x, _templateObject7$t;
10120
+ var Container$H = styled__default.div(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n position: relative;\n height: inherit;\n background: grey;\n border-radius: 3px;\n overflow: hidden;\n width: 55px;\n height: auto;\n opacity: 0.65;\n margin-right: 10px;\n\n &::after {\n content: '';\n display: block;\n padding-bottom: 75%;\n ", "\n }\n\n ", "\n\n &:hover {\n cursor: pointer;\n\n ", "\n }\n\n"])), function (_ref) {
10092
10121
  var aspect = _ref.aspect;
10093
10122
  return aspect === '16:9' && styled.css(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n padding-left: 56.25%;\n "])));
10094
10123
  }, function (_ref2) {
10095
10124
  var theme = _ref2.theme;
10096
- return theme && styled.css(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n transition:\n opacity ", " ", ",\n transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
10125
+ return theme && styled.css(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n transition:\n opacity ", " ", ",\n transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
10097
10126
  }, function (_ref3) {
10098
10127
  var theme = _ref3.theme,
10099
10128
  hoverZoom = _ref3.hoverZoom;
10100
10129
  return theme && hoverZoom && styled.css(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n transform: scale(1.5);\n opacity: 1;\n transition: transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut);
10101
10130
  });
10102
10131
  var ImageWrapper = styled__default.img(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n display: block;\n"])));
10103
- var NoImageWrapper = styled__default.div(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n height: 41px;\n width: 55px;\n object-fit: cover;\n display: block;\n"])));
10104
- var PlayableDrop = styled__default.div(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--black-a1);\n height: 24px;\n width: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n display: flex;\n svg {\n padding-left: 2px;\n path {\n stroke: var(--white-1);\n }\n }\n };\n"])), IconWrapper);
10132
+ var NoImageWrapper = styled__default.div(_templateObject6$x || (_templateObject6$x = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n height: 41px;\n width: 55px;\n object-fit: cover;\n display: block;\n"])));
10133
+ var PlayableDrop = styled__default.div(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--black-a1);\n height: 24px;\n width: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n display: flex;\n svg {\n padding-left: 2px;\n path {\n stroke: var(--white-1);\n }\n }\n };\n"])), IconWrapper);
10105
10134
 
10106
10135
  var TableRowThumbnail = function TableRowThumbnail(_ref4) {
10107
10136
  var _ref4$hoverZoom = _ref4.hoverZoom,
@@ -10222,8 +10251,8 @@ var TableRowThumbnail = function TableRowThumbnail(_ref4) {
10222
10251
  })));
10223
10252
  };
10224
10253
 
10225
- var _templateObject$14, _templateObject2$X;
10226
- var Container$I = styled__default.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n height: 42px;\n width: 4px;\n border-radius: 3px;\n display: block;\n\n ", "\n\n"])), function (_ref) {
10254
+ var _templateObject$16, _templateObject2$X;
10255
+ var Container$I = styled__default.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n height: 42px;\n width: 4px;\n border-radius: 3px;\n display: block;\n\n ", "\n\n"])), function (_ref) {
10227
10256
  var status = _ref.status,
10228
10257
  colors = _ref.theme.colors;
10229
10258
  return styled.css(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n background: ", ";\n content:'", "';\n "])), colors.status[status], status);
@@ -10237,12 +10266,12 @@ var TypeTableDeviceStatus = function TypeTableDeviceStatus(_ref2) {
10237
10266
  });
10238
10267
  };
10239
10268
 
10240
- var _templateObject$15, _templateObject2$Y, _templateObject3$P, _templateObject4$K, _templateObject5$F, _templateObject6$x, _templateObject7$w, _templateObject8$p, _templateObject9$k, _templateObject10$h, _templateObject11$b;
10241
- var CopyToClipboard = styled__default.button(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n\n cursor: pointer;\n opacity: 0;\n\n position: absolute;\n right: 0;\n top: 14px;\n width: 20px;\n height: 20px;\n background: transparent;\n border: none;\n outline: none;\n\n ", "\n\n svg {\n display: block;\n }\n\n &:hover {\n opacity: 1 !important;\n }\n\n"])), function (_ref) {
10269
+ var _templateObject$17, _templateObject2$Y, _templateObject3$Q, _templateObject4$K, _templateObject5$F, _templateObject6$y, _templateObject7$u, _templateObject8$o, _templateObject9$j, _templateObject10$g, _templateObject11$b;
10270
+ var CopyToClipboard = styled__default.button(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n\n cursor: pointer;\n opacity: 0;\n\n position: absolute;\n right: 0;\n top: 14px;\n width: 20px;\n height: 20px;\n background: transparent;\n border: none;\n outline: none;\n\n ", "\n\n svg {\n display: block;\n }\n\n &:hover {\n opacity: 1 !important;\n }\n\n"])), function (_ref) {
10242
10271
  var theme = _ref.theme;
10243
10272
  return theme && styled.css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n transition: ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
10244
10273
  });
10245
- var CellContainer = styled__default.div(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: 50px;\n vertical-align: middle;\n position: relative;\n line-height: 30px;\n font-family: ", ";\n\n &:hover ", "{\n opacity: 0.5;\n }\n\n &, a {\n ", "\n }\n\n a:hover {\n text-decoration: underline;\n }\n\n ", ";\n\n ", "\n"])), function (p) {
10274
+ var CellContainer = styled__default.div(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: 50px;\n vertical-align: middle;\n position: relative;\n line-height: 30px;\n font-family: ", ";\n\n &:hover ", "{\n opacity: 0.5;\n }\n\n &, a {\n ", "\n }\n\n a:hover {\n text-decoration: underline;\n }\n\n ", ";\n\n ", "\n"])), function (p) {
10246
10275
  return p.theme.fontFamily.data;
10247
10276
  }, CopyToClipboard, function (_ref2) {
10248
10277
  var theme = _ref2.theme,
@@ -10251,17 +10280,17 @@ var CellContainer = styled__default.div(_templateObject3$P || (_templateObject3$
10251
10280
  return cellStyle === 'firstColumn' ? styled.css(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle]) : styled.css(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle][alignment]);
10252
10281
  }, function (_ref3) {
10253
10282
  var hasCopyButton = _ref3.hasCopyButton;
10254
- return hasCopyButton && styled.css(_templateObject6$x || (_templateObject6$x = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
10283
+ return hasCopyButton && styled.css(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
10255
10284
  }, function (_ref4) {
10256
10285
  var styles = _ref4.theme.styles,
10257
10286
  hideDivider = _ref4.hideDivider;
10258
- return !hideDivider && styled.css(_templateObject7$w || (_templateObject7$w = _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);
10287
+ return !hideDivider && styled.css(_templateObject7$u || (_templateObject7$u = _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);
10259
10288
  });
10260
- var UnitText = styled__default.span(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
10289
+ var UnitText = styled__default.span(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
10261
10290
  var theme = _ref5.theme;
10262
- return styled.css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
10291
+ return styled.css(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
10263
10292
  });
10264
- var StatusBlip = styled__default.div(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-right: 8px;\n ", "\n"])), function (_ref6) {
10293
+ var StatusBlip = styled__default.div(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-right: 8px;\n ", "\n"])), function (_ref6) {
10265
10294
  var _ref6$status = _ref6.status,
10266
10295
  status = _ref6$status === void 0 ? 'neutral' : _ref6$status,
10267
10296
  colors = _ref6.theme.colors;
@@ -10309,8 +10338,8 @@ var TypeTableCell = function TypeTableCell(_ref7) {
10309
10338
  })) : null);
10310
10339
  };
10311
10340
 
10312
- var _templateObject$16, _templateObject2$Z;
10313
- var RowContainer = styled__default.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n display: table-row;\n ", ";\n"])), function (_ref) {
10341
+ var _templateObject$18, _templateObject2$Z;
10342
+ var RowContainer = styled__default.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n display: table-row;\n ", ";\n"])), function (_ref) {
10314
10343
  var isEmpty = _ref.isEmpty;
10315
10344
  return isEmpty && styled.css(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["\n visibility: hidden;\n "])));
10316
10345
  });
@@ -10387,13 +10416,13 @@ var TypeTableRow = function TypeTableRow(_ref2) {
10387
10416
  }));
10388
10417
  };
10389
10418
 
10390
- var _templateObject$17, _templateObject2$_, _templateObject3$Q, _templateObject4$L;
10391
- var HeaderTitle = styled__default.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n display: inline-flex;\n justify-content: center;\n align-content: center;\n position: relative;\n padding: 0 2px;\n user-select: none;\n z-index: 99;\n\n ", " {\n position: absolute;\n top: 0px;\n left: -15px;\n display: none;\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n padding: 3px 1px;\n\n ", "\n }\n\n ", "\n\n ", "\n"])), IconWrapper, function (_ref) {
10419
+ var _templateObject$19, _templateObject2$_, _templateObject3$R, _templateObject4$L;
10420
+ var HeaderTitle = styled__default.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n display: inline-flex;\n justify-content: center;\n align-content: center;\n position: relative;\n padding: 0 2px;\n user-select: none;\n z-index: 99;\n\n ", " {\n position: absolute;\n top: 0px;\n left: -15px;\n display: none;\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n padding: 3px 1px;\n\n ", "\n }\n\n ", "\n\n ", "\n"])), IconWrapper, function (_ref) {
10392
10421
  var ascending = _ref.ascending;
10393
10422
  return ascending && styled.css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n transform: rotate(180deg);\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n top: 0;\n "])));
10394
10423
  }, function (_ref2) {
10395
10424
  var isSortActive = _ref2.isSortActive;
10396
- return isSortActive && styled.css(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n &:not(hover) {\n ", " {\n display: inline-flex;\n }\n }\n "])), IconWrapper);
10425
+ return isSortActive && styled.css(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n &:not(hover) {\n ", " {\n display: inline-flex;\n }\n }\n "])), IconWrapper);
10397
10426
  }, function (_ref3) {
10398
10427
  var styles = _ref3.theme.styles,
10399
10428
  sortable = _ref3.sortable;
@@ -10427,32 +10456,32 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
10427
10456
  }), header);
10428
10457
  };
10429
10458
 
10430
- var _templateObject$18, _templateObject2$$, _templateObject3$R, _templateObject4$M, _templateObject5$G, _templateObject6$y, _templateObject7$x, _templateObject8$q, _templateObject9$l, _templateObject10$i, _templateObject11$c, _templateObject12$9, _templateObject13$8, _templateObject14$6, _templateObject15$4, _templateObject16$4, _templateObject17$4;
10431
- var HeaderRow = styled__default.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
10459
+ var _templateObject$1a, _templateObject2$$, _templateObject3$S, _templateObject4$M, _templateObject5$G, _templateObject6$z, _templateObject7$v, _templateObject8$p, _templateObject9$k, _templateObject10$h, _templateObject11$c, _templateObject12$9, _templateObject13$8, _templateObject14$6, _templateObject15$4, _templateObject16$4, _templateObject17$4;
10460
+ var HeaderRow = styled__default.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
10432
10461
  var HeaderItem = styled__default.div(_templateObject2$$ || (_templateObject2$$ = _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) {
10433
10462
  return p.theme.fontFamily.ui;
10434
10463
  }, function (_ref) {
10435
10464
  var hasCopyButton = _ref.hasCopyButton;
10436
- return hasCopyButton && styled.css(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
10465
+ return hasCopyButton && styled.css(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
10437
10466
  }, function (_ref2) {
10438
10467
  var theme = _ref2.theme,
10439
10468
  alignment = _ref2.alignment,
10440
10469
  headerStyle = _ref2.headerStyle;
10441
10470
  return alignment ? styled.css(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle][alignment]) : styled.css(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle]['left']);
10442
10471
  }, function (p) {
10443
- return p.fixedWidth && styled.css(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n width: ", "px;\n "])), p.fixedWidth);
10472
+ return p.fixedWidth && styled.css(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n width: ", "px;\n "])), p.fixedWidth);
10444
10473
  }, function (_ref3) {
10445
10474
  var minWidth = _ref3.minWidth;
10446
- return minWidth && styled.css(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n min-width:", "px;\n "])), minWidth);
10475
+ return minWidth && styled.css(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n min-width:", "px;\n "])), minWidth);
10447
10476
  }, function (_ref4) {
10448
10477
  var styles = _ref4.theme.styles,
10449
10478
  headerStyle = _ref4.headerStyle,
10450
10479
  isSortActive = _ref4.isSortActive;
10451
- return headerStyle === 'subHeader' && styled.css(_templateObject8$q || (_templateObject8$q = _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%');
10480
+ 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%');
10452
10481
  });
10453
- var TitleItems = styled__default.div(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n ", ";\n"])), function (_ref5) {
10482
+ 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) {
10454
10483
  var alignment = _ref5.alignment;
10455
- return alignment && styled.css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
10484
+ 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);
10456
10485
  });
10457
10486
  var GroupTitle = styled__default.div(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n align-self: stretch;\n margin-bottom: 4px;\n"])));
10458
10487
  var Title$4 = styled__default.div(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n ", ";\n padding-left: 2px;\n padding-right: 8px;\n white-space: nowrap;\n"])), function (_ref6) {
@@ -10596,10 +10625,10 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
10596
10625
  }));
10597
10626
  };
10598
10627
 
10599
- var _templateObject$19, _templateObject2$10, _templateObject3$S, _templateObject4$N, _templateObject5$H;
10600
- var Container$J = styled__default.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose([""])));
10628
+ var _templateObject$1b, _templateObject2$10, _templateObject3$T, _templateObject4$N, _templateObject5$H;
10629
+ var Container$J = styled__default.div(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose([""])));
10601
10630
  var TableContainer = styled__default.div(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n display: table;\n width: 100%;\n position: relative;\n"])));
10602
- var LoadingText$1 = styled__default.div(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n color: var(--grey-a11);\n"])));
10631
+ var LoadingText$1 = styled__default.div(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n color: var(--grey-a11);\n"])));
10603
10632
  var LoadingBox$1 = styled__default.div(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n z-index: 99;\n background-color: ", ";\n height: calc(100% - 50px);\n opacity: 85%;\n width: 100%;\n min-height: 100px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 20px;\n\n ", " {\n margin-top: 10px;\n }\n"])), function (_ref) {
10604
10633
  var theme = _ref.theme;
10605
10634
  return theme.colors["pureBase"];
@@ -10694,22 +10723,22 @@ var TypeTable = function TypeTable(_ref3) {
10694
10723
 
10695
10724
  var _excluded$C = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
10696
10725
 
10697
- var _templateObject$1a, _templateObject2$11, _templateObject3$T, _templateObject4$O, _templateObject5$I, _templateObject6$z, _templateObject7$y, _templateObject8$r, _templateObject9$m, _templateObject10$j;
10698
- var Container$K = styled__default.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
10726
+ var _templateObject$1c, _templateObject2$11, _templateObject3$U, _templateObject4$O, _templateObject5$I, _templateObject6$A, _templateObject7$w, _templateObject8$q, _templateObject9$l, _templateObject10$i;
10727
+ var Container$K = styled__default.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
10699
10728
  var theme = _ref.theme;
10700
10729
  return styled.css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
10701
10730
  });
10702
- var StyledButton$5 = styled__default(Button)(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
10731
+ var StyledButton$5 = styled__default(Button)(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
10703
10732
  var StyledLoadingButton = styled__default(ButtonWithLoading)(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
10704
10733
  var StyledLink$1 = styled__default(reactRouterDom.Link)(_templateObject5$I || (_templateObject5$I = _taggedTemplateLiteralLoose(["\n color: inherit;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n"])));
10705
- var EditContainer = styled__default.div(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n min-width: 320px;\n background-color: var(--grey-2);\n z-index: 99;\n position: absolute;\n bottom: -15px;\n left: -11px;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n margin:0;\n span {\n margin: 0;\n }\n }\n ", " {\n margin-left: 5px;\n }\n ", " {\n margin-left: 5px;\n }\n"])), StyledLabel, StyledButton$5, StyledLoadingButton);
10706
- var StyledIconButton$1 = styled__default(IconButton$2)(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose([""])));
10707
- var TextContainer$3 = styled__default.div(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-right: 18px;\n\n ", "\n\n ", "\n\n ", " {\n opacity: 0;\n position: absolute;\n top: 7px;\n right: 0;\n };\n\n &:hover {\n ", " {\n opacity: 1;\n };\n }\n"])), function (_ref2) {
10734
+ var EditContainer = styled__default.div(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n min-width: 320px;\n background-color: var(--grey-2);\n z-index: 99;\n position: absolute;\n bottom: -15px;\n left: -11px;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n margin:0;\n span {\n margin: 0;\n }\n }\n ", " {\n margin-left: 5px;\n }\n ", " {\n margin-left: 5px;\n }\n"])), StyledLabel, StyledButton$5, StyledLoadingButton);
10735
+ var StyledIconButton$1 = styled__default(IconButton$2)(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose([""])));
10736
+ var TextContainer$3 = styled__default.div(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-right: 18px;\n\n ", "\n\n ", "\n\n ", " {\n opacity: 0;\n position: absolute;\n top: 7px;\n right: 0;\n };\n\n &:hover {\n ", " {\n opacity: 1;\n };\n }\n"])), function (_ref2) {
10708
10737
  var alignment = _ref2.alignment;
10709
- return alignment === 'center' && styled.css(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
10738
+ return alignment === 'center' && styled.css(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
10710
10739
  }, function (_ref3) {
10711
10740
  var alignment = _ref3.alignment;
10712
- return alignment === 'right' && styled.css(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
10741
+ return alignment === 'right' && styled.css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
10713
10742
  }, StyledIconButton$1, StyledIconButton$1);
10714
10743
 
10715
10744
  var EditCell = function EditCell(_ref4) {
@@ -11162,12 +11191,12 @@ var PTZProvider = function PTZProvider(_ref) {
11162
11191
  }, children);
11163
11192
  };
11164
11193
 
11165
- var _templateObject$1b, _templateObject2$12, _templateObject3$U, _templateObject4$P, _templateObject5$J;
11166
- var Active = styled__default.g(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11194
+ var _templateObject$1d, _templateObject2$12, _templateObject3$V, _templateObject4$P, _templateObject5$J;
11195
+ var Active = styled__default.g(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11167
11196
  var active = _ref.active;
11168
11197
  return active && styled.css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11169
11198
  });
11170
- var Hover = styled__default.g(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11199
+ var Hover = styled__default.g(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11171
11200
  var hover = _ref2.hover;
11172
11201
  return hover && styled.css(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11173
11202
  });
@@ -11244,17 +11273,17 @@ var Up = function Up() {
11244
11273
  })));
11245
11274
  };
11246
11275
 
11247
- var _templateObject$1c, _templateObject2$13, _templateObject3$V, _templateObject4$Q, _templateObject5$K, _templateObject6$A;
11248
- var Active$1 = styled__default.g(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11276
+ var _templateObject$1e, _templateObject2$13, _templateObject3$W, _templateObject4$Q, _templateObject5$K, _templateObject6$B;
11277
+ var Active$1 = styled__default.g(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11249
11278
  var active = _ref.active;
11250
11279
  return active && styled.css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11251
11280
  });
11252
- var Hover$1 = styled__default.g(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11281
+ var Hover$1 = styled__default.g(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11253
11282
  var hover = _ref2.hover;
11254
11283
  return hover && styled.css(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11255
11284
  });
11256
11285
  var Container$M = styled__default.g(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n"])));
11257
- var Arrow$1 = styled__default.g(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n\n"])));
11286
+ var Arrow$2 = styled__default.g(_templateObject6$B || (_templateObject6$B = _taggedTemplateLiteralLoose(["\n\n"])));
11258
11287
 
11259
11288
  var Down = function Down() {
11260
11289
  var _useState = React.useState(false),
@@ -11313,7 +11342,7 @@ var Down = function Down() {
11313
11342
  d: 'M0.519854724,96.4994462 L0.189392188,96.1665222 L0.518392188,95.841 L0.50309316,91.4994743 C49.8427789,91.3340713 90.0585638,52.0879566 91.6405416,3.0448693 L91.6766244,1.55574655 L91.6867621,0.290388759 L96.0313922,0.326 L96.3559144,-4.8316906e-13 L96.6866017,0.330446162 L96.6764639,1.59580395 C95.8260725,54.0454751 53.1308151,96.3230768 0.519854724,96.4994462 Z',
11314
11343
  id: 'PTZ-Active-Down-Highlight',
11315
11344
  stroke: 'url(#linearGradient-15)'
11316
- })), React__default.createElement(Arrow$1, {
11345
+ })), React__default.createElement(Arrow$2, {
11317
11346
  id: 'PTZ-Arrows-Icons',
11318
11347
  transform: 'rotate(-45) translate(-138.146447, -137.146447) translate(68.000000, 68.000000) translate(71.000000, 125.000000) rotate(180.000000) translate(-71.000000, -125.000000)',
11319
11348
  fillRule: 'nonzero'
@@ -11328,12 +11357,12 @@ var Down = function Down() {
11328
11357
  })));
11329
11358
  };
11330
11359
 
11331
- var _templateObject$1d, _templateObject2$14, _templateObject3$W, _templateObject4$R, _templateObject5$L;
11332
- var Active$2 = styled__default.g(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11360
+ var _templateObject$1f, _templateObject2$14, _templateObject3$X, _templateObject4$R, _templateObject5$L;
11361
+ var Active$2 = styled__default.g(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11333
11362
  var active = _ref.active;
11334
11363
  return active && styled.css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11335
11364
  });
11336
- var Hover$2 = styled__default.g(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11365
+ var Hover$2 = styled__default.g(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11337
11366
  var hover = _ref2.hover;
11338
11367
  return hover && styled.css(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11339
11368
  });
@@ -11412,12 +11441,12 @@ var Left = function Left() {
11412
11441
  })));
11413
11442
  };
11414
11443
 
11415
- var _templateObject$1e, _templateObject2$15, _templateObject3$X, _templateObject4$S, _templateObject5$M;
11416
- var Active$3 = styled__default.g(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11444
+ var _templateObject$1g, _templateObject2$15, _templateObject3$Y, _templateObject4$S, _templateObject5$M;
11445
+ var Active$3 = styled__default.g(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11417
11446
  var active = _ref.active;
11418
11447
  return active && styled.css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11419
11448
  });
11420
- var Hover$3 = styled__default.g(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11449
+ var Hover$3 = styled__default.g(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11421
11450
  var hover = _ref2.hover;
11422
11451
  return hover && styled.css(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11423
11452
  });
@@ -12309,12 +12338,12 @@ var ZoomBase = function ZoomBase(_ref) {
12309
12338
  })), children));
12310
12339
  };
12311
12340
 
12312
- var _templateObject$1f, _templateObject2$16, _templateObject3$Y, _templateObject4$T, _templateObject5$N;
12313
- var Active$4 = styled__default.g(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
12341
+ var _templateObject$1h, _templateObject2$16, _templateObject3$Z, _templateObject4$T, _templateObject5$N;
12342
+ var Active$4 = styled__default.g(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
12314
12343
  var active = _ref.active;
12315
12344
  return active && styled.css(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
12316
12345
  });
12317
- var Hover$4 = styled__default.g(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
12346
+ var Hover$4 = styled__default.g(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
12318
12347
  var hover = _ref2.hover;
12319
12348
  return hover && styled.css(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["opacity: 1;"])));
12320
12349
  });
@@ -12386,12 +12415,12 @@ var Up$1 = function Up() {
12386
12415
  })));
12387
12416
  };
12388
12417
 
12389
- var _templateObject$1g, _templateObject2$17, _templateObject3$Z, _templateObject4$U, _templateObject5$O;
12390
- var Active$5 = styled__default.g(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
12418
+ var _templateObject$1i, _templateObject2$17, _templateObject3$_, _templateObject4$U, _templateObject5$O;
12419
+ var Active$5 = styled__default.g(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
12391
12420
  var active = _ref.active;
12392
12421
  return active && styled.css(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
12393
12422
  });
12394
- var Hover$5 = styled__default.g(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
12423
+ var Hover$5 = styled__default.g(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
12395
12424
  var hover = _ref2.hover;
12396
12425
  return hover && styled.css(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["opacity: 1;"])));
12397
12426
  });
@@ -12459,8 +12488,8 @@ var Up$2 = function Up() {
12459
12488
  })));
12460
12489
  };
12461
12490
 
12462
- var _templateObject$1h;
12463
- var Container$R = styled__default.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n flex-direction: column;\n"])));
12491
+ var _templateObject$1j;
12492
+ var Container$R = styled__default.div(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n flex-direction: column;\n"])));
12464
12493
 
12465
12494
  var Controls = function Controls(_ref) {
12466
12495
  var _ref$debug = _ref.debug,
@@ -12474,21 +12503,21 @@ var Controls = function Controls(_ref) {
12474
12503
 
12475
12504
  var _excluded$D = ["isEmptyWithIcon", "status", "noticeIcon", "hasNotice", "noticeMessage", "noticeTitle", "emptyIcon"];
12476
12505
 
12477
- var _templateObject$1i, _templateObject2$18, _templateObject3$_, _templateObject4$V, _templateObject5$P, _templateObject6$B, _templateObject7$z, _templateObject8$s;
12478
- var Container$S = styled__default.div(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 170px;\n border-radius: 3px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n position: relative;\n\n ", " {\n height: 100%;\n width: 100%;\n text-align: center;\n img, video {\n border-radius: 3px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n"])), MediaBoxWrapper);
12506
+ var _templateObject$1k, _templateObject2$18, _templateObject3$$, _templateObject4$V, _templateObject5$P, _templateObject6$C, _templateObject7$x, _templateObject8$r;
12507
+ var Container$S = styled__default.div(_templateObject$1k || (_templateObject$1k = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 170px;\n border-radius: 3px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n position: relative;\n\n ", " {\n height: 100%;\n width: 100%;\n text-align: center;\n img, video {\n border-radius: 3px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n"])), MediaBoxWrapper);
12479
12508
  var EmptyWithIcon = styled__default.div(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n ", "\n;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref) {
12480
12509
  var hasPadding = _ref.hasPadding;
12481
12510
  return hasPadding && "\n padding-bottom: 43px\n ";
12482
12511
  }, IconWrapper);
12483
- var Notice = styled__default.div(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: var(--inverse);\n opacity: 0.85;\n height: 46px;\n width: 300px;\n position: absolute;\n bottom: 0px;\n left: 0px;\n display: flex;\n align-items: center;\n padding: 10px;\n"])), function (_ref2) {
12512
+ var Notice = styled__default.div(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: var(--inverse);\n opacity: 0.85;\n height: 46px;\n width: 300px;\n position: absolute;\n bottom: 0px;\n left: 0px;\n display: flex;\n align-items: center;\n padding: 10px;\n"])), function (_ref2) {
12484
12513
  var color = _ref2.color;
12485
12514
  return color && "var(--" + color + ")";
12486
12515
  });
12487
12516
  var NoticeMessage = styled__default.div(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 10px;\n"])), EllipsisStyles);
12488
12517
  var NoticeTitle = styled__default.div(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 12px;\n"])), EllipsisStyles);
12489
- var NoticeIcon = styled__default.div(_templateObject6$B || (_templateObject6$B = _taggedTemplateLiteralLoose(["\n height: 20px;\n width: 20px;\n margin-left: 2px;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), IconWrapper);
12490
- var NoticeTextGroup = styled__default.div(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n"])));
12491
- var StatusLine = styled__default.div(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 3px;\n width: 100%;\n"])), function (_ref3) {
12518
+ var NoticeIcon = styled__default.div(_templateObject6$C || (_templateObject6$C = _taggedTemplateLiteralLoose(["\n height: 20px;\n width: 20px;\n margin-left: 2px;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), IconWrapper);
12519
+ var NoticeTextGroup = styled__default.div(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n"])));
12520
+ var StatusLine = styled__default.div(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 3px;\n width: 100%;\n"])), function (_ref3) {
12492
12521
  var color = _ref3.color;
12493
12522
  return color && "var(--" + color + ")";
12494
12523
  });
@@ -12523,30 +12552,30 @@ var MediaStream = function MediaStream(_ref4) {
12523
12552
  }));
12524
12553
  };
12525
12554
 
12526
- var _templateObject$1j, _templateObject2$19, _templateObject3$$, _templateObject4$W, _templateObject5$Q, _templateObject6$C, _templateObject7$A, _templateObject8$t, _templateObject9$n;
12527
- var Container$T = styled__default.div(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 60px;\n"])));
12555
+ var _templateObject$1l, _templateObject2$19, _templateObject3$10, _templateObject4$W, _templateObject5$Q, _templateObject6$D, _templateObject7$y, _templateObject8$s, _templateObject9$m;
12556
+ var Container$T = styled__default.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 60px;\n"])));
12528
12557
  var LeftData = styled__default.div(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n ", ";\n\n padding: 0 12px 0 12px;\n display: flex;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref) {
12529
12558
  var hasRightData = _ref.hasRightData;
12530
- return hasRightData && styled.css(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n border-right: var(--grey-6) 1px solid;\n width: 195px;\n "])));
12559
+ return hasRightData && styled.css(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n border-right: var(--grey-6) 1px solid;\n width: 195px;\n "])));
12531
12560
  }, IconWrapper);
12532
12561
  var RightData = styled__default.div(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["\n padding: 0 12px 0 16px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
12533
12562
  var DeviceDataGroup = styled__default.div(_templateObject5$Q || (_templateObject5$Q = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n justify-content: center;\n"])));
12534
- var LeftTitle = styled__default.div(_templateObject6$C || (_templateObject6$C = _taggedTemplateLiteralLoose(["\n ", ";\n ", "};\n ", ";\n\n color: var(--grey-a10);\n font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
12563
+ var LeftTitle = styled__default.div(_templateObject6$D || (_templateObject6$D = _taggedTemplateLiteralLoose(["\n ", ";\n ", "};\n ", ";\n\n color: var(--grey-a10);\n font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
12535
12564
  var hasRightData = _ref2.hasRightData;
12536
12565
  return hasRightData ? "max-margin: 140px;" : "max-margin: 250px;";
12537
12566
  }, function (_ref3) {
12538
12567
  var hasMarginBottom = _ref3.hasMarginBottom;
12539
12568
  return hasMarginBottom && "margin-bottom: 1px;";
12540
12569
  });
12541
- var LeftSubTitle = styled__default.div(_templateObject7$A || (_templateObject7$A = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n ", "\n\n color: var(--grey-11);\n font-size: 16px;\n"])), fontFamily.data, EllipsisStyles, function (_ref4) {
12570
+ var LeftSubTitle = styled__default.div(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n ", "\n\n color: var(--grey-11);\n font-size: 16px;\n"])), fontFamily.data, EllipsisStyles, function (_ref4) {
12542
12571
  var hasRightData = _ref4.hasRightData;
12543
12572
  return hasRightData ? "max-width: 140px;" : "max-width: 250px;";
12544
12573
  });
12545
- var Title$5 = styled__default.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: var(--grey-a10);\n font-size: 10px;\n ", ";\n"])), EllipsisStyles, function (_ref5) {
12574
+ var Title$5 = styled__default.div(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: var(--grey-a10);\n font-size: 10px;\n ", ";\n"])), EllipsisStyles, function (_ref5) {
12546
12575
  var hasMarginBottom = _ref5.hasMarginBottom;
12547
12576
  return hasMarginBottom && "margin-bottom: 6px;";
12548
12577
  });
12549
- var SubTitle = styled__default.div(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: var(--grey-11);\n font-size: 12px;\n"])), EllipsisStyles);
12578
+ var SubTitle = styled__default.div(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: var(--grey-11);\n font-size: 12px;\n"])), EllipsisStyles);
12550
12579
 
12551
12580
  var PanelMetaData = function PanelMetaData(_ref6) {
12552
12581
  var _ref6$deviceIcon = _ref6.deviceIcon,
@@ -12579,8 +12608,8 @@ var PanelMetaData = function PanelMetaData(_ref6) {
12579
12608
 
12580
12609
  var _excluded$E = ["streamProps", "panelMetaData", "customBottom", "panelOnClick"];
12581
12610
 
12582
- var _templateObject$1k;
12583
- var CameraPanelWrapper = styled__default.div(_templateObject$1k || (_templateObject$1k = _taggedTemplateLiteralLoose(["\n width: 300px;\n height: 230px;\n border-radius: 3px;\n box-shadow: 0 2px 10px 0 var(--grey-a5);\n background-color: linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%);\n }\n\n ", ";\n"])), function (_ref) {
12611
+ var _templateObject$1m;
12612
+ var CameraPanelWrapper = styled__default.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose(["\n width: 300px;\n height: 230px;\n border-radius: 3px;\n box-shadow: 0 2px 10px 0 var(--grey-a5);\n background-color: linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%);\n }\n\n ", ";\n"])), function (_ref) {
12584
12613
  var hasOnClick = _ref.hasOnClick;
12585
12614
  return hasOnClick && "\n cursor: pointer;\n ";
12586
12615
  });
@@ -12598,8 +12627,8 @@ var NewComponent = function NewComponent(_ref2) {
12598
12627
  }, props), React__default.createElement(MediaStream, Object.assign({}, streamProps)), customBottom ? customBottom : panelMetaData && React__default.createElement(PanelMetaData, Object.assign({}, panelMetaData)));
12599
12628
  };
12600
12629
 
12601
- var _templateObject$1l;
12602
- var CameraGrid = styled__default.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(auto-fill, 300px);\n gap: 20px 20px;\n"])));
12630
+ var _templateObject$1n;
12631
+ var CameraGrid = styled__default.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(auto-fill, 300px);\n gap: 20px 20px;\n"])));
12603
12632
 
12604
12633
  var CameraPanels = function CameraPanels(_ref) {
12605
12634
  var panels = _ref.panels;
@@ -12610,8 +12639,8 @@ var CameraPanels = function CameraPanels(_ref) {
12610
12639
  }));
12611
12640
  };
12612
12641
 
12613
- var _templateObject$1m;
12614
- var TagListWrapper$1 = styled__default.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose(["\n display: flex;\n ", " {\n margin-right: 10px;\n margin-bottom: 6px;\n flex-shrink: 0;\n }\n flex-wrap: wrap;\n"])), TagWrapper);
12642
+ var _templateObject$1o;
12643
+ var TagListWrapper$1 = styled__default.div(_templateObject$1o || (_templateObject$1o = _taggedTemplateLiteralLoose(["\n display: flex;\n ", " {\n margin-right: 10px;\n margin-bottom: 6px;\n flex-shrink: 0;\n }\n flex-wrap: wrap;\n"])), TagWrapper);
12615
12644
 
12616
12645
  var TagList = function TagList(_ref) {
12617
12646
  var tagsConfig = _ref.tagsConfig;
@@ -12658,16 +12687,16 @@ var DebouncedSearcher = function DebouncedSearcher(_ref) {
12658
12687
 
12659
12688
  var _excluded$G = ["design", "size", "position", "text"];
12660
12689
 
12661
- var _templateObject$1n, _templateObject2$1a, _templateObject3$10, _templateObject4$X, _templateObject5$R, _templateObject6$D;
12662
- var Container$U = styled__default.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose([""])));
12690
+ var _templateObject$1p, _templateObject2$1a, _templateObject3$11, _templateObject4$X, _templateObject5$R, _templateObject6$E;
12691
+ var Container$U = styled__default.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose([""])));
12663
12692
  var Title$6 = styled__default.div(_templateObject2$1a || (_templateObject2$1a = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-10);\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 17px;\n"])), function (_ref) {
12664
12693
  var theme = _ref.theme;
12665
12694
  return theme.fontFamily.ui;
12666
12695
  });
12667
- var ButtonsWrapper$2 = styled__default.div(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
12696
+ var ButtonsWrapper$2 = styled__default.div(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
12668
12697
  var LeftButtons = styled__default.div(_templateObject4$X || (_templateObject4$X = _taggedTemplateLiteralLoose(["\n button {\n margin: 0 10px 10px 0;\n }\n"])));
12669
12698
  var RightButtons = styled__default.div(_templateObject5$R || (_templateObject5$R = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
12670
- var SelectedResults = styled__default.div(_templateObject6$D || (_templateObject6$D = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-top: 29px;\n min-height: 19px;\n color: var(--grey-10);\n font-size: 12px;\n"])), function (_ref2) {
12699
+ var SelectedResults = styled__default.div(_templateObject6$E || (_templateObject6$E = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-top: 29px;\n min-height: 19px;\n color: var(--grey-10);\n font-size: 12px;\n"])), function (_ref2) {
12671
12700
  var theme = _ref2.theme;
12672
12701
  return theme.fontFamily.ui;
12673
12702
  });
@@ -12711,11 +12740,11 @@ var ActionsBar = function ActionsBar(_ref3) {
12711
12740
  }, finishTextButton))), React__default.createElement(SelectedResults, null, renderSelected(selectedTemplate, totalSelected, totalAvailable)));
12712
12741
  };
12713
12742
 
12714
- var _templateObject$1o, _templateObject2$1b, _templateObject3$11, _templateObject4$Y, _templateObject5$S, _templateObject6$E, _templateObject7$B, _templateObject8$u, _templateObject9$o, _templateObject10$k;
12743
+ var _templateObject$1q, _templateObject2$1b, _templateObject3$12, _templateObject4$Y, _templateObject5$S, _templateObject6$F, _templateObject7$z, _templateObject8$t, _templateObject9$n, _templateObject10$j;
12715
12744
  var WIDTH_PER_NUMBER = 12;
12716
- var PaginationContainer = styled__default.div(_templateObject$1o || (_templateObject$1o = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding-top: 20px;\n padding-bottom: 20px;\n width: 100%;\n height: fit-content;\n margin-right: 10px;\n white-space: nowrap;\n gap: 0 8px;\n vertical-align: baseline;\n"])));
12745
+ var PaginationContainer = styled__default.div(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding-top: 20px;\n padding-bottom: 20px;\n width: 100%;\n height: fit-content;\n margin-right: 10px;\n white-space: nowrap;\n gap: 0 8px;\n vertical-align: baseline;\n"])));
12717
12746
  var PageLabel = styled__default.label(_templateObject2$1b || (_templateObject2$1b = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n font-weight: 500px;\n font-size: 14px;\n color: var(--grey-10);\n text-align: left;\n"])));
12718
- var StaticPageCount = styled__default.div(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n box-sizing: border-box;\n font-size: 14px;\n color: var(--grey-8);\n height: 100%;\n text-align: left;\n padding-top: 1px;\n padding-right: 1px;\n"])));
12747
+ var StaticPageCount = styled__default.div(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n box-sizing: border-box;\n font-size: 14px;\n color: var(--grey-8);\n height: 100%;\n text-align: left;\n padding-top: 1px;\n padding-right: 1px;\n"])));
12719
12748
  var StyledInput$3 = styled__default.input(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose(["\n ", ";\n color: ", ";\n max-width: ", ";\n font-family: var(--font-data);\n height: 100%;\n box-sizing: border-box;\n outline: none;\n background: transparent;\n text-align: right;\n font-size: 14px;\n font-weight: 500;\n line-height: 25px;\n border: none;\n padding-right: ", "px;\n"])), removeAutoFillStyle, function (_ref) {
12720
12749
  var textColor = _ref.textColor;
12721
12750
  return textColor;
@@ -12724,23 +12753,23 @@ var StyledInput$3 = styled__default.input(_templateObject4$Y || (_templateObject
12724
12753
  return maxWidth ? maxWidth : '40px';
12725
12754
  }, WIDTH_PER_NUMBER / 2);
12726
12755
  var shakeAnimation = styled.keyframes(_templateObject5$S || (_templateObject5$S = _taggedTemplateLiteralLoose(["\n 0% { transform: translateX(0); }\n 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n 20%, 40%, 60%, 80% { transform: translateX(5px); }\n 100% { transform: translateX(0); }\n"])));
12727
- var InputContainer$2 = styled__default.div(_templateObject6$E || (_templateObject6$E = _taggedTemplateLiteralLoose(["\n height: var(--input-height, 40px);\n animation: ", " 150ms 2 linear;\n flex-grow: 0;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: 0 8px;\n border-radius: 3px;\n box-shadow: 0 2px 1px 0 rgba(0, 102, 255, 0.04);\n ", ";\n"])), function (_ref3) {
12756
+ var InputContainer$2 = styled__default.div(_templateObject6$F || (_templateObject6$F = _taggedTemplateLiteralLoose(["\n height: var(--input-height, 40px);\n animation: ", " 150ms 2 linear;\n flex-grow: 0;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: 0 8px;\n border-radius: 3px;\n box-shadow: 0 2px 1px 0 rgba(0, 102, 255, 0.04);\n ", ";\n"])), function (_ref3) {
12728
12757
  var shouldShake = _ref3.shouldShake;
12729
12758
  return shouldShake ? shakeAnimation : 'none';
12730
12759
  }, function (_ref4) {
12731
12760
  var borderColor = _ref4.borderColor;
12732
12761
  return borderColor && "border: 1px solid " + borderColor;
12733
12762
  });
12734
- var GoButton = styled__default(Button)(_templateObject7$B || (_templateObject7$B = _taggedTemplateLiteralLoose(["\n height: 24px;\n padding: 0 8px;\n margin-left: 8px;\n"])));
12735
- var ArrowWrapper = styled__default.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 0 8px;\n"])));
12736
- var ArrowButton = styled__default.button(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n ", ";\n width: 40px;\n height: 40px;\n padding: 12px;\n border-radius: 3px;\n box-shadow: 0 4px 9px 0 rgba(152, 174, 189, 0.07);\n border: solid 1px var(--grey-9);\n background-color: var(grey-2);\n pointer-events: ", ";\n opacity: ", ";\n\n &:focus, &:hover {\n outline: 2px solid #838383;\n }\n"])), resetButtonStyles, function (_ref5) {
12763
+ var GoButton = styled__default(Button)(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose(["\n height: 24px;\n padding: 0 8px;\n margin-left: 8px;\n"])));
12764
+ var ArrowWrapper = styled__default.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 0 8px;\n"])));
12765
+ var ArrowButton = styled__default.button(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n ", ";\n width: 40px;\n height: 40px;\n padding: 12px;\n border-radius: 3px;\n box-shadow: 0 4px 9px 0 rgba(152, 174, 189, 0.07);\n border: solid 1px var(--grey-9);\n background-color: var(grey-2);\n pointer-events: ", ";\n opacity: ", ";\n\n &:focus, &:hover {\n outline: 2px solid #838383;\n }\n"])), resetButtonStyles, function (_ref5) {
12737
12766
  var active = _ref5.active;
12738
12767
  return active ? 'auto' : 'none';
12739
12768
  }, function (_ref6) {
12740
12769
  var active = _ref6.active;
12741
12770
  return active ? '1' : '0.5';
12742
12771
  });
12743
- var ItemsSelectWrapper = styled__default.div(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n ", " {\n width: ", ";\n }\n margin-right: 35px;\n\n ", " {\n margin-bottom: 0;\n }\n"])), SelectWrapper, function (_ref7) {
12772
+ var ItemsSelectWrapper = styled__default.div(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n ", " {\n width: ", ";\n }\n margin-right: 35px;\n\n ", " {\n margin-bottom: 0;\n }\n"])), SelectWrapper, function (_ref7) {
12744
12773
  var width = _ref7.width;
12745
12774
  return width ? width : "60px";
12746
12775
  }, StyledLabel);
@@ -12971,13 +13000,13 @@ var Pagination = function Pagination(props) {
12971
13000
  }))));
12972
13001
  };
12973
13002
 
12974
- var _templateObject$1p, _templateObject2$1c, _templateObject3$12, _templateObject4$Z, _templateObject5$T;
12975
- var Container$V = styled__default.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose([""])));
13003
+ var _templateObject$1r, _templateObject2$1c, _templateObject3$13, _templateObject4$Z, _templateObject5$T;
13004
+ var Container$V = styled__default.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose([""])));
12976
13005
  var Title$7 = styled__default.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
12977
13006
  var typography = _ref.theme.typography;
12978
13007
  return typography.modal.title;
12979
13008
  });
12980
- var MessageBox$1 = styled__default.div(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n ", ";\n margin: 28px 0;\n"])), function (_ref2) {
13009
+ var MessageBox$1 = styled__default.div(_templateObject3$13 || (_templateObject3$13 = _taggedTemplateLiteralLoose(["\n ", ";\n margin: 28px 0;\n"])), function (_ref2) {
12981
13010
  var typography = _ref2.theme.typography;
12982
13011
  return typography.modal.basicContent;
12983
13012
  });
@@ -13024,21 +13053,21 @@ var ConfirmationModal = function ConfirmationModal(_ref3) {
13024
13053
  }, rightButtonText)));
13025
13054
  };
13026
13055
 
13027
- var _templateObject$1q, _templateObject2$1d, _templateObject3$13, _templateObject4$_, _templateObject5$U, _templateObject6$F, _templateObject7$C, _templateObject8$v, _templateObject9$p, _templateObject10$l, _templateObject11$d, _templateObject12$a;
13028
- var Container$W = styled__default.div(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteralLoose(["\n max-width: var(--max-content-width);\n margin-top: var(--utility-header-padding-top);\n padding: 0 var(--content-layout-padding-right) 0 var(--content-layout-padding-left);\n height: 48px;\n width: 100%;\n display: flex;\n"])));
13056
+ var _templateObject$1s, _templateObject2$1d, _templateObject3$14, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$A, _templateObject8$u, _templateObject9$o, _templateObject10$k, _templateObject11$d, _templateObject12$a;
13057
+ var Container$W = styled__default.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose(["\n max-width: var(--max-content-width);\n margin-top: var(--utility-header-padding-top);\n padding: 0 var(--content-layout-padding-right) 0 var(--content-layout-padding-left);\n height: 48px;\n width: 100%;\n display: flex;\n"])));
13029
13058
  var LeftArea = styled__default.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: var(--columnPadding, 16px);\n flex: 1 0 0;\n"])));
13030
- var BackLinkIcon = styled__default.div(_templateObject3$13 || (_templateObject3$13 = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n flex: 1; \n > div {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
13059
+ var BackLinkIcon = styled__default.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n flex: 1; \n > div {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
13031
13060
  var BackLink = styled__default(reactRouterDom.Link)(_templateObject4$_ || (_templateObject4$_ = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n padding: 0;\n align-items: center;\n gap: 8px;\n color: var(--grey-10);\n text-align: center;\n font-family: var(--font-ui);\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n border: none;\n background: none;\n text-decoration: none;\n transition: color 0.25s ease;\n margin-left: ", ";\n\n ", "{\n svg * {\n transition: stroke 0.25s ease;\n }\n }\n \n &:hover {\n color: var(--grey-12);\n ", "{\n svg * {\n stroke: var(--grey-12);\n }\n }\n }\n\n ", "\n"])), function (props) {
13032
13061
  return props.$iconInGutter ? '-24px' : '0';
13033
13062
  }, BackLinkIcon, BackLinkIcon, function (_ref) {
13034
13063
  var $showDivider = _ref.$showDivider;
13035
13064
  return $showDivider && styled.css(_templateObject5$U || (_templateObject5$U = _taggedTemplateLiteralLoose(["\n &::after {\n content: '';\n display: inline-block;\n height: 12px;\n width: 1px;\n padding-left: 8px;\n border-right: 1px solid var(--grey-10);\n }\n "])));
13036
13065
  });
13037
- var ExtraActionIcon = styled__default.div(_templateObject6$F || (_templateObject6$F = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n"])));
13038
- var ExtraAction = styled__default.button(_templateObject7$C || (_templateObject7$C = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n padding: 0;\n align-items: center;\n gap: 8px;\n color: var(--grey-10);\n text-align: center;\n font-family: var(--font-ui);\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n border: none;\n background: none;\n text-decoration: none;\n transition: color 0.25s ease;\n cursor: pointer;\n\n ", "{\n svg * {\n transition: stroke 0.25s ease;\n }\n }\n \n &:hover {\n color: var(--grey-12);\n ", "{\n svg * {\n stroke: var(--grey-12);\n }\n }\n }\n\n"])), ExtraActionIcon, ExtraActionIcon);
13039
- var Breadcrumbs = styled__default.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
13040
- var Breadcrumb = styled__default.div(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n\n"])));
13041
- var BreadcrumbIcon = styled__default.div(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n flex: 0;\n display: flex;\n align-items: center;\n\n > div {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
13066
+ var ExtraActionIcon = styled__default.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n"])));
13067
+ var ExtraAction = styled__default.button(_templateObject7$A || (_templateObject7$A = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n padding: 0;\n align-items: center;\n gap: 8px;\n color: var(--grey-10);\n text-align: center;\n font-family: var(--font-ui);\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n border: none;\n background: none;\n text-decoration: none;\n transition: color 0.25s ease;\n cursor: pointer;\n\n ", "{\n svg * {\n transition: stroke 0.25s ease;\n }\n }\n \n &:hover {\n color: var(--grey-12);\n ", "{\n svg * {\n stroke: var(--grey-12);\n }\n }\n }\n\n"])), ExtraActionIcon, ExtraActionIcon);
13068
+ var Breadcrumbs = styled__default.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
13069
+ var Breadcrumb = styled__default.div(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n\n"])));
13070
+ var BreadcrumbIcon = styled__default.div(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n flex: 0;\n display: flex;\n align-items: center;\n\n > div {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
13042
13071
  var BreadcrumbLink = styled__default(reactRouterDom.Link)(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n flex: 1;\n color: var(--grey-10);\n font-family: var(--font-ui);\n text-decoration: none;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 100% */\n transition: color 0.25s ease;\n &:hover {\n color: var(--grey-12);\n }\n"])));
13043
13072
  var RightArea = styled__default.div(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n flex: 1;\n align-items: center;\n display: flex;\n justify-content: right;\n"])));
13044
13073
 
@@ -13120,10 +13149,10 @@ var Tabs = function Tabs(_ref) {
13120
13149
  }, children);
13121
13150
  };
13122
13151
 
13123
- var _templateObject$1r, _templateObject2$1e, _templateObject3$14, _templateObject4$$, _templateObject5$V;
13124
- var Container$X = styled__default.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n flex-direction: column;\n position: relative;\n\n min-height: 100%;\n display: flex;\n"])));
13152
+ var _templateObject$1t, _templateObject2$1e, _templateObject3$15, _templateObject4$$, _templateObject5$V;
13153
+ var Container$X = styled__default.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n flex-direction: column;\n position: relative;\n\n min-height: 100%;\n display: flex;\n"])));
13125
13154
  var HeaderArea = styled__default.div(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: var(--max-content-width);\n padding: \n 24px\n var(--content-layout-padding-right)\n 32px\n var(--content-layout-padding-left);\n \n"])));
13126
- var TabArea = styled__default.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n border-bottom: 1px solid var(--grey-8);\n"])));
13155
+ var TabArea = styled__default.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n border-bottom: 1px solid var(--grey-4);\n"])));
13127
13156
  var TabAreaInner = styled__default.div(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n max-width: var(--max-content-width);\n flex: 1;\n width: 100%;\n padding: \n 0\n var(--content-layout-padding-right)\n 0\n var(--content-layout-padding-left);\n"])));
13128
13157
  var Content = styled__default.div(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: var(--max-content-width);\n padding: \n var(--content-layout-padding-top)\n var(--content-layout-padding-right)\n var(--content-layout-padding-bottom)\n var(--content-layout-padding-left);\n\n display: flex;\n flex: 1;\n flex-direction: column;\n"])));
13129
13158
 
@@ -13142,8 +13171,8 @@ var ContentLayout = function ContentLayout(_ref) {
13142
13171
  }, UtilityHeaderOptions ? React__default.createElement(UtilityHeader, Object.assign({}, UtilityHeaderOptions)) : null, PageHeaderArea ? React__default.createElement(HeaderArea, null, PageHeaderArea) : null, TabsElementArea ? React__default.createElement(Tabs, null, React__default.createElement(TabArea, null, React__default.createElement(TabAreaInner, null, TabsElementArea)), React__default.createElement(Content, null, children)) : React__default.createElement(Content, null, children));
13143
13172
  };
13144
13173
 
13145
- var _templateObject$1s, _templateObject2$1f;
13146
- var FullWidthContainer = styled__default.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n"])), function (_ref) {
13174
+ var _templateObject$1u, _templateObject2$1f;
13175
+ var FullWidthContainer = styled__default.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n"])), function (_ref) {
13147
13176
  var $contentHeight = _ref.$contentHeight;
13148
13177
  return $contentHeight + 'px';
13149
13178
  });
@@ -13169,10 +13198,10 @@ var FullWidthContentBlock = function FullWidthContentBlock(_ref2) {
13169
13198
  }, children));
13170
13199
  };
13171
13200
 
13172
- var _templateObject$1t, _templateObject2$1g, _templateObject3$15, _templateObject4$10, _templateObject5$W, _templateObject6$G, _templateObject7$D, _templateObject8$w;
13173
- var Inner$1 = styled__default.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 0 0 200px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
13201
+ var _templateObject$1v, _templateObject2$1g, _templateObject3$16, _templateObject4$10, _templateObject5$W, _templateObject6$H, _templateObject7$B, _templateObject8$v;
13202
+ var Inner$1 = styled__default.div(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 0 0 200px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
13174
13203
  var Line = styled__default.div(_templateObject2$1g || (_templateObject2$1g = _taggedTemplateLiteralLoose(["\n background: var(--grey-10);\n flex: 1;\n"])));
13175
- var IconContainer$2 = styled__default.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n svg {\n path {\n stroke: var(--grey-11);\n }\n }\n"])));
13204
+ var IconContainer$2 = styled__default.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n svg {\n path {\n stroke: var(--grey-11);\n }\n }\n"])));
13176
13205
  var IconDefault = styled__default.svg(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n transform: ", ";\n"])), function (_ref) {
13177
13206
  var $layout = _ref.$layout;
13178
13207
  return $layout === 'horizontal' ? 'rotate(0deg)' : 'rotate(90deg)';
@@ -13195,9 +13224,9 @@ var IconArrow = styled__default.svg(_templateObject5$W || (_templateObject5$W =
13195
13224
  return 'transform: rotate(0deg);';
13196
13225
  }
13197
13226
  });
13198
- var Container$Y = styled__default.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n\n ", "\n"])), function (_ref3) {
13227
+ var Container$Y = styled__default.div(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n\n ", "\n"])), function (_ref3) {
13199
13228
  var $layout = _ref3.$layout;
13200
- return $layout === 'horizontal' ? styled.css(_templateObject7$D || (_templateObject7$D = _taggedTemplateLiteralLoose(["\n width: 16px;\n flex-direction: column;\n ", "{\n flex-direction: column;\n }\n\n ", "{\n width: 1px;\n }\n\n "])), Inner$1, Line) : styled.css(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n height: 16px;\n flex-direction: row;\n ", "{\n flex-direction: row;\n }\n ", "{\n height: 1px;\n }\n "])), Inner$1, Line);
13229
+ return $layout === 'horizontal' ? styled.css(_templateObject7$B || (_templateObject7$B = _taggedTemplateLiteralLoose(["\n width: 16px;\n flex-direction: column;\n ", "{\n flex-direction: column;\n }\n\n ", "{\n width: 1px;\n }\n\n "])), Inner$1, Line) : styled.css(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n height: 16px;\n flex-direction: row;\n ", "{\n flex-direction: row;\n }\n ", "{\n height: 1px;\n }\n "])), Inner$1, Line);
13201
13230
  });
13202
13231
 
13203
13232
  var ResizeLine = function ResizeLine(_ref4) {
@@ -13242,15 +13271,15 @@ var ResizeLine = function ResizeLine(_ref4) {
13242
13271
  }))), React__default.createElement(Line, null)));
13243
13272
  };
13244
13273
 
13245
- var _templateObject$1u, _templateObject2$1h, _templateObject3$16, _templateObject4$11, _templateObject5$X, _templateObject6$H, _templateObject7$E, _templateObject8$x, _templateObject9$q, _templateObject10$m, _templateObject11$e, _templateObject12$b, _templateObject13$9, _templateObject14$7, _templateObject15$5, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
13246
- var DebugData = styled__default.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose(["\n position: absolute;\n z-index: 10;\n bottom: 20px;\n left: 20px;\n background: #ededed99;\n border: grey 1px solid;\n padding: 20px;\n line-height: 20px;\n font-size: 12px;\n div {\n display: block;\n }\n span {\n display: inline-block;\n width: 130px;\n font-weight: 600;\n }\n"])));
13274
+ var _templateObject$1w, _templateObject2$1h, _templateObject3$17, _templateObject4$11, _templateObject5$X, _templateObject6$I, _templateObject7$C, _templateObject8$w, _templateObject9$p, _templateObject10$l, _templateObject11$e, _templateObject12$b, _templateObject13$9, _templateObject14$7, _templateObject15$5, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
13275
+ var DebugData = styled__default.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n position: absolute;\n z-index: 10;\n bottom: 20px;\n left: 20px;\n background: #ededed99;\n border: grey 1px solid;\n padding: 20px;\n line-height: 20px;\n font-size: 12px;\n div {\n display: block;\n }\n span {\n display: inline-block;\n width: 130px;\n font-weight: 600;\n }\n"])));
13247
13276
  var MainArea = styled__default.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n\n ", "\n"])), function (_ref) {
13248
13277
  var $layout = _ref.$layout,
13249
13278
  $minDimension = _ref.$minDimension;
13250
- return $layout === 'vertical' ? styled.css(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : styled.css(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
13279
+ return $layout === 'vertical' ? styled.css(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : styled.css(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
13251
13280
  });
13252
13281
  var SideAreaInner = styled__default.div(_templateObject5$X || (_templateObject5$X = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n height: 100%;\n transition: opacity 0.2s cubic-bezier(0.85, 0, 0.15, 1);\n"])));
13253
- var SideArea = styled__default.div(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 0 0 ", "px;\n display: ", ";\n transition: \n min-width 0.65s cubic-bezier(0, 0.55, 0.45, 1),\n min-height 0.65s cubic-bezier(0, 0.55, 0.45, 1);\n \n ", "\n\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref2) {
13282
+ var SideArea = styled__default.div(_templateObject6$I || (_templateObject6$I = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 0 0 ", "px;\n display: ", ";\n transition: \n min-width 0.65s cubic-bezier(0, 0.55, 0.45, 1),\n min-height 0.65s cubic-bezier(0, 0.55, 0.45, 1);\n \n ", "\n\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref2) {
13254
13283
  var $defaultSize = _ref2.$defaultSize;
13255
13284
  return $defaultSize;
13256
13285
  }, function (_ref3) {
@@ -13260,15 +13289,15 @@ var SideArea = styled__default.div(_templateObject6$H || (_templateObject6$H = _
13260
13289
  var $layout = _ref4.$layout,
13261
13290
  $maxDimension = _ref4.$maxDimension,
13262
13291
  $minDimension = _ref4.$minDimension;
13263
- return $layout === 'vertical' ? styled.css(_templateObject7$E || (_templateObject7$E = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n ", "{\n min-height: ", "px;\n }\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : '0', $maxDimension ? "max-height: " + $maxDimension + "px;" : 'none', SideAreaInner, $minDimension) : styled.css(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n ", "{\n min-width: ", "px;\n }\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : '0', $maxDimension ? "max-width: " + $maxDimension + "px;" : 'none', SideAreaInner, $minDimension);
13292
+ return $layout === 'vertical' ? styled.css(_templateObject7$C || (_templateObject7$C = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n ", "{\n min-height: ", "px;\n }\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : '0', $maxDimension ? "max-height: " + $maxDimension + "px;" : 'none', SideAreaInner, $minDimension) : styled.css(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n ", "{\n min-width: ", "px;\n }\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : '0', $maxDimension ? "max-width: " + $maxDimension + "px;" : 'none', SideAreaInner, $minDimension);
13264
13293
  }, function (_ref5) {
13265
13294
  var $layout = _ref5.$layout,
13266
13295
  $collapseState = _ref5.$collapseState,
13267
13296
  $minDimension = _ref5.$minDimension;
13268
- return $collapseState === 'collapsing' ? styled.css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n transition: none;\n ", ";\n ", "{\n flex: 0 0 ", "px;\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension, $minDimension) : null;
13297
+ return $collapseState === 'collapsing' ? styled.css(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n transition: none;\n ", ";\n ", "{\n flex: 0 0 ", "px;\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension, $minDimension) : null;
13269
13298
  }, function (_ref6) {
13270
13299
  var $collapseState = _ref6.$collapseState;
13271
- return $collapseState === 'collapsed' ? styled.css(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
13300
+ return $collapseState === 'collapsed' ? styled.css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
13272
13301
  }, function (_ref7) {
13273
13302
  var $layout = _ref7.$layout,
13274
13303
  $collapseState = _ref7.$collapseState,
@@ -13619,100 +13648,66 @@ var clampInt = function clampInt(value, lower, upper) {
13619
13648
  return clampedInt;
13620
13649
  };
13621
13650
 
13622
- var _templateObject$1v, _templateObject2$1i, _templateObject3$17, _templateObject4$12, _templateObject5$Y, _templateObject6$I, _templateObject7$F;
13651
+ var _templateObject$1x, _templateObject2$1i, _templateObject3$18, _templateObject4$12, _templateObject5$Y, _templateObject6$J, _templateObject7$D;
13623
13652
  var MOBILE_CLOSE_HEIGHT = 50;
13624
13653
  var MOBILE_NAVBAR_HEIGHT = 68;
13625
- var Layout = styled__default.div(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
13654
+ var Layout = styled__default.div(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
13626
13655
  var MobileLayout = styled__default.div(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose([""])));
13627
- var Content$1 = styled__default.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n padding: 0;\n flex: 1;\n overflow: auto;\n\n & > div {\n max-width: 1400px;\n }\n\n ", "\n"])), function (_ref) {
13656
+ var Content$1 = styled__default.div(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n padding: 0;\n flex: 1;\n overflow: auto;\n\n & > div {\n max-width: 1400px;\n }\n\n ", "\n"])), function (_ref) {
13628
13657
  var maxWidth = _ref.maxWidth;
13629
13658
  return maxWidth && styled.css(_templateObject4$12 || (_templateObject4$12 = _taggedTemplateLiteralLoose(["\n & > div {\n max-width: ", ";\n }\n "])), maxWidth);
13630
13659
  });
13631
13660
  var MainContainer = styled__default.div(_templateObject5$Y || (_templateObject5$Y = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n flex-direction: column;\n"])));
13632
- var ContentArea = styled__default.div(_templateObject6$I || (_templateObject6$I = _taggedTemplateLiteralLoose(["\n flex: 1;\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n\n ", "\n"])), function (_ref2) {
13661
+ var ContentArea = styled__default.div(_templateObject6$J || (_templateObject6$J = _taggedTemplateLiteralLoose(["\n flex: 1;\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n\n ", "\n"])), function (_ref2) {
13633
13662
  var legacyLayout = _ref2.legacyLayout,
13634
13663
  paddingOverride = _ref2.paddingOverride,
13635
13664
  maxWidth = _ref2.maxWidth;
13636
- return legacyLayout && styled.css(_templateObject7$F || (_templateObject7$F = _taggedTemplateLiteralLoose(["\n padding: ", ";\n\n @media ", " {\n padding: ", ";\n }\n\n @media ", " {\n max-width: ", ";\n padding: ", ";\n }\n "])), paddingOverride ? paddingOverride : '40px 20px', deviceMediaQuery.medium, paddingOverride ? paddingOverride : '40px', deviceMediaQuery.large, maxWidth ? maxWidth : "1200px", paddingOverride ? paddingOverride : '70px 90px');
13637
- });
13638
-
13639
- var _templateObject$1w, _templateObject2$1j, _templateObject3$18, _templateObject4$13, _templateObject5$Z, _templateObject6$J, _templateObject7$G, _templateObject8$y, _templateObject9$r, _templateObject10$n, _templateObject11$f, _templateObject12$c, _templateObject13$a, _templateObject14$8, _templateObject15$6, _templateObject16$6, _templateObject17$6, _templateObject18$4, _templateObject19$4, _templateObject20$3, _templateObject21$3;
13640
- var ContextTitle = styled__default.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n opacity: 0;\n\n ", "\n\n ", "\n"])), function (_ref) {
13641
- var theme = _ref.theme;
13642
- return styled.css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
13643
- }, function (_ref2) {
13644
- var compact = _ref2.compact;
13645
- return compact && styled.css(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
13646
- });
13647
- var ContextIcon$1 = styled__default.div(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n ", ";\n\n flex: 0 0 40px;\n width: 40px;\n height: 40px;\n margin: 0 20px;\n\n border-radius: 7px;\n display:flex;\n justify-content:center;\n align-items:center;\n\n svg {\n display: block;\n }\n"])), function (_ref3) {
13648
- var theme = _ref3.theme;
13649
- return styled.css(_templateObject5$Z || (_templateObject5$Z = _taggedTemplateLiteralLoose(["\n ", ";\n transition: background ", " ", ";\n "])), theme.styles.global.mainMenu.iconBackground["default"], theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
13650
- });
13651
- var ContextIndicator = styled__default.div(_templateObject6$J || (_templateObject6$J = _taggedTemplateLiteralLoose(["\n width: 12px;\n height: 12px;\n flex: 0 0 14px;\n margin: 0 20px 0 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n display: block;\n height: 12px;\n width: 12px;\n }\n\n opacity: 0;\n\n ", "\n\n"])), function (_ref4) {
13652
- var theme = _ref4.theme;
13653
- return styled.css(_templateObject7$G || (_templateObject7$G = _taggedTemplateLiteralLoose(["\n transition: opacity 0 ", ";\n "])), theme.animation.easing.primary.easeInOut);
13654
- });
13655
- var ContextActionBaseCSS$1 = styled.css(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n border: none;\n background: none;\n display: flex;\n justify-content:left;\n align-items:center;\n flex-wrap: wrap;\n cursor: pointer;\n width: 100%;\n outline: none;\n padding: 0;\n text-decoration: none;\n"])));
13656
- var StyledAnchor = styled__default.a(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n display: flex;\n text-decoration: none;\n"])));
13657
- var ExternalIconWrapper = styled__default.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
13658
- var ContextWrapper = styled__default.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n ", ";\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n"])), ContextActionBaseCSS$1, function (_ref5) {
13659
- var theme = _ref5.theme;
13660
- return theme && styled.css(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
13661
- }, function (_ref6) {
13662
- var $menuOpen = _ref6.$menuOpen;
13663
- return $menuOpen && styled.css(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
13664
- }, ContextIcon$1, function (_ref7) {
13665
- var theme = _ref7.theme;
13666
- return theme.styles.global.mainMenu.iconBackground.hover;
13667
- }, IconWrapper);
13668
- var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n ", ";\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref8) {
13669
- var theme = _ref8.theme;
13670
- return theme && styled.css(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
13671
- }, function (_ref9) {
13672
- var $menuOpen = _ref9.$menuOpen;
13673
- return $menuOpen && styled.css(_templateObject16$6 || (_templateObject16$6 = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
13674
- }, ContextIcon$1, function (_ref10) {
13675
- var theme = _ref10.theme;
13676
- return theme.styles.global.mainMenu.iconBackground.hover;
13677
- }, IconWrapper, function (_ref11) {
13678
- var $isActive = _ref11.$isActive;
13679
- return $isActive && styled.css(_templateObject17$6 || (_templateObject17$6 = _taggedTemplateLiteralLoose(["\n ", ",\n &:hover ", "{\n ", ";\n }\n "])), ContextIcon$1, ContextIcon$1, function (_ref12) {
13680
- var theme = _ref12.theme;
13681
- return theme.styles.global.mainMenu.iconBackground.active;
13682
- });
13683
- });
13684
- var ContextActionButton$1 = styled__default.button(_templateObject18$4 || (_templateObject18$4 = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n ", ";\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref13) {
13685
- var theme = _ref13.theme;
13686
- return theme && styled.css(_templateObject19$4 || (_templateObject19$4 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
13687
- }, function (_ref14) {
13688
- var menuOpen = _ref14.menuOpen,
13689
- theme = _ref14.theme;
13690
- return menuOpen && styled.css(_templateObject20$3 || (_templateObject20$3 = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n\n ", "{\n opacity: 1;\n transition: opacity ", " ", " ", ";\n }\n "])), ContextTitle, ContextIndicator, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.animation.speed.fast);
13691
- }, ContextIcon$1, function (_ref15) {
13692
- var theme = _ref15.theme;
13693
- return theme.styles.global.mainMenu.iconBackground.hover;
13694
- }, IconWrapper, function (_ref16) {
13695
- var isActive = _ref16.isActive;
13696
- return isActive && styled.css(_templateObject21$3 || (_templateObject21$3 = _taggedTemplateLiteralLoose(["\n ", ",\n &:hover ", "{\n ", ";\n }\n "])), ContextIcon$1, ContextIcon$1, function (_ref17) {
13697
- var theme = _ref17.theme;
13698
- return theme.styles.global.mainMenu.iconBackground.active;
13699
- });
13700
- });
13701
-
13702
- var ContextItem = function ContextItem(_ref18) {
13703
- var _ref18$hasSubmenu = _ref18.hasSubmenu,
13704
- hasSubmenu = _ref18$hasSubmenu === void 0 ? false : _ref18$hasSubmenu,
13705
- _ref18$contextKey = _ref18.contextKey,
13706
- contextKey = _ref18$contextKey === void 0 ? -1 : _ref18$contextKey,
13707
- submenuOpen = _ref18.submenuOpen,
13708
- menuOpen = _ref18.menuOpen,
13709
- title = _ref18.title,
13710
- href = _ref18.href,
13711
- icon = _ref18.icon,
13712
- compact = _ref18.compact,
13713
- isActive = _ref18.isActive,
13714
- isExternalLink = _ref18.isExternalLink,
13715
- onClickCallback = _ref18.onClickCallback;
13665
+ return legacyLayout && styled.css(_templateObject7$D || (_templateObject7$D = _taggedTemplateLiteralLoose(["\n padding: ", ";\n\n @media ", " {\n padding: ", ";\n }\n\n @media ", " {\n max-width: ", ";\n padding: ", ";\n }\n "])), paddingOverride ? paddingOverride : '40px 20px', deviceMediaQuery.medium, paddingOverride ? paddingOverride : '40px', deviceMediaQuery.large, maxWidth ? maxWidth : "1200px", paddingOverride ? paddingOverride : '70px 90px');
13666
+ });
13667
+
13668
+ var _templateObject$1y, _templateObject2$1j, _templateObject3$19, _templateObject4$13, _templateObject5$Z, _templateObject6$K, _templateObject7$E, _templateObject8$x, _templateObject9$q, _templateObject10$m, _templateObject11$f, _templateObject12$c, _templateObject13$a, _templateObject14$8, _templateObject15$6;
13669
+ var ContextTitle = styled__default.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose(["\n opacity: 0;\n transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref) {
13670
+ var compact = _ref.compact;
13671
+ return compact && styled.css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
13672
+ });
13673
+ var ContextIcon$1 = styled__default.div(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n background-color: var(--global-menu-icon-background-default);\n transition: background-color var(--speed-fast) var(--easing-primary-in);\n \n flex: 0 0 40px;\n width: 40px;\n height: 40px;\n margin: 0 20px;\n\n border-radius: 7px;\n display:flex;\n justify-content:center;\n align-items:center;\n\n svg {\n display: block;\n }\n"])));
13674
+ var ContextIndicator = styled__default.div(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n width: 12px;\n height: 12px;\n flex: 0 0 14px;\n margin: 0 20px 0 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n \n opacity: 0;\n transition: opacity 0 var(--easing-primary-in);\n\n svg {\n display: block;\n height: 12px;\n width: 12px;\n }\n"])));
13675
+ var ContextActionBaseCSS$1 = styled.css(_templateObject5$Z || (_templateObject5$Z = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n border: none;\n background: none;\n display: flex;\n justify-content:left;\n align-items:center;\n flex-wrap: wrap;\n cursor: pointer;\n width: 100%;\n outline: none;\n padding: 0;\n text-decoration: none;\n font-family: var(--font-ui);\n font-weight: 300;\n font-size: 16px;\n color: var(--grey-10);\n"])));
13676
+ var StyledAnchor = styled__default.a(_templateObject6$K || (_templateObject6$K = _taggedTemplateLiteralLoose(["\n display: flex;\n text-decoration: none;\n"])));
13677
+ var ExternalIconWrapper = styled__default.div(_templateObject7$E || (_templateObject7$E = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
13678
+ var ContextWrapper = styled__default.div(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n"])), ContextActionBaseCSS$1, function (_ref2) {
13679
+ var $menuOpen = _ref2.$menuOpen;
13680
+ return $menuOpen && styled.css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
13681
+ }, ContextIcon$1, IconWrapper);
13682
+ var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref3) {
13683
+ var $menuOpen = _ref3.$menuOpen;
13684
+ return $menuOpen && styled.css(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
13685
+ }, ContextIcon$1, IconWrapper, function (_ref4) {
13686
+ var $isActive = _ref4.$isActive;
13687
+ return $isActive && styled.css(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n ", ",\n &:hover ", "{\n background-color: var(--global-menu-icon-background-active);\n }\n "])), ContextIcon$1, ContextIcon$1);
13688
+ });
13689
+ var ContextActionButton$1 = styled__default.button(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref5) {
13690
+ var menuOpen = _ref5.menuOpen;
13691
+ return menuOpen && styled.css(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n\n ", "{\n opacity: 1;\n transition: opacity var(--speed-normal) var(--easing-primary-in-out) var(--speed-fast);\n }\n "])), ContextTitle, ContextIndicator);
13692
+ }, ContextIcon$1, IconWrapper, function (_ref6) {
13693
+ var isActive = _ref6.isActive;
13694
+ return isActive && styled.css(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n ", ",\n &:hover ", "{\n background-color: var(--global-menu-icon-background-active);\n }\n "])), ContextIcon$1, ContextIcon$1);
13695
+ });
13696
+
13697
+ var ContextItem = function ContextItem(_ref7) {
13698
+ var _ref7$hasSubmenu = _ref7.hasSubmenu,
13699
+ hasSubmenu = _ref7$hasSubmenu === void 0 ? false : _ref7$hasSubmenu,
13700
+ _ref7$contextKey = _ref7.contextKey,
13701
+ contextKey = _ref7$contextKey === void 0 ? -1 : _ref7$contextKey,
13702
+ submenuOpen = _ref7.submenuOpen,
13703
+ menuOpen = _ref7.menuOpen,
13704
+ title = _ref7.title,
13705
+ href = _ref7.href,
13706
+ icon = _ref7.icon,
13707
+ compact = _ref7.compact,
13708
+ isActive = _ref7.isActive,
13709
+ isExternalLink = _ref7.isExternalLink,
13710
+ onClickCallback = _ref7.onClickCallback;
13716
13711
  var internal = React__default.createElement(React__default.Fragment, null, React__default.createElement(ContextIcon$1, Object.assign({}, {
13717
13712
  compact: compact
13718
13713
  }), React__default.createElement(Icon, {
@@ -13889,54 +13884,40 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
13889
13884
  };
13890
13885
  };
13891
13886
 
13892
- var _templateObject$1x, _templateObject2$1k, _templateObject3$19, _templateObject4$14, _templateObject5$_, _templateObject6$K, _templateObject7$H, _templateObject8$z, _templateObject9$s, _templateObject10$o, _templateObject11$g, _templateObject12$d, _templateObject13$b, _templateObject14$9, _templateObject15$7;
13893
- var Submenu = styled__default.ul(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
13887
+ var _templateObject$1z, _templateObject2$1k, _templateObject3$1a, _templateObject4$14, _templateObject5$_, _templateObject6$L, _templateObject7$F, _templateObject8$y, _templateObject9$r, _templateObject10$n, _templateObject11$g, _templateObject12$d, _templateObject13$b;
13888
+ var Submenu = styled__default.ul(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
13894
13889
  var SubmenuHeader = styled__default.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
13895
- var SubmenuItemTitle = styled__default.span(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n display: block;\n ", ";\n\n"])), function (_ref) {
13896
- var theme = _ref.theme;
13897
- return theme && styled.css(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", "\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subheader);
13898
- });
13899
- var SubmenuItemLink = styled__default(reactRouterDom.Link)(_templateObject5$_ || (_templateObject5$_ = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n"])), resetButtonStyles);
13900
- var ExternalIconWrapper$1 = styled__default.div(_templateObject6$K || (_templateObject6$K = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
13901
- var SubmenuItemAnchor = styled__default.a(_templateObject7$H || (_templateObject7$H = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
13902
- var SubmenuItem = styled__default.li(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n display: block;\n height: 30px;\n padding-left: 40px;\n position: relative;\n\n &::after {\n display: block;\n content: '';\n height: 1px;\n width: 14px;\n position: absolute;\n left: 0;\n top: 10px;\n background: ", ";\n }\n\n ", ", ", "{\n\n ", ";\n\n\n\n }\n"])), function (_ref2) {
13903
- var colors = _ref2.theme.colors;
13904
- return colors.divider;
13905
- }, SubmenuItemLink, SubmenuItemAnchor, function (_ref3) {
13906
- var theme = _ref3.theme,
13907
- isActive = _ref3.isActive;
13908
- return theme && styled.css(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n\n &:hover {\n ", ";\n }\n\n ", "\n\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover, isActive && styled.css(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n &, &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem.active));
13909
- });
13910
- var SubmenuContainer = styled__default.div(_templateObject11$g || (_templateObject11$g = _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) {
13911
- var theme = _ref4.theme;
13912
- return theme && styled.css(_templateObject12$d || (_templateObject12$d = _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);
13913
- }, function (_ref5) {
13914
- var colors = _ref5.theme.colors;
13915
- return colors.divider;
13916
- });
13917
- var ContextContainer = styled__default.div(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n width: inherit;\n\n ", "{\n max-height: 0;\n opacity: 0;\n }\n ", ";\n\n ", ";\n\n"])), function (_ref6) {
13918
- var minHeight = _ref6.minHeight;
13890
+ var SubmenuItemTitle = styled__default.span(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n display: block;\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.35px;\n color: var(--grey-11);\n"])));
13891
+ var SubmenuItemLink = styled__default(reactRouterDom.Link)(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n"])), resetButtonStyles);
13892
+ var ExternalIconWrapper$1 = styled__default.div(_templateObject5$_ || (_templateObject5$_ = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
13893
+ var SubmenuItemAnchor = styled__default.a(_templateObject6$L || (_templateObject6$L = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
13894
+ var SubmenuItem = styled__default.li(_templateObject7$F || (_templateObject7$F = _taggedTemplateLiteralLoose(["\n display: block;\n height: 30px;\n padding-left: 40px;\n position: relative;\n\n &::after {\n display: block;\n content: '';\n height: 1px;\n width: 14px;\n position: absolute;\n left: 0;\n top: 10px;\n background: var(--dividing-line);\n }\n\n ", ", ", "{\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 300;\n text-decoration: none;\n color: var(--grey-11);\n\n ", ";\n\n }\n"])), SubmenuItemLink, SubmenuItemAnchor, function (_ref) {
13895
+ var isActive = _ref.isActive;
13896
+ return styled.css(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--primary-9);\n }\n\n ", "\n\n "])), isActive && styled.css(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--grey-11);\n font-weight: 600;\n }\n "]))));
13897
+ });
13898
+ var SubmenuContainer = styled__default.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n\n transition:\n max-height var(--speed-normal) var(--easing-primary-out),\n opacity var(--speed-fast) var(--easing-primary-out);\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: var(--dividing-line);\n }\n\n"])));
13899
+ var ContextContainer = styled__default.div(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n width: inherit;\n\n ", "{\n max-height: 0;\n opacity: 0;\n }\n ", ";\n\n ", ";\n\n"])), function (_ref2) {
13900
+ var minHeight = _ref2.minHeight;
13919
13901
  return minHeight ? minHeight + "px" : "70px";
13920
- }, SubmenuContainer, function (_ref7) {
13921
- var open = _ref7.open,
13922
- maxHeight = _ref7.maxHeight,
13923
- theme = _ref7.theme;
13924
- return open && styled.css(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n ", "{\n transition:\n max-height ", " ", ",\n opacity ", " ", ";\n max-height: ", "px !important;\n opacity: 1;\n }\n "])), SubmenuContainer, theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut, maxHeight);
13925
- }, function (_ref8) {
13926
- var loading = _ref8.loading;
13927
- return loading === 'true' && styled.css(_templateObject15$7 || (_templateObject15$7 = _taggedTemplateLiteralLoose(["\n ", "{\n max-height: none !important;\n opacity: 1;\n }\n "])), SubmenuContainer);
13928
- });
13929
-
13930
- var NavigationItem = function NavigationItem(_ref9) {
13931
- var item = _ref9.item,
13932
- menuOpen = _ref9.menuOpen,
13933
- submenuOpen = _ref9.submenuOpen,
13934
- contextKey = _ref9.contextKey,
13935
- loading = _ref9.loading,
13936
- topLevelPath = _ref9.topLevelPath,
13937
- minHeight = _ref9.minHeight,
13938
- onClickCallback = _ref9.onClickCallback,
13939
- readyCallback = _ref9.readyCallback;
13902
+ }, SubmenuContainer, function (_ref3) {
13903
+ var open = _ref3.open,
13904
+ maxHeight = _ref3.maxHeight;
13905
+ return open && styled.css(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n ", "{\n transition:\n max-height var(--speed-normal) var(--easing-primary-out),\n opacity var(--speed-fast) var(--easing-primary-out);\n max-height: ", "px !important;\n opacity: 1;\n }\n "])), SubmenuContainer, maxHeight);
13906
+ }, function (_ref4) {
13907
+ var loading = _ref4.loading;
13908
+ return loading === 'true' && styled.css(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n ", "{\n max-height: none !important;\n opacity: 1;\n }\n "])), SubmenuContainer);
13909
+ });
13910
+
13911
+ var NavigationItem = function NavigationItem(_ref5) {
13912
+ var item = _ref5.item,
13913
+ menuOpen = _ref5.menuOpen,
13914
+ submenuOpen = _ref5.submenuOpen,
13915
+ contextKey = _ref5.contextKey,
13916
+ loading = _ref5.loading,
13917
+ topLevelPath = _ref5.topLevelPath,
13918
+ minHeight = _ref5.minHeight,
13919
+ onClickCallback = _ref5.onClickCallback,
13920
+ readyCallback = _ref5.readyCallback;
13940
13921
  var icon = item.icon,
13941
13922
  title = item.title,
13942
13923
  href = item.href,
@@ -14036,51 +14017,43 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
14036
14017
  return output;
14037
14018
  };
14038
14019
 
14039
- var _templateObject$1y, _templateObject2$1l, _templateObject3$1a, _templateObject4$15, _templateObject5$$, _templateObject6$L, _templateObject7$I, _templateObject8$A, _templateObject9$t, _templateObject10$p, _templateObject11$h, _templateObject12$e, _templateObject13$c, _templateObject14$a, _templateObject15$8;
14040
- var Logo = styled__default(reactRouterDom.Link)(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose(["\n height: 50px;\n margin: 0 20px 55px 15px;\n display: flex;\n\n object {\n pointer-events: none;\n }\n"])));
14020
+ var _templateObject$1A, _templateObject2$1l, _templateObject3$1b, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$G, _templateObject8$z, _templateObject9$s, _templateObject10$o, _templateObject11$h, _templateObject12$e, _templateObject13$c, _templateObject14$9;
14021
+ var Logo = styled__default(reactRouterDom.Link)(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n height: 50px;\n margin: 0 20px 55px 15px;\n display: flex;\n\n object {\n pointer-events: none;\n }\n"])));
14041
14022
  var LogoMark = styled__default.div(_templateObject2$1l || (_templateObject2$1l = _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"])));
14042
- var LogoType = styled__default.div(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n opacity: 0;\n flex: 1;\n height: 50px;\n display: flex;\n justify-content: left;\n align-items: center;\n"])));
14023
+ var LogoType = styled__default.div(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n opacity: 0;\n flex: 1;\n height: 50px;\n display: flex;\n justify-content: left;\n align-items: center;\n"])));
14043
14024
  var SVGObject = styled__default.object(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose([""])));
14044
14025
  var SVGObjectText = styled__default.object(_templateObject5$$ || (_templateObject5$$ = _taggedTemplateLiteralLoose(["\n max-width: 180px;\n"])));
14045
- var NavigationContainer = styled__default.div(_templateObject6$L || (_templateObject6$L = _taggedTemplateLiteralLoose([""])));
14046
- var MenuFooter = styled__default.div(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n flex-direction: column;\n flex: 1;\n justify-content: flex-end;\n"])), function (_ref) {
14047
- var theme = _ref.theme;
14048
- return theme && styled.css(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n ", "\n "])), theme.styles.global.mainMenu.footerBackground);
14026
+ var NavigationContainer = styled__default.div(_templateObject6$M || (_templateObject6$M = _taggedTemplateLiteralLoose([""])));
14027
+ var MenuFooter = styled__default.div(_templateObject7$G || (_templateObject7$G = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n display: flex;\n flex-direction: column;\n flex: 1;\n justify-content: flex-end;\n"])));
14028
+ var FooterItemContainer = styled__default.div(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
14029
+ var PushContainer = styled__default.div(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref) {
14030
+ var isPinned = _ref.isPinned;
14031
+ return styled.css(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
14049
14032
  });
14050
- var FooterItemContainer = styled__default.div(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
14051
- var PushContainer = styled__default.div(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref2) {
14052
- var theme = _ref2.theme,
14053
- isPinned = _ref2.isPinned;
14054
- return theme && styled.css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? theme.dimensions.global.mainMenu.width.open : theme.dimensions.global.mainMenu.width.closed);
14033
+ var Container$_ = styled__default.div(_templateObject11$h || (_templateObject11$h = _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 (_ref2) {
14034
+ var open = _ref2.open,
14035
+ desktopSize = _ref2.desktopSize;
14036
+ return styled.css(_templateObject12$e || (_templateObject12$e = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n box-shadow: 0px 0px 7px 0px var(--primary-a2);\n width: ", ";\n border-right: 1px solid var(--dividing-line);\n\n ", ";\n\n ", "{\n transition: opacity var(--speed-normal) var(--easing-primary-in-out);\n opacity: ", ";\n }\n "])), open ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)", desktopSize === 'xxlarge' ? "" : styled.css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n transition: width var(--speed-normal) var(--easing-primary-out);\n "]))), LogoType, open ? 1 : 0);
14055
14037
  });
14056
- var Container$_ = styled__default.div(_templateObject12$e || (_templateObject12$e = _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) {
14057
- var theme = _ref3.theme,
14058
- open = _ref3.open,
14059
- desktopSize = _ref3.desktopSize;
14060
- return theme && styled.css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n ", "\n ", ";\n width: ", ";\n border-right: 1px solid ", ";\n\n ", "{\n transition: opacity ", " ", ";\n opacity: ", ";\n }\n "])), theme.styles.global.mainMenu.background, desktopSize === 'xxlarge' ? "" : styled.css(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n transition: width ", " ", "\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut), open ? theme.dimensions.global.mainMenu.width.open : theme.dimensions.global.mainMenu.width.closed, theme.styles.global.mainMenu.lines.backgroundColor, LogoType, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, open ? 1 : 0);
14061
- });
14062
- var ContainerInner = styled__default.div(_templateObject15$8 || (_templateObject15$8 = _taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"])), function (_ref4) {
14063
- var theme = _ref4.theme;
14064
- return theme.dimensions.global.mainMenu.width.open;
14065
- });
14066
-
14067
- var MainMenu = function MainMenu(_ref5) {
14068
- var content = _ref5.content,
14069
- _ref5$home = _ref5.home,
14070
- home = _ref5$home === void 0 ? "/" : _ref5$home,
14071
- logoMark = _ref5.logoMark,
14072
- logoText = _ref5.logoText,
14073
- _ref5$keepOpenText = _ref5.keepOpenText,
14074
- keepOpenText = _ref5$keepOpenText === void 0 ? "Keep Open" : _ref5$keepOpenText,
14075
- _ref5$autoHideText = _ref5.autoHideText,
14076
- autoHideText = _ref5$autoHideText === void 0 ? "Auto-Hide" : _ref5$autoHideText,
14077
- supportUrl = _ref5.supportUrl,
14078
- _ref5$defaultMenuOpen = _ref5.defaultMenuOpen,
14079
- defaultMenuOpen = _ref5$defaultMenuOpen === void 0 ? true : _ref5$defaultMenuOpen,
14080
- _ref5$canAlwaysPin = _ref5.canAlwaysPin,
14081
- canAlwaysPin = _ref5$canAlwaysPin === void 0 ? false : _ref5$canAlwaysPin,
14082
- _ref5$onMenuToggle = _ref5.onMenuToggle,
14083
- onMenuToggle = _ref5$onMenuToggle === void 0 ? function () {} : _ref5$onMenuToggle;
14038
+ var ContainerInner = styled__default.div(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n width: var(--global-menu-width-open);\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
14039
+
14040
+ var MainMenu = function MainMenu(_ref3) {
14041
+ var content = _ref3.content,
14042
+ _ref3$home = _ref3.home,
14043
+ home = _ref3$home === void 0 ? "/" : _ref3$home,
14044
+ logoMark = _ref3.logoMark,
14045
+ logoText = _ref3.logoText,
14046
+ _ref3$keepOpenText = _ref3.keepOpenText,
14047
+ keepOpenText = _ref3$keepOpenText === void 0 ? "Keep Open" : _ref3$keepOpenText,
14048
+ _ref3$autoHideText = _ref3.autoHideText,
14049
+ autoHideText = _ref3$autoHideText === void 0 ? "Auto-Hide" : _ref3$autoHideText,
14050
+ supportUrl = _ref3.supportUrl,
14051
+ _ref3$defaultMenuOpen = _ref3.defaultMenuOpen,
14052
+ defaultMenuOpen = _ref3$defaultMenuOpen === void 0 ? true : _ref3$defaultMenuOpen,
14053
+ _ref3$canAlwaysPin = _ref3.canAlwaysPin,
14054
+ canAlwaysPin = _ref3$canAlwaysPin === void 0 ? false : _ref3$canAlwaysPin,
14055
+ _ref3$onMenuToggle = _ref3.onMenuToggle,
14056
+ onMenuToggle = _ref3$onMenuToggle === void 0 ? function () {} : _ref3$onMenuToggle;
14084
14057
 
14085
14058
  var _useMenu = useMenu(defaultMenuOpen, canAlwaysPin),
14086
14059
  menuState = _useMenu.menuState,
@@ -14181,32 +14154,23 @@ var MainMenu = function MainMenu(_ref5) {
14181
14154
  })) : null))), document.body));
14182
14155
  };
14183
14156
 
14184
- var _templateObject$1z, _templateObject2$1m, _templateObject3$1b, _templateObject4$16, _templateObject5$10, _templateObject6$M, _templateObject7$J, _templateObject8$B, _templateObject9$u, _templateObject10$q, _templateObject11$i;
14185
- var MetaConatiner = styled__default.div(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n margin: 10px 10px;\n border: 1px solid var(--grey-3);\n background-color: var(--grey-a2);\n border-radius: 5px;\n &:active {\n box-shadow: 4px 4px var(--grey-a2);\n }\n"])));
14186
- var LabelTitle = styled__default.div(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n max-width: 130px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n opacity: 0.76;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n font-family: ", ";\n margin-top: 2px;\n"])), function (_ref) {
14187
- var theme = _ref.theme;
14188
- return theme.fontFamily.ui;
14189
- });
14190
- var LabelContent = styled__default.div(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n font-size: 10px;\n padding-left: 10px;\n max-width: 200px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 4px 0 5px 0;\n white-space: nowrap;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-8);\n"])));
14191
- var LabelNotes = styled__default.div(_templateObject4$16 || (_templateObject4$16 = _taggedTemplateLiteralLoose(["\n padding-left: 10px;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 5px 0 8px 0;\n max-height: 23px;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-8);\n ", "\n"])), function (_ref2) {
14192
- var theme = _ref2.theme;
14193
- return theme && styled.css(_templateObject5$10 || (_templateObject5$10 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.data);
14194
- });
14195
- var TitleContainer = styled__default.div(_templateObject6$M || (_templateObject6$M = _taggedTemplateLiteralLoose(["\n display: flex;\n gap:6px;\n flex-direction: row;\n align-items: center;\n margin-left: 10px;\n margin: 3px 0 5px 10px;\n"])));
14196
- var Container$$ = styled__default.div(_templateObject7$J || (_templateObject7$J = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
14197
- var TitleBox = styled__default.div(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
14198
- var IconBox = styled__default.div(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n padding: 1px 5px 0 0;\n opacity: 0;\n ", ":hover & {\n opacity: 1;\n cursor: pointer;\n }\n"])), Container$$);
14199
- var CopyTextBox = styled__default.pre(_templateObject10$q || (_templateObject10$q = _taggedTemplateLiteralLoose(["\n padding: 5px;\n font-size: 10px;\n line-height: 1.2;\n box-shadow: 2px 2px 4px (195deg 16% 72% / 72%);\n border: 1px solid var(--grey-8);\n background-color: var(--grey-2);\n border-radius: 5px;\n opacity: 0.76;\n font-weight: 500;\n color: var(--grey-11);\n position: absolute;\n max-width: 170px;\n white-space: pre-wrap;\n font-family: ", ";\n right:10px;\n margin-top: -23px;\n"])), function (_ref3) {
14200
- var theme = _ref3.theme;
14201
- return theme.fontFamily.data;
14202
- });
14203
- var CopyBox = styled__default.div(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n"])));
14204
-
14205
- var UserDrawerMeta = function UserDrawerMeta(_ref4) {
14206
- var item = _ref4.item,
14207
- onUserDrawerMetaClick = _ref4.onUserDrawerMetaClick,
14208
- copySuccessMessage = _ref4.copySuccessMessage,
14209
- includeCopyTitle = _ref4.includeCopyTitle;
14157
+ var _templateObject$1B, _templateObject2$1m, _templateObject3$1c, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$H, _templateObject8$A, _templateObject9$t, _templateObject10$p;
14158
+ var MetaConatiner = styled__default.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose(["\n margin: 10px 10px;\n border: 1px solid var(--grey-3);\n background-color: var(--grey-a2);\n border-radius: 5px;\n &:active {\n box-shadow: 4px 4px var(--grey-a2);\n }\n"])));
14159
+ var LabelTitle = styled__default.div(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n max-width: 130px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n opacity: 0.76;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n font-family: var(--font-ui);\n margin-top: 2px;\n"])));
14160
+ var LabelContent = styled__default.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n font-size: 10px;\n padding-left: 10px;\n max-width: 200px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 4px 0 5px 0;\n white-space: nowrap;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-8);\n"])));
14161
+ var LabelNotes = styled__default.div(_templateObject4$16 || (_templateObject4$16 = _taggedTemplateLiteralLoose(["\n padding-left: 10px;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 5px 0 8px 0;\n max-height: 23px;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-8);\n font-family: var(--font-data);\n"])));
14162
+ var TitleContainer = styled__default.div(_templateObject5$10 || (_templateObject5$10 = _taggedTemplateLiteralLoose(["\n display: flex;\n gap:6px;\n flex-direction: row;\n align-items: center;\n margin-left: 10px;\n margin: 3px 0 5px 10px;\n"])));
14163
+ var Container$$ = styled__default.div(_templateObject6$N || (_templateObject6$N = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
14164
+ var TitleBox = styled__default.div(_templateObject7$H || (_templateObject7$H = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
14165
+ var IconBox = styled__default.div(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n padding: 1px 5px 0 0;\n opacity: 0;\n ", ":hover & {\n opacity: 1;\n cursor: pointer;\n }\n"])), Container$$);
14166
+ var CopyTextBox = styled__default.pre(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n padding: 5px;\n font-size: 10px;\n line-height: 1.2;\n box-shadow: 2px 2px 4px (195deg 16% 72% / 72%);\n border: 1px solid var(--grey-8);\n background-color: var(--grey-2);\n border-radius: 5px;\n opacity: 0.76;\n font-weight: 500;\n color: var(--grey-11);\n position: absolute;\n max-width: 170px;\n white-space: pre-wrap;\n font-family: var(--font-data);\n right:10px;\n margin-top: -23px;\n"])));
14167
+ var CopyBox = styled__default.div(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose(["\n"])));
14168
+
14169
+ var UserDrawerMeta = function UserDrawerMeta(_ref) {
14170
+ var item = _ref.item,
14171
+ onUserDrawerMetaClick = _ref.onUserDrawerMetaClick,
14172
+ copySuccessMessage = _ref.copySuccessMessage,
14173
+ includeCopyTitle = _ref.includeCopyTitle;
14210
14174
  var icon = item.icon,
14211
14175
  title = item.title,
14212
14176
  subTitle = item.subTitle,
@@ -14270,34 +14234,19 @@ var UserDrawerMeta = function UserDrawerMeta(_ref4) {
14270
14234
  }, notes) : null)));
14271
14235
  };
14272
14236
 
14273
- var _templateObject$1A, _templateObject2$1n, _templateObject3$1c, _templateObject4$17;
14274
- var Container$10 = styled__default.div(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n padding: 16px 10px 14px 23px;\n display: flex;\n flex-direction: row;\n border-top: 1px solid ", ";\n align-items: center;\n cursor: pointer;\n svg {\n margin-top: 7px;\n }\n"])), function (_ref) {
14275
- var theme = _ref.theme;
14276
- return theme.colors.divider;
14277
- });
14237
+ var _templateObject$1C, _templateObject2$1n, _templateObject3$1d, _templateObject4$17;
14238
+ var Container$10 = styled__default.div(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteralLoose(["\n padding: 16px 10px 14px 23px;\n display: flex;\n flex-direction: row;\n border-top: 1px solid var(--dividing-line);\n align-items: center;\n cursor: pointer;\n svg {\n margin-top: 7px;\n }\n"])));
14278
14239
  var ColumnContainer = styled__default.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n padding-left: 14px;\n align-items: flex-start;\n"])));
14279
- var Title$8 = styled__default.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n opacity: 0.76;\n font-family: ", ";\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.34px;\n color: ", ";\n"])), function (_ref2) {
14280
- var theme = _ref2.theme;
14281
- return theme.fontFamily.ui;
14282
- }, function (_ref3) {
14283
- var theme = _ref3.theme;
14284
- return theme.typography.global.mainMenu.subheader.color;
14285
- });
14286
- var SubTitle$1 = styled__default.div(_templateObject4$17 || (_templateObject4$17 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: ", ";\n padding-top: 2px;\n opacity: 0.5;\n"])), function (_ref4) {
14287
- var theme = _ref4.theme;
14288
- return theme.fontFamily.ui;
14289
- }, function (_ref5) {
14290
- var theme = _ref5.theme;
14291
- return theme.typography.global.mainMenu.subheader.color;
14292
- });
14240
+ var Title$8 = styled__default.div(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n opacity: 0.76;\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.34px;\n color: var(--grey-11);\n"])));
14241
+ var SubTitle$1 = styled__default.div(_templateObject4$17 || (_templateObject4$17 = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n padding-top: 2px;\n opacity: 0.5;\n"])));
14293
14242
 
14294
- var DrawerBottomMenu = function DrawerBottomMenu(_ref6) {
14295
- var _ref6$icon = _ref6.icon,
14296
- icon = _ref6$icon === void 0 ? 'Settings' : _ref6$icon,
14297
- title = _ref6.title,
14298
- subTitle = _ref6.subTitle,
14299
- _ref6$onClickCallback = _ref6.onClickCallback,
14300
- onClickCallback = _ref6$onClickCallback === void 0 ? function () {} : _ref6$onClickCallback;
14243
+ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
14244
+ var _ref$icon = _ref.icon,
14245
+ icon = _ref$icon === void 0 ? 'Settings' : _ref$icon,
14246
+ title = _ref.title,
14247
+ subTitle = _ref.subTitle,
14248
+ _ref$onClickCallback = _ref.onClickCallback,
14249
+ onClickCallback = _ref$onClickCallback === void 0 ? function () {} : _ref$onClickCallback;
14301
14250
  return React__default.createElement(Container$10, {
14302
14251
  onClick: onClickCallback
14303
14252
  }, React__default.createElement(Icon, {
@@ -14307,103 +14256,78 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref6) {
14307
14256
  }), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
14308
14257
  };
14309
14258
 
14310
- var _templateObject$1B, _templateObject2$1o, _templateObject3$1d, _templateObject4$18, _templateObject5$11, _templateObject6$N, _templateObject7$K, _templateObject8$C, _templateObject9$v, _templateObject10$r, _templateObject11$j, _templateObject12$f, _templateObject13$d, _templateObject14$b, _templateObject15$9, _templateObject16$7, _templateObject17$7, _templateObject18$5, _templateObject19$5;
14311
- var DrawerTop = styled__default.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose([""])));
14312
- var DrawerBottom = styled__default.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
14313
- var theme = _ref.theme;
14314
- return styled.css(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n width: 100%;\n position: fixed;\n bottom: 50px;\n\n @media ", " {\n position: static;\n bottom: 0;\n }\n "])), theme.deviceMediaQuery.medium);
14315
- });
14316
- var DrawerHeader = styled__default.h2(_templateObject4$18 || (_templateObject4$18 = _taggedTemplateLiteralLoose(["\n ", ";\n padding: 0;\n margin: 0 0 5px;\n"])), function (_ref2) {
14317
- var theme = _ref2.theme;
14318
- return theme.typography.global.mainMenu.subheader;
14319
- });
14320
- var CurrentUser = styled__default.div(_templateObject5$11 || (_templateObject5$11 = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 15px;\n\n ", ";\n"])), function (_ref3) {
14321
- var theme = _ref3.theme;
14322
- return styled.css(_templateObject6$N || (_templateObject6$N = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n ", ";\n "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.typography.global.mainMenu.identity);
14323
- });
14324
- var UserOptions = styled__default.div(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 10px 20px;\n ", ";\n\n"])), function (_ref4) {
14325
- var theme = _ref4.theme;
14326
- return styled.css(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n "])), theme.styles.global.mainMenu.lines.backgroundColor);
14327
- });
14328
- var Logout = styled__default.div(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
14329
- var LinkMenu = styled__default.ul(_templateObject10$r || (_templateObject10$r = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
14330
- var LinkMenuItem = styled__default.li(_templateObject11$j || (_templateObject11$j = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
14331
- var IconWrapperFooter = styled__default.div(_templateObject12$f || (_templateObject12$f = _taggedTemplateLiteralLoose(["\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 padding-right: 20px;\n"])));
14332
- var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject13$d || (_templateObject13$d = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n\n ", ";\n\n ", ";\n"])), resetButtonStyles, function (_ref5) {
14333
- var theme = _ref5.theme;
14334
- return styled.css(_templateObject14$b || (_templateObject14$b = _taggedTemplateLiteralLoose(["\n ", ";\n\n &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover);
14335
- }, function (_ref6) {
14336
- var theme = _ref6.theme,
14337
- isActive = _ref6.isActive;
14338
- return isActive && styled.css(_templateObject15$9 || (_templateObject15$9 = _taggedTemplateLiteralLoose(["\n &, &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem.active);
14339
- });
14340
- var FooterMeta = styled__default.div(_templateObject16$7 || (_templateObject16$7 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n border-top: ", " 1px solid;\n margin-top: auto;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-size: 10px;\n font-weight: 400;\n color: var(--grey-a11);\n padding: 10px;\n padding-left: ", ";\n"])), function (_ref7) {
14341
- var theme = _ref7.theme;
14342
- return theme.fontFamily.ui;
14343
- }, function (_ref8) {
14344
- var theme = _ref8.theme;
14345
- return theme.styles.global.mainMenu.lines.backgroundColor;
14346
- }, function (_ref9) {
14347
- var icon = _ref9.icon;
14259
+ var _templateObject$1D, _templateObject2$1o, _templateObject3$1e, _templateObject4$18, _templateObject5$11, _templateObject6$O, _templateObject7$I, _templateObject8$B, _templateObject9$u, _templateObject10$q, _templateObject11$i, _templateObject12$f, _templateObject13$d, _templateObject14$a;
14260
+ var DrawerTop = styled__default.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose([""])));
14261
+ var DrawerBottom = styled__default.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n width: 100%;\n position: fixed;\n bottom: 50px;\n @media ", " {\n position: static;\n bottom: 0;\n }\n"])), deviceMediaQuery.medium);
14262
+ var DrawerHeader = styled__default.h2(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.35px;\n color: var(--grey-11);\n padding: 0;\n margin: 0 0 5px;\n"])));
14263
+ var CurrentUser = styled__default.div(_templateObject4$18 || (_templateObject4$18 = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 15px;\n border-bottom: var(--dividing-line) 1px solid;\n font-size: 12px;\n font-weight: 400;\n color: var(--grey-11);\n"])));
14264
+ var UserOptions = styled__default.div(_templateObject5$11 || (_templateObject5$11 = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 10px 20px;\n border-bottom: var(--dividing-line) 1px solid;\n"])));
14265
+ var Logout = styled__default.div(_templateObject6$O || (_templateObject6$O = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
14266
+ var LinkMenu = styled__default.ul(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
14267
+ var LinkMenuItem = styled__default.li(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
14268
+ var IconWrapperFooter = styled__default.div(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\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 padding-right: 20px;\n"])));
14269
+ var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject10$q || (_templateObject10$q = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n font-size: 14px;\n font-weight: 300;\n color: var(--grey-10);\n text-decoration: none;\n\n &:hover {\n color: var(--primary-9);\n }\n\n ", ";\n"])), resetButtonStyles, function (_ref) {
14270
+ var isActive = _ref.isActive;
14271
+ return isActive && styled.css(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--primary-9);\n }\n "])));
14272
+ });
14273
+ var FooterMeta = styled__default.div(_templateObject12$f || (_templateObject12$f = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n border-top: var(--dividing-line) 1px solid;\n margin-top: auto;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-size: 10px;\n font-weight: 400;\n color: var(--grey-a11);\n padding: 10px;\n padding-left: ", ";\n"])), function (_ref2) {
14274
+ var icon = _ref2.icon;
14348
14275
  return icon !== '' ? '31px;' : '21px;';
14349
14276
  });
14350
- var NavigationContainer$1 = styled__default.div(_templateObject17$7 || (_templateObject17$7 = _taggedTemplateLiteralLoose(["\n max-height: 300px;\n overflow: scroll;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"])), function (_ref10) {
14351
- var theme = _ref10.theme;
14352
- return styled.css(_templateObject18$5 || (_templateObject18$5 = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n "])), theme.colors.divider);
14353
- });
14354
- var FooterText = styled__default.div(_templateObject19$5 || (_templateObject19$5 = _taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 136px;\n max-width: ", ";\n color: var(--grey-11);\n opacity: 0.5;\n"])), function (_ref11) {
14355
- var icon = _ref11.icon;
14277
+ var NavigationContainer$1 = styled__default.div(_templateObject13$d || (_templateObject13$d = _taggedTemplateLiteralLoose(["\n max-height: 300px;\n overflow: scroll;\n overflow-x: hidden;\n overflow-y: auto;\n border-bottom: var(--dividing-line) 1px solid;\n"])));
14278
+ var FooterText = styled__default.div(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 136px;\n max-width: ", ";\n color: var(--grey-11);\n opacity: 0.5;\n"])), function (_ref3) {
14279
+ var icon = _ref3.icon;
14356
14280
  return icon !== '' ? '136px;' : '164px;';
14357
14281
  });
14358
14282
 
14359
- var UserMenu = function UserMenu(_ref12) {
14360
- var _ref12$hasLanguage = _ref12.hasLanguage,
14361
- hasLanguage = _ref12$hasLanguage === void 0 ? false : _ref12$hasLanguage,
14362
- _ref12$selectedLangua = _ref12.selectedLanguageText,
14363
- selectedLanguageText = _ref12$selectedLangua === void 0 ? '' : _ref12$selectedLangua,
14364
- _ref12$hasLogout = _ref12.hasLogout,
14365
- hasLogout = _ref12$hasLogout === void 0 ? true : _ref12$hasLogout,
14366
- _ref12$logoutLink = _ref12.logoutLink,
14367
- logoutLink = _ref12$logoutLink === void 0 ? '/logout' : _ref12$logoutLink,
14368
- _ref12$logoutText = _ref12.logoutText,
14369
- logoutText = _ref12$logoutText === void 0 ? 'Logout' : _ref12$logoutText,
14370
- _ref12$hasCurrentUser = _ref12.hasCurrentUser,
14371
- hasCurrentUser = _ref12$hasCurrentUser === void 0 ? true : _ref12$hasCurrentUser,
14372
- _ref12$currentUserTex = _ref12.currentUserText,
14373
- currentUserText = _ref12$currentUserTex === void 0 ? 'Current User' : _ref12$currentUserTex,
14374
- _ref12$accountOptionT = _ref12.accountOptionText,
14375
- accountOptionText = _ref12$accountOptionT === void 0 ? "Account Options" : _ref12$accountOptionT,
14376
- _ref12$userSubmenu = _ref12.userSubmenu,
14377
- userSubmenu = _ref12$userSubmenu === void 0 ? [] : _ref12$userSubmenu,
14378
- userDrawerBespoke = _ref12.userDrawerBespoke,
14379
- loggedInUser = _ref12.loggedInUser,
14380
- _ref12$hasSwitchTheme = _ref12.hasSwitchTheme,
14381
- hasSwitchTheme = _ref12$hasSwitchTheme === void 0 ? false : _ref12$hasSwitchTheme,
14382
- _ref12$isLightMode = _ref12.isLightMode,
14383
- isLightMode = _ref12$isLightMode === void 0 ? true : _ref12$isLightMode,
14384
- _ref12$switchThemeTex = _ref12.switchThemeText,
14385
- switchThemeText = _ref12$switchThemeTex === void 0 ? 'SWITCH THEME' : _ref12$switchThemeTex,
14386
- _ref12$selectedThemeT = _ref12.selectedThemeText,
14387
- selectedThemeText = _ref12$selectedThemeT === void 0 ? '' : _ref12$selectedThemeT,
14388
- _ref12$onLogout = _ref12.onLogout,
14389
- onLogout = _ref12$onLogout === void 0 ? function () {} : _ref12$onLogout,
14390
- _ref12$onLanguageTogg = _ref12.onLanguageToggle,
14391
- onLanguageToggle = _ref12$onLanguageTogg === void 0 ? function () {} : _ref12$onLanguageTogg,
14392
- closeOnClick = _ref12.closeOnClick,
14393
- _ref12$onThemeToggle = _ref12.onThemeToggle,
14394
- onThemeToggle = _ref12$onThemeToggle === void 0 ? function () {} : _ref12$onThemeToggle,
14395
- _ref12$userDrawerFoot = _ref12.userDrawerFooter,
14396
- userDrawerFooter = _ref12$userDrawerFoot === void 0 ? {
14283
+ var UserMenu = function UserMenu(_ref4) {
14284
+ var _ref4$hasLanguage = _ref4.hasLanguage,
14285
+ hasLanguage = _ref4$hasLanguage === void 0 ? false : _ref4$hasLanguage,
14286
+ _ref4$selectedLanguag = _ref4.selectedLanguageText,
14287
+ selectedLanguageText = _ref4$selectedLanguag === void 0 ? '' : _ref4$selectedLanguag,
14288
+ _ref4$hasLogout = _ref4.hasLogout,
14289
+ hasLogout = _ref4$hasLogout === void 0 ? true : _ref4$hasLogout,
14290
+ _ref4$logoutLink = _ref4.logoutLink,
14291
+ logoutLink = _ref4$logoutLink === void 0 ? '/logout' : _ref4$logoutLink,
14292
+ _ref4$logoutText = _ref4.logoutText,
14293
+ logoutText = _ref4$logoutText === void 0 ? 'Logout' : _ref4$logoutText,
14294
+ _ref4$hasCurrentUser = _ref4.hasCurrentUser,
14295
+ hasCurrentUser = _ref4$hasCurrentUser === void 0 ? true : _ref4$hasCurrentUser,
14296
+ _ref4$currentUserText = _ref4.currentUserText,
14297
+ currentUserText = _ref4$currentUserText === void 0 ? 'Current User' : _ref4$currentUserText,
14298
+ _ref4$accountOptionTe = _ref4.accountOptionText,
14299
+ accountOptionText = _ref4$accountOptionTe === void 0 ? "Account Options" : _ref4$accountOptionTe,
14300
+ _ref4$userSubmenu = _ref4.userSubmenu,
14301
+ userSubmenu = _ref4$userSubmenu === void 0 ? [] : _ref4$userSubmenu,
14302
+ userDrawerBespoke = _ref4.userDrawerBespoke,
14303
+ loggedInUser = _ref4.loggedInUser,
14304
+ _ref4$hasSwitchTheme = _ref4.hasSwitchTheme,
14305
+ hasSwitchTheme = _ref4$hasSwitchTheme === void 0 ? false : _ref4$hasSwitchTheme,
14306
+ _ref4$isLightMode = _ref4.isLightMode,
14307
+ isLightMode = _ref4$isLightMode === void 0 ? true : _ref4$isLightMode,
14308
+ _ref4$switchThemeText = _ref4.switchThemeText,
14309
+ switchThemeText = _ref4$switchThemeText === void 0 ? 'SWITCH THEME' : _ref4$switchThemeText,
14310
+ _ref4$selectedThemeTe = _ref4.selectedThemeText,
14311
+ selectedThemeText = _ref4$selectedThemeTe === void 0 ? '' : _ref4$selectedThemeTe,
14312
+ _ref4$onLogout = _ref4.onLogout,
14313
+ onLogout = _ref4$onLogout === void 0 ? function () {} : _ref4$onLogout,
14314
+ _ref4$onLanguageToggl = _ref4.onLanguageToggle,
14315
+ onLanguageToggle = _ref4$onLanguageToggl === void 0 ? function () {} : _ref4$onLanguageToggl,
14316
+ closeOnClick = _ref4.closeOnClick,
14317
+ _ref4$onThemeToggle = _ref4.onThemeToggle,
14318
+ onThemeToggle = _ref4$onThemeToggle === void 0 ? function () {} : _ref4$onThemeToggle,
14319
+ _ref4$userDrawerFoote = _ref4.userDrawerFooter,
14320
+ userDrawerFooter = _ref4$userDrawerFoote === void 0 ? {
14397
14321
  icon: '',
14398
14322
  title: ''
14399
- } : _ref12$userDrawerFoot,
14400
- copySuccessMessage = _ref12.copySuccessMessage,
14401
- includeCopyTitle = _ref12.includeCopyTitle,
14402
- _ref12$onUserDrawerMe = _ref12.onUserDrawerMetaClick,
14403
- onUserDrawerMetaClick = _ref12$onUserDrawerMe === void 0 ? function () {} : _ref12$onUserDrawerMe,
14404
- userDrawerMeta = _ref12.userDrawerMeta,
14405
- hasUserDrawerMeta = _ref12.hasUserDrawerMeta,
14406
- hasUserDrawerFooter = _ref12.hasUserDrawerFooter;
14323
+ } : _ref4$userDrawerFoote,
14324
+ copySuccessMessage = _ref4.copySuccessMessage,
14325
+ includeCopyTitle = _ref4.includeCopyTitle,
14326
+ _ref4$onUserDrawerMet = _ref4.onUserDrawerMetaClick,
14327
+ onUserDrawerMetaClick = _ref4$onUserDrawerMet === void 0 ? function () {} : _ref4$onUserDrawerMet,
14328
+ userDrawerMeta = _ref4.userDrawerMeta,
14329
+ hasUserDrawerMeta = _ref4.hasUserDrawerMeta,
14330
+ hasUserDrawerFooter = _ref4.hasUserDrawerFooter;
14407
14331
  var icon = userDrawerFooter.icon,
14408
14332
  title = userDrawerFooter.title;
14409
14333
  var logoutHandler = React.useCallback(function (e) {
@@ -14434,9 +14358,9 @@ var UserMenu = function UserMenu(_ref12) {
14434
14358
  includeCopyTitle: includeCopyTitle,
14435
14359
  copySuccessMessage: copySuccessMessage
14436
14360
  }));
14437
- })) : null, userSubmenu.length > 0 ? React__default.createElement(UserOptions, null, React__default.createElement(DrawerHeader, null, accountOptionText), React__default.createElement(LinkMenu, null, userSubmenu.map(function (_ref13, index) {
14438
- var text = _ref13.text,
14439
- href = _ref13.href;
14361
+ })) : null, userSubmenu.length > 0 ? React__default.createElement(UserOptions, null, React__default.createElement(DrawerHeader, null, accountOptionText), React__default.createElement(LinkMenu, null, userSubmenu.map(function (_ref5, index) {
14362
+ var text = _ref5.text,
14363
+ href = _ref5.href;
14440
14364
  return React__default.createElement(LinkMenuItem, {
14441
14365
  key: index
14442
14366
  }, React__default.createElement(LinkMenuItemA, {
@@ -14468,19 +14392,19 @@ var UserMenu = function UserMenu(_ref12) {
14468
14392
  }, title)) : null));
14469
14393
  };
14470
14394
 
14471
- var _templateObject$1C, _templateObject2$1p, _templateObject3$1e, _templateObject4$19, _templateObject5$12, _templateObject6$O, _templateObject7$L, _templateObject8$D;
14472
- var Container$11 = styled__default.div(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 18px 20px 12px 20px;\n height: 122px;\n"])));
14395
+ var _templateObject$1E, _templateObject2$1p, _templateObject3$1f, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$J, _templateObject8$C;
14396
+ var Container$11 = styled__default.div(_templateObject$1E || (_templateObject$1E = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 18px 20px 12px 20px;\n height: 122px;\n"])));
14473
14397
  var ImgWrapper = styled__default.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n overflow: hidden;\n height: 40px;\n width: 40px;\n flex-shrink: 0;\n"])));
14474
- var EmptyImg = styled__default.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-5);\n width: 100%;\n height: 100%;\n"])));
14398
+ var EmptyImg = styled__default.div(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-5);\n width: 100%;\n height: 100%;\n"])));
14475
14399
  var Image$2 = styled__default.div(_templateObject4$19 || (_templateObject4$19 = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background-image: url(", ");\n background-position: center center;\n background-size: cover;\n background-repeat: no-repeat;\n display: ", ";\n"])), function (p) {
14476
14400
  return p.image;
14477
14401
  }, function (p) {
14478
14402
  return p.image ? 'block' : 'none';
14479
14403
  });
14480
14404
  var InfoContainer = styled__default.div(_templateObject5$12 || (_templateObject5$12 = _taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
14481
- var Title$9 = styled__default.div(_templateObject6$O || (_templateObject6$O = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n font-weight: 500;\n color: var(--grey-11);\n"])));
14482
- var Message = styled__default.div(_templateObject7$L || (_templateObject7$L = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n overflow: hidden;\n color: var(--grey-11);\n margin: 4px 0;\n height: 30px;\n text-overflow: ellipsis;\n overflow: hidden;\n display: inline-block;\n vertical-align: middle;\n"])));
14483
- var TimeMsg = styled__default.div(_templateObject8$D || (_templateObject8$D = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n color: var(--grey-12);\n margin-top: 15px;\n"])));
14405
+ var Title$9 = styled__default.div(_templateObject6$P || (_templateObject6$P = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n font-weight: 500;\n color: var(--grey-11);\n"])));
14406
+ var Message = styled__default.div(_templateObject7$J || (_templateObject7$J = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n overflow: hidden;\n color: var(--grey-11);\n margin: 4px 0;\n height: 30px;\n text-overflow: ellipsis;\n overflow: hidden;\n display: inline-block;\n vertical-align: middle;\n"])));
14407
+ var TimeMsg = styled__default.div(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n color: var(--grey-12);\n margin-top: 15px;\n"])));
14484
14408
 
14485
14409
  var NotificationItem = function NotificationItem(_ref) {
14486
14410
  var imgUrl = _ref.imgUrl,
@@ -14492,16 +14416,10 @@ var NotificationItem = function NotificationItem(_ref) {
14492
14416
  }) : React__default.createElement(EmptyImg, null)), React__default.createElement(InfoContainer, null, React__default.createElement(Title$9, null, title), React__default.createElement(Message, null, message), React__default.createElement(TimeMsg, null, time)));
14493
14417
  };
14494
14418
 
14495
- var _templateObject$1D, _templateObject2$1q, _templateObject3$1f;
14496
- var Container$12 = styled__default.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
14497
- var StatusContainer = styled__default.h2(_templateObject2$1q || (_templateObject2$1q = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n padding: 10px 0 10px 20px;\n font-size: 14px;\n font-weight: 500;\n color: var(--grey-12);\n border-bottom: ", " 1px solid;\n margin: 0;\n"])), function (_ref) {
14498
- var theme = _ref.theme;
14499
- return theme.colors.divider;
14500
- });
14501
- var NotificationWrapper = styled__default.div(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n"])), function (_ref2) {
14502
- var colors = _ref2.theme.colors;
14503
- return colors.divider;
14504
- });
14419
+ var _templateObject$1F, _templateObject2$1q, _templateObject3$1g;
14420
+ var Container$12 = styled__default.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
14421
+ var StatusContainer = styled__default.h2(_templateObject2$1q || (_templateObject2$1q = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n padding: 10px 0 10px 20px;\n font-size: 14px;\n font-weight: 500;\n color: var(--grey-12);\n border-bottom: var(--dividing-line) 1px solid;\n margin: 0;\n"])));
14422
+ var NotificationWrapper = styled__default.div(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n border-bottom: var(--dividing-line) 1px solid;\n"])));
14505
14423
 
14506
14424
  var renderNotifications = function renderNotifications(items, type) {
14507
14425
  return items.map(function (item, index) {
@@ -14511,15 +14429,15 @@ var renderNotifications = function renderNotifications(items, type) {
14511
14429
  });
14512
14430
  };
14513
14431
 
14514
- var NotificationsHistory = function NotificationsHistory(_ref3) {
14515
- var read = _ref3.read,
14516
- unread = _ref3.unread,
14517
- _ref3$noNotifications = _ref3.noNotificationsText,
14518
- noNotificationsText = _ref3$noNotifications === void 0 ? 'No new notifications' : _ref3$noNotifications,
14519
- _ref3$readNotificatio = _ref3.readNotificationsText,
14520
- readNotificationsText = _ref3$readNotificatio === void 0 ? 'New' : _ref3$readNotificatio,
14521
- _ref3$unreadNotificat = _ref3.unreadNotificationsText,
14522
- unreadNotificationsText = _ref3$unreadNotificat === void 0 ? 'Read' : _ref3$unreadNotificat;
14432
+ var NotificationsHistory = function NotificationsHistory(_ref) {
14433
+ var read = _ref.read,
14434
+ unread = _ref.unread,
14435
+ _ref$noNotificationsT = _ref.noNotificationsText,
14436
+ noNotificationsText = _ref$noNotificationsT === void 0 ? 'No new notifications' : _ref$noNotificationsT,
14437
+ _ref$readNotification = _ref.readNotificationsText,
14438
+ readNotificationsText = _ref$readNotification === void 0 ? 'New' : _ref$readNotification,
14439
+ _ref$unreadNotificati = _ref.unreadNotificationsText,
14440
+ unreadNotificationsText = _ref$unreadNotificati === void 0 ? 'Read' : _ref$unreadNotificati;
14523
14441
 
14524
14442
  if (read.length === 0 && unread.length === 0) {
14525
14443
  return React__default.createElement(Container$12, null, React__default.createElement(StatusContainer, null, noNotificationsText));
@@ -14528,108 +14446,80 @@ var NotificationsHistory = function NotificationsHistory(_ref3) {
14528
14446
  return React__default.createElement(Container$12, 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')));
14529
14447
  };
14530
14448
 
14531
- var _templateObject$1E, _templateObject2$1r, _templateObject3$1g, _templateObject4$1a, _templateObject5$13, _templateObject6$P, _templateObject7$M, _templateObject8$E, _templateObject9$w, _templateObject10$s, _templateObject11$k, _templateObject12$g, _templateObject13$e, _templateObject14$c;
14532
- var Container$13 = styled__default.div(_templateObject$1E || (_templateObject$1E = _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) {
14533
- var theme = _ref.theme,
14534
- colors = _ref.theme.colors;
14535
- return colors && styled.css(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n background-color:", ";\n "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.styles.global.mainMenu.background.backgroundColor);
14536
- });
14537
- var SearchBar = styled__default.div(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n margin-left: 25px;\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
14538
- var IconWrapper$4 = styled__default.div(_templateObject4$1a || (_templateObject4$1a = _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"])));
14539
- var SearchInput = styled__default.input(_templateObject5$13 || (_templateObject5$13 = _taggedTemplateLiteralLoose(["\n ", ";\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"])), removeAutoFillStyle, function (_ref2) {
14540
- var theme = _ref2.theme;
14541
- return theme.fontFamily.data;
14542
- }, function (_ref3) {
14543
- var typography = _ref3.theme.typography;
14544
- return typography.global.topBar.search.value;
14545
- }, function (_ref4) {
14546
- var typography = _ref4.theme.typography;
14547
- return typography.global.topBar.search.placeholder;
14548
- });
14549
- var ButtonArea = styled__default.div(_templateObject6$P || (_templateObject6$P = _taggedTemplateLiteralLoose(["\n height: inherit;\n padding-right: 10px;\n display: flex;\n"])));
14449
+ var _templateObject$1G, _templateObject2$1r, _templateObject3$1h, _templateObject4$1a, _templateObject5$13, _templateObject6$Q, _templateObject7$K, _templateObject8$D, _templateObject9$v, _templateObject10$r, _templateObject11$j, _templateObject12$g;
14450
+ var Container$13 = styled__default.div(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose(["\n z-index: 9;\n position: sticky;\n top: 0;\n height: 56px;\n padding: 0 16px 0 24px;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-self: flex-start;\n border-bottom: 1px solid var(--dividing-line);\n background: var(--grey-2);\n box-shadow: 5px 0px 10px 0px var(--primary-a2);\n"])));
14451
+ var SearchBar = styled__default.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
14452
+ var IconWrapper$4 = styled__default.div(_templateObject3$1h || (_templateObject3$1h = _taggedTemplateLiteralLoose(["\n flex: 0;\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"])));
14453
+ var SearchInput = styled__default.input(_templateObject4$1a || (_templateObject4$1a = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: var(--font-data);\n flex: 1;\n height: 35px;\n line-height: 35px;\n border: none;\n outline: none;\n background: transparent; \n color: var(--grey-10);\n font-size: 14px;\n\n &::placeholder {\n font-family: var(--font-data);\n font-weight: 400;\n font-style: italic;\n font-size: 14px;\n color: var(--grey-8);\n }\n"])), removeAutoFillStyle);
14454
+ var ButtonArea = styled__default.div(_templateObject5$13 || (_templateObject5$13 = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n gap: 0;\n"])));
14455
+ var buttonClickAnimation = styled.keyframes(_templateObject6$Q || (_templateObject6$Q = _taggedTemplateLiteralLoose(["\n 0% {\n opacity:0.9;\n transform: scale(0.85);\n }\n 100% {\n opacity:1;\n transform: scale(1);\n }\n"])));
14550
14456
  var DrawerToggle = styled__default.button.attrs({
14551
14457
  type: 'button'
14552
- })(_templateObject7$M || (_templateObject7$M = _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) {
14553
- var theme = _ref5.theme;
14554
- return styled.css(_templateObject8$E || (_templateObject8$E = _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);
14555
- }, function (_ref6) {
14556
- var isActive = _ref6.isActive,
14557
- theme = _ref6.theme;
14558
- return isActive && styled.css(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: ", ";\n }\n "])), theme.colors.menu.active);
14458
+ })(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n flex: 0 56px;\n width: 56px;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n border-bottom: 5px solid transparent;\n padding-top: 5px;\n background: none;\n outline: none;\n cursor: pointer;\n \n transition: border var(--speed-normal) var(--easing-primary-in);\n \n svg {\n transition: transform var(--speed-normal) var(--easing-primary-in);\n }\n\n &:hover {\n border-bottom-color: var(--primary-6);\n opacity: 0.9;\n }\n \n ", "\n"])), function (_ref) {
14459
+ var isActive = _ref.isActive;
14460
+ return isActive && styled.css(_templateObject8$D || (_templateObject8$D = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: var(--primary-9);\n \n svg {\n transform: scale(1);\n animation: ", " 0.35s cubic-bezier(0.7, 0, 0.84, 0);\n }\n\n }\n "])), buttonClickAnimation);
14559
14461
  });
14560
- var DrawerPortalWrapper = styled__default.div(_templateObject10$s || (_templateObject10$s = _taggedTemplateLiteralLoose([""])));
14561
- var Drawer = styled__default.div(_templateObject11$k || (_templateObject11$k = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n\n position: fixed;\n right: -10px;\n top: 65px;\n bottom: 0;\n background: ", ";\n border-left: ", " 1px solid;\n width: ", ";\n opacity: 0;\n visibility: hidden;\n z-index: 100;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n ", ";\n\n ", "\n"])), function (_ref7) {
14562
- var theme = _ref7.theme;
14563
- return theme.fontFamily.ui;
14564
- }, function (_ref8) {
14565
- var theme = _ref8.theme;
14566
- return theme.styles.global.mainMenu.background;
14567
- }, function (_ref9) {
14568
- var theme = _ref9.theme;
14569
- return theme.styles.global.mainMenu.lines.backgroundColor;
14570
- }, function (_ref10) {
14571
- var baseWidth = _ref10.baseWidth;
14462
+ var DrawerPortalWrapper = styled__default.div(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose([""])));
14463
+ var Drawer = styled__default.div(_templateObject10$r || (_templateObject10$r = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n\n position: fixed;\n right: -10px;\n top: 56px;\n bottom: 0;\n background: var(--global-element-background);\n border-left: var(--dividing-line) 1px solid;\n \n width: ", ";\n opacity: 0;\n visibility: hidden;\n z-index: 100;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n transition:\n opacity var(--speed-normal) var(--easing-primary-in-out),\n right var(--speed-normal) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref2) {
14464
+ var baseWidth = _ref2.baseWidth;
14572
14465
  return baseWidth ? baseWidth : "200px";
14573
- }, function (_ref11) {
14574
- var theme = _ref11.theme;
14575
- return styled.css(_templateObject12$g || (_templateObject12$g = _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);
14576
- }, function (_ref12) {
14577
- var isOpen = _ref12.isOpen;
14578
- return isOpen && styled.css(_templateObject13$e || (_templateObject13$e = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
14579
- });
14580
- var NotificationsContainer = styled__default.div(_templateObject14$c || (_templateObject14$c = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
14581
-
14582
- var TopBar = function TopBar(_ref13) {
14583
- var _ref13$hasNotificatio = _ref13.hasNotifications,
14584
- hasNotifications = _ref13$hasNotificatio === void 0 ? false : _ref13$hasNotificatio,
14585
- _ref13$hasLanguage = _ref13.hasLanguage,
14586
- hasLanguage = _ref13$hasLanguage === void 0 ? false : _ref13$hasLanguage,
14587
- _ref13$selectedLangua = _ref13.selectedLanguageText,
14588
- selectedLanguageText = _ref13$selectedLangua === void 0 ? '' : _ref13$selectedLangua,
14589
- _ref13$hasLogout = _ref13.hasLogout,
14590
- hasLogout = _ref13$hasLogout === void 0 ? true : _ref13$hasLogout,
14591
- _ref13$logoutLink = _ref13.logoutLink,
14592
- logoutLink = _ref13$logoutLink === void 0 ? '/logout' : _ref13$logoutLink,
14593
- _ref13$logoutText = _ref13.logoutText,
14594
- logoutText = _ref13$logoutText === void 0 ? 'Logout' : _ref13$logoutText,
14595
- _ref13$hasSearch = _ref13.hasSearch,
14596
- hasSearch = _ref13$hasSearch === void 0 ? false : _ref13$hasSearch,
14597
- _ref13$hasCurrentUser = _ref13.hasCurrentUser,
14598
- hasCurrentUser = _ref13$hasCurrentUser === void 0 ? true : _ref13$hasCurrentUser,
14599
- _ref13$currentUserTex = _ref13.currentUserText,
14600
- currentUserText = _ref13$currentUserTex === void 0 ? 'Current User' : _ref13$currentUserTex,
14601
- _ref13$accountOptionT = _ref13.accountOptionText,
14602
- accountOptionText = _ref13$accountOptionT === void 0 ? 'Account Options' : _ref13$accountOptionT,
14603
- _ref13$searchPlacehol = _ref13.searchPlaceholder,
14604
- searchPlaceholder = _ref13$searchPlacehol === void 0 ? 'Search for devices, analysis tasks, etc.' : _ref13$searchPlacehol,
14605
- _ref13$userSubmenu = _ref13.userSubmenu,
14606
- userSubmenu = _ref13$userSubmenu === void 0 ? [] : _ref13$userSubmenu,
14607
- userDrawerBespoke = _ref13.userDrawerBespoke,
14608
- loggedInUser = _ref13.loggedInUser,
14609
- notificationsHistory = _ref13.notificationsHistory,
14610
- customDrawer = _ref13.customDrawer,
14611
- _ref13$hasSwitchTheme = _ref13.hasSwitchTheme,
14612
- hasSwitchTheme = _ref13$hasSwitchTheme === void 0 ? false : _ref13$hasSwitchTheme,
14613
- _ref13$isLightMode = _ref13.isLightMode,
14614
- isLightMode = _ref13$isLightMode === void 0 ? true : _ref13$isLightMode,
14615
- _ref13$switchThemeTex = _ref13.switchThemeText,
14616
- switchThemeText = _ref13$switchThemeTex === void 0 ? 'SWITCH THEME' : _ref13$switchThemeTex,
14617
- _ref13$selectedThemeT = _ref13.selectedThemeText,
14618
- selectedThemeText = _ref13$selectedThemeT === void 0 ? '' : _ref13$selectedThemeT,
14619
- _ref13$onLogout = _ref13.onLogout,
14620
- onLogout = _ref13$onLogout === void 0 ? function () {} : _ref13$onLogout,
14621
- _ref13$onLanguageTogg = _ref13.onLanguageToggle,
14622
- onLanguageToggle = _ref13$onLanguageTogg === void 0 ? function () {} : _ref13$onLanguageTogg,
14623
- _ref13$onThemeToggle = _ref13.onThemeToggle,
14624
- onThemeToggle = _ref13$onThemeToggle === void 0 ? function () {} : _ref13$onThemeToggle,
14625
- userDrawerFooter = _ref13.userDrawerFooter,
14626
- userDrawerMeta = _ref13.userDrawerMeta,
14627
- _ref13$onUserDrawerMe = _ref13.onUserDrawerMetaClick,
14628
- onUserDrawerMetaClick = _ref13$onUserDrawerMe === void 0 ? function () {} : _ref13$onUserDrawerMe,
14629
- hasUserDrawerMeta = _ref13.hasUserDrawerMeta,
14630
- copySuccessMessage = _ref13.copySuccessMessage,
14631
- includeCopyTitle = _ref13.includeCopyTitle,
14632
- hasUserDrawerFooter = _ref13.hasUserDrawerFooter;
14466
+ }, function (_ref3) {
14467
+ var isOpen = _ref3.isOpen;
14468
+ return isOpen && styled.css(_templateObject11$j || (_templateObject11$j = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
14469
+ });
14470
+ var NotificationsContainer = styled__default.div(_templateObject12$g || (_templateObject12$g = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
14471
+
14472
+ var TopBar = function TopBar(_ref4) {
14473
+ var _ref4$hasNotification = _ref4.hasNotifications,
14474
+ hasNotifications = _ref4$hasNotification === void 0 ? false : _ref4$hasNotification,
14475
+ _ref4$hasLanguage = _ref4.hasLanguage,
14476
+ hasLanguage = _ref4$hasLanguage === void 0 ? false : _ref4$hasLanguage,
14477
+ _ref4$selectedLanguag = _ref4.selectedLanguageText,
14478
+ selectedLanguageText = _ref4$selectedLanguag === void 0 ? '' : _ref4$selectedLanguag,
14479
+ _ref4$hasLogout = _ref4.hasLogout,
14480
+ hasLogout = _ref4$hasLogout === void 0 ? true : _ref4$hasLogout,
14481
+ _ref4$logoutLink = _ref4.logoutLink,
14482
+ logoutLink = _ref4$logoutLink === void 0 ? '/logout' : _ref4$logoutLink,
14483
+ _ref4$logoutText = _ref4.logoutText,
14484
+ logoutText = _ref4$logoutText === void 0 ? 'Logout' : _ref4$logoutText,
14485
+ _ref4$hasSearch = _ref4.hasSearch,
14486
+ hasSearch = _ref4$hasSearch === void 0 ? false : _ref4$hasSearch,
14487
+ _ref4$hasCurrentUser = _ref4.hasCurrentUser,
14488
+ hasCurrentUser = _ref4$hasCurrentUser === void 0 ? true : _ref4$hasCurrentUser,
14489
+ _ref4$currentUserText = _ref4.currentUserText,
14490
+ currentUserText = _ref4$currentUserText === void 0 ? 'Current User' : _ref4$currentUserText,
14491
+ _ref4$accountOptionTe = _ref4.accountOptionText,
14492
+ accountOptionText = _ref4$accountOptionTe === void 0 ? 'Account Options' : _ref4$accountOptionTe,
14493
+ _ref4$searchPlacehold = _ref4.searchPlaceholder,
14494
+ searchPlaceholder = _ref4$searchPlacehold === void 0 ? 'Search for devices, analysis tasks, etc.' : _ref4$searchPlacehold,
14495
+ _ref4$userSubmenu = _ref4.userSubmenu,
14496
+ userSubmenu = _ref4$userSubmenu === void 0 ? [] : _ref4$userSubmenu,
14497
+ userDrawerBespoke = _ref4.userDrawerBespoke,
14498
+ loggedInUser = _ref4.loggedInUser,
14499
+ notificationsHistory = _ref4.notificationsHistory,
14500
+ customDrawer = _ref4.customDrawer,
14501
+ _ref4$hasSwitchTheme = _ref4.hasSwitchTheme,
14502
+ hasSwitchTheme = _ref4$hasSwitchTheme === void 0 ? false : _ref4$hasSwitchTheme,
14503
+ _ref4$isLightMode = _ref4.isLightMode,
14504
+ isLightMode = _ref4$isLightMode === void 0 ? true : _ref4$isLightMode,
14505
+ _ref4$switchThemeText = _ref4.switchThemeText,
14506
+ switchThemeText = _ref4$switchThemeText === void 0 ? 'SWITCH THEME' : _ref4$switchThemeText,
14507
+ _ref4$selectedThemeTe = _ref4.selectedThemeText,
14508
+ selectedThemeText = _ref4$selectedThemeTe === void 0 ? '' : _ref4$selectedThemeTe,
14509
+ _ref4$onLogout = _ref4.onLogout,
14510
+ onLogout = _ref4$onLogout === void 0 ? function () {} : _ref4$onLogout,
14511
+ _ref4$onLanguageToggl = _ref4.onLanguageToggle,
14512
+ onLanguageToggle = _ref4$onLanguageToggl === void 0 ? function () {} : _ref4$onLanguageToggl,
14513
+ _ref4$onThemeToggle = _ref4.onThemeToggle,
14514
+ onThemeToggle = _ref4$onThemeToggle === void 0 ? function () {} : _ref4$onThemeToggle,
14515
+ userDrawerFooter = _ref4.userDrawerFooter,
14516
+ userDrawerMeta = _ref4.userDrawerMeta,
14517
+ _ref4$onUserDrawerMet = _ref4.onUserDrawerMetaClick,
14518
+ onUserDrawerMetaClick = _ref4$onUserDrawerMet === void 0 ? function () {} : _ref4$onUserDrawerMet,
14519
+ hasUserDrawerMeta = _ref4.hasUserDrawerMeta,
14520
+ copySuccessMessage = _ref4.copySuccessMessage,
14521
+ includeCopyTitle = _ref4.includeCopyTitle,
14522
+ hasUserDrawerFooter = _ref4.hasUserDrawerFooter;
14633
14523
 
14634
14524
  var _useState = React.useState(null),
14635
14525
  openDrawer = _useState[0],
@@ -14647,8 +14537,8 @@ var TopBar = function TopBar(_ref13) {
14647
14537
 
14648
14538
  return React__default.createElement(Container$13, null, hasSearch ? React__default.createElement(SearchBar, null, React__default.createElement(IconWrapper$4, null, React__default.createElement(Icon, {
14649
14539
  icon: 'Search',
14650
- size: 18,
14651
- color: 'dimmed'
14540
+ size: 16,
14541
+ color: 'grey-6'
14652
14542
  })), React__default.createElement(SearchInput, {
14653
14543
  placeholder: searchPlaceholder
14654
14544
  })) : React__default.createElement("div", null), React__default.createElement(ButtonArea, null, customDrawer && React__default.createElement(DrawerToggle, {
@@ -14663,7 +14553,7 @@ var TopBar = function TopBar(_ref13) {
14663
14553
  }
14664
14554
  }, React__default.createElement(Icon, {
14665
14555
  icon: 'Notifications',
14666
- size: 18,
14556
+ size: 20,
14667
14557
  color: 'dimmed'
14668
14558
  })), React__default.createElement(DrawerToggle, {
14669
14559
  isActive: openDrawer === 'user',
@@ -14672,7 +14562,7 @@ var TopBar = function TopBar(_ref13) {
14672
14562
  }
14673
14563
  }, React__default.createElement(Icon, {
14674
14564
  icon: 'UserProfile',
14675
- size: 18,
14565
+ size: 20,
14676
14566
  color: 'dimmed'
14677
14567
  }))), ReactDom.createPortal(React__default.createElement(DrawerPortalWrapper, null, React__default.createElement(Drawer, {
14678
14568
  isOpen: openDrawer === 'user'
@@ -14711,8 +14601,8 @@ var TopBar = function TopBar(_ref13) {
14711
14601
  }, customDrawer.customComponent)), document.body));
14712
14602
  };
14713
14603
 
14714
- var _templateObject$1F;
14715
- var TabListWrapper = styled__default.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n"])));
14604
+ var _templateObject$1H;
14605
+ var TabListWrapper = styled__default.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n"])));
14716
14606
 
14717
14607
  var TabList = function TabList(_ref) {
14718
14608
  var children = _ref.children,
@@ -14729,11 +14619,11 @@ var TabList = function TabList(_ref) {
14729
14619
 
14730
14620
  var _excluded$H = ["children", "tabFor", "onClick"];
14731
14621
 
14732
- var _templateObject$1G, _templateObject2$1s, _templateObject3$1h;
14733
- var TabComponent = styled__default.div(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
14622
+ var _templateObject$1I, _templateObject2$1s, _templateObject3$1i;
14623
+ var TabComponent = styled__default.div(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
14734
14624
  var TabLabel = styled__default.label(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n height: 40px;\n ", "\n font-size: 15px;\n font-weight: ", ";\n letter-spacing: 0.09px;\n color: ", ";\n cursor: pointer;\n border-bottom: ", ";\n padding-top: 6px;\n padding-bottom: 14px;\n flex-shrink: 0;\n user-select: none;\n"])), function (_ref) {
14735
14625
  var theme = _ref.theme;
14736
- return styled.css(_templateObject3$1h || (_templateObject3$1h = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
14626
+ return styled.css(_templateObject3$1i || (_templateObject3$1i = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
14737
14627
  }, function (_ref2) {
14738
14628
  var active = _ref2.active;
14739
14629
  return active ? '600' : '500';
@@ -14768,8 +14658,8 @@ var Tab = function Tab(_ref5) {
14768
14658
 
14769
14659
  var _excluded$I = ["children", "tabId"];
14770
14660
 
14771
- var _templateObject$1H;
14772
- var Container$14 = styled__default.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n"])));
14661
+ var _templateObject$1J;
14662
+ var Container$14 = styled__default.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n"])));
14773
14663
 
14774
14664
  var TabContent = function TabContent(_ref) {
14775
14665
  var children = _ref.children,
@@ -14784,11 +14674,11 @@ var TabContent = function TabContent(_ref) {
14784
14674
 
14785
14675
  var _excluded$J = ["tabFor", "icon", "closeId", "counter", "status"];
14786
14676
 
14787
- var _templateObject$1I, _templateObject2$1t, _templateObject3$1i, _templateObject4$1b;
14788
- var Container$15 = styled__default.button(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
14677
+ var _templateObject$1K, _templateObject2$1t, _templateObject3$1j, _templateObject4$1b;
14678
+ var Container$15 = styled__default.button(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
14789
14679
  var LinkTab = styled__default.div(_templateObject2$1t || (_templateObject2$1t = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n\n ", ";\n\n ", "\n"])), function (_ref) {
14790
14680
  var theme = _ref.theme;
14791
- return styled.css(_templateObject3$1i || (_templateObject3$1i = _taggedTemplateLiteralLoose(["\n transition: border ", " ", ";\n border-bottom: 5px solid ", ";\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n }\n\n &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.colors.menu.indicator, IconWrapper, theme.colors.menu.hover, IconWrapper, theme.colors.menu.hover);
14681
+ return styled.css(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n transition: border ", " ", ";\n border-bottom: 5px solid ", ";\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n }\n\n &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.colors.menu.indicator, IconWrapper, theme.colors.menu.hover, IconWrapper, theme.colors.menu.hover);
14792
14682
  }, function (_ref2) {
14793
14683
  var isActive = _ref2.isActive,
14794
14684
  theme = _ref2.theme;
@@ -14826,10 +14716,10 @@ var MobileTab = function MobileTab(_ref3) {
14826
14716
 
14827
14717
  var _excluded$K = ["icon", "title", "subtitle", "tabFor"];
14828
14718
 
14829
- var _templateObject$1J, _templateObject2$1u, _templateObject3$1j, _templateObject4$1c, _templateObject5$14, _templateObject6$Q;
14830
- var Container$16 = styled__default.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: 22px;\n padding-bottom: 7px;\n height: 60px;\n cursor: pointer;\n\n ", ";\n ", " {\n margin-left: 2px;\n flex-shrink: 0;\n }\n"])), function (_ref) {
14719
+ var _templateObject$1L, _templateObject2$1u, _templateObject3$1k, _templateObject4$1c, _templateObject5$14, _templateObject6$R;
14720
+ var Container$16 = styled__default.div(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: 22px;\n padding-bottom: 7px;\n height: 60px;\n cursor: pointer;\n\n ", ";\n ", " {\n margin-left: 2px;\n flex-shrink: 0;\n }\n"])), function (_ref) {
14831
14721
  var active = _ref.active;
14832
- return active ? styled.css(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : styled.css(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
14722
+ return active ? styled.css(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : styled.css(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
14833
14723
  }, IconWrapper);
14834
14724
  var Title$a = styled__default.div(_templateObject4$1c || (_templateObject4$1c = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-family: ", ";\n letter-spacing: 0.09px;\n font-weight: 500;\n color: ", ";\n margin-bottom: 5px;\n flex-shrink: 0;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (_ref2) {
14835
14725
  var theme = _ref2.theme;
@@ -14842,7 +14732,7 @@ var SubTitle$2 = styled__default.div(_templateObject5$14 || (_templateObject5$14
14842
14732
  var theme = _ref4.theme;
14843
14733
  return theme.fontFamily.data;
14844
14734
  });
14845
- var TextGroup$1 = styled__default.div(_templateObject6$Q || (_templateObject6$Q = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n margin-right: 20px;\n"])));
14735
+ var TextGroup$1 = styled__default.div(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n margin-right: 20px;\n"])));
14846
14736
 
14847
14737
  var TabWithIcon = function TabWithIcon(_ref5) {
14848
14738
  var icon = _ref5.icon,
@@ -14876,8 +14766,8 @@ var TabWithIcon = function TabWithIcon(_ref5) {
14876
14766
  }), title), subtitle && React__default.createElement(SubTitle$2, null, subtitle)));
14877
14767
  };
14878
14768
 
14879
- var _templateObject$1K, _templateObject2$1v;
14880
- var Container$17 = styled__default.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose([""])));
14769
+ var _templateObject$1M, _templateObject2$1v;
14770
+ var Container$17 = styled__default.div(_templateObject$1M || (_templateObject$1M = _taggedTemplateLiteralLoose([""])));
14881
14771
  var TabListWrapper$1 = styled__default.div(_templateObject2$1v || (_templateObject2$1v = _taggedTemplateLiteralLoose(["\n padding-top: 10px;\n padding-left: ", ";\n box-shadow: 0 -5px 5px 0 var(--black-a1);\n border-bottom: 1px solid var(--grey-6);\n overflow-y: auto;\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* Internet Explorer 10+ */\n &::-webkit-scrollbar { /* WebKit */\n width: 0;\n height: 0;\n }\n"])), function (_ref) {
14882
14772
  var paddingLeft = _ref.paddingLeft;
14883
14773
  return paddingLeft ? paddingLeft : '87px';
@@ -14916,19 +14806,16 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
14916
14806
 
14917
14807
  var _excluded$L = ["closeId", "closeText"];
14918
14808
 
14919
- var _templateObject$1L, _templateObject2$1w, _templateObject3$1k, _templateObject4$1d;
14920
- var StyledButton$7 = styled__default.button(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n ", "\n\n ", ";\n \n height: ", "px;\n position: fixed;\n bottom: 0;\n font-size: 14px;\n outline: none;\n\n width: 100%;\n text-align: center;\n white-space: nowrap;\n padding: 0 40px;\n\n"])), resetButtonStyles, function (_ref) {
14921
- var theme = _ref.theme;
14922
- return styled.css(_templateObject2$1w || (_templateObject2$1w = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n ", ";\n border-top: 1px solid ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"], theme.styles.global.mainMenu.background, theme.colors.divider);
14923
- }, MOBILE_CLOSE_HEIGHT);
14924
- var IconContainer$3 = styled__default.div(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n height: inherit;\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n margin: 0 20px;\n\n svg {\n display:block;\n }\n"])));
14925
- var TextWrapper$1 = styled__default.div(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
14809
+ var _templateObject$1N, _templateObject2$1w, _templateObject3$1l;
14810
+ var StyledButton$7 = styled__default.button(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose(["\n ", "\n \n font-family: var(--font-ui);\n background-color: var(--global-element-background);\n border-top: 1px solid var(--dividing-line);\n font-weight: 400;\n color: var(--grey-10);\n \n height: ", "px;\n position: fixed;\n bottom: 0;\n font-size: 14px;\n outline: none;\n\n width: 100%;\n text-align: center;\n white-space: nowrap;\n padding: 0 40px;\n\n"])), resetButtonStyles, MOBILE_CLOSE_HEIGHT);
14811
+ var IconContainer$3 = styled__default.div(_templateObject2$1w || (_templateObject2$1w = _taggedTemplateLiteralLoose(["\n height: inherit;\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n margin: 0 20px;\n\n svg {\n display:block;\n }\n"])));
14812
+ var TextWrapper$1 = styled__default.div(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
14926
14813
 
14927
- var CloseButton$1 = function CloseButton(_ref2) {
14928
- var closeId = _ref2.closeId,
14929
- _ref2$closeText = _ref2.closeText,
14930
- closeText = _ref2$closeText === void 0 ? 'CLOSE MENU' : _ref2$closeText,
14931
- props = _objectWithoutPropertiesLoose(_ref2, _excluded$L);
14814
+ var CloseButton$1 = function CloseButton(_ref) {
14815
+ var closeId = _ref.closeId,
14816
+ _ref$closeText = _ref.closeText,
14817
+ closeText = _ref$closeText === void 0 ? 'CLOSE MENU' : _ref$closeText,
14818
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
14932
14819
 
14933
14820
  var _useContext = React.useContext(TabContext),
14934
14821
  setSelected = _useContext.setSelected;
@@ -14944,8 +14831,8 @@ var CloseButton$1 = function CloseButton(_ref2) {
14944
14831
  })), React__default.createElement(TextWrapper$1, null, closeText));
14945
14832
  };
14946
14833
 
14947
- var _templateObject$1M, _templateObject2$1x;
14948
- var Container$18 = styled__default.div(_templateObject$1M || (_templateObject$1M = _taggedTemplateLiteralLoose(["\n position: relative;\n min-height: calc(100vh - ", "px);\n width: 100%;\n overflow-y: scroll;\n"])), MOBILE_NAVBAR_HEIGHT + MOBILE_CLOSE_HEIGHT);
14834
+ var _templateObject$1O, _templateObject2$1x;
14835
+ var Container$18 = styled__default.div(_templateObject$1O || (_templateObject$1O = _taggedTemplateLiteralLoose(["\n position: relative;\n min-height: calc(100vh - ", "px);\n width: 100%;\n overflow-y: scroll;\n"])), MOBILE_NAVBAR_HEIGHT + MOBILE_CLOSE_HEIGHT);
14949
14836
  var ContentWrapper = styled__default.div(_templateObject2$1x || (_templateObject2$1x = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
14950
14837
 
14951
14838
  var MobileNavbarContent = function MobileNavbarContent(_ref) {
@@ -14958,17 +14845,14 @@ var MobileNavbarContent = function MobileNavbarContent(_ref) {
14958
14845
  return selected === closeId ? null : React__default.createElement(Container$18, null, React__default.createElement(ContentWrapper, null, children));
14959
14846
  };
14960
14847
 
14961
- var _templateObject$1N, _templateObject2$1y, _templateObject3$1l;
14962
- var Container$19 = styled__default.div(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose([""])));
14963
- var ItemWrapper = styled__default.div(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n ", ";\n"])), function (_ref) {
14964
- var theme = _ref.theme;
14965
- return styled.css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n border-bottom: 1px solid ", "\n "])), theme.colors.divider);
14966
- });
14848
+ var _templateObject$1P, _templateObject2$1y;
14849
+ var Container$19 = styled__default.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteralLoose([""])));
14850
+ var ItemWrapper = styled__default.div(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n border-bottom: 1px solid var(--dividing-line);\n"])));
14967
14851
 
14968
- var MobileMenu = function MobileMenu(_ref2) {
14969
- var content = _ref2.content,
14970
- supportUrl = _ref2.supportUrl,
14971
- closeId = _ref2.closeId;
14852
+ var MobileMenu = function MobileMenu(_ref) {
14853
+ var content = _ref.content,
14854
+ supportUrl = _ref.supportUrl,
14855
+ closeId = _ref.closeId;
14972
14856
 
14973
14857
  var _useState = React.useState(true),
14974
14858
  loading = _useState[0],
@@ -15033,8 +14917,8 @@ var MobileMenu = function MobileMenu(_ref2) {
15033
14917
  })));
15034
14918
  };
15035
14919
 
15036
- var _templateObject$1O, _templateObject2$1z, _templateObject3$1m;
15037
- var Logo$1 = styled__default(reactRouterDom.Link)(_templateObject$1O || (_templateObject$1O = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n flex-basis: 0;\n flex-grow: 1;\n justify-content: center;\n align-items: center;\n object {\n pointer-events: none;\n height: 25px;\n }\n"])), resetButtonStyles);
14920
+ var _templateObject$1Q, _templateObject2$1z, _templateObject3$1m;
14921
+ var Logo$1 = styled__default(reactRouterDom.Link)(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n flex-basis: 0;\n flex-grow: 1;\n justify-content: center;\n align-items: center;\n object {\n pointer-events: none;\n height: 25px;\n }\n"])), resetButtonStyles);
15038
14922
  var LogoMark$1 = styled__default.div(_templateObject2$1z || (_templateObject2$1z = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n"])));
15039
14923
  var SVGObject$1 = styled__default.object(_templateObject3$1m || (_templateObject3$1m = _taggedTemplateLiteralLoose([""])));
15040
14924
 
@@ -15060,24 +14944,21 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
15060
14944
 
15061
14945
  var _excluded$M = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
15062
14946
 
15063
- var _templateObject$1P;
15064
- var Container$1a = styled__default.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteralLoose(["\n background: ", ";\n z-index: 100;\n display: flex;\n flex-direction: column;\n"])), function (_ref) {
15065
- var theme = _ref.theme;
15066
- return theme.styles.global.mainMenu.background;
15067
- });
15068
-
15069
- var MobileUserMenu = function MobileUserMenu(_ref2) {
15070
- var closeId = _ref2.closeId,
15071
- hasLanguage = _ref2.hasLanguage,
15072
- hasLogout = _ref2.hasLogout,
15073
- logoutLink = _ref2.logoutLink,
15074
- hasCurrentUser = _ref2.hasCurrentUser,
15075
- userSubmenu = _ref2.userSubmenu,
15076
- userDrawerBespoke = _ref2.userDrawerBespoke,
15077
- loggedInUser = _ref2.loggedInUser,
15078
- onLogout = _ref2.onLogout,
15079
- onLanguageToggle = _ref2.onLanguageToggle,
15080
- props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
14947
+ var _templateObject$1R;
14948
+ var Container$1a = styled__default.div(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n \n z-index: 100;\n display: flex;\n flex-direction: column;\n"])));
14949
+
14950
+ var MobileUserMenu = function MobileUserMenu(_ref) {
14951
+ var closeId = _ref.closeId,
14952
+ hasLanguage = _ref.hasLanguage,
14953
+ hasLogout = _ref.hasLogout,
14954
+ logoutLink = _ref.logoutLink,
14955
+ hasCurrentUser = _ref.hasCurrentUser,
14956
+ userSubmenu = _ref.userSubmenu,
14957
+ userDrawerBespoke = _ref.userDrawerBespoke,
14958
+ loggedInUser = _ref.loggedInUser,
14959
+ onLogout = _ref.onLogout,
14960
+ onLanguageToggle = _ref.onLanguageToggle,
14961
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$M);
15081
14962
 
15082
14963
  var _useContext = React.useContext(TabContext),
15083
14964
  setSelected = _useContext.setSelected;
@@ -15102,42 +14983,36 @@ var MobileUserMenu = function MobileUserMenu(_ref2) {
15102
14983
 
15103
14984
  var _excluded$N = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
15104
14985
 
15105
- var _templateObject$1Q, _templateObject2$1A;
14986
+ var _templateObject$1S, _templateObject2$1A;
15106
14987
  var CLOSE_ID = 'closeMenu';
15107
14988
  var NOTI_TAB = 'notifications';
15108
14989
  var USER_TAB = 'user';
15109
14990
  var MENU_TAB = 'menu';
15110
14991
  var CUSTOM_TAB = 'custom';
15111
- var Container$1b = styled__default.nav(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 99;\n"])), function (_ref) {
15112
- var theme = _ref.theme;
15113
- return theme.styles.global.mainMenu.background.backgroundColor;
15114
- });
15115
- var HeaderContainer = styled__default.div(_templateObject2$1A || (_templateObject2$1A = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n height: ", "px;\n border-bottom: ", " 1px solid;\n\n ", " {\n flex-basis: 0;\n flex-grow: 3;\n }\n"])), MOBILE_NAVBAR_HEIGHT, function (_ref2) {
15116
- var theme = _ref2.theme;
15117
- return theme.colors.divider;
15118
- }, TabListWrapper);
14992
+ var Container$1b = styled__default.nav(_templateObject$1S || (_templateObject$1S = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 99;\n"])));
14993
+ var HeaderContainer = styled__default.div(_templateObject2$1A || (_templateObject2$1A = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n height: ", "px;\n border-bottom: var(--dividing-line) 1px solid;\n\n ", " {\n flex-basis: 0;\n flex-grow: 3;\n }\n"])), MOBILE_NAVBAR_HEIGHT, TabListWrapper);
15119
14994
 
15120
- var MobileNavbar = function MobileNavbar(_ref3) {
15121
- var content = _ref3.content,
15122
- home = _ref3.home,
15123
- logoMark = _ref3.logoMark,
15124
- supportUrl = _ref3.supportUrl,
15125
- _ref3$defaultMenuOpen = _ref3.defaultMenuOpen,
15126
- defaultMenuOpen = _ref3$defaultMenuOpen === void 0 ? true : _ref3$defaultMenuOpen,
15127
- closeText = _ref3.closeText,
15128
- hasLanguage = _ref3.hasLanguage,
15129
- hasLogout = _ref3.hasLogout,
15130
- logoutLink = _ref3.logoutLink,
15131
- hasCurrentUser = _ref3.hasCurrentUser,
15132
- hasNotifications = _ref3.hasNotifications,
15133
- userSubmenu = _ref3.userSubmenu,
15134
- userDrawerBespoke = _ref3.userDrawerBespoke,
15135
- loggedInUser = _ref3.loggedInUser,
15136
- notificationsHistory = _ref3.notificationsHistory,
15137
- customDrawer = _ref3.customDrawer,
15138
- onLogout = _ref3.onLogout,
15139
- onLanguageToggle = _ref3.onLanguageToggle,
15140
- props = _objectWithoutPropertiesLoose(_ref3, _excluded$N);
14995
+ var MobileNavbar = function MobileNavbar(_ref) {
14996
+ var content = _ref.content,
14997
+ home = _ref.home,
14998
+ logoMark = _ref.logoMark,
14999
+ supportUrl = _ref.supportUrl,
15000
+ _ref$defaultMenuOpen = _ref.defaultMenuOpen,
15001
+ defaultMenuOpen = _ref$defaultMenuOpen === void 0 ? true : _ref$defaultMenuOpen,
15002
+ closeText = _ref.closeText,
15003
+ hasLanguage = _ref.hasLanguage,
15004
+ hasLogout = _ref.hasLogout,
15005
+ logoutLink = _ref.logoutLink,
15006
+ hasCurrentUser = _ref.hasCurrentUser,
15007
+ hasNotifications = _ref.hasNotifications,
15008
+ userSubmenu = _ref.userSubmenu,
15009
+ userDrawerBespoke = _ref.userDrawerBespoke,
15010
+ loggedInUser = _ref.loggedInUser,
15011
+ notificationsHistory = _ref.notificationsHistory,
15012
+ customDrawer = _ref.customDrawer,
15013
+ onLogout = _ref.onLogout,
15014
+ onLanguageToggle = _ref.onLanguageToggle,
15015
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
15141
15016
 
15142
15017
  return React__default.createElement(Container$1b, null, React__default.createElement(Tabs, null, React__default.createElement(HeaderContainer, null, React__default.createElement(MobileLogoLink, Object.assign({}, {
15143
15018
  home: home,
@@ -15242,16 +15117,16 @@ var GlobalUI = function GlobalUI(_ref) {
15242
15117
 
15243
15118
  var _excluded$P = ["children"];
15244
15119
 
15245
- var _templateObject$1R, _templateObject2$1B, _templateObject3$1n, _templateObject4$1e, _templateObject5$15, _templateObject6$R, _templateObject7$N, _templateObject8$F, _templateObject9$x;
15246
- var Container$1c = styled__default.div(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteralLoose(["\n width: 286px;\n border-right: 1px solid var(--grey-a7);\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n"])));
15120
+ var _templateObject$1T, _templateObject2$1B, _templateObject3$1n, _templateObject4$1d, _templateObject5$15, _templateObject6$S, _templateObject7$L, _templateObject8$E, _templateObject9$w;
15121
+ var Container$1c = styled__default.div(_templateObject$1T || (_templateObject$1T = _taggedTemplateLiteralLoose(["\n width: 286px;\n border-right: 1px solid var(--grey-a7);\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n"])));
15247
15122
  var LogoContainer = styled__default.div(_templateObject2$1B || (_templateObject2$1B = _taggedTemplateLiteralLoose(["\n height: 84px;\n color: var(--grey-11);\n border-bottom: 1px solid var(--grey-a7);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding-top: 18px;\n padding-bottom: 15px;\n"])));
15248
15123
  var LogoTopText = styled__default.div(_templateObject3$1n || (_templateObject3$1n = _taggedTemplateLiteralLoose(["\n height: 31px;\n font-family: Monorale;\n font-size: 18px;\n font-weight: 500;\n line-height: 1.72;\n letter-spacing: 4.5px;\n text-align: center;\n"])));
15249
- var LogoBottomText = styled__default.div(_templateObject4$1e || (_templateObject4$1e = _taggedTemplateLiteralLoose(["\n height: 19px;\n font-family: Monorale;\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n letter-spacing: 14.11px;\n text-align: center;\n"])));
15124
+ var LogoBottomText = styled__default.div(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n height: 19px;\n font-family: Monorale;\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n letter-spacing: 14.11px;\n text-align: center;\n"])));
15250
15125
  var SidebarBox = styled__default.div(_templateObject5$15 || (_templateObject5$15 = _taggedTemplateLiteralLoose(["\n position: relative;\n border-bottom: 1px solid var(--grey-a7);\n padding: 22px 20px 21px 20px;\n"])));
15251
- var SidebarHeading = styled__default.div(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n margin-bottom: 18px;\n"])));
15252
- var SidebarLinkHeading = styled__default.div(_templateObject7$N || (_templateObject7$N = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
15253
- var BackLink$1 = styled__default(reactRouterDom.Link)(_templateObject8$F || (_templateObject8$F = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
15254
- var SLink = styled__default(reactRouterDom.Link)(_templateObject9$x || (_templateObject9$x = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 30px;\n top: 15px;\n /* width: 80px; */\n /* height: 30px; */\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n color: var(--grey-9);\n border-radius: 3px;\n background-color: var(--primary-2);\n text-decoration: none;\n padding: 7px 20px;\n"])));
15126
+ var SidebarHeading = styled__default.div(_templateObject6$S || (_templateObject6$S = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n margin-bottom: 18px;\n"])));
15127
+ var SidebarLinkHeading = styled__default.div(_templateObject7$L || (_templateObject7$L = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
15128
+ var BackLink$1 = styled__default(reactRouterDom.Link)(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
15129
+ var SLink = styled__default(reactRouterDom.Link)(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 30px;\n top: 15px;\n /* width: 80px; */\n /* height: 30px; */\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n color: var(--grey-9);\n border-radius: 3px;\n background-color: var(--primary-2);\n text-decoration: none;\n padding: 7px 20px;\n"])));
15255
15130
  var SidebarLink = function SidebarLink(_ref) {
15256
15131
  var title = _ref.title,
15257
15132
  to = _ref.to;
@@ -15376,6 +15251,7 @@ exports.TextArea = TextArea;
15376
15251
  exports.TextAreaField = TextAreaField;
15377
15252
  exports.TextField = TextField;
15378
15253
  exports.ThemeVariables = ThemeVariables;
15254
+ exports.Tooltip = Tooltip;
15379
15255
  exports.TopBar = TopBar;
15380
15256
  exports.TypeTable = TypeTable;
15381
15257
  exports.UtilityHeader = UtilityHeader;