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.modern.js CHANGED
@@ -369,98 +369,6 @@ var typography = {
369
369
  }
370
370
  }
371
371
  },
372
- "global": {
373
- "mainMenu": {
374
- "menuItem": {
375
- "default": {
376
- "textAlign": "left",
377
- "fontSize": "16px",
378
- "fontWeight": 300,
379
- "textDecoration": "none",
380
- "color": "var(--grey-a11)"
381
- },
382
- "active": {
383
- "textAlign": "left",
384
- "fontSize": "16px",
385
- "fontWeight": 300,
386
- "textDecoration": "none",
387
- "color": "var(--grey-a11)"
388
- },
389
- "hover": {
390
- "textAlign": "left",
391
- "fontSize": "16px",
392
- "fontWeight": 300,
393
- "textDecoration": "none",
394
- "color": "var(--grey-a11)"
395
- }
396
- },
397
- "subheader": {
398
- "textAlign": "left",
399
- "fontSize": "14px",
400
- "fontWeight": 600,
401
- "textTransform": "uppercase",
402
- "letterSpacing": "0.35px",
403
- "textDecoration": "none",
404
- "color": "var(--grey-a11)"
405
- },
406
- "hidePrompt": {
407
- "textAlign": "left",
408
- "fontSize": "14px",
409
- "fontWeight": 300,
410
- "textDecoration": "none",
411
- "color": "var(--grey-11)"
412
- },
413
- "subItem": {
414
- "default": {
415
- "textAlign": "left",
416
- "fontSize": "14px",
417
- "fontWeight": 300,
418
- "textDecoration": "none",
419
- "color": "var(--grey-a11)"
420
- },
421
- "active": {
422
- "textAlign": "left",
423
- "fontSize": "14px",
424
- "fontWeight": 600,
425
- "textDecoration": "none",
426
- "color": "var(--grey-8)"
427
- },
428
- "hover": {
429
- "textAlign": "left",
430
- "fontSize": "14px",
431
- "fontWeight": 300,
432
- "textDecoration": "none",
433
- "color": "var(--grey-8)"
434
- }
435
- },
436
- "identity": {
437
- "textAlign": "left",
438
- "fontSize": "12px",
439
- "fontWeight": 400,
440
- "textDecoration": "none",
441
- "color": "var(--grey-a11)"
442
- }
443
- },
444
- "topBar": {
445
- "search": {
446
- "value": {
447
- "textAlign": "left",
448
- "fontSize": "14px",
449
- "fontWeight": 300,
450
- "textDecoration": "none",
451
- "color": "var(--grey-12)"
452
- },
453
- "placeholder": {
454
- "textAlign": "left",
455
- "fontStyle": "italic",
456
- "fontSize": "14px",
457
- "fontWeight": 300,
458
- "textDecoration": "none",
459
- "color": "var(--grey-11)"
460
- }
461
- }
462
- }
463
- },
464
372
  "content": {
465
373
  "section-H2": {
466
374
  "textAlign": "left",
@@ -1286,46 +1194,6 @@ var styles = {
1286
1194
  }
1287
1195
  }
1288
1196
  },
1289
- "global": {
1290
- "mainMenu": {
1291
- "iconBackground": {
1292
- "active": {
1293
- "backgroundColor": colors.menu.active
1294
- },
1295
- "hover": {
1296
- "backgroundColor": colors.menu.hover
1297
- },
1298
- "default": {
1299
- "backgroundColor": colors.menu["default"]
1300
- }
1301
- },
1302
- "background": {
1303
- "boxShadow": "5px 0px 10px 0px var(--white-a2)",
1304
- "backgroundColor": "var(--grey-1)"
1305
- },
1306
- "lines": {
1307
- "backgroundColor": "var(--grey-6)"
1308
- },
1309
- "footerBackground": {
1310
- "backgroundColor": "var(--grey-1)"
1311
- }
1312
- },
1313
- "background": {
1314
- "backgroundColor": "var(--grey-2)",
1315
- "backgroundImage": "linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%)"
1316
- },
1317
- "drawer": {
1318
- "background": {
1319
- "boxShadow": "-5px 0px 10px 0px var(--white-a2)",
1320
- "backgroundColor": "var(--grey-1)"
1321
- }
1322
- },
1323
- "topBar": {
1324
- "lines": {
1325
- "backgroundColor": "var(--grey-6)"
1326
- }
1327
- }
1328
- },
1329
1197
  "indicators": {
1330
1198
  "spinner": {
1331
1199
  "danger": {
@@ -1696,16 +1564,19 @@ var _templateObject;
1696
1564
  var layoutVariables = 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);
1697
1565
 
1698
1566
  var _templateObject$1;
1699
- var colorVariables = 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"])));
1567
+ var animationVariables = 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"])));
1700
1568
 
1701
1569
  var _templateObject$2;
1702
- var ThemeVariables = 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);
1570
+ var colorVariables = 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"])));
1703
1571
 
1704
1572
  var _templateObject$3;
1705
- var BaseStyles = 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"])));
1573
+ var ThemeVariables = 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);
1574
+
1575
+ var _templateObject$4;
1576
+ var BaseStyles = 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"])));
1706
1577
 
1707
- var _templateObject$4, _templateObject2, _templateObject3;
1708
- var wrapperCss = 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"])));
1578
+ var _templateObject$5, _templateObject2, _templateObject3;
1579
+ var wrapperCss = 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"])));
1709
1580
  var IconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
1710
1581
  var IconWrapperForSVG = styled.g(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
1711
1582
 
@@ -1732,8 +1603,8 @@ var Icon = function Icon(_ref) {
1732
1603
  })) : null;
1733
1604
  };
1734
1605
 
1735
- var _templateObject$5, _templateObject2$1;
1736
- var Arrow = styled.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"])));
1606
+ var _templateObject$6, _templateObject2$1;
1607
+ var Arrow = styled.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"])));
1737
1608
  var Container = styled.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"])));
1738
1609
  var FlexContentPlaceholder = function FlexContentPlaceholder(_ref) {
1739
1610
  var _ref$title = _ref.title,
@@ -1761,15 +1632,15 @@ var FlexContentPlaceholder = function FlexContentPlaceholder(_ref) {
1761
1632
  }));
1762
1633
  };
1763
1634
 
1764
- var _templateObject$6, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5;
1765
- var RowCss = css(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n position:relative;\n display: flex;\n flex-direction: row;\n align-items:center;\n"])));
1635
+ var _templateObject$7, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5;
1636
+ var RowCss = css(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n position:relative;\n display: flex;\n flex-direction: row;\n align-items:center;\n"])));
1766
1637
  var ColumnCss = css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
1767
1638
  var resetButtonStyles = 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"])));
1768
1639
  var removeAutoFillStyle = 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"])));
1769
1640
  var EllipsisStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
1770
1641
 
1771
- var _templateObject$7, _templateObject2$3, _templateObject3$2, _templateObject4$1;
1772
- var IconButton = styled.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) {
1642
+ var _templateObject$8, _templateObject2$3, _templateObject3$2, _templateObject4$1;
1643
+ var IconButton = styled.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) {
1773
1644
  var _ref$selected = _ref.selected,
1774
1645
  selected = _ref$selected === void 0 ? false : _ref$selected;
1775
1646
  return selected && css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
@@ -1816,8 +1687,8 @@ var AlertBar = function AlertBar(_ref3) {
1816
1687
  }))) : null;
1817
1688
  };
1818
1689
 
1819
- var _templateObject$8, _templateObject2$4, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
1820
- var initAnimation = keyframes(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: translate(-50%, -100%);\n }\n 100% {\n transform: translate(-50%, 0%);\n }\n"])));
1690
+ var _templateObject$9, _templateObject2$4, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
1691
+ var initAnimation = keyframes(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: translate(-50%, -100%);\n }\n 100% {\n transform: translate(-50%, 0%);\n }\n"])));
1821
1692
  var closeAnimation = keyframes(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: translate(-50%, 0);\n }\n 100% {\n transform: translate(-50%, -100%);\n }\n"])));
1822
1693
  var Container$1 = styled.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) {
1823
1694
  var type = _ref.type;
@@ -1946,14 +1817,199 @@ var Notification = function Notification(_ref6) {
1946
1817
  }))), document.body) : null;
1947
1818
  };
1948
1819
 
1820
+ var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$3, _templateObject5$2;
1821
+ var ARROW_SIZE = 8;
1822
+ var ARROW_MARGIN = 16;
1823
+ var Arrow$1 = styled.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) {
1824
+ var type = _ref.type;
1825
+ return "var(--tooltip-" + type + "-arrow)";
1826
+ });
1827
+ var TooltipWrapper = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: flex;\n ", ";\n ", ";\n"])), function (_ref2) {
1828
+ var maxWidth = _ref2.maxWidth;
1829
+ return maxWidth && css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose([" max-width: ", ""])), maxWidth);
1830
+ }, function (_ref3) {
1831
+ var directionStyle = _ref3.directionStyle;
1832
+ return directionStyle && css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["", ""])), directionStyle);
1833
+ });
1834
+ var MessageWrapper = styled.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) {
1835
+ var type = _ref4.type;
1836
+ return "var(--tooltip-" + type + ")";
1837
+ }, function (_ref5) {
1838
+ var type = _ref5.type;
1839
+ return "var(--tooltip-" + type + "-border)";
1840
+ }, IconWrapper);
1841
+
1842
+ var getDirectionStyle = function getDirectionStyle(state, coords) {
1843
+ var left = coords.left,
1844
+ top = coords.top,
1845
+ width = coords.width,
1846
+ height = coords.height;
1847
+ var currentTop = top + window.scrollY;
1848
+ var currentLeft = left + window.scrollX;
1849
+
1850
+ switch (state) {
1851
+ case 'bottom-right':
1852
+ 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 ";
1853
+
1854
+ case 'bottom-left':
1855
+ 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 ";
1856
+
1857
+ case 'right-bottom':
1858
+ 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 ";
1859
+
1860
+ case 'right':
1861
+ 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 ";
1862
+
1863
+ case 'right-top':
1864
+ 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 ";
1865
+
1866
+ case 'left-bottom':
1867
+ 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 ";
1868
+
1869
+ case 'left':
1870
+ 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 ";
1871
+
1872
+ case 'left-top':
1873
+ 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 ";
1874
+
1875
+ case 'top-right':
1876
+ 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 ";
1877
+
1878
+ case 'top':
1879
+ 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 ";
1880
+
1881
+ case 'top-left':
1882
+ 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 ";
1883
+
1884
+ default:
1885
+ 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 ";
1886
+ }
1887
+ };
1888
+
1889
+ var getDynamicPosition = function getDynamicPosition(coords, width, height) {
1890
+ var isOverflowingRight = coords.left + (width || 0) + 30 > window.innerWidth;
1891
+ var isOverflowingBottom = coords.bottom + (height || 0) > window.innerHeight;
1892
+ var isOverflowingLeft = coords.left - (width || 0) < 0;
1893
+ var isOverflowingTop = coords.top - (height || 0) < 0;
1894
+
1895
+ if (isOverflowingTop && isOverflowingRight && isOverflowingBottom) {
1896
+ return 'left';
1897
+ }
1898
+
1899
+ if (isOverflowingTop && isOverflowingLeft && isOverflowingBottom) {
1900
+ return 'right';
1901
+ }
1902
+
1903
+ if (isOverflowingTop && isOverflowingLeft) {
1904
+ return 'bottom-right';
1905
+ }
1906
+
1907
+ if (isOverflowingTop && isOverflowingRight) {
1908
+ return 'bottom-left';
1909
+ }
1910
+
1911
+ if (isOverflowingBottom && isOverflowingLeft) {
1912
+ return 'top-right';
1913
+ }
1914
+
1915
+ if (isOverflowingBottom && isOverflowingRight) {
1916
+ return 'top-left';
1917
+ }
1918
+
1919
+ if (isOverflowingLeft) {
1920
+ return 'right';
1921
+ }
1922
+
1923
+ if (isOverflowingRight) {
1924
+ return 'left';
1925
+ }
1926
+
1927
+ if (isOverflowingBottom) {
1928
+ return 'top';
1929
+ }
1930
+
1931
+ return 'bottom';
1932
+ };
1933
+
1934
+ var Tooltip = function Tooltip(_ref6) {
1935
+ var icon = _ref6.icon,
1936
+ message = _ref6.message,
1937
+ type = _ref6.type,
1938
+ tooltipFor = _ref6.tooltipFor,
1939
+ tooltipPosition = _ref6.tooltipPosition,
1940
+ maxWidth = _ref6.maxWidth;
1941
+
1942
+ var _useState = useState(null),
1943
+ coords = _useState[0],
1944
+ setCoords = _useState[1];
1945
+
1946
+ var _useState2 = useState(false),
1947
+ visible = _useState2[0],
1948
+ setVisible = _useState2[1];
1949
+
1950
+ var _useState3 = useState('top'),
1951
+ dynamicPosition = _useState3[0],
1952
+ setDynamicPosition = _useState3[1];
1953
+
1954
+ var tooltipRef = useRef(null);
1955
+ var handleMouseOver = useCallback(function () {
1956
+ if (tooltipFor && tooltipFor.current) {
1957
+ var rect = tooltipFor.current.getBoundingClientRect();
1958
+ setCoords(rect);
1959
+ setVisible(true);
1960
+ setDynamicPosition(getDynamicPosition(rect, tooltipFor.current.offsetWidth, tooltipFor.current.offsetHeight));
1961
+ }
1962
+ }, [tooltipFor]);
1963
+ var handleMouseOut = useCallback(function () {
1964
+ setVisible(false);
1965
+ }, []);
1966
+ var updateCoords = useCallback(function () {
1967
+ if (tooltipFor && tooltipFor.current) {
1968
+ var rect = tooltipFor.current.getBoundingClientRect();
1969
+ setCoords(rect);
1970
+ }
1971
+ }, [tooltipFor]);
1972
+ useEffect(function () {
1973
+ var currentRef = null;
1974
+
1975
+ if (tooltipFor && tooltipFor.current) {
1976
+ currentRef = tooltipFor.current;
1977
+ tooltipFor.current.addEventListener('mouseover', handleMouseOver);
1978
+ tooltipFor.current.addEventListener('mouseout', handleMouseOut);
1979
+ updateCoords();
1980
+ }
1981
+
1982
+ return function () {
1983
+ if (currentRef) {
1984
+ currentRef.removeEventListener('mouseover', handleMouseOver);
1985
+ currentRef.removeEventListener('mouseout', handleMouseOut);
1986
+ }
1987
+ };
1988
+ }, [handleMouseOut, handleMouseOver, tooltipFor, updateCoords]);
1989
+ if (!visible || !coords) return null;
1990
+ return ReactDom.createPortal(React__default.createElement(TooltipWrapper, {
1991
+ ref: tooltipRef,
1992
+ maxWidth: maxWidth,
1993
+ directionStyle: getDirectionStyle(tooltipPosition || dynamicPosition, coords)
1994
+ }, React__default.createElement(Arrow$1, {
1995
+ type: type || 'neutral'
1996
+ }), React__default.createElement(MessageWrapper, {
1997
+ type: type || 'neutral'
1998
+ }, icon && React__default.createElement(Icon, {
1999
+ icon: icon,
2000
+ size: 16,
2001
+ color: 'white-a12'
2002
+ }), message)), document.body);
2003
+ };
2004
+
1949
2005
  var _excluded = ["design", "size", "children"];
1950
2006
 
1951
- var _templateObject$9, _templateObject2$5;
1952
- var StyledButton = styled.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) {
2007
+ var _templateObject$b, _templateObject2$6;
2008
+ var StyledButton = styled.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) {
1953
2009
  var theme = _ref.theme,
1954
2010
  design = _ref.design,
1955
2011
  size = _ref.size;
1956
- return 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);
2012
+ return 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);
1957
2013
  });
1958
2014
 
1959
2015
  var Button = function Button(_ref2) {
@@ -1974,16 +2030,16 @@ var Button = function Button(_ref2) {
1974
2030
 
1975
2031
  var _excluded$1 = ["design", "size", "onClick", "disabled", "position", "icon", "children"];
1976
2032
 
1977
- var _templateObject$a, _templateObject2$6, _templateObject3$4, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1;
1978
- var TextContainer = styled.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) {
2033
+ var _templateObject$c, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7$1;
2034
+ var TextContainer = styled.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) {
1979
2035
  var position = _ref.position,
1980
2036
  size = _ref.size;
1981
- return position && position === 'left' ? css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n padding-left: ", ";\n "])), size === 'xsmall' ? "10px" : "20px") : css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n padding-right: ", ";\n "])), size === 'xsmall' ? "10px" : "20px");
2037
+ return position && position === 'left' ? css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n padding-left: ", ";\n "])), size === 'xsmall' ? "10px" : "20px") : css(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n padding-right: ", ";\n "])), size === 'xsmall' ? "10px" : "20px");
1982
2038
  }, function (_ref2) {
1983
2039
  var theme = _ref2.theme;
1984
- return theme && css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n transition: padding ", " ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
2040
+ return theme && css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n transition: padding ", " ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
1985
2041
  });
1986
- var IconContainer = styled.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) {
2042
+ var IconContainer = styled.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) {
1987
2043
  var position = _ref3.position;
1988
2044
  return css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n order: ", ";\n "])), position && position === 'left' ? 0 : 2);
1989
2045
  });
@@ -2020,7 +2076,7 @@ var ButtonWithIcon = function ButtonWithIcon(_ref4) {
2020
2076
  }))));
2021
2077
  };
2022
2078
 
2023
- var _templateObject$b, _templateObject2$7, _templateObject3$5, _templateObject4$4;
2079
+ var _templateObject$d, _templateObject2$8, _templateObject3$6, _templateObject4$5;
2024
2080
 
2025
2081
  var circumference = function circumference(radius) {
2026
2082
  return 2 * 3.1416 * radius;
@@ -2028,15 +2084,15 @@ var circumference = function circumference(radius) {
2028
2084
 
2029
2085
  var animation$1 = function animation(radius) {
2030
2086
  var c = circumference(radius);
2031
- return 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);
2087
+ return 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);
2032
2088
  };
2033
2089
 
2034
- var rotate = keyframes(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
2035
- var BaseCircle = styled.circle(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n stroke: ", ";\n fill: none;\n"])), function (_ref) {
2090
+ var rotate = keyframes(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
2091
+ var BaseCircle = styled.circle(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n stroke: ", ";\n fill: none;\n"])), function (_ref) {
2036
2092
  var styling = _ref.styling;
2037
2093
  return "var(--spinner-" + styling + ", --grey-a8)";
2038
2094
  });
2039
- var RotatingCircle = styled.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) {
2095
+ var RotatingCircle = styled.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) {
2040
2096
  var r = _ref2.r;
2041
2097
  return circumference(r);
2042
2098
  }, function (_ref3) {
@@ -2107,17 +2163,17 @@ var Spinner = function Spinner(_ref5) {
2107
2163
 
2108
2164
  var _excluded$2 = ["design", "size", "onClick", "disabled", "position", "loading", "children"];
2109
2165
 
2110
- var _templateObject$c, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11;
2111
- var LoadingButton = styled(Button)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
2166
+ var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11;
2167
+ var LoadingButton = styled(Button)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
2112
2168
  var $loading = _ref.$loading,
2113
2169
  theme = _ref.theme;
2114
- return $loading && 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);
2170
+ return $loading && 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);
2115
2171
  });
2116
- var TextContainer$1 = styled.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) {
2172
+ var TextContainer$1 = styled.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) {
2117
2173
  var theme = _ref2.theme;
2118
- return theme && css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n transition: padding ", " ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
2174
+ return theme && css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n transition: padding ", " ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
2119
2175
  });
2120
- var LoadingContainer = styled.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) {
2176
+ var LoadingContainer = styled.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) {
2121
2177
  var theme = _ref3.theme,
2122
2178
  position = _ref3.position;
2123
2179
  return 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);
@@ -2169,8 +2225,8 @@ var ButtonWithLoading = function ButtonWithLoading(_ref6) {
2169
2225
 
2170
2226
  var _excluded$3 = ["icon", "size", "weight", "color", "hoverColor"];
2171
2227
 
2172
- var _templateObject$d;
2173
- var StyledButton$1 = styled.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) {
2228
+ var _templateObject$f;
2229
+ var StyledButton$1 = styled.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) {
2174
2230
  var color = _ref.color;
2175
2231
  return color;
2176
2232
  }, IconWrapper, function (_ref2) {
@@ -2201,17 +2257,17 @@ var IconButton$2 = function IconButton(_ref3) {
2201
2257
  }));
2202
2258
  };
2203
2259
 
2204
- var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4;
2205
- var StyledIconButton = styled(IconButton$2)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose([""])));
2206
- var Container$2 = styled.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) {
2260
+ var _templateObject$g, _templateObject2$a, _templateObject3$8, _templateObject4$7, _templateObject5$5;
2261
+ var StyledIconButton = styled(IconButton$2)(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose([""])));
2262
+ var Container$2 = styled.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) {
2207
2263
  var alignment = _ref.alignment;
2208
- return alignment === 'left' && css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n justify-content: flex-start;\n "])));
2264
+ return alignment === 'left' && css(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n justify-content: flex-start;\n "])));
2209
2265
  }, function (_ref2) {
2210
2266
  var alignment = _ref2.alignment;
2211
- return alignment === 'center' && css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
2267
+ return alignment === 'center' && css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
2212
2268
  }, function (_ref3) {
2213
2269
  var alignment = _ref3.alignment;
2214
- return alignment === 'right' && css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n "])));
2270
+ return alignment === 'right' && css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n "])));
2215
2271
  });
2216
2272
 
2217
2273
  var ActionButtons = function ActionButtons(_ref4) {
@@ -2241,16 +2297,16 @@ var ActionButtons = function ActionButtons(_ref4) {
2241
2297
 
2242
2298
  var _excluded$4 = ["type", "placeholder", "defaultValue", "fieldState", "feedbackMessage", "actionCallback", "actionIcon", "postfix"];
2243
2299
 
2244
- 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;
2245
- var ActionContainer = styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 0;\n top: 0;\n"])));
2300
+ 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;
2301
+ var ActionContainer = styled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 0;\n top: 0;\n"])));
2246
2302
  var InputActionButton = styled.button.attrs({
2247
2303
  type: "button"
2248
- })(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n width: 40px;\n height: 40px;\n background: transparent;\n border: none;\n cursor: pointer;\n outline: none;\n"])));
2249
- var FeedbackContainer = styled.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) {
2304
+ })(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n width: 40px;\n height: 40px;\n background: transparent;\n border: none;\n cursor: pointer;\n outline: none;\n"])));
2305
+ var FeedbackContainer = styled.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) {
2250
2306
  var theme = _ref.theme;
2251
- return css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n border: 1px solid ", ";\n "])), theme.styles.form.input["default"].normal.borderColor);
2307
+ return css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n border: 1px solid ", ";\n "])), theme.styles.form.input["default"].normal.borderColor);
2252
2308
  });
2253
- var FeedbackMessage = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n flex: 0 1 400px;\n padding: 0 10px 0 0;\n\n ", ";\n"])), function (_ref2) {
2309
+ var FeedbackMessage = styled.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n flex: 0 1 400px;\n padding: 0 10px 0 0;\n\n ", ";\n"])), function (_ref2) {
2254
2310
  var theme = _ref2.theme;
2255
2311
  return theme.typography.form.feedback.message;
2256
2312
  });
@@ -2363,15 +2419,15 @@ var Input = function Input(_ref13) {
2363
2419
 
2364
2420
  var _excluded$5 = ["htmlFor", "labelText", "rightAlign", "children"];
2365
2421
 
2366
- var _templateObject$g, _templateObject2$b;
2367
- var StyledLabel = styled.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) {
2422
+ var _templateObject$i, _templateObject2$c;
2423
+ var StyledLabel = styled.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) {
2368
2424
  var theme = _ref.theme;
2369
2425
  return theme.fontFamily.ui;
2370
2426
  }, function (_ref2) {
2371
2427
  var rightAlign = _ref2.rightAlign;
2372
2428
  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 ";
2373
2429
  });
2374
- var LabelText = styled.span(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n display: block;\n ", "\n"])), function (_ref3) {
2430
+ var LabelText = styled.span(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n display: block;\n ", "\n"])), function (_ref3) {
2375
2431
  var rightAlign = _ref3.rightAlign;
2376
2432
  return rightAlign ? "\n margin-left: 12px;\n " : "\n margin-bottom: 10px;\n ";
2377
2433
  });
@@ -2394,81 +2450,49 @@ var Label = function Label(_ref4) {
2394
2450
 
2395
2451
  var _excluded$6 = ["unit", "label", "name", "type", "placeholder", "defaultValue", "fieldState", "className"];
2396
2452
 
2397
- var _templateObject$h, _templateObject2$c, _templateObject3$9, _templateObject4$8, _templateObject5$6, _templateObject6$4, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$3;
2398
- var StyledInput$1 = styled.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) {
2399
- var theme = _ref.theme,
2400
- fieldState = _ref.fieldState;
2401
- return 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);
2453
+ var _templateObject$j, _templateObject2$d, _templateObject3$a, _templateObject4$9, _templateObject5$7, _templateObject6$4;
2454
+ var StyledInput$1 = styled.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);
2455
+ var InputContainer$1 = styled.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) {
2456
+ var fieldState = _ref.fieldState;
2457
+ return 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);
2402
2458
  }, function (_ref2) {
2403
- var typography = _ref2.theme.typography;
2404
- return css(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n ", ";\n &::placeholder {\n ", ";\n }\n "])), typography.form.input.value.compact, typography.form.input.placeholder.compact);
2405
- }, function (p) {
2406
- return p.padRight && css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n padding-right: ", "px;\n "])), p.padRight + 17);
2407
- });
2408
- var InputContainer$1 = styled.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n\n flex: 1;\n position: relative;\n\n ", "\n\n"])), function (_ref3) {
2409
- var hasAction = _ref3.hasAction;
2410
- return hasAction && 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);
2411
- });
2412
- var UnitKey = styled.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) {
2413
- var theme = _ref4.theme;
2414
- return theme.fontFamily.ui;
2415
- });
2416
- var Container$4 = styled.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) {
2417
- var theme = _ref5.theme,
2418
- fieldState = _ref5.fieldState;
2419
- return theme.styles.form.input[fieldState].normal;
2420
- }, function (_ref6) {
2421
- var fieldState = _ref6.fieldState;
2422
- return ['default', 'disabled'].indexOf(fieldState) === -1 && css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n "])));
2423
- }, InputContainer$1, function (_ref7) {
2424
- var theme = _ref7.theme,
2425
- fieldState = _ref7.fieldState;
2426
- return fieldState !== 'disabled' && css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n border-color:", ";\n "])), theme.styles.form.input[fieldState].focused.borderColor);
2427
- });
2428
-
2429
- var SmallInput = function SmallInput(_ref8) {
2430
- var unit = _ref8.unit,
2431
- label = _ref8.label,
2432
- name = _ref8.name,
2433
- _ref8$type = _ref8.type,
2434
- type = _ref8$type === void 0 ? 'text' : _ref8$type,
2435
- _ref8$placeholder = _ref8.placeholder,
2436
- placeholder = _ref8$placeholder === void 0 ? '' : _ref8$placeholder,
2437
- defaultValue = _ref8.defaultValue,
2438
- _ref8$fieldState = _ref8.fieldState,
2439
- fieldState = _ref8$fieldState === void 0 ? 'default' : _ref8$fieldState,
2440
- className = _ref8.className,
2441
- props = _objectWithoutPropertiesLoose(_ref8, _excluded$6);
2459
+ var hasAction = _ref2.hasAction;
2460
+ return hasAction && 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);
2461
+ });
2462
+ var UnitKey = styled.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"])));
2463
+ var Container$4 = styled.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);
2464
+
2465
+ var SmallInput = function SmallInput(_ref3) {
2466
+ var unit = _ref3.unit,
2467
+ label = _ref3.label,
2468
+ name = _ref3.name,
2469
+ _ref3$type = _ref3.type,
2470
+ type = _ref3$type === void 0 ? 'text' : _ref3$type,
2471
+ _ref3$placeholder = _ref3.placeholder,
2472
+ placeholder = _ref3$placeholder === void 0 ? '' : _ref3$placeholder,
2473
+ defaultValue = _ref3.defaultValue,
2474
+ _ref3$fieldState = _ref3.fieldState,
2475
+ fieldState = _ref3$fieldState === void 0 ? 'default' : _ref3$fieldState,
2476
+ className = _ref3.className,
2477
+ props = _objectWithoutPropertiesLoose(_ref3, _excluded$6);
2442
2478
 
2443
- var unitElement = useRef(null);
2444
-
2445
- var _useState = useState(0),
2446
- unitElementWidth = _useState[0],
2447
- setUnitElementWidth = _useState[1];
2448
-
2449
- useEffect(function () {
2450
- if (unitElement && unitElement.current) {
2451
- setUnitElementWidth(unitElement.current.clientWidth || 0);
2452
- }
2453
- }, [unitElement, setUnitElementWidth, unit]);
2454
2479
  return React__default.createElement(Container$4, {
2455
2480
  className: className,
2456
2481
  fieldState: fieldState || 'default'
2457
2482
  }, React__default.createElement(Label, {
2458
2483
  labelText: label,
2459
2484
  htmlFor: name || ''
2460
- }, React__default.createElement(InputContainer$1, null, React__default.createElement(StyledInput$1, Object.assign({
2461
- padRight: unitElementWidth,
2485
+ }, React__default.createElement(InputContainer$1, {
2486
+ fieldState: fieldState || 'default'
2487
+ }, React__default.createElement(StyledInput$1, Object.assign({
2462
2488
  fieldState: fieldState || 'default',
2463
2489
  type: type,
2464
2490
  placeholder: placeholder,
2465
2491
  defaultValue: defaultValue
2466
- }, props)), unit ? React__default.createElement(UnitKey, {
2467
- ref: unitElement
2468
- }, unit) : null)));
2492
+ }, props)), unit ? React__default.createElement(UnitKey, null, unit) : null)));
2469
2493
  };
2470
2494
 
2471
- var _templateObject$i, _templateObject2$d, _templateObject3$a, _templateObject4$9, _templateObject5$7, _templateObject6$5, _templateObject7$5, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$2;
2495
+ var _templateObject$k, _templateObject2$e, _templateObject3$b, _templateObject4$a, _templateObject5$8, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$3, _templateObject11$2;
2472
2496
  var SwitchPosition;
2473
2497
 
2474
2498
  (function (SwitchPosition) {
@@ -2484,8 +2508,8 @@ var intentPosition = function intentPosition(left, checked) {
2484
2508
  return intentLeft + "px";
2485
2509
  };
2486
2510
 
2487
- var RealInput = styled.input(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
2488
- var SwitchOuter = styled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n"])));
2511
+ var RealInput = styled.input(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
2512
+ var SwitchOuter = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n"])));
2489
2513
 
2490
2514
  var getPositionKey = function getPositionKey(switchPos) {
2491
2515
  switch (switchPos) {
@@ -2506,8 +2530,8 @@ var getPositionKey = function getPositionKey(switchPos) {
2506
2530
  }
2507
2531
  };
2508
2532
 
2509
- var SwitchInner = styled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n position: absolute;\n box-sizing: border-box;\n"])));
2510
- var LabelText$1 = styled.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) {
2533
+ var SwitchInner = styled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n box-sizing: border-box;\n"])));
2534
+ var LabelText$1 = styled.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) {
2511
2535
  var theme = _ref.theme;
2512
2536
  return theme.fontFamily.ui;
2513
2537
  }, function (p) {
@@ -2515,18 +2539,18 @@ var LabelText$1 = styled.span(_templateObject4$9 || (_templateObject4$9 = _tagge
2515
2539
  }, function (p) {
2516
2540
  return p.theme.typography.form.input.label;
2517
2541
  });
2518
- var IconWrapper$1 = styled.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"])));
2542
+ var IconWrapper$1 = styled.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"])));
2519
2543
  var SpinnerWrapper = styled.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n margin-top: 1px;\n"])));
2520
- var Container$5 = styled.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) {
2544
+ var Container$5 = styled.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) {
2521
2545
  var theme = _ref2.theme,
2522
2546
  position = _ref2.position,
2523
2547
  themeState = _ref2.themeState,
2524
2548
  activeTheming = _ref2.activeTheming;
2525
- return theme && 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);
2549
+ return theme && 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);
2526
2550
  }, function (p) {
2527
- return p.activeTheming === 'locked' && css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n width: calc(100% - ", "px);\n "])), parseInt(p.theme.dimensions.form["switch"].positions.locked) * 2);
2551
+ return p.activeTheming === 'locked' && css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n width: calc(100% - ", "px);\n "])), parseInt(p.theme.dimensions.form["switch"].positions.locked) * 2);
2528
2552
  }, function (p) {
2529
- return p.$loading && css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n background: transparent;\n top: 1px;\n "])));
2553
+ return p.$loading && css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n background: transparent;\n top: 1px;\n "])));
2530
2554
  }, SwitchOuter, function (_ref3) {
2531
2555
  var theme = _ref3.theme,
2532
2556
  activeTheming = _ref3.activeTheming,
@@ -2766,7 +2790,7 @@ function SvgNoImage() {
2766
2790
  }));
2767
2791
  }
2768
2792
 
2769
- 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;
2793
+ 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;
2770
2794
  var CheckboxState;
2771
2795
 
2772
2796
  (function (CheckboxState) {
@@ -2775,21 +2799,21 @@ var CheckboxState;
2775
2799
  CheckboxState["Indeterminate"] = "indeterminate";
2776
2800
  })(CheckboxState || (CheckboxState = {}));
2777
2801
 
2778
- var RealInput$1 = styled.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
2779
- var CheckboxOuter = styled.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"])));
2780
- var CheckboxInner = styled.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"])));
2781
- var IconWrapper$2 = styled.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) {
2802
+ var RealInput$1 = styled.input(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
2803
+ var CheckboxOuter = styled.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"])));
2804
+ var CheckboxInner = styled.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"])));
2805
+ var IconWrapper$2 = styled.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) {
2782
2806
  var color = _ref.color;
2783
2807
  return "var(--" + color + ")";
2784
2808
  });
2785
- var Container$6 = styled.label(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n user-select: none;\n\n\n ", "\n\n ", "\n\n ", "\n\n"])), function (_ref2) {
2809
+ var Container$6 = styled.label(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n user-select: none;\n\n\n ", "\n\n ", "\n\n ", "\n\n"])), function (_ref2) {
2786
2810
  var visualState = _ref2.visualState,
2787
2811
  disabled = _ref2.disabled;
2788
- return visualState === CheckboxState.Off && 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 && css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n &:hover ", " {\n border-color: var(--primary-8);\n border: var(--primary-8) 2px solid;\n }"])), CheckboxOuter), disabled && 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));
2812
+ return visualState === CheckboxState.Off && 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 && css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n &:hover ", " {\n border-color: var(--primary-8);\n border: var(--primary-8) 2px solid;\n }"])), CheckboxOuter), disabled && 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));
2789
2813
  }, function (_ref3) {
2790
2814
  var visualState = _ref3.visualState,
2791
2815
  disabled = _ref3.disabled;
2792
- return visualState === CheckboxState.On && 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 && 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 && 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));
2816
+ return visualState === CheckboxState.On && 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 && 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 && 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));
2793
2817
  }, function (_ref4) {
2794
2818
  var visualState = _ref4.visualState,
2795
2819
  disabled = _ref4.disabled;
@@ -2851,16 +2875,16 @@ var Checkbox = function Checkbox(_ref5) {
2851
2875
  })), " ");
2852
2876
  };
2853
2877
 
2854
- var _templateObject$k, _templateObject2$f, _templateObject3$c, _templateObject4$b, _templateObject5$9, _templateObject6$7, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$6;
2855
- var InnerRadio = styled.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
2856
- var OuterRadio = styled.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) {
2878
+ var _templateObject$m, _templateObject2$g, _templateObject3$d, _templateObject4$c, _templateObject5$a, _templateObject6$7, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$5;
2879
+ var InnerRadio = styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
2880
+ var OuterRadio = styled.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) {
2857
2881
  var styles = _ref.theme.styles,
2858
2882
  isChecked = _ref.isChecked,
2859
2883
  disabled = _ref.disabled;
2860
- return styles && 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 && css(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: ", ";\n }\n "])), styles.form.checkbox.unchecked.hover.borderColor), isChecked && !disabled && 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 && 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 && 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 && 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));
2884
+ return styles && 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 && css(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: ", ";\n }\n "])), styles.form.checkbox.unchecked.hover.borderColor), isChecked && !disabled && 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 && 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 && 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 && 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));
2861
2885
  });
2862
- var HiddenInput = styled.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"])));
2863
- var Container$7 = styled.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"])));
2886
+ var HiddenInput = styled.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"])));
2887
+ var Container$7 = styled.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"])));
2864
2888
 
2865
2889
  var RadioButton = function RadioButton(_ref2) {
2866
2890
  var id = _ref2.id,
@@ -2896,31 +2920,31 @@ var RadioButton = function RadioButton(_ref2) {
2896
2920
 
2897
2921
  var _excluded$7 = ["placeholder", "fieldState", "feedbackMessage", "children"];
2898
2922
 
2899
- var _templateObject$l, _templateObject2$g, _templateObject3$d, _templateObject4$c, _templateObject5$a, _templateObject6$8, _templateObject7$8, _templateObject8$7, _templateObject9$7, _templateObject10$7;
2900
- var FeedbackIcon$1 = styled.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"])));
2901
- var StyledTextArea = styled.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) {
2923
+ var _templateObject$n, _templateObject2$h, _templateObject3$e, _templateObject4$d, _templateObject5$b, _templateObject6$8, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$6;
2924
+ var FeedbackIcon$1 = styled.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"])));
2925
+ var StyledTextArea = styled.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) {
2902
2926
  var theme = _ref.theme,
2903
2927
  fieldState = _ref.fieldState;
2904
- return css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n border: 1px solid ", ";\n"])), theme.fontFamily.data, theme.styles.form.input[fieldState].normal.borderColor);
2928
+ return css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n border: 1px solid ", ";\n"])), theme.fontFamily.data, theme.styles.form.input[fieldState].normal.borderColor);
2905
2929
  }, function (_ref2) {
2906
2930
  var typography = _ref2.theme.typography;
2907
- return css(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n ", ";\n &::placeholder {\n ", ";\n }\n"])), typography.form.input.value.normal, typography.form.input.placeholder.normal);
2931
+ return css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n ", ";\n &::placeholder {\n ", ";\n }\n"])), typography.form.input.value.normal, typography.form.input.placeholder.normal);
2908
2932
  });
2909
- var FeedbackContainer$1 = styled.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) {
2933
+ var FeedbackContainer$1 = styled.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) {
2910
2934
  var theme = _ref3.theme;
2911
2935
  return css(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n border: 1px solid ", ";\n "])), theme.styles.form.input["default"].normal.borderColor);
2912
2936
  });
2913
- var FeedbackMessage$1 = styled.div(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n flex: 0 1 400px;\n padding: 0 10px 0 0;\n ", ";\n"])), function (_ref4) {
2937
+ var FeedbackMessage$1 = styled.div(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n flex: 0 1 400px;\n padding: 0 10px 0 0;\n ", ";\n"])), function (_ref4) {
2914
2938
  var theme = _ref4.theme;
2915
2939
  return theme.typography.form.feedback.message;
2916
2940
  });
2917
- var Container$8 = styled.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) {
2941
+ var Container$8 = styled.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) {
2918
2942
  var theme = _ref5.theme,
2919
2943
  fieldState = _ref5.fieldState;
2920
2944
  return theme.styles.form.input[fieldState].normal;
2921
2945
  }, function (_ref6) {
2922
2946
  var fieldState = _ref6.fieldState;
2923
- return ['default', 'disabled'].indexOf(fieldState) === -1 && css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "])));
2947
+ return ['default', 'disabled'].indexOf(fieldState) === -1 && css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "])));
2924
2948
  }, FeedbackContainer$1, function (_ref7) {
2925
2949
  var theme = _ref7.theme,
2926
2950
  fieldState = _ref7.fieldState;
@@ -2931,7 +2955,7 @@ var Container$8 = styled.div(_templateObject8$7 || (_templateObject8$7 = _tagged
2931
2955
  return theme.styles.form.input[fieldState].normal.borderColor;
2932
2956
  }, function (_ref9) {
2933
2957
  var fieldState = _ref9.fieldState;
2934
- return ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n display:none;\n "])));
2958
+ return ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n display:none;\n "])));
2935
2959
  }, FeedbackContainer$1, function (_ref10) {
2936
2960
  var fieldState = _ref10.fieldState;
2937
2961
  return fieldState === 'required' ? "\n box-shadow: 0px 3px 7px 0px var(--primary-a3);\n " : null;
@@ -3000,32 +3024,32 @@ var TextArea = function TextArea(_ref13) {
3000
3024
 
3001
3025
  var _excluded$8 = ["placeholder", "label", "isCompact", "defaultValue", "changeCallback", "children"];
3002
3026
 
3003
- 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;
3004
- var SelectWrapper = styled.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);
3005
- var StyledSelect = styled.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) {
3027
+ 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;
3028
+ var SelectWrapper = styled.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);
3029
+ var StyledSelect = styled.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) {
3006
3030
  var styles = _ref.theme.styles;
3007
- return css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input["default"].normal);
3031
+ return css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input["default"].normal);
3008
3032
  }, function (_ref2) {
3009
3033
  var styles = _ref2.theme.styles;
3010
- return css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input.disabled.normal);
3034
+ return css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input.disabled.normal);
3011
3035
  });
3012
- var Container$9 = styled.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) {
3036
+ var Container$9 = styled.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) {
3013
3037
  var isCompact = _ref3.isCompact;
3014
3038
  return isCompact && css(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n ", " {\n span {\n margin-bottom: 6px;\n }\n }\n "])), StyledLabel);
3015
3039
  }, function (_ref4) {
3016
3040
  var isLabelSameRow = _ref4.isLabelSameRow;
3017
- return isLabelSameRow && 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);
3041
+ return isLabelSameRow && 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);
3018
3042
  }, StyledSelect, function (_ref5) {
3019
3043
  var theme = _ref5.theme;
3020
- return 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);
3044
+ return 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);
3021
3045
  }, function (_ref6) {
3022
3046
  var typography = _ref6.theme.typography,
3023
3047
  isCompact = _ref6.isCompact;
3024
- return isCompact && css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n height: 30px;\n padding: 0 25px 0 10px;\n ", ";\n "])), typography.form.input.value.compact);
3048
+ return isCompact && css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n height: 30px;\n padding: 0 25px 0 10px;\n ", ";\n "])), typography.form.input.value.compact);
3025
3049
  }, function (_ref7) {
3026
3050
  var theme = _ref7.theme,
3027
3051
  activePlaceholder = _ref7.activePlaceholder;
3028
- return activePlaceholder && css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.form.input.placeholder.normal);
3052
+ return activePlaceholder && css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.form.input.placeholder.normal);
3029
3053
  }, function (_ref8) {
3030
3054
  var theme = _ref8.theme,
3031
3055
  isCompact = _ref8.isCompact,
@@ -3164,21 +3188,21 @@ var isNotNumber = function isNotNumber(value) {
3164
3188
 
3165
3189
  var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
3166
3190
 
3167
- 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;
3191
+ 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;
3168
3192
  var ThumbDiameter = 16;
3169
- var SliderWrapper = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n position: relative;\n height: 30px;\n margin-top: 20px;\n ", ";\n"])), function (_ref) {
3193
+ var SliderWrapper = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n position: relative;\n height: 30px;\n margin-top: 20px;\n ", ";\n"])), function (_ref) {
3170
3194
  var theme = _ref.theme;
3171
3195
  return theme.fontFamily.data;
3172
3196
  }, function (_ref2) {
3173
3197
  var disabled = _ref2.disabled;
3174
- return disabled && css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n opacity: .5;\n "])));
3198
+ return disabled && css(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n opacity: .5;\n "])));
3175
3199
  });
3176
- var HiddenInput$1 = styled.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) {
3200
+ var HiddenInput$1 = styled.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) {
3177
3201
  var disabled = _ref3.disabled;
3178
3202
  return disabled ? "not-allowed" : "pointer";
3179
3203
  });
3180
- var Rail = styled.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);
3181
- var Mark = styled.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) {
3204
+ var Rail = styled.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);
3205
+ var Mark = styled.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) {
3182
3206
  var leftValue = _ref4.leftValue;
3183
3207
  return "calc(" + leftValue + "% + 7px)";
3184
3208
  });
@@ -3187,15 +3211,15 @@ var MarkLabel = styled.span(_templateObject6$a || (_templateObject6$a = _taggedT
3187
3211
  return "calc(" + leftValue + "% + 7px)";
3188
3212
  }, function (_ref6) {
3189
3213
  var alignment = _ref6.alignment;
3190
- return alignment === 'center' && css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["transform: translateX(-50%);;"])));
3214
+ return alignment === 'center' && css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["transform: translateX(-50%);;"])));
3191
3215
  }, function (_ref7) {
3192
3216
  var alignment = _ref7.alignment;
3193
- return alignment === 'right' && css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["transform: translateX(5%);"])));
3217
+ return alignment === 'right' && css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["transform: translateX(5%);"])));
3194
3218
  }, function (_ref8) {
3195
3219
  var alignment = _ref8.alignment;
3196
- return alignment === 'left' && css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["transform: translateX(-95%);"])));
3220
+ return alignment === 'left' && css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["transform: translateX(-95%);"])));
3197
3221
  });
3198
- var ThumbWrapper = styled.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);
3222
+ var ThumbWrapper = styled.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);
3199
3223
  var Thumb = styled.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) {
3200
3224
  var theme = _ref9.theme,
3201
3225
  bgColor = _ref9.bgColor;
@@ -3410,10 +3434,10 @@ var SliderInput = function SliderInput(_ref12) {
3410
3434
 
3411
3435
  var _excluded$a = ["text", "buttonDesign", "buttonSize", "inputCallback"];
3412
3436
 
3413
- var _templateObject$o, _templateObject2$j, _templateObject3$g;
3414
- var Container$a = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose([""])));
3415
- var HiddenInput$2 = styled.input(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
3416
- var StyledButton$2 = styled(Button)(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n text-align: center;\n"])));
3437
+ var _templateObject$q, _templateObject2$k, _templateObject3$h;
3438
+ var Container$a = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose([""])));
3439
+ var HiddenInput$2 = styled.input(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
3440
+ var StyledButton$2 = styled(Button)(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n text-align: center;\n"])));
3417
3441
 
3418
3442
  var InputFileButton = function InputFileButton(_ref) {
3419
3443
  var text = _ref.text,
@@ -3459,18 +3483,18 @@ var InputFileButton = function InputFileButton(_ref) {
3459
3483
 
3460
3484
  var _excluded$b = ["max", "min", "defaultValue", "title", "timeUnit", "controlledValue", "inputCallback"];
3461
3485
 
3462
- var _templateObject$p, _templateObject2$k, _templateObject3$h, _templateObject4$f, _templateObject5$d;
3463
- var Container$b = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose([""])));
3464
- var Headers = styled.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"])));
3465
- var ValueLabel = styled(Label)(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-bottom: 0;\n"])), function (_ref) {
3486
+ var _templateObject$r, _templateObject2$l, _templateObject3$i, _templateObject4$g, _templateObject5$e;
3487
+ var Container$b = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose([""])));
3488
+ var Headers = styled.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"])));
3489
+ var ValueLabel = styled(Label)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-bottom: 0;\n"])), function (_ref) {
3466
3490
  var theme = _ref.theme;
3467
3491
  return theme.fontFamily.ui;
3468
3492
  });
3469
- var Unit = styled.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) {
3493
+ var Unit = styled.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) {
3470
3494
  var theme = _ref2.theme;
3471
3495
  return theme.fontFamily.data;
3472
3496
  });
3473
- var ValueTitle = styled.div(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
3497
+ var ValueTitle = styled.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
3474
3498
 
3475
3499
  var DurationSlider = function DurationSlider(_ref3) {
3476
3500
  var max = _ref3.max,
@@ -3514,13 +3538,13 @@ var DurationSlider = function DurationSlider(_ref3) {
3514
3538
 
3515
3539
  var _excluded$c = ["defaultValue", "inputCallback", "updateThumbColor", "updateTitle", "showValue", "allMarkCentered"];
3516
3540
 
3517
- var _templateObject$q, _templateObject2$l, _templateObject3$i;
3518
- var Container$c = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose([""])));
3519
- var Headers$1 = styled.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) {
3541
+ var _templateObject$s, _templateObject2$m, _templateObject3$j;
3542
+ var Container$c = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose([""])));
3543
+ var Headers$1 = styled.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) {
3520
3544
  var allMarkCentered = _ref.allMarkCentered;
3521
3545
  return allMarkCentered ? "padding: 0;" : "padding: 0 6px;";
3522
3546
  });
3523
- var ValueTitle$1 = styled(Label)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref2) {
3547
+ var ValueTitle$1 = styled(Label)(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref2) {
3524
3548
  var theme = _ref2.theme;
3525
3549
  return theme.fontFamily.data;
3526
3550
  });
@@ -3671,12 +3695,12 @@ var TextAreaField = function TextAreaField(_ref) {
3671
3695
 
3672
3696
  var _excluded$g = ["height", "text", "dropCallback"];
3673
3697
 
3674
- var _templateObject$r, _templateObject2$m;
3675
- var Container$d = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n ", ";\n position: relative;\n"])), function (_ref) {
3698
+ var _templateObject$t, _templateObject2$n;
3699
+ var Container$d = styled.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n ", ";\n position: relative;\n"])), function (_ref) {
3676
3700
  var height = _ref.height;
3677
3701
  return height ? "height: " + height : null;
3678
3702
  });
3679
- var DragAndDrop = styled.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) {
3703
+ var DragAndDrop = styled.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) {
3680
3704
  var inDropZone = _ref2.inDropZone;
3681
3705
  return inDropZone ? "dashed var(--grey-8) 2px" : null;
3682
3706
  });
@@ -4000,20 +4024,20 @@ var areDimensionsDiff = function areDimensionsDiff(oldDimensions, newValues) {
4000
4024
  return isDifferent;
4001
4025
  };
4002
4026
 
4003
- 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;
4004
- var CropLineStyle = css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: block;\n opacity: 0.1;\n"])));
4005
- var TopLine = styled.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);
4006
- var RightLine = styled.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);
4007
- var BottomLine = styled.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);
4008
- var LeftLine = styled.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);
4027
+ 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;
4028
+ var CropLineStyle = css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: block;\n opacity: 0.1;\n"])));
4029
+ var TopLine = styled.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);
4030
+ var RightLine = styled.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);
4031
+ var BottomLine = styled.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);
4032
+ var LeftLine = styled.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);
4009
4033
  var resizeSquaresCss = 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"])));
4010
- var PointN = styled.div(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n margin-left: -5px;\n left: 50%;\n ", ";\n"])), resizeSquaresCss, function (_ref) {
4034
+ var PointN = styled.div(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n margin-left: -5px;\n left: 50%;\n ", ";\n"])), resizeSquaresCss, function (_ref) {
4011
4035
  var isResizable = _ref.isResizable;
4012
- return isResizable && css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n cursor: n-resize;\n "])));
4036
+ return isResizable && css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n cursor: n-resize;\n "])));
4013
4037
  });
4014
- var PointNW = styled.div(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n left: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref2) {
4038
+ var PointNW = styled.div(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n left: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref2) {
4015
4039
  var isResizable = _ref2.isResizable;
4016
- return isResizable && css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n cursor: nw-resize;\n "])));
4040
+ return isResizable && css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n cursor: nw-resize;\n "])));
4017
4041
  });
4018
4042
  var PointNE = styled.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n right: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref3) {
4019
4043
  var isResizable = _ref3.isResizable;
@@ -4078,15 +4102,15 @@ var CropArea = function CropArea(_ref9) {
4078
4102
  })));
4079
4103
  };
4080
4104
 
4081
- var _templateObject$t, _templateObject2$o, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$c, _templateObject7$c, _templateObject8$b, _templateObject9$b;
4082
- var Container$e = styled.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) {
4105
+ var _templateObject$v, _templateObject2$p, _templateObject3$l, _templateObject4$i, _templateObject5$g, _templateObject6$c, _templateObject7$b, _templateObject8$a, _templateObject9$a;
4106
+ var Container$e = styled.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) {
4083
4107
  var theme = _ref.theme;
4084
4108
  return theme.fontFamily.ui;
4085
4109
  });
4086
- var InnerContainer$2 = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: 99;\n"])));
4087
- var ToolHeader = styled.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 17px;\n"])));
4088
- var TextGroup = styled.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);
4089
- var ButtonsGroup = styled.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n button + button {\n margin-left: 10px;\n }\n"])));
4110
+ var InnerContainer$2 = styled.div(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: 99;\n"])));
4111
+ var ToolHeader = styled.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 17px;\n"])));
4112
+ var TextGroup = styled.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);
4113
+ var ButtonsGroup = styled.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n button + button {\n margin-left: 10px;\n }\n"])));
4090
4114
  var PreviewArea = styled.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) {
4091
4115
  var canvasHeight = _ref2.canvasHeight;
4092
4116
  return canvasHeight ? canvasHeight + "px" : "462px";
@@ -4094,13 +4118,13 @@ var PreviewArea = styled.div(_templateObject6$c || (_templateObject6$c = _tagged
4094
4118
  var canvasWidth = _ref3.canvasWidth;
4095
4119
  return canvasWidth ? canvasWidth + "px" : "485px";
4096
4120
  });
4097
- var HiddenImage = styled.img(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
4098
- var SelectedArea = styled.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) {
4121
+ var HiddenImage = styled.img(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
4122
+ var SelectedArea = styled.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) {
4099
4123
  var cropLeft = _ref4.cropLeft,
4100
4124
  cropTop = _ref4.cropTop,
4101
4125
  cropWidth = _ref4.cropWidth,
4102
4126
  cropHeight = _ref4.cropHeight;
4103
- return css(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n top: ", "px;\n left: ", "px;\n width: ", "px;\n height: ", "px;\n "])), cropTop, cropLeft, cropWidth, cropHeight);
4127
+ return css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n top: ", "px;\n left: ", "px;\n width: ", "px;\n height: ", "px;\n "])), cropTop, cropLeft, cropWidth, cropHeight);
4104
4128
  });
4105
4129
  var viewDimensions = {
4106
4130
  cropLeft: 0,
@@ -4406,7 +4430,7 @@ var CropTool = function CropTool(_ref5) {
4406
4430
  })))))), document.body);
4407
4431
  };
4408
4432
 
4409
- var _templateObject$u, _templateObject2$p, _templateObject3$l, _templateObject4$i, _templateObject5$g, _templateObject6$d, _templateObject7$d, _templateObject8$c, _templateObject9$c;
4433
+ var _templateObject$w, _templateObject2$q, _templateObject3$m, _templateObject4$j, _templateObject5$h, _templateObject6$d, _templateObject7$c, _templateObject8$b, _templateObject9$b;
4410
4434
  var CROP_HEIGHT_AREA = 500;
4411
4435
  var CROP_WIDTH_AREA = 475;
4412
4436
  var CANVAS_HEIGHT = 490;
@@ -4414,17 +4438,17 @@ var CANVAS_WIDTH = 460;
4414
4438
  var ratio = Math.round(CROP_WIDTH_AREA / CROP_HEIGHT_AREA * 100) / 100;
4415
4439
  var PHOTO_HEIGHT = "150px";
4416
4440
  var PHOTO_WIDTH = "142px";
4417
- var Container$f = styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n position: relative;\n width: ", ";\n ", "\n button {\n width: 100%;\n }\n"])), PHOTO_WIDTH, function (_ref) {
4441
+ var Container$f = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n position: relative;\n width: ", ";\n ", "\n button {\n width: 100%;\n }\n"])), PHOTO_WIDTH, function (_ref) {
4418
4442
  var theme = _ref.theme;
4419
- return css(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
4443
+ return css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
4420
4444
  });
4421
- var PreviewImageGroup = styled.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-bottom: 17px;\n height: ", ";\n width: ", ";\n"])), PHOTO_HEIGHT, PHOTO_WIDTH);
4422
- var PhotoContainerStyle = 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"])));
4423
- var PreviewImage = styled.img(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n ", "\n object-fit: cover;\n"])), PhotoContainerStyle);
4445
+ var PreviewImageGroup = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-bottom: 17px;\n height: ", ";\n width: ", ";\n"])), PHOTO_HEIGHT, PHOTO_WIDTH);
4446
+ var PhotoContainerStyle = 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"])));
4447
+ var PreviewImage = styled.img(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n ", "\n object-fit: cover;\n"])), PhotoContainerStyle);
4424
4448
  var PlaceholderText = styled.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n color: var(--grey-10);\n font-size: 14px;\n"])));
4425
- var NoPhoto = styled.div(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n ", "\n padding-top: 15px;\n ", " {\n margin-top: 18px;\n }\n"])), PhotoContainerStyle, PlaceholderText);
4426
- var StyledInputFileButton = styled(InputFileButton)(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
4427
- var ButtonsWrapper = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n button {\n margin-bottom: 10px;\n }\n\n"])));
4449
+ var NoPhoto = styled.div(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n ", "\n padding-top: 15px;\n ", " {\n margin-top: 18px;\n }\n"])), PhotoContainerStyle, PlaceholderText);
4450
+ var StyledInputFileButton = styled(InputFileButton)(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
4451
+ var ButtonsWrapper = styled.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n button {\n margin-bottom: 10px;\n }\n\n"])));
4428
4452
 
4429
4453
  var AvatarUploader = function AvatarUploader(_ref2) {
4430
4454
  var _ref2$title = _ref2.title,
@@ -4576,10 +4600,10 @@ var AvatarUploader = function AvatarUploader(_ref2) {
4576
4600
 
4577
4601
  var _excluded$h = ["icons", "color", "size", "weight"];
4578
4602
 
4579
- var _templateObject$v, _templateObject2$q, _templateObject3$m;
4580
- var Container$g = styled.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);
4581
- var PlusIcon = styled(Icon)(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose([""])));
4582
- var PlusIconWrapper = styled.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);
4603
+ var _templateObject$x, _templateObject2$r, _templateObject3$n;
4604
+ var Container$g = styled.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);
4605
+ var PlusIcon = styled(Icon)(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose([""])));
4606
+ var PlusIconWrapper = styled.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);
4583
4607
 
4584
4608
  var BigIconsSummary = function BigIconsSummary(_ref) {
4585
4609
  var icons = _ref.icons,
@@ -4607,18 +4631,18 @@ var BigIconsSummary = function BigIconsSummary(_ref) {
4607
4631
  }));
4608
4632
  };
4609
4633
 
4610
- var _templateObject$w, _templateObject2$r, _templateObject3$n, _templateObject4$j, _templateObject5$h, _templateObject6$e;
4611
- var Container$h = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref) {
4634
+ var _templateObject$y, _templateObject2$s, _templateObject3$o, _templateObject4$k, _templateObject5$i, _templateObject6$e;
4635
+ var Container$h = styled.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref) {
4612
4636
  var theme = _ref.theme;
4613
4637
  return theme.fontFamily.ui;
4614
4638
  });
4615
- var StyledDropArea = styled(DropArea)(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
4616
- var InputButtonWrapper = styled.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n z-index: 99;\n margin-top: 20px;\n display: flex;\n gap: 20px;\n"])));
4617
- var FilesUploadGroup = styled.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) {
4639
+ var StyledDropArea = styled(DropArea)(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
4640
+ var InputButtonWrapper = styled.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n z-index: 99;\n margin-top: 20px;\n display: flex;\n gap: 20px;\n"])));
4641
+ var FilesUploadGroup = styled.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) {
4618
4642
  var hasFiles = _ref2.hasFiles;
4619
4643
  return hasFiles ? '26px 0 20px 0' : '65px 0 42px 0';
4620
4644
  });
4621
- var Title = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n color: var(--grey-11);\n font-size: 20px;\n"])));
4645
+ var Title = styled.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n color: var(--grey-11);\n font-size: 20px;\n"])));
4622
4646
  var Description = styled.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"])));
4623
4647
 
4624
4648
  var getUpdateFiles = function getUpdateFiles(newFiles, files, allowedFileTypes) {
@@ -4739,10 +4763,10 @@ var AreaUploadManager = function AreaUploadManager(_ref3) {
4739
4763
 
4740
4764
  var _excluded$i = ["children", "spacing"];
4741
4765
 
4742
- var _templateObject$x, _templateObject2$s;
4743
- var FormContainer = styled.form(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
4766
+ var _templateObject$z, _templateObject2$t;
4767
+ var FormContainer = styled.form(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
4744
4768
  var spacing = _ref.spacing;
4745
- return spacing && css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n & > ", " {\n margin-bottom: ", ";\n }\n "])), StyledLabel, spacing);
4769
+ return spacing && css(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n & > ", " {\n margin-bottom: ", ";\n }\n "])), StyledLabel, spacing);
4746
4770
  });
4747
4771
 
4748
4772
  var Form = function Form(_ref2) {
@@ -4758,22 +4782,22 @@ var Form = function Form(_ref2) {
4758
4782
 
4759
4783
  var _excluded$j = ["text", "icon", "design", "noBorderTop", "textMaxWidth", "size", "onClickCallback", "closeCallback", "hasOnSelectLoading"];
4760
4784
 
4761
- var _templateObject$y, _templateObject2$t, _templateObject3$o, _templateObject4$k, _templateObject5$i, _templateObject6$f, _templateObject7$e, _templateObject8$d;
4762
- var StyledButton$3 = styled.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) {
4785
+ var _templateObject$A, _templateObject2$u, _templateObject3$p, _templateObject4$l, _templateObject5$j, _templateObject6$f, _templateObject7$d, _templateObject8$c;
4786
+ var StyledButton$3 = styled.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) {
4763
4787
  var noBorderTop = _ref.noBorderTop;
4764
- return noBorderTop ? "border-top: none" : css(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-color)"])));
4788
+ return noBorderTop ? "border-top: none" : css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-color)"])));
4765
4789
  }, IconWrapper, function (_ref2) {
4766
4790
  var noBorderTop = _ref2.noBorderTop;
4767
- return noBorderTop ? "border-top: none" : css(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-active-color)"])));
4791
+ return noBorderTop ? "border-top: none" : css(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-active-color)"])));
4768
4792
  }, IconWrapper);
4769
- var OptionText = styled.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"])));
4770
- var TextWrapper = styled.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) {
4793
+ var OptionText = styled.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"])));
4794
+ var TextWrapper = styled.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) {
4771
4795
  var textMaxWidth = _ref3.textMaxWidth;
4772
4796
  return textMaxWidth && css(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["max-width: ", ";"])), textMaxWidth);
4773
4797
  });
4774
- var LeftIconWrapper = styled.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) {
4798
+ var LeftIconWrapper = styled.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) {
4775
4799
  var isAscendingIcon = _ref4.isAscendingIcon;
4776
- return isAscendingIcon && css(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
4800
+ return isAscendingIcon && css(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
4777
4801
  }, IconWrapper);
4778
4802
 
4779
4803
  var SplitButtonOption = function SplitButtonOption(_ref5) {
@@ -4976,10 +5000,10 @@ function useClickOutside(elRef, elCallback) {
4976
5000
  }, [elCallback, elRef]);
4977
5001
  }
4978
5002
 
4979
- var _templateObject$z, _templateObject2$u, _templateObject3$p, _templateObject4$l, _templateObject5$j, _templateObject6$g, _templateObject7$f;
4980
- var Container$i = styled.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) {
5003
+ var _templateObject$B, _templateObject2$v, _templateObject3$q, _templateObject4$m, _templateObject5$k, _templateObject6$g, _templateObject7$e;
5004
+ var Container$i = styled.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) {
4981
5005
  var theme = _ref.theme;
4982
- return theme && css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose([""])));
5006
+ return theme && css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose([""])));
4983
5007
  }, function (_ref2) {
4984
5008
  var theme = _ref2.theme;
4985
5009
  return theme.fontFamily.ui;
@@ -4987,16 +5011,16 @@ var Container$i = styled.div(_templateObject$z || (_templateObject$z = _taggedTe
4987
5011
  var theme = _ref3.theme;
4988
5012
  return theme.styles.modal.overlay;
4989
5013
  });
4990
- var CloseIcon = styled(Icon)(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose([""])));
4991
- var CloseButton = styled.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) {
5014
+ var CloseIcon = styled(Icon)(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose([""])));
5015
+ var CloseButton = styled.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) {
4992
5016
  var _ref4$selected = _ref4.selected,
4993
5017
  selected = _ref4$selected === void 0 ? false : _ref4$selected;
4994
- return selected && css(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
5018
+ return selected && css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
4995
5019
  }, function (_ref5) {
4996
5020
  var theme = _ref5.theme;
4997
5021
  return theme && css(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n opacity: .8;\n transition: transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.inOut);
4998
5022
  });
4999
- var LightBox = styled.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) {
5023
+ var LightBox = styled.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) {
5000
5024
  var width = _ref6.width;
5001
5025
  return width ? width : "580px";
5002
5026
  }, function (_ref7) {
@@ -5380,8 +5404,8 @@ function SvgNoImageBig(props) {
5380
5404
 
5381
5405
  var _excluded$k = ["loop", "autoPlay", "controls", "muted"];
5382
5406
 
5383
- var _templateObject$A, _templateObject2$v, _templateObject3$q, _templateObject4$m, _templateObject5$k, _templateObject6$h, _templateObject7$g, _templateObject8$e;
5384
- var MediaBoxWrapper = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n ", ";\n ", ";\n"])), function (_ref) {
5407
+ var _templateObject$C, _templateObject2$w, _templateObject3$r, _templateObject4$n, _templateObject5$l, _templateObject6$h, _templateObject7$f, _templateObject8$d;
5408
+ var MediaBoxWrapper = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n ", ";\n ", ";\n"])), function (_ref) {
5385
5409
  var minHeight = _ref.minHeight;
5386
5410
  return minHeight && "min-height: " + minHeight;
5387
5411
  }, function (_ref2) {
@@ -5389,18 +5413,18 @@ var MediaBoxWrapper = styled.div(_templateObject$A || (_templateObject$A = _tagg
5389
5413
  return minWidth && "min-width: " + minWidth;
5390
5414
  });
5391
5415
  var mediaStyle = "\n max-width: 100%;\n max-height: 100%;\n border-radius: 3px;\n background-color: var(--grey-11);\n";
5392
- var LoadingOverlay = styled.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"])));
5393
- var Video = styled.video(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n ", ";\n outline: none;\n\n ", ";\n"])), mediaStyle, function (_ref3) {
5416
+ var LoadingOverlay = styled.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"])));
5417
+ var Video = styled.video(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n ", ";\n outline: none;\n\n ", ";\n"])), mediaStyle, function (_ref3) {
5394
5418
  var theme = _ref3.theme,
5395
5419
  isLoaded = _ref3.isLoaded,
5396
5420
  hasModalLimits = _ref3.hasModalLimits;
5397
- return 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 && css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
5421
+ return 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 && css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
5398
5422
  });
5399
5423
  var StyledImage = styled.img(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), mediaStyle, function (_ref4) {
5400
5424
  var theme = _ref4.theme,
5401
5425
  isLoaded = _ref4.isLoaded,
5402
5426
  hasModalLimits = _ref4.hasModalLimits;
5403
- return 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 && css(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
5427
+ return 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 && css(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
5404
5428
  });
5405
5429
 
5406
5430
  var MediaBox = function MediaBox(_ref5) {
@@ -5684,15 +5708,15 @@ var _excluded$l = ["mainButtonId", "buttonList", "design", "size", "textMaxWidth
5684
5708
  _excluded2 = ["id", "text", "icon", "disabled"],
5685
5709
  _excluded3 = ["id", "text", "icon", "disabled"];
5686
5710
 
5687
- var _templateObject$B, _templateObject2$w, _templateObject3$r, _templateObject4$n;
5711
+ var _templateObject$D, _templateObject2$x, _templateObject3$s, _templateObject4$o;
5688
5712
  var TOGGLE_ICON_WIDTH = 30;
5689
- var Container$j = styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n height: var(--button-height);\n overflow: visible;\n"])));
5690
- var ButtonsWrapper$1 = styled.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) {
5713
+ var Container$j = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n height: var(--button-height);\n overflow: visible;\n"])));
5714
+ var ButtonsWrapper$1 = styled.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) {
5691
5715
  var isOpen = _ref.isOpen;
5692
5716
  return isOpen && "z-index: 100";
5693
5717
  });
5694
- var MainButtonWrapper = styled.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"])));
5695
- var ToggleIcon = styled.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);
5718
+ var MainButtonWrapper = styled.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"])));
5719
+ var ToggleIcon = styled.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);
5696
5720
 
5697
5721
  var validateMaxWidth = function validateMaxWidth(btnTextMaxWidth, textMaxWidth) {
5698
5722
  if (textMaxWidth) return textMaxWidth;
@@ -5787,8 +5811,8 @@ var SplitButton = function SplitButton(_ref2) {
5787
5811
 
5788
5812
  var _excluded$m = ["id", "buttonType", "icon", "text", "iconPosition", "size"];
5789
5813
 
5790
- var _templateObject$C;
5791
- var Container$k = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n button {\n text-wrap: nowrap;\n }\n"])));
5814
+ var _templateObject$E;
5815
+ var Container$k = styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n button {\n text-wrap: nowrap;\n }\n"])));
5792
5816
 
5793
5817
  var ButtonsStack = function ButtonsStack(_ref) {
5794
5818
  var buttons = _ref.buttons;
@@ -5814,14 +5838,14 @@ var ButtonsStack = function ButtonsStack(_ref) {
5814
5838
  }));
5815
5839
  };
5816
5840
 
5817
- var _templateObject$D, _templateObject2$x, _templateObject3$s, _templateObject4$o, _templateObject5$l, _templateObject6$i, _templateObject7$h, _templateObject8$f;
5818
- var Container$l = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n ", "\n"])), function (_ref) {
5841
+ var _templateObject$F, _templateObject2$y, _templateObject3$t, _templateObject4$p, _templateObject5$m, _templateObject6$i, _templateObject7$g, _templateObject8$e;
5842
+ var Container$l = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n ", "\n"])), function (_ref) {
5819
5843
  var hide = _ref.hide;
5820
- return hide && css(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n display: none;\n "])));
5844
+ return hide && css(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n display: none;\n "])));
5821
5845
  });
5822
- var Label$1 = styled.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);
5823
- var Item = styled.div(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n padding: 12px;\n display: flex;\n justify-content: left;\n"])));
5824
- var IconWrap = styled.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n flex: 0 0 40px;\n padding-top: 2px;\n"])));
5846
+ var Label$1 = styled.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);
5847
+ var Item = styled.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n padding: 12px;\n display: flex;\n justify-content: left;\n"])));
5848
+ var IconWrap = styled.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n flex: 0 0 40px;\n padding-top: 2px;\n"])));
5825
5849
  var Input$1 = styled.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) {
5826
5850
  var isTimeInput = _ref2.isTimeInput;
5827
5851
  return isTimeInput ? function (_ref3) {
@@ -5835,8 +5859,8 @@ var Input$1 = styled.input(_templateObject6$i || (_templateObject6$i = _taggedTe
5835
5859
  return isTimeRangeValid ? 'blue' : 'var(--warning-a9)';
5836
5860
  } : 'transparent';
5837
5861
  });
5838
- var TimeColon = styled.div(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n text-align: center;\n"])));
5839
- var InputWrap = styled.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);
5862
+ var TimeColon = styled.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n text-align: center;\n"])));
5863
+ var InputWrap = styled.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);
5840
5864
 
5841
5865
  var DateTimeBlock = function DateTimeBlock(_ref6) {
5842
5866
  var _ref6$allowAfterMidni = _ref6.allowAfterMidnight,
@@ -6017,7 +6041,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
6017
6041
  })))));
6018
6042
  };
6019
6043
 
6020
- 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;
6044
+ 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;
6021
6045
 
6022
6046
  var initializeInterval = function initializeInterval(day) {
6023
6047
  return {
@@ -6031,16 +6055,16 @@ var initializeInterval = function initializeInterval(day) {
6031
6055
 
6032
6056
  var TODAY = new Date();
6033
6057
  var TODAY_INTERVAL = initializeInterval(startOfDay(new Date()));
6034
- var Container$m = styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
6035
- var DateTimeArea = styled.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"])));
6036
- var TimeZoneOption = styled.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"])));
6037
- var TimeZoneLabel = styled.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);
6038
- var TimeZoneValue = styled.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);
6058
+ var Container$m = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
6059
+ var DateTimeArea = styled.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"])));
6060
+ var TimeZoneOption = styled.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"])));
6061
+ var TimeZoneLabel = styled.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);
6062
+ var TimeZoneValue = styled.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);
6039
6063
  var CalendarArea = styled.div(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
6040
- var CalendarHeader = styled.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"])));
6041
- var CurrentMonth = styled.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"])));
6042
- var IconWrap$1 = styled.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n [stroke]{\n stroke: var(--grey-8);\n }\n"])));
6043
- var PaginateMonth = styled.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);
6064
+ var CalendarHeader = styled.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"])));
6065
+ var CurrentMonth = styled.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"])));
6066
+ var IconWrap$1 = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n [stroke]{\n stroke: var(--grey-8);\n }\n"])));
6067
+ var PaginateMonth = styled.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);
6044
6068
  var CalBody = styled.div(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n padding: 5px 0;\n"])));
6045
6069
  var CalRow = styled.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"])));
6046
6070
  var CalHRow = styled(CalRow)(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n border-bottom: var(--grey-6) 1px solid;\n"])));
@@ -6334,9 +6358,9 @@ var getInitialValue = function getInitialValue(hasEmptyValue, initialValue) {
6334
6358
 
6335
6359
  var _excluded$n = ["children"];
6336
6360
 
6337
- var _templateObject$F, _templateObject2$z;
6338
- var Container$n = styled.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"])));
6339
- var Inner = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n"])));
6361
+ var _templateObject$H, _templateObject2$A;
6362
+ var Container$n = styled.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"])));
6363
+ var Inner = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n"])));
6340
6364
 
6341
6365
  var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
6342
6366
  var children = _ref.children,
@@ -6345,23 +6369,23 @@ var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
6345
6369
  return React__default.createElement(Container$n, Object.assign({}, props), React__default.createElement(Inner, null, children));
6346
6370
  };
6347
6371
 
6348
- var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "children"];
6372
+ var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "design", "children"];
6349
6373
 
6350
- var _templateObject$G, _templateObject2$A, _templateObject3$u, _templateObject4$q, _templateObject5$n, _templateObject6$k, _templateObject7$j;
6351
- var FlipWrapper = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
6374
+ var _templateObject$I, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$o, _templateObject6$k;
6375
+ var FlipWrapper = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
6352
6376
  var isSortAscending = _ref.isSortAscending;
6353
- return isSortAscending && css(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
6377
+ return isSortAscending && css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
6354
6378
  });
6355
- var StyledButton$4 = styled.button(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n ", ";\n border-radius: 3px;\n height: 30px;\n\n ", ";\n\n ", ";\n"])), resetButtonStyles, function (_ref2) {
6356
- var animation = _ref2.theme.animation;
6357
- return 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);
6358
- }, function (_ref3) {
6379
+ var StyledButton$4 = styled.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) {
6380
+ var design = _ref2.design;
6381
+ 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 ";
6382
+ }, 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) {
6359
6383
  var isOpen = _ref3.isOpen,
6360
6384
  hasFlipArrow = _ref3.hasFlipArrow;
6361
- return isOpen && hasFlipArrow && 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);
6385
+ return isOpen && hasFlipArrow && 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);
6362
6386
  });
6363
- var InnerContainer$3 = styled.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
6364
- var ButtonText = styled.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n padding-right: ", ";\n"])), function (_ref4) {
6387
+ var InnerContainer$3 = styled.div(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
6388
+ var ButtonText = styled.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n padding-right: ", ";\n"])), function (_ref4) {
6365
6389
  var hasFlipArrow = _ref4.hasFlipArrow;
6366
6390
  return hasFlipArrow ? '3px' : '20px';
6367
6391
  });
@@ -6373,6 +6397,8 @@ var FilterButton = function FilterButton(_ref5) {
6373
6397
  _ref5$isSortAscending = _ref5.isSortAscending,
6374
6398
  isSortAscending = _ref5$isSortAscending === void 0 ? false : _ref5$isSortAscending,
6375
6399
  isOpen = _ref5.isOpen,
6400
+ _ref5$design = _ref5.design,
6401
+ design = _ref5$design === void 0 ? 'default' : _ref5$design,
6376
6402
  children = _ref5.children,
6377
6403
  props = _objectWithoutPropertiesLoose(_ref5, _excluded$o);
6378
6404
 
@@ -6380,13 +6406,15 @@ var FilterButton = function FilterButton(_ref5) {
6380
6406
  type: 'button'
6381
6407
  }, props, {
6382
6408
  isOpen: isOpen,
6383
- hasFlipArrow: hasFlipArrow
6409
+ hasFlipArrow: hasFlipArrow,
6410
+ design: design
6384
6411
  }), React__default.createElement(InnerContainer$3, null, React__default.createElement(FlipWrapper, Object.assign({}, {
6385
6412
  isSortAscending: isSortAscending
6386
6413
  }), React__default.createElement(Icon, {
6387
6414
  icon: icon,
6388
6415
  size: 12,
6389
- weight: 'light'
6416
+ weight: 'light',
6417
+ color: 'grey-10'
6390
6418
  })), React__default.createElement(ButtonText, Object.assign({}, {
6391
6419
  hasFlipArrow: hasFlipArrow
6392
6420
  }), children), hasFlipArrow && React__default.createElement(Icon, {
@@ -6397,21 +6425,21 @@ var FilterButton = function FilterButton(_ref5) {
6397
6425
 
6398
6426
  var _excluded$p = ["title", "value", "optionType", "selected", "disabled", "onClick"];
6399
6427
 
6400
- var _templateObject$H, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$o, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$e, _templateObject10$c;
6401
- var Title$1 = styled.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) {
6428
+ var _templateObject$J, _templateObject2$C, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$l, _templateObject7$i, _templateObject8$g, _templateObject9$d, _templateObject10$b;
6429
+ var Title$1 = styled.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) {
6402
6430
  var theme = _ref.theme;
6403
6431
  return theme.fontFamily.data;
6404
6432
  });
6405
- var FakeCheckbox = styled.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"])));
6406
- var FakeCheckboxInner = styled.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"])));
6407
- var CheckMarkWrapper = styled.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"])));
6408
- var FakeRadioButton = styled.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"])));
6433
+ var FakeCheckbox = styled.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"])));
6434
+ var FakeCheckboxInner = styled.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"])));
6435
+ var CheckMarkWrapper = styled.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"])));
6436
+ var FakeRadioButton = styled.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"])));
6409
6437
  var FakeInnerRadio = styled.div(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
6410
- var Container$o = styled.div(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n\n ", ";\n"])), function (_ref2) {
6438
+ var Container$o = styled.div(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n\n ", ";\n"])), function (_ref2) {
6411
6439
  var styles = _ref2.theme.styles,
6412
6440
  selected = _ref2.selected,
6413
6441
  disabled = _ref2.disabled;
6414
- return styles && 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 && 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 && css(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))));
6442
+ return styles && 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 && 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 && css(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))));
6415
6443
  });
6416
6444
 
6417
6445
  var FilterOption = function FilterOption(_ref3) {
@@ -6441,22 +6469,22 @@ var FilterOption = function FilterOption(_ref3) {
6441
6469
 
6442
6470
  var _excluded$q = ["color", "hasBorder", "iconSize", "disabled", "noBackground", "hasCrossButton", "onCrossClick", "width"];
6443
6471
 
6444
- var _templateObject$I, _templateObject2$C, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$m, _templateObject7$l, _templateObject8$i;
6445
- var Container$p = styled.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) {
6472
+ var _templateObject$K, _templateObject2$D, _templateObject3$x, _templateObject4$t, _templateObject5$q, _templateObject6$m, _templateObject7$j, _templateObject8$h;
6473
+ var Container$p = styled.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) {
6446
6474
  var styles = _ref.theme.styles,
6447
6475
  theme = _ref.theme,
6448
6476
  hasBorder = _ref.hasBorder,
6449
6477
  disabled = _ref.disabled,
6450
6478
  noBackground = _ref.noBackground,
6451
6479
  width = _ref.width;
6452
- return 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 && css(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n border: ", ";\n box-shadow: ", ";\n "])), styles.filters.searchInput["default"].border, styles.filters.searchInput["default"].boxShadow), disabled && css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && 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);
6480
+ return 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 && css(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n border: ", ";\n box-shadow: ", ";\n "])), styles.filters.searchInput["default"].border, styles.filters.searchInput["default"].boxShadow), disabled && css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && 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);
6453
6481
  }, IconWrapper);
6454
6482
  var CrossButton = styled.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);
6455
- var StyledInput$2 = styled.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) {
6483
+ var StyledInput$2 = styled.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) {
6456
6484
  var typography = _ref2.theme.typography,
6457
6485
  theme = _ref2.theme,
6458
6486
  color = _ref2.color;
6459
- return 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);
6487
+ return 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);
6460
6488
  });
6461
6489
 
6462
6490
  var BasicSearchInput = function BasicSearchInput(_ref3) {
@@ -6516,18 +6544,18 @@ var isFilterItem = function isFilterItem(item) {
6516
6544
  return (typeof item.value === 'number' || typeof item.value === 'string') && typeof item.text === 'string';
6517
6545
  };
6518
6546
 
6519
- var _excluded$r = ["buttonIcon", "buttonText", "disabled", "minWidth", "minHeight", "isSortAscending", "children", "onToggleOpenCallback", "onCloseCallback"];
6547
+ var _excluded$r = ["buttonIcon", "buttonText", "disabled", "minWidth", "minHeight", "isSortAscending", "design", "children", "onToggleOpenCallback", "onCloseCallback"];
6520
6548
 
6521
- var _templateObject$J, _templateObject2$D, _templateObject3$x, _templateObject4$t;
6522
- var Container$q = styled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
6523
- var ButtonWrapper = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
6524
- var ContentBox = styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n z-index: 100;\n min-width: ", "px;\n position: absolute;\n\n ", ";\n"])), function (_ref) {
6549
+ var _templateObject$L, _templateObject2$E, _templateObject3$y, _templateObject4$u;
6550
+ var Container$q = styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
6551
+ var ButtonWrapper = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
6552
+ var ContentBox = styled.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n z-index: 100;\n min-width: ", "px;\n position: absolute;\n\n ", ";\n"])), function (_ref) {
6525
6553
  var minWidth = _ref.minWidth;
6526
6554
  return minWidth;
6527
6555
  }, function (_ref2) {
6528
6556
  var openState = _ref2.openState,
6529
6557
  disabled = _ref2.disabled;
6530
- return openState && 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 ");
6558
+ return openState && 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 ");
6531
6559
  });
6532
6560
 
6533
6561
  var getDropPosition = function getDropPosition(buttonRect, minWidth, minHeight) {
@@ -6561,6 +6589,8 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
6561
6589
  _ref3$minHeight = _ref3.minHeight,
6562
6590
  minHeight = _ref3$minHeight === void 0 ? 190 : _ref3$minHeight,
6563
6591
  isSortAscending = _ref3.isSortAscending,
6592
+ _ref3$design = _ref3.design,
6593
+ design = _ref3$design === void 0 ? 'default' : _ref3$design,
6564
6594
  children = _ref3.children,
6565
6595
  _ref3$onToggleOpenCal = _ref3.onToggleOpenCallback,
6566
6596
  onToggleOpenCallback = _ref3$onToggleOpenCal === void 0 ? function () {} : _ref3$onToggleOpenCal,
@@ -6623,7 +6653,8 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
6623
6653
  }
6624
6654
  }, {
6625
6655
  disabled: disabled,
6626
- isSortAscending: isSortAscending
6656
+ isSortAscending: isSortAscending,
6657
+ design: design
6627
6658
  }, {
6628
6659
  hasFlipArrow: true
6629
6660
  }), buttonText)), React__default.createElement(ContentBox, Object.assign({}, {
@@ -6633,9 +6664,9 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
6633
6664
  }), children));
6634
6665
  };
6635
6666
 
6636
- var _templateObject$K, _templateObject2$E;
6637
- var Container$r = styled.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"])));
6638
- var LoadingText = styled.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);
6667
+ var _templateObject$M, _templateObject2$F;
6668
+ var Container$r = styled.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"])));
6669
+ var LoadingText = styled.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);
6639
6670
 
6640
6671
  var LoadingBox = function LoadingBox(_ref) {
6641
6672
  var loadingText = _ref.loadingText;
@@ -6645,22 +6676,22 @@ var LoadingBox = function LoadingBox(_ref) {
6645
6676
  }), React__default.createElement(LoadingText, null, loadingText));
6646
6677
  };
6647
6678
 
6648
- var _excluded$s = ["buttonIcon", "buttonText", "list", "selected", "disabled", "isLoading", "loadingText", "optionType", "hasOptionsFilter", "searchPlaceholder", "maxDisplayedItems", "searchResultText", "emptyResultText", "onSelect"];
6679
+ var _excluded$s = ["buttonIcon", "buttonText", "list", "selected", "disabled", "isLoading", "loadingText", "optionType", "hasOptionsFilter", "searchPlaceholder", "maxDisplayedItems", "searchResultText", "emptyResultText", "design", "onSelect"];
6649
6680
 
6650
- var _templateObject$L, _templateObject2$F, _templateObject3$y, _templateObject4$u, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$j, _templateObject9$f, _templateObject10$d;
6651
- var Container$s = styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
6652
- var TopLine$1 = styled.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"])));
6653
- var InnerBox = styled.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"])));
6654
- var StyledFilterOption = styled(FilterOption)(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
6655
- var OptionList = styled.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) {
6681
+ var _templateObject$N, _templateObject2$G, _templateObject3$z, _templateObject4$v, _templateObject5$r, _templateObject6$n, _templateObject7$k, _templateObject8$i, _templateObject9$e, _templateObject10$c;
6682
+ var Container$s = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
6683
+ var TopLine$1 = styled.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"])));
6684
+ var InnerBox = styled.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"])));
6685
+ var StyledFilterOption = styled(FilterOption)(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
6686
+ var OptionList = styled.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) {
6656
6687
  var moreItem = _ref.moreItem;
6657
6688
  return moreItem ? '168px' : '175px';
6658
6689
  }, StyledFilterOption);
6659
6690
  var ResultsContainer = styled.div(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--grey-5);\n padding-bottom: 8px;\n"])));
6660
- var ResultCounter = styled.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);
6661
- var SearchWrapper = styled.div(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n height: 41px;\n display: flex;\n align-items: center;\n"])));
6662
- var EmptyResultText = styled.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"])));
6663
- var Gradient = styled.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"])));
6691
+ var ResultCounter = styled.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);
6692
+ var SearchWrapper = styled.div(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n height: 41px;\n display: flex;\n align-items: center;\n"])));
6693
+ var EmptyResultText = styled.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"])));
6694
+ var Gradient = styled.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"])));
6664
6695
 
6665
6696
  var isValueSelected = function isValueSelected(item, selected) {
6666
6697
  var isItemSelected = false;
@@ -6806,6 +6837,8 @@ var FilterDropdown = function FilterDropdown(_ref2) {
6806
6837
  _ref2$searchResultTex = _ref2.searchResultText,
6807
6838
  searchResultText = _ref2$searchResultTex === void 0 ? 'Showing [VISIBLE] of [TOTAL]' : _ref2$searchResultTex,
6808
6839
  emptyResultText = _ref2.emptyResultText,
6840
+ _ref2$design = _ref2.design,
6841
+ design = _ref2$design === void 0 ? 'default' : _ref2$design,
6809
6842
  _ref2$onSelect = _ref2.onSelect,
6810
6843
  onSelect = _ref2$onSelect === void 0 ? function () {} : _ref2$onSelect,
6811
6844
  props = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
@@ -6858,7 +6891,8 @@ var FilterDropdown = function FilterDropdown(_ref2) {
6858
6891
  return React__default.createElement(Container$s, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({}, {
6859
6892
  buttonIcon: buttonIcon,
6860
6893
  buttonText: buttonText,
6861
- disabled: disabled
6894
+ disabled: disabled,
6895
+ design: design
6862
6896
  }, {
6863
6897
  onCloseCallback: handleClose,
6864
6898
  onToggleOpenCallback: handleToggleOpen
@@ -6892,18 +6926,18 @@ var FilterDropdown = function FilterDropdown(_ref2) {
6892
6926
  }) : React__default.createElement(EmptyResultText, null, emptyResultText)), list.length > 5 && React__default.createElement(Gradient, null)))));
6893
6927
  };
6894
6928
 
6895
- var _excluded$t = ["buttonText", "disabled", "list", "isLoading", "loadingText", "isSortAscending", "selected", "descendingText", "ascendingText", "onSelect"];
6929
+ var _excluded$t = ["buttonText", "disabled", "list", "isLoading", "loadingText", "isSortAscending", "selected", "descendingText", "ascendingText", "design", "onSelect"];
6896
6930
 
6897
- var _templateObject$M, _templateObject2$G, _templateObject3$z, _templateObject4$v, _templateObject5$r, _templateObject6$o, _templateObject7$n, _templateObject8$k, _templateObject9$g;
6898
- var Container$t = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
6899
- var TopLine$2 = styled.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"])));
6900
- var InnerBox$1 = styled.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"])));
6901
- var StyledFilterOption$1 = styled(FilterOption)(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
6902
- var OptionList$1 = styled.div(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n ", " {\n height: 35px;\n padding-left: 10px;\n }\n"])), StyledFilterOption$1);
6931
+ var _templateObject$O, _templateObject2$H, _templateObject3$A, _templateObject4$w, _templateObject5$s, _templateObject6$o, _templateObject7$l, _templateObject8$j, _templateObject9$f;
6932
+ var Container$t = styled.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
6933
+ var TopLine$2 = styled.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"])));
6934
+ var InnerBox$1 = styled.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"])));
6935
+ var StyledFilterOption$1 = styled(FilterOption)(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
6936
+ var OptionList$1 = styled.div(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n ", " {\n height: 35px;\n padding-left: 10px;\n }\n"])), StyledFilterOption$1);
6903
6937
  var OrderGroup = styled.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"])));
6904
- var OrderButton = styled.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) {
6938
+ var OrderButton = styled.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) {
6905
6939
  var isSelected = _ref.isSelected;
6906
- return 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 && css(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n ", " {\n [stroke]{\n stroke: var(--primary-8);\n }\n }\n "])), IconWrapper));
6940
+ return 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 && css(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n ", " {\n [stroke]{\n stroke: var(--primary-8);\n }\n }\n "])), IconWrapper));
6907
6941
  });
6908
6942
 
6909
6943
  var SortDropdown = function SortDropdown(_ref2) {
@@ -6919,6 +6953,8 @@ var SortDropdown = function SortDropdown(_ref2) {
6919
6953
  descendingText = _ref2$descendingText === void 0 ? 'Descending' : _ref2$descendingText,
6920
6954
  _ref2$ascendingText = _ref2.ascendingText,
6921
6955
  ascendingText = _ref2$ascendingText === void 0 ? 'Ascending' : _ref2$ascendingText,
6956
+ _ref2$design = _ref2.design,
6957
+ design = _ref2$design === void 0 ? 'basic' : _ref2$design,
6922
6958
  onSelect = _ref2.onSelect,
6923
6959
  props = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
6924
6960
 
@@ -6939,7 +6975,8 @@ var SortDropdown = function SortDropdown(_ref2) {
6939
6975
  return React__default.createElement(Container$t, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({}, {
6940
6976
  buttonText: buttonText,
6941
6977
  disabled: disabled,
6942
- isSortAscending: isSortAscending
6978
+ isSortAscending: isSortAscending,
6979
+ design: design
6943
6980
  }, {
6944
6981
  buttonIcon: 'FilterSorting'
6945
6982
  }), React__default.createElement(TopLine$2, null), React__default.createElement(InnerBox$1, null, isLoading || list.length === 0 ? React__default.createElement(LoadingBox, Object.assign({}, {
@@ -6981,27 +7018,27 @@ var SortDropdown = function SortDropdown(_ref2) {
6981
7018
  }))))));
6982
7019
  };
6983
7020
 
6984
- 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;
6985
- var Container$u = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
6986
- var ContextActionBaseCSS = 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"])));
6987
- var ContextIcon = styled.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) {
7021
+ 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;
7022
+ var Container$u = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
7023
+ var ContextActionBaseCSS = 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"])));
7024
+ var ContextIcon = styled.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) {
6988
7025
  var theme = _ref.theme;
6989
- return 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);
7026
+ return 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);
6990
7027
  });
6991
- var ContextActionButton = styled.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) {
7028
+ var ContextActionButton = styled.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) {
6992
7029
  var isActive = _ref2.isActive;
6993
7030
  return isActive && 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);
6994
7031
  }, function (_ref3) {
6995
7032
  var isInnerContextButton = _ref3.isInnerContextButton;
6996
- return isInnerContextButton && css(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n margin-right: 5px;\n "])));
7033
+ return isInnerContextButton && css(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n margin-right: 5px;\n "])));
6997
7034
  });
6998
- var ContentBox$1 = styled.div(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n z-index: 100;\n min-width: ", "px;\n position: absolute;\n ", ";\n"])), function (_ref4) {
7035
+ var ContentBox$1 = styled.div(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n z-index: 100;\n min-width: ", "px;\n position: absolute;\n ", ";\n"])), function (_ref4) {
6999
7036
  var minWidth = _ref4.minWidth;
7000
7037
  return minWidth;
7001
7038
  }, function (_ref5) {
7002
7039
  var openState = _ref5.openState,
7003
7040
  disabled = _ref5.disabled;
7004
- return openState && 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' && css(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'bottom-left' && css(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'top-left' && css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))), openState.position === 'top-right' && css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))));
7041
+ return openState && 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' && css(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'bottom-left' && css(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'top-left' && css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))), openState.position === 'top-right' && css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))));
7005
7042
  });
7006
7043
  var ButtonWrapper$1 = styled.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
7007
7044
  var TopLine$3 = styled.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"])));
@@ -7169,10 +7206,10 @@ var FilterLayout = function FilterLayout(_ref6) {
7169
7206
 
7170
7207
  var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "onCloseCallback", "onUpdateCallback", "onToggleCallback"];
7171
7208
 
7172
- var _templateObject$O;
7209
+ var _templateObject$Q;
7173
7210
  var MIN_WIDTH = 470;
7174
7211
  var MIN_HEIGHT = 360;
7175
- var Container$v = styled.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose([""])));
7212
+ var Container$v = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose([""])));
7176
7213
 
7177
7214
  var DropdownDatePicker = function DropdownDatePicker(_ref) {
7178
7215
  var buttonIcon = _ref.buttonIcon,
@@ -7266,17 +7303,17 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
7266
7303
 
7267
7304
  var _excluded$v = ["hasShowMore", "searchFilters", "datePickerFilters", "dropdownFilters", "showMoreText", "showLessText"];
7268
7305
 
7269
- var _templateObject$P, _templateObject2$I, _templateObject3$B, _templateObject4$x, _templateObject5$t, _templateObject6$q, _templateObject7$p, _templateObject8$m;
7270
- var fadeInAnimation = 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"])));
7271
- var SearchInputWrapper = styled.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n flex: 1 1 200px;\n max-width: 320px;\n"])));
7272
- var CloseSearchInputWrapper = styled.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
7306
+ var _templateObject$R, _templateObject2$J, _templateObject3$C, _templateObject4$y, _templateObject5$u, _templateObject6$q, _templateObject7$n, _templateObject8$l;
7307
+ var fadeInAnimation = 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"])));
7308
+ var SearchInputWrapper = styled.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n flex: 1 1 200px;\n max-width: 320px;\n"])));
7309
+ var CloseSearchInputWrapper = styled.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
7273
7310
  var theme = _ref.theme;
7274
- return theme && css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n animation: ", " ", " ", ";\n "])), fadeInAnimation, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
7311
+ return theme && css(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n animation: ", " ", " ", ";\n "])), fadeInAnimation, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
7275
7312
  });
7276
- var StyledFilterButton = styled(FilterButton)(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose([""])));
7313
+ var StyledFilterButton = styled(FilterButton)(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose([""])));
7277
7314
  var StyledDropdown = styled(FilterDropdown)(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose([""])));
7278
- var StyledDropdownDatePicker = styled(DropdownDatePicker)(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose([""])));
7279
- var Container$w = styled.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);
7315
+ var StyledDropdownDatePicker = styled(DropdownDatePicker)(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose([""])));
7316
+ var Container$w = styled.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);
7280
7317
 
7281
7318
  var renderDropdowns = function renderDropdowns(dropdownFilters, showMoreDropdowns, hasShowMore) {
7282
7319
  return dropdownFilters.map(function (dropdown) {
@@ -7392,17 +7429,17 @@ var FilterInputs = function FilterInputs(_ref2) {
7392
7429
 
7393
7430
  var _excluded$w = ["labelLists", "totalResults", "resultTextTemplate", "clearText", "resultsDateFormat", "onRemoveFilter", "onClearAll"];
7394
7431
 
7395
- var _templateObject$Q, _templateObject2$J, _templateObject3$C, _templateObject4$y, _templateObject5$u, _templateObject6$r, _templateObject7$q;
7396
- var Container$x = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 12px;\n min-height: 22px;\n"])));
7397
- var ResultsTextWrapper = styled.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-9);\n"])), fontFamily.ui);
7398
- var FilterLabel = styled.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);
7399
- var FilterLabelText = styled.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) {
7432
+ var _templateObject$S, _templateObject2$K, _templateObject3$D, _templateObject4$z, _templateObject5$v, _templateObject6$r, _templateObject7$o;
7433
+ var Container$x = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 12px;\n min-height: 22px;\n"])));
7434
+ var ResultsTextWrapper = styled.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-9);\n"])), fontFamily.ui);
7435
+ var FilterLabel = styled.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);
7436
+ var FilterLabelText = styled.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) {
7400
7437
  var hasIcon = _ref.hasIcon;
7401
7438
  return hasIcon ? '0 15px 0 9px' : '0 15px 0 0';
7402
7439
  });
7403
- var ClearTextButton = styled.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);
7440
+ var ClearTextButton = styled.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);
7404
7441
  var RemoveButton = styled.button(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n ", ";\n"])), resetButtonStyles);
7405
- var FilterLabelsGroup = styled.div(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n margin-left: 10px;\n"])));
7442
+ var FilterLabelsGroup = styled.div(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n margin-left: 10px;\n"])));
7406
7443
 
7407
7444
  var validWithMidnight = function validWithMidnight(endDate, resultsDateFormat) {
7408
7445
  if (endDate.getHours() === 23 && endDate.getSeconds() > 0) {
@@ -7502,10 +7539,10 @@ var FiltersResults = function FiltersResults(_ref2) {
7502
7539
 
7503
7540
  var _excluded$x = ["filtersTitle", "hasShowMore", "searchersConfig", "dropdownsConfig", "datePickersConfig", "showMoreText", "showLessText", "resultTextTemplate", "clearText", "totalResults", "singleFilter", "resultsDateFormat", "onChangeCallback"];
7504
7541
 
7505
- var _templateObject$R, _templateObject2$K, _templateObject3$D;
7506
- var Title$2 = styled.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);
7507
- var StyledFilterResults = styled(FiltersResults)(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose([""])));
7508
- var Container$y = styled.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n ", " {\n margin-top: 29px;\n min-height: 19px;\n }\n"])), StyledFilterResults);
7542
+ var _templateObject$T, _templateObject2$L, _templateObject3$E;
7543
+ var Title$2 = styled.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);
7544
+ var StyledFilterResults = styled(FiltersResults)(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose([""])));
7545
+ var Container$y = styled.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n ", " {\n margin-top: 29px;\n min-height: 19px;\n }\n"])), StyledFilterResults);
7509
7546
 
7510
7547
  var getDisableValue = function getDisableValue(filtersValues, singleFilter, filter) {
7511
7548
  var disabled = false;
@@ -7933,31 +7970,25 @@ var FilterBar = function FilterBar(_ref4) {
7933
7970
  })));
7934
7971
  };
7935
7972
 
7936
- var _templateObject$S, _templateObject2$L, _templateObject3$E, _templateObject4$z, _templateObject5$v;
7937
- var Container$z = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n"])));
7938
- var StatusCounter = styled.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) {
7939
- var animation = _ref.theme.animation;
7940
- return css(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n transition: background-color ", " ", ";\n "])), animation.speed.slow, animation.easing.primary.easeInOut);
7941
- }, function (_ref2) {
7942
- var theme = _ref2.theme,
7943
- color = _ref2.color;
7973
+ var _templateObject$U, _templateObject2$M, _templateObject3$F;
7974
+ var Container$z = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n"])));
7975
+ var StatusCounter = styled.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) {
7976
+ var theme = _ref.theme,
7977
+ color = _ref.color;
7944
7978
  return color ? theme.colors.status[color] : 'var(--grey-5)';
7945
7979
  });
7946
- var StatusDot = styled.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) {
7947
- var animation = _ref3.theme.animation;
7948
- return css(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n transition: background-color ", " ", ";\n "])), animation.speed.slow, animation.easing.primary.easeInOut);
7949
- }, function (_ref4) {
7950
- var theme = _ref4.theme,
7951
- color = _ref4.color;
7980
+ var StatusDot = styled.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) {
7981
+ var theme = _ref2.theme,
7982
+ color = _ref2.color;
7952
7983
  return color ? theme.colors.status[color] : 'var(--grey-5)';
7953
7984
  });
7954
7985
 
7955
- var StatusIcon = function StatusIcon(_ref5) {
7956
- var icon = _ref5.icon,
7957
- status = _ref5.status,
7958
- counter = _ref5.counter,
7959
- _ref5$maxCounter = _ref5.maxCounter,
7960
- maxCounter = _ref5$maxCounter === void 0 ? 999 : _ref5$maxCounter;
7986
+ var StatusIcon = function StatusIcon(_ref3) {
7987
+ var icon = _ref3.icon,
7988
+ status = _ref3.status,
7989
+ counter = _ref3.counter,
7990
+ _ref3$maxCounter = _ref3.maxCounter,
7991
+ maxCounter = _ref3$maxCounter === void 0 ? 999 : _ref3$maxCounter;
7961
7992
  return React__default.createElement(Container$z, null, status && counter === undefined ? React__default.createElement(StatusDot, {
7962
7993
  color: status
7963
7994
  }) : counter === undefined ? null : React__default.createElement(StatusCounter, {
@@ -7969,10 +8000,10 @@ var StatusIcon = function StatusIcon(_ref5) {
7969
8000
  }));
7970
8001
  };
7971
8002
 
7972
- 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;
7973
- var HandleTouchReactionKeyframes = 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"])));
7974
- var HandleMouseReactionKeyframes = 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"])));
7975
- var HandleBase = styled.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) {
8003
+ 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;
8004
+ var HandleTouchReactionKeyframes = 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"])));
8005
+ var HandleMouseReactionKeyframes = 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"])));
8006
+ var HandleBase = styled.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) {
7976
8007
  var theme = _ref.theme,
7977
8008
  styling = _ref.styling;
7978
8009
  return theme.custom.lines[styling].handleBase.fill;
@@ -7987,19 +8018,19 @@ var HandleRingLayer = styled.circle(_templateObject4$A || (_templateObject4$A =
7987
8018
  var HandleReactiveGroup = styled.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) {
7988
8019
  return props.touchDragging && css(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n animation: ", " 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n "])), HandleTouchReactionKeyframes);
7989
8020
  }, function (props) {
7990
- return props.mouseDragging && css(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n animation: ", " 0.25s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n "])), HandleMouseReactionKeyframes);
8021
+ return props.mouseDragging && css(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n animation: ", " 0.25s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n "])), HandleMouseReactionKeyframes);
7991
8022
  });
7992
- var HandleReactiveFill = styled.circle(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n mix-blend-mode: multiply;\n fill: ", ";\n stroke: none;\n"])), function (_ref3) {
8023
+ var HandleReactiveFill = styled.circle(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n mix-blend-mode: multiply;\n fill: ", ";\n stroke: none;\n"])), function (_ref3) {
7993
8024
  var theme = _ref3.theme,
7994
8025
  styling = _ref3.styling;
7995
8026
  return theme.custom.lines[styling].handleReactiveFill.fill;
7996
8027
  });
7997
- var HandleReactiveRing = styled.circle(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref4) {
8028
+ var HandleReactiveRing = styled.circle(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref4) {
7998
8029
  var theme = _ref4.theme,
7999
8030
  styling = _ref4.styling;
8000
8031
  return theme.custom.lines[styling].handleReactiveRing.stroke;
8001
8032
  });
8002
- var HandleContrastLayer = styled.circle(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n overflow: visible;\n mix-blend-mode: multiply;\n fill: none;\n stroke: ", ";\n"])), function (_ref5) {
8033
+ var HandleContrastLayer = styled.circle(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n overflow: visible;\n mix-blend-mode: multiply;\n fill: none;\n stroke: ", ";\n"])), function (_ref5) {
8003
8034
  var theme = _ref5.theme,
8004
8035
  styling = _ref5.styling;
8005
8036
  return theme.custom.lines[styling].handleContrastLayer.stroke;
@@ -8218,8 +8249,8 @@ var HandleUnit = function HandleUnit(props) {
8218
8249
  }, index + pointIndexOffset))));
8219
8250
  };
8220
8251
 
8221
- 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;
8222
- var ContrastLine = styled.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) {
8252
+ 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;
8253
+ var ContrastLine = styled.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) {
8223
8254
  var theme = _ref.theme,
8224
8255
  styling = _ref.styling;
8225
8256
  return theme.custom.lines[styling].contrastLine.stroke;
@@ -8230,12 +8261,12 @@ var ContrastLine = styled.line(_templateObject$U || (_templateObject$U = _tagged
8230
8261
  var showLineBorder = _ref3.showLineBorder;
8231
8262
  return showLineBorder ? '0.35' : '0';
8232
8263
  });
8233
- var HighlightLine = styled.line(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n pointer-events: none;\n stroke: ", ";\n"])), function (_ref4) {
8264
+ var HighlightLine = styled.line(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n pointer-events: none;\n stroke: ", ";\n"])), function (_ref4) {
8234
8265
  var theme = _ref4.theme,
8235
8266
  styling = _ref4.styling;
8236
8267
  return theme.custom.lines[styling].highlightLineBorder.stroke;
8237
8268
  });
8238
- var GrabHandle = styled.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) {
8269
+ var GrabHandle = styled.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) {
8239
8270
  var theme = _ref5.theme,
8240
8271
  styling = _ref5.styling;
8241
8272
  return theme.custom.lines[styling].grabHandle.fill;
@@ -8249,20 +8280,20 @@ var GrabHandle = styled.circle(_templateObject3$G || (_templateObject3$G = _tagg
8249
8280
  var GrabHandleIndexGroup$1 = styled.g(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n opacity: 0;\n pointer-events: none;\n ", ";\n\n"])), function (props) {
8250
8281
  return props.showIndex && css(_templateObject6$t || (_templateObject6$t = _taggedTemplateLiteralLoose(["\n opacity: 1;\n "])));
8251
8282
  });
8252
- var GrabHandleIndexText$1 = styled.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) {
8283
+ var GrabHandleIndexText$1 = styled.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) {
8253
8284
  var theme = _ref7.theme,
8254
8285
  styling = _ref7.styling;
8255
8286
  return theme.custom.lines[styling].grabHandleText.stroke;
8256
8287
  });
8257
- var LabelText$2 = styled.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) {
8288
+ var LabelText$2 = styled.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) {
8258
8289
  var theme = _ref8.theme,
8259
8290
  styling = _ref8.styling;
8260
8291
  return theme.custom.lines[styling].label.fill;
8261
8292
  }, function (_ref9) {
8262
8293
  var showLabelShadow = _ref9.showLabelShadow;
8263
- return showLabelShadow && 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 "])));
8294
+ return showLabelShadow && 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 "])));
8264
8295
  });
8265
- var GrabHandleContrast = styled(GrabHandle)(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref10) {
8296
+ var GrabHandleContrast = styled(GrabHandle)(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref10) {
8266
8297
  var theme = _ref10.theme,
8267
8298
  styling = _ref10.styling;
8268
8299
  return theme.custom.lines[styling].grabHandleContrast.stroke;
@@ -8508,20 +8539,20 @@ var LineUnit = function LineUnit(props) {
8508
8539
 
8509
8540
  var LineSetContext = createContext({});
8510
8541
 
8511
- var _templateObject$V, _templateObject2$O, _templateObject3$H, _templateObject4$C;
8512
- var FilledPolygon = styled.polygon(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n fill: ", ";\n opacity: ", ";\n"])), function (_ref) {
8542
+ var _templateObject$X, _templateObject2$P, _templateObject3$I, _templateObject4$C;
8543
+ var FilledPolygon = styled.polygon(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n fill: ", ";\n opacity: ", ";\n"])), function (_ref) {
8513
8544
  var color = _ref.color;
8514
8545
  return color;
8515
8546
  }, function (_ref2) {
8516
8547
  var opacity = _ref2.opacity;
8517
8548
  return opacity;
8518
8549
  });
8519
- var Point = styled.circle(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n fill: ", ";\n"])), function (_ref3) {
8550
+ var Point = styled.circle(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n fill: ", ";\n"])), function (_ref3) {
8520
8551
  var theme = _ref3.theme,
8521
8552
  styling = _ref3.styling;
8522
8553
  return theme.custom.lines[styling].point.fill;
8523
8554
  });
8524
- var AreaLabelText = styled.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) {
8555
+ var AreaLabelText = styled.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) {
8525
8556
  var theme = _ref4.theme,
8526
8557
  styling = _ref4.styling;
8527
8558
  return theme.custom.lines[styling].label.fill;
@@ -8792,10 +8823,10 @@ var LineSet = function LineSet(_ref8) {
8792
8823
  }));
8793
8824
  };
8794
8825
 
8795
- var _templateObject$W, _templateObject2$P, _templateObject3$I, _templateObject4$D, _templateObject5$y;
8796
- var Container$A = styled.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"])));
8797
- var LoadingOverlay$1 = styled.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"])));
8798
- var Frame = styled.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) {
8826
+ var _templateObject$Y, _templateObject2$Q, _templateObject3$J, _templateObject4$D, _templateObject5$y;
8827
+ var Container$A = styled.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"])));
8828
+ var LoadingOverlay$1 = styled.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"])));
8829
+ var Frame = styled.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) {
8799
8830
  return props.transculent && css(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
8800
8831
  });
8801
8832
  var Image$1 = styled.img(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n object-fit: contain;\n width: 100%;\n height: 100%;\n"])));
@@ -9001,10 +9032,10 @@ var LineUI = function LineUI(_ref) {
9001
9032
 
9002
9033
  var _excluded$y = ["loop", "autoPlay", "controls", "muted"];
9003
9034
 
9004
- var _templateObject$X, _templateObject2$Q, _templateObject3$J, _templateObject4$E, _templateObject5$z;
9005
- var Container$B = styled.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"])));
9006
- var Video$1 = styled.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"])));
9007
- var LoadingOverlay$2 = styled.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"])));
9035
+ var _templateObject$Z, _templateObject2$R, _templateObject3$K, _templateObject4$E, _templateObject5$z;
9036
+ var Container$B = styled.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"])));
9037
+ var Video$1 = styled.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"])));
9038
+ var LoadingOverlay$2 = styled.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"])));
9008
9039
  var Frame$1 = styled.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) {
9009
9040
  return props.transcalent && css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
9010
9041
  });
@@ -9229,8 +9260,8 @@ var LineUIVideo = function LineUIVideo(_ref) {
9229
9260
 
9230
9261
  var _excluded$z = ["id", "enabled", "peerAddress", "maxConnectionAttempts", "rtcConfiguration", "setStatus", "setError", "autoPlay", "muted"];
9231
9262
 
9232
- var _templateObject$Y;
9233
- var Video$2 = styled.video(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n /* width: 800px; */\n"])));
9263
+ var _templateObject$_;
9264
+ var Video$2 = styled.video(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n /* width: 800px; */\n"])));
9234
9265
 
9235
9266
  var WebRTCPlayer = function WebRTCPlayer(_ref) {
9236
9267
  var _ref$id = _ref.id,
@@ -9554,10 +9585,10 @@ function getPeerId(id) {
9554
9585
  return 'WRP_' + id + '_' + Math.floor(Math.random() * (9000 - 10) + 10).toString();
9555
9586
  }
9556
9587
 
9557
- var _templateObject$Z, _templateObject2$R, _templateObject3$K, _templateObject4$F, _templateObject5$A;
9558
- var Container$C = styled.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"])));
9559
- var Video$3 = styled(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"])));
9560
- var LoadingOverlay$3 = styled.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"])));
9588
+ var _templateObject$$, _templateObject2$S, _templateObject3$L, _templateObject4$F, _templateObject5$A;
9589
+ var Container$C = styled.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"])));
9590
+ var Video$3 = styled(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"])));
9591
+ var LoadingOverlay$3 = styled.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"])));
9561
9592
  var Frame$2 = styled.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) {
9562
9593
  return props.transcalent && css(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
9563
9594
  });
@@ -9905,20 +9936,20 @@ var LineReducer = (function (state, action) {
9905
9936
  }
9906
9937
  });
9907
9938
 
9908
- var _templateObject$_, _templateObject2$S, _templateObject3$L, _templateObject4$G, _templateObject5$B, _templateObject6$u, _templateObject7$t;
9939
+ var _templateObject$10, _templateObject2$T, _templateObject3$M, _templateObject4$G, _templateObject5$B, _templateObject6$u, _templateObject7$r;
9909
9940
  var ICON_SIZE = 24;
9910
9941
  var GAP_LEFT = 20;
9911
9942
  var ICON_MARGIN_LEFT = -GAP_LEFT - ICON_SIZE;
9912
- var Container$D = styled.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);
9913
- var TitlesWrapper = styled.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n flex-direction: ", ";\n gap: 4px;\n"])), function (_ref) {
9943
+ var Container$D = styled.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);
9944
+ var TitlesWrapper = styled.div(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n flex-direction: ", ";\n gap: 4px;\n"])), function (_ref) {
9914
9945
  var areaTitleBottom = _ref.areaTitleBottom;
9915
9946
  return areaTitleBottom ? "column-reverse" : "column";
9916
9947
  });
9917
- var IconContainer$1 = styled.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);
9948
+ var IconContainer$1 = styled.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);
9918
9949
  var Title$3 = styled.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"])));
9919
9950
  var AreaTitleCss = 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"])));
9920
9951
  var AreaTitle = styled.div(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n ", "\n"])), AreaTitleCss);
9921
- var AreaLinkTitle = styled(Link)(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n ", "\n &:hover {\n text-decoration: underline;\n }\n"])), AreaTitleCss);
9952
+ var AreaLinkTitle = styled(Link)(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n ", "\n &:hover {\n text-decoration: underline;\n }\n"])), AreaTitleCss);
9922
9953
 
9923
9954
  var PageTitle = function PageTitle(_ref2) {
9924
9955
  var title = _ref2.title,
@@ -9946,23 +9977,20 @@ var PageTitle = function PageTitle(_ref2) {
9946
9977
  }, areaTitle) : areaTitle && React__default.createElement(AreaTitle, null, areaTitle), React__default.createElement(Title$3, null, title)));
9947
9978
  };
9948
9979
 
9949
- var _templateObject$$, _templateObject2$T;
9950
- var Container$E = styled.p(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
9951
- var theme = _ref.theme;
9952
- return css(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.pageHeader.introduction);
9953
- });
9980
+ var _templateObject$11;
9981
+ var Container$E = styled.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"])));
9954
9982
 
9955
- var IntroductionText = function IntroductionText(_ref2) {
9956
- var children = _ref2.children;
9983
+ var IntroductionText = function IntroductionText(_ref) {
9984
+ var children = _ref.children;
9957
9985
  return React__default.createElement(Container$E, null, children);
9958
9986
  };
9959
9987
 
9960
9988
  var _excluded$B = ["icon", "size", "weight", "label", "linkTo", "noBorder", "tagSize"];
9961
9989
 
9962
- var _templateObject$10, _templateObject2$U, _templateObject3$M, _templateObject4$H, _templateObject5$C, _templateObject6$v, _templateObject7$u;
9963
- var TextContainer$2 = styled.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
9990
+ var _templateObject$12, _templateObject2$U, _templateObject3$N, _templateObject4$H, _templateObject5$C, _templateObject6$v, _templateObject7$s;
9991
+ var TextContainer$2 = styled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
9964
9992
  var StyledLink = styled(Link)(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n"])));
9965
- var TagWrapper = styled.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) {
9993
+ var TagWrapper = styled.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) {
9966
9994
  var size = _ref.size;
9967
9995
  return size;
9968
9996
  }, function (_ref2) {
@@ -9977,7 +10005,7 @@ var TagWrapper = styled.div(_templateObject3$M || (_templateObject3$M = _taggedT
9977
10005
  }, IconWrapper, function (_ref5) {
9978
10006
  var hoverColor = _ref5.hoverColor,
9979
10007
  enableHover = _ref5.enableHover;
9980
- return enableHover && 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);
10008
+ return enableHover && 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);
9981
10009
  });
9982
10010
 
9983
10011
  var Tag = function Tag(_ref6) {
@@ -10021,14 +10049,15 @@ var Tag = function Tag(_ref6) {
10021
10049
  }, renderTag()) : renderTag();
10022
10050
  };
10023
10051
 
10024
- var _templateObject$11, _templateObject2$V, _templateObject3$N, _templateObject4$I, _templateObject5$D;
10025
- var Container$F = styled.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n gap: 32px;\n"])));
10052
+ var _templateObject$13, _templateObject2$V, _templateObject3$O, _templateObject4$I, _templateObject5$D, _templateObject6$w;
10053
+ var Container$F = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n gap: 32px;\n"])));
10026
10054
  var LeftPanel = styled.div(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n"])));
10027
- var RightPanel = styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n padding-top: 0px;\n }\n\n"])), function (_ref) {
10055
+ var IntroductionTextWrapper = styled.div(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n max-width: 648px;\n"])));
10056
+ var RightPanel = styled.div(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n padding-top: 0px;\n }\n\n"])), function (_ref) {
10028
10057
  var iconLeftPanel = _ref.iconLeftPanel;
10029
- return iconLeftPanel && css(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n padding-top: 32px;\n "])));
10058
+ return iconLeftPanel && css(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n padding-top: 32px;\n "])));
10030
10059
  }, deviceMediaQuery.large);
10031
- var TagListWrapper = styled.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"])));
10060
+ var TagListWrapper = styled.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"])));
10032
10061
 
10033
10062
  var PageHeader = function PageHeader(_ref2) {
10034
10063
  var title = _ref2.title,
@@ -10067,13 +10096,13 @@ var PageHeader = function PageHeader(_ref2) {
10067
10096
  label: label,
10068
10097
  linkTo: linkTo
10069
10098
  }));
10070
- })), introductionText ? React__default.createElement(IntroductionText, null, introductionText) : null), rightContent ? React__default.createElement(RightPanel, {
10099
+ })), introductionText ? React__default.createElement(IntroductionTextWrapper, null, React__default.createElement(IntroductionText, null, introductionText)) : null), rightContent ? React__default.createElement(RightPanel, {
10071
10100
  iconLeftPanel: !!icon
10072
10101
  }, rightContent) : null);
10073
10102
  };
10074
10103
 
10075
- var _templateObject$12;
10076
- var Container$G = styled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
10104
+ var _templateObject$14;
10105
+ var Container$G = styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
10077
10106
 
10078
10107
  var MultilineContent = function MultilineContent(_ref) {
10079
10108
  var contentArray = _ref.contentArray;
@@ -10084,21 +10113,21 @@ var MultilineContent = function MultilineContent(_ref) {
10084
10113
  }));
10085
10114
  };
10086
10115
 
10087
- var _templateObject$13, _templateObject2$W, _templateObject3$O, _templateObject4$J, _templateObject5$E, _templateObject6$w, _templateObject7$v;
10088
- var Container$H = styled.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) {
10116
+ var _templateObject$15, _templateObject2$W, _templateObject3$P, _templateObject4$J, _templateObject5$E, _templateObject6$x, _templateObject7$t;
10117
+ var Container$H = styled.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) {
10089
10118
  var aspect = _ref.aspect;
10090
10119
  return aspect === '16:9' && css(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n padding-left: 56.25%;\n "])));
10091
10120
  }, function (_ref2) {
10092
10121
  var theme = _ref2.theme;
10093
- return theme && 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);
10122
+ return theme && 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);
10094
10123
  }, function (_ref3) {
10095
10124
  var theme = _ref3.theme,
10096
10125
  hoverZoom = _ref3.hoverZoom;
10097
10126
  return theme && hoverZoom && 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);
10098
10127
  });
10099
10128
  var ImageWrapper = styled.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"])));
10100
- var NoImageWrapper = styled.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"])));
10101
- var PlayableDrop = styled.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);
10129
+ var NoImageWrapper = styled.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"])));
10130
+ var PlayableDrop = styled.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);
10102
10131
 
10103
10132
  var TableRowThumbnail = function TableRowThumbnail(_ref4) {
10104
10133
  var _ref4$hoverZoom = _ref4.hoverZoom,
@@ -10219,8 +10248,8 @@ var TableRowThumbnail = function TableRowThumbnail(_ref4) {
10219
10248
  })));
10220
10249
  };
10221
10250
 
10222
- var _templateObject$14, _templateObject2$X;
10223
- var Container$I = styled.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) {
10251
+ var _templateObject$16, _templateObject2$X;
10252
+ var Container$I = styled.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) {
10224
10253
  var status = _ref.status,
10225
10254
  colors = _ref.theme.colors;
10226
10255
  return css(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n background: ", ";\n content:'", "';\n "])), colors.status[status], status);
@@ -10234,12 +10263,12 @@ var TypeTableDeviceStatus = function TypeTableDeviceStatus(_ref2) {
10234
10263
  });
10235
10264
  };
10236
10265
 
10237
- var _templateObject$15, _templateObject2$Y, _templateObject3$P, _templateObject4$K, _templateObject5$F, _templateObject6$x, _templateObject7$w, _templateObject8$p, _templateObject9$k, _templateObject10$h, _templateObject11$b;
10238
- var CopyToClipboard = styled.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) {
10266
+ var _templateObject$17, _templateObject2$Y, _templateObject3$Q, _templateObject4$K, _templateObject5$F, _templateObject6$y, _templateObject7$u, _templateObject8$o, _templateObject9$j, _templateObject10$g, _templateObject11$b;
10267
+ var CopyToClipboard = styled.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) {
10239
10268
  var theme = _ref.theme;
10240
10269
  return theme && css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n transition: ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
10241
10270
  });
10242
- var CellContainer = styled.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) {
10271
+ var CellContainer = styled.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) {
10243
10272
  return p.theme.fontFamily.data;
10244
10273
  }, CopyToClipboard, function (_ref2) {
10245
10274
  var theme = _ref2.theme,
@@ -10248,17 +10277,17 @@ var CellContainer = styled.div(_templateObject3$P || (_templateObject3$P = _tagg
10248
10277
  return cellStyle === 'firstColumn' ? css(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle]) : css(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle][alignment]);
10249
10278
  }, function (_ref3) {
10250
10279
  var hasCopyButton = _ref3.hasCopyButton;
10251
- return hasCopyButton && css(_templateObject6$x || (_templateObject6$x = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
10280
+ return hasCopyButton && css(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
10252
10281
  }, function (_ref4) {
10253
10282
  var styles = _ref4.theme.styles,
10254
10283
  hideDivider = _ref4.hideDivider;
10255
- return !hideDivider && 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);
10284
+ return !hideDivider && 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);
10256
10285
  });
10257
- var UnitText = styled.span(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
10286
+ var UnitText = styled.span(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
10258
10287
  var theme = _ref5.theme;
10259
- return css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
10288
+ return css(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
10260
10289
  });
10261
- var StatusBlip = styled.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) {
10290
+ var StatusBlip = styled.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) {
10262
10291
  var _ref6$status = _ref6.status,
10263
10292
  status = _ref6$status === void 0 ? 'neutral' : _ref6$status,
10264
10293
  colors = _ref6.theme.colors;
@@ -10306,8 +10335,8 @@ var TypeTableCell = function TypeTableCell(_ref7) {
10306
10335
  })) : null);
10307
10336
  };
10308
10337
 
10309
- var _templateObject$16, _templateObject2$Z;
10310
- var RowContainer = styled.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n display: table-row;\n ", ";\n"])), function (_ref) {
10338
+ var _templateObject$18, _templateObject2$Z;
10339
+ var RowContainer = styled.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n display: table-row;\n ", ";\n"])), function (_ref) {
10311
10340
  var isEmpty = _ref.isEmpty;
10312
10341
  return isEmpty && css(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["\n visibility: hidden;\n "])));
10313
10342
  });
@@ -10384,13 +10413,13 @@ var TypeTableRow = function TypeTableRow(_ref2) {
10384
10413
  }));
10385
10414
  };
10386
10415
 
10387
- var _templateObject$17, _templateObject2$_, _templateObject3$Q, _templateObject4$L;
10388
- var HeaderTitle = styled.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) {
10416
+ var _templateObject$19, _templateObject2$_, _templateObject3$R, _templateObject4$L;
10417
+ var HeaderTitle = styled.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) {
10389
10418
  var ascending = _ref.ascending;
10390
10419
  return ascending && 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 "])));
10391
10420
  }, function (_ref2) {
10392
10421
  var isSortActive = _ref2.isSortActive;
10393
- return isSortActive && css(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n &:not(hover) {\n ", " {\n display: inline-flex;\n }\n }\n "])), IconWrapper);
10422
+ return isSortActive && css(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n &:not(hover) {\n ", " {\n display: inline-flex;\n }\n }\n "])), IconWrapper);
10394
10423
  }, function (_ref3) {
10395
10424
  var styles = _ref3.theme.styles,
10396
10425
  sortable = _ref3.sortable;
@@ -10424,32 +10453,32 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
10424
10453
  }), header);
10425
10454
  };
10426
10455
 
10427
- 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;
10428
- var HeaderRow = styled.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
10456
+ 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;
10457
+ var HeaderRow = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
10429
10458
  var HeaderItem = styled.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) {
10430
10459
  return p.theme.fontFamily.ui;
10431
10460
  }, function (_ref) {
10432
10461
  var hasCopyButton = _ref.hasCopyButton;
10433
- return hasCopyButton && css(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
10462
+ return hasCopyButton && css(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
10434
10463
  }, function (_ref2) {
10435
10464
  var theme = _ref2.theme,
10436
10465
  alignment = _ref2.alignment,
10437
10466
  headerStyle = _ref2.headerStyle;
10438
10467
  return alignment ? css(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle][alignment]) : css(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle]['left']);
10439
10468
  }, function (p) {
10440
- return p.fixedWidth && css(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n width: ", "px;\n "])), p.fixedWidth);
10469
+ return p.fixedWidth && css(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n width: ", "px;\n "])), p.fixedWidth);
10441
10470
  }, function (_ref3) {
10442
10471
  var minWidth = _ref3.minWidth;
10443
- return minWidth && css(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n min-width:", "px;\n "])), minWidth);
10472
+ return minWidth && css(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n min-width:", "px;\n "])), minWidth);
10444
10473
  }, function (_ref4) {
10445
10474
  var styles = _ref4.theme.styles,
10446
10475
  headerStyle = _ref4.headerStyle,
10447
10476
  isSortActive = _ref4.isSortActive;
10448
- return headerStyle === 'subHeader' && 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%');
10477
+ return headerStyle === 'subHeader' && 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%');
10449
10478
  });
10450
- var TitleItems = styled.div(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n ", ";\n"])), function (_ref5) {
10479
+ var TitleItems = styled.div(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n ", ";\n"])), function (_ref5) {
10451
10480
  var alignment = _ref5.alignment;
10452
- return alignment && css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
10481
+ return alignment && css(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
10453
10482
  });
10454
10483
  var GroupTitle = styled.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"])));
10455
10484
  var Title$4 = styled.div(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n ", ";\n padding-left: 2px;\n padding-right: 8px;\n white-space: nowrap;\n"])), function (_ref6) {
@@ -10593,10 +10622,10 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
10593
10622
  }));
10594
10623
  };
10595
10624
 
10596
- var _templateObject$19, _templateObject2$10, _templateObject3$S, _templateObject4$N, _templateObject5$H;
10597
- var Container$J = styled.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose([""])));
10625
+ var _templateObject$1b, _templateObject2$10, _templateObject3$T, _templateObject4$N, _templateObject5$H;
10626
+ var Container$J = styled.div(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose([""])));
10598
10627
  var TableContainer = styled.div(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n display: table;\n width: 100%;\n position: relative;\n"])));
10599
- var LoadingText$1 = styled.div(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n color: var(--grey-a11);\n"])));
10628
+ var LoadingText$1 = styled.div(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n color: var(--grey-a11);\n"])));
10600
10629
  var LoadingBox$1 = styled.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) {
10601
10630
  var theme = _ref.theme;
10602
10631
  return theme.colors["pureBase"];
@@ -10691,22 +10720,22 @@ var TypeTable = function TypeTable(_ref3) {
10691
10720
 
10692
10721
  var _excluded$C = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
10693
10722
 
10694
- var _templateObject$1a, _templateObject2$11, _templateObject3$T, _templateObject4$O, _templateObject5$I, _templateObject6$z, _templateObject7$y, _templateObject8$r, _templateObject9$m, _templateObject10$j;
10695
- var Container$K = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
10723
+ var _templateObject$1c, _templateObject2$11, _templateObject3$U, _templateObject4$O, _templateObject5$I, _templateObject6$A, _templateObject7$w, _templateObject8$q, _templateObject9$l, _templateObject10$i;
10724
+ var Container$K = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
10696
10725
  var theme = _ref.theme;
10697
10726
  return css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
10698
10727
  });
10699
- var StyledButton$5 = styled(Button)(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
10728
+ var StyledButton$5 = styled(Button)(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
10700
10729
  var StyledLoadingButton = styled(ButtonWithLoading)(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
10701
10730
  var StyledLink$1 = styled(Link)(_templateObject5$I || (_templateObject5$I = _taggedTemplateLiteralLoose(["\n color: inherit;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n"])));
10702
- var EditContainer = styled.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);
10703
- var StyledIconButton$1 = styled(IconButton$2)(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose([""])));
10704
- var TextContainer$3 = styled.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) {
10731
+ var EditContainer = styled.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);
10732
+ var StyledIconButton$1 = styled(IconButton$2)(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose([""])));
10733
+ var TextContainer$3 = styled.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) {
10705
10734
  var alignment = _ref2.alignment;
10706
- return alignment === 'center' && css(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
10735
+ return alignment === 'center' && css(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
10707
10736
  }, function (_ref3) {
10708
10737
  var alignment = _ref3.alignment;
10709
- return alignment === 'right' && css(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
10738
+ return alignment === 'right' && css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
10710
10739
  }, StyledIconButton$1, StyledIconButton$1);
10711
10740
 
10712
10741
  var EditCell = function EditCell(_ref4) {
@@ -11159,12 +11188,12 @@ var PTZProvider = function PTZProvider(_ref) {
11159
11188
  }, children);
11160
11189
  };
11161
11190
 
11162
- var _templateObject$1b, _templateObject2$12, _templateObject3$U, _templateObject4$P, _templateObject5$J;
11163
- var Active = styled.g(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11191
+ var _templateObject$1d, _templateObject2$12, _templateObject3$V, _templateObject4$P, _templateObject5$J;
11192
+ var Active = styled.g(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11164
11193
  var active = _ref.active;
11165
11194
  return active && css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11166
11195
  });
11167
- var Hover = styled.g(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11196
+ var Hover = styled.g(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11168
11197
  var hover = _ref2.hover;
11169
11198
  return hover && css(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11170
11199
  });
@@ -11241,17 +11270,17 @@ var Up = function Up() {
11241
11270
  })));
11242
11271
  };
11243
11272
 
11244
- var _templateObject$1c, _templateObject2$13, _templateObject3$V, _templateObject4$Q, _templateObject5$K, _templateObject6$A;
11245
- var Active$1 = styled.g(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11273
+ var _templateObject$1e, _templateObject2$13, _templateObject3$W, _templateObject4$Q, _templateObject5$K, _templateObject6$B;
11274
+ var Active$1 = styled.g(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11246
11275
  var active = _ref.active;
11247
11276
  return active && css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11248
11277
  });
11249
- var Hover$1 = styled.g(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11278
+ var Hover$1 = styled.g(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11250
11279
  var hover = _ref2.hover;
11251
11280
  return hover && css(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11252
11281
  });
11253
11282
  var Container$M = styled.g(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n"])));
11254
- var Arrow$1 = styled.g(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n\n"])));
11283
+ var Arrow$2 = styled.g(_templateObject6$B || (_templateObject6$B = _taggedTemplateLiteralLoose(["\n\n"])));
11255
11284
 
11256
11285
  var Down = function Down() {
11257
11286
  var _useState = useState(false),
@@ -11310,7 +11339,7 @@ var Down = function Down() {
11310
11339
  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',
11311
11340
  id: 'PTZ-Active-Down-Highlight',
11312
11341
  stroke: 'url(#linearGradient-15)'
11313
- })), React__default.createElement(Arrow$1, {
11342
+ })), React__default.createElement(Arrow$2, {
11314
11343
  id: 'PTZ-Arrows-Icons',
11315
11344
  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)',
11316
11345
  fillRule: 'nonzero'
@@ -11325,12 +11354,12 @@ var Down = function Down() {
11325
11354
  })));
11326
11355
  };
11327
11356
 
11328
- var _templateObject$1d, _templateObject2$14, _templateObject3$W, _templateObject4$R, _templateObject5$L;
11329
- var Active$2 = styled.g(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11357
+ var _templateObject$1f, _templateObject2$14, _templateObject3$X, _templateObject4$R, _templateObject5$L;
11358
+ var Active$2 = styled.g(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11330
11359
  var active = _ref.active;
11331
11360
  return active && css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11332
11361
  });
11333
- var Hover$2 = styled.g(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11362
+ var Hover$2 = styled.g(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11334
11363
  var hover = _ref2.hover;
11335
11364
  return hover && css(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11336
11365
  });
@@ -11409,12 +11438,12 @@ var Left = function Left() {
11409
11438
  })));
11410
11439
  };
11411
11440
 
11412
- var _templateObject$1e, _templateObject2$15, _templateObject3$X, _templateObject4$S, _templateObject5$M;
11413
- var Active$3 = styled.g(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11441
+ var _templateObject$1g, _templateObject2$15, _templateObject3$Y, _templateObject4$S, _templateObject5$M;
11442
+ var Active$3 = styled.g(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11414
11443
  var active = _ref.active;
11415
11444
  return active && css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11416
11445
  });
11417
- var Hover$3 = styled.g(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11446
+ var Hover$3 = styled.g(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11418
11447
  var hover = _ref2.hover;
11419
11448
  return hover && css(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11420
11449
  });
@@ -12306,12 +12335,12 @@ var ZoomBase = function ZoomBase(_ref) {
12306
12335
  })), children));
12307
12336
  };
12308
12337
 
12309
- var _templateObject$1f, _templateObject2$16, _templateObject3$Y, _templateObject4$T, _templateObject5$N;
12310
- var Active$4 = styled.g(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
12338
+ var _templateObject$1h, _templateObject2$16, _templateObject3$Z, _templateObject4$T, _templateObject5$N;
12339
+ var Active$4 = styled.g(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
12311
12340
  var active = _ref.active;
12312
12341
  return active && css(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
12313
12342
  });
12314
- var Hover$4 = styled.g(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
12343
+ var Hover$4 = styled.g(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
12315
12344
  var hover = _ref2.hover;
12316
12345
  return hover && css(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["opacity: 1;"])));
12317
12346
  });
@@ -12383,12 +12412,12 @@ var Up$1 = function Up() {
12383
12412
  })));
12384
12413
  };
12385
12414
 
12386
- var _templateObject$1g, _templateObject2$17, _templateObject3$Z, _templateObject4$U, _templateObject5$O;
12387
- var Active$5 = styled.g(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
12415
+ var _templateObject$1i, _templateObject2$17, _templateObject3$_, _templateObject4$U, _templateObject5$O;
12416
+ var Active$5 = styled.g(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
12388
12417
  var active = _ref.active;
12389
12418
  return active && css(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
12390
12419
  });
12391
- var Hover$5 = styled.g(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
12420
+ var Hover$5 = styled.g(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
12392
12421
  var hover = _ref2.hover;
12393
12422
  return hover && css(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["opacity: 1;"])));
12394
12423
  });
@@ -12456,8 +12485,8 @@ var Up$2 = function Up() {
12456
12485
  })));
12457
12486
  };
12458
12487
 
12459
- var _templateObject$1h;
12460
- var Container$R = styled.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n flex-direction: column;\n"])));
12488
+ var _templateObject$1j;
12489
+ var Container$R = styled.div(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n flex-direction: column;\n"])));
12461
12490
 
12462
12491
  var Controls = function Controls(_ref) {
12463
12492
  var _ref$debug = _ref.debug,
@@ -12471,21 +12500,21 @@ var Controls = function Controls(_ref) {
12471
12500
 
12472
12501
  var _excluded$D = ["isEmptyWithIcon", "status", "noticeIcon", "hasNotice", "noticeMessage", "noticeTitle", "emptyIcon"];
12473
12502
 
12474
- var _templateObject$1i, _templateObject2$18, _templateObject3$_, _templateObject4$V, _templateObject5$P, _templateObject6$B, _templateObject7$z, _templateObject8$s;
12475
- var Container$S = styled.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);
12503
+ var _templateObject$1k, _templateObject2$18, _templateObject3$$, _templateObject4$V, _templateObject5$P, _templateObject6$C, _templateObject7$x, _templateObject8$r;
12504
+ var Container$S = styled.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);
12476
12505
  var EmptyWithIcon = styled.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) {
12477
12506
  var hasPadding = _ref.hasPadding;
12478
12507
  return hasPadding && "\n padding-bottom: 43px\n ";
12479
12508
  }, IconWrapper);
12480
- var Notice = styled.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) {
12509
+ var Notice = styled.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) {
12481
12510
  var color = _ref2.color;
12482
12511
  return color && "var(--" + color + ")";
12483
12512
  });
12484
12513
  var NoticeMessage = styled.div(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 10px;\n"])), EllipsisStyles);
12485
12514
  var NoticeTitle = styled.div(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 12px;\n"])), EllipsisStyles);
12486
- var NoticeIcon = styled.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);
12487
- var NoticeTextGroup = styled.div(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n"])));
12488
- var StatusLine = styled.div(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 3px;\n width: 100%;\n"])), function (_ref3) {
12515
+ var NoticeIcon = styled.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);
12516
+ var NoticeTextGroup = styled.div(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n"])));
12517
+ var StatusLine = styled.div(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 3px;\n width: 100%;\n"])), function (_ref3) {
12489
12518
  var color = _ref3.color;
12490
12519
  return color && "var(--" + color + ")";
12491
12520
  });
@@ -12520,30 +12549,30 @@ var MediaStream = function MediaStream(_ref4) {
12520
12549
  }));
12521
12550
  };
12522
12551
 
12523
- var _templateObject$1j, _templateObject2$19, _templateObject3$$, _templateObject4$W, _templateObject5$Q, _templateObject6$C, _templateObject7$A, _templateObject8$t, _templateObject9$n;
12524
- var Container$T = styled.div(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 60px;\n"])));
12552
+ var _templateObject$1l, _templateObject2$19, _templateObject3$10, _templateObject4$W, _templateObject5$Q, _templateObject6$D, _templateObject7$y, _templateObject8$s, _templateObject9$m;
12553
+ var Container$T = styled.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 60px;\n"])));
12525
12554
  var LeftData = styled.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) {
12526
12555
  var hasRightData = _ref.hasRightData;
12527
- return hasRightData && css(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n border-right: var(--grey-6) 1px solid;\n width: 195px;\n "])));
12556
+ return hasRightData && css(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n border-right: var(--grey-6) 1px solid;\n width: 195px;\n "])));
12528
12557
  }, IconWrapper);
12529
12558
  var RightData = styled.div(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["\n padding: 0 12px 0 16px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
12530
12559
  var DeviceDataGroup = styled.div(_templateObject5$Q || (_templateObject5$Q = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n justify-content: center;\n"])));
12531
- var LeftTitle = styled.div(_templateObject6$C || (_templateObject6$C = _taggedTemplateLiteralLoose(["\n ", ";\n ", "};\n ", ";\n\n color: var(--grey-a10);\n font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
12560
+ var LeftTitle = styled.div(_templateObject6$D || (_templateObject6$D = _taggedTemplateLiteralLoose(["\n ", ";\n ", "};\n ", ";\n\n color: var(--grey-a10);\n font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
12532
12561
  var hasRightData = _ref2.hasRightData;
12533
12562
  return hasRightData ? "max-margin: 140px;" : "max-margin: 250px;";
12534
12563
  }, function (_ref3) {
12535
12564
  var hasMarginBottom = _ref3.hasMarginBottom;
12536
12565
  return hasMarginBottom && "margin-bottom: 1px;";
12537
12566
  });
12538
- var LeftSubTitle = styled.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) {
12567
+ var LeftSubTitle = styled.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) {
12539
12568
  var hasRightData = _ref4.hasRightData;
12540
12569
  return hasRightData ? "max-width: 140px;" : "max-width: 250px;";
12541
12570
  });
12542
- var Title$5 = styled.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) {
12571
+ var Title$5 = styled.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) {
12543
12572
  var hasMarginBottom = _ref5.hasMarginBottom;
12544
12573
  return hasMarginBottom && "margin-bottom: 6px;";
12545
12574
  });
12546
- var SubTitle = styled.div(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: var(--grey-11);\n font-size: 12px;\n"])), EllipsisStyles);
12575
+ var SubTitle = styled.div(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: var(--grey-11);\n font-size: 12px;\n"])), EllipsisStyles);
12547
12576
 
12548
12577
  var PanelMetaData = function PanelMetaData(_ref6) {
12549
12578
  var _ref6$deviceIcon = _ref6.deviceIcon,
@@ -12576,8 +12605,8 @@ var PanelMetaData = function PanelMetaData(_ref6) {
12576
12605
 
12577
12606
  var _excluded$E = ["streamProps", "panelMetaData", "customBottom", "panelOnClick"];
12578
12607
 
12579
- var _templateObject$1k;
12580
- var CameraPanelWrapper = styled.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) {
12608
+ var _templateObject$1m;
12609
+ var CameraPanelWrapper = styled.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) {
12581
12610
  var hasOnClick = _ref.hasOnClick;
12582
12611
  return hasOnClick && "\n cursor: pointer;\n ";
12583
12612
  });
@@ -12595,8 +12624,8 @@ var NewComponent = function NewComponent(_ref2) {
12595
12624
  }, props), React__default.createElement(MediaStream, Object.assign({}, streamProps)), customBottom ? customBottom : panelMetaData && React__default.createElement(PanelMetaData, Object.assign({}, panelMetaData)));
12596
12625
  };
12597
12626
 
12598
- var _templateObject$1l;
12599
- var CameraGrid = styled.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(auto-fill, 300px);\n gap: 20px 20px;\n"])));
12627
+ var _templateObject$1n;
12628
+ var CameraGrid = styled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(auto-fill, 300px);\n gap: 20px 20px;\n"])));
12600
12629
 
12601
12630
  var CameraPanels = function CameraPanels(_ref) {
12602
12631
  var panels = _ref.panels;
@@ -12607,8 +12636,8 @@ var CameraPanels = function CameraPanels(_ref) {
12607
12636
  }));
12608
12637
  };
12609
12638
 
12610
- var _templateObject$1m;
12611
- var TagListWrapper$1 = styled.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);
12639
+ var _templateObject$1o;
12640
+ var TagListWrapper$1 = styled.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);
12612
12641
 
12613
12642
  var TagList = function TagList(_ref) {
12614
12643
  var tagsConfig = _ref.tagsConfig;
@@ -12655,16 +12684,16 @@ var DebouncedSearcher = function DebouncedSearcher(_ref) {
12655
12684
 
12656
12685
  var _excluded$G = ["design", "size", "position", "text"];
12657
12686
 
12658
- var _templateObject$1n, _templateObject2$1a, _templateObject3$10, _templateObject4$X, _templateObject5$R, _templateObject6$D;
12659
- var Container$U = styled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose([""])));
12687
+ var _templateObject$1p, _templateObject2$1a, _templateObject3$11, _templateObject4$X, _templateObject5$R, _templateObject6$E;
12688
+ var Container$U = styled.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose([""])));
12660
12689
  var Title$6 = styled.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) {
12661
12690
  var theme = _ref.theme;
12662
12691
  return theme.fontFamily.ui;
12663
12692
  });
12664
- var ButtonsWrapper$2 = styled.div(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
12693
+ var ButtonsWrapper$2 = styled.div(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
12665
12694
  var LeftButtons = styled.div(_templateObject4$X || (_templateObject4$X = _taggedTemplateLiteralLoose(["\n button {\n margin: 0 10px 10px 0;\n }\n"])));
12666
12695
  var RightButtons = styled.div(_templateObject5$R || (_templateObject5$R = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
12667
- var SelectedResults = styled.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) {
12696
+ var SelectedResults = styled.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) {
12668
12697
  var theme = _ref2.theme;
12669
12698
  return theme.fontFamily.ui;
12670
12699
  });
@@ -12708,11 +12737,11 @@ var ActionsBar = function ActionsBar(_ref3) {
12708
12737
  }, finishTextButton))), React__default.createElement(SelectedResults, null, renderSelected(selectedTemplate, totalSelected, totalAvailable)));
12709
12738
  };
12710
12739
 
12711
- var _templateObject$1o, _templateObject2$1b, _templateObject3$11, _templateObject4$Y, _templateObject5$S, _templateObject6$E, _templateObject7$B, _templateObject8$u, _templateObject9$o, _templateObject10$k;
12740
+ var _templateObject$1q, _templateObject2$1b, _templateObject3$12, _templateObject4$Y, _templateObject5$S, _templateObject6$F, _templateObject7$z, _templateObject8$t, _templateObject9$n, _templateObject10$j;
12712
12741
  var WIDTH_PER_NUMBER = 12;
12713
- var PaginationContainer = styled.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"])));
12742
+ var PaginationContainer = styled.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"])));
12714
12743
  var PageLabel = styled.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"])));
12715
- var StaticPageCount = styled.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"])));
12744
+ var StaticPageCount = styled.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"])));
12716
12745
  var StyledInput$3 = styled.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) {
12717
12746
  var textColor = _ref.textColor;
12718
12747
  return textColor;
@@ -12721,23 +12750,23 @@ var StyledInput$3 = styled.input(_templateObject4$Y || (_templateObject4$Y = _ta
12721
12750
  return maxWidth ? maxWidth : '40px';
12722
12751
  }, WIDTH_PER_NUMBER / 2);
12723
12752
  var shakeAnimation = 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"])));
12724
- var InputContainer$2 = styled.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) {
12753
+ var InputContainer$2 = styled.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) {
12725
12754
  var shouldShake = _ref3.shouldShake;
12726
12755
  return shouldShake ? shakeAnimation : 'none';
12727
12756
  }, function (_ref4) {
12728
12757
  var borderColor = _ref4.borderColor;
12729
12758
  return borderColor && "border: 1px solid " + borderColor;
12730
12759
  });
12731
- var GoButton = styled(Button)(_templateObject7$B || (_templateObject7$B = _taggedTemplateLiteralLoose(["\n height: 24px;\n padding: 0 8px;\n margin-left: 8px;\n"])));
12732
- var ArrowWrapper = styled.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 0 8px;\n"])));
12733
- var ArrowButton = styled.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) {
12760
+ var GoButton = styled(Button)(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose(["\n height: 24px;\n padding: 0 8px;\n margin-left: 8px;\n"])));
12761
+ var ArrowWrapper = styled.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 0 8px;\n"])));
12762
+ var ArrowButton = styled.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) {
12734
12763
  var active = _ref5.active;
12735
12764
  return active ? 'auto' : 'none';
12736
12765
  }, function (_ref6) {
12737
12766
  var active = _ref6.active;
12738
12767
  return active ? '1' : '0.5';
12739
12768
  });
12740
- var ItemsSelectWrapper = styled.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) {
12769
+ var ItemsSelectWrapper = styled.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) {
12741
12770
  var width = _ref7.width;
12742
12771
  return width ? width : "60px";
12743
12772
  }, StyledLabel);
@@ -12968,13 +12997,13 @@ var Pagination = function Pagination(props) {
12968
12997
  }))));
12969
12998
  };
12970
12999
 
12971
- var _templateObject$1p, _templateObject2$1c, _templateObject3$12, _templateObject4$Z, _templateObject5$T;
12972
- var Container$V = styled.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose([""])));
13000
+ var _templateObject$1r, _templateObject2$1c, _templateObject3$13, _templateObject4$Z, _templateObject5$T;
13001
+ var Container$V = styled.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose([""])));
12973
13002
  var Title$7 = styled.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
12974
13003
  var typography = _ref.theme.typography;
12975
13004
  return typography.modal.title;
12976
13005
  });
12977
- var MessageBox$1 = styled.div(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n ", ";\n margin: 28px 0;\n"])), function (_ref2) {
13006
+ var MessageBox$1 = styled.div(_templateObject3$13 || (_templateObject3$13 = _taggedTemplateLiteralLoose(["\n ", ";\n margin: 28px 0;\n"])), function (_ref2) {
12978
13007
  var typography = _ref2.theme.typography;
12979
13008
  return typography.modal.basicContent;
12980
13009
  });
@@ -13021,21 +13050,21 @@ var ConfirmationModal = function ConfirmationModal(_ref3) {
13021
13050
  }, rightButtonText)));
13022
13051
  };
13023
13052
 
13024
- var _templateObject$1q, _templateObject2$1d, _templateObject3$13, _templateObject4$_, _templateObject5$U, _templateObject6$F, _templateObject7$C, _templateObject8$v, _templateObject9$p, _templateObject10$l, _templateObject11$d, _templateObject12$a;
13025
- var Container$W = styled.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"])));
13053
+ var _templateObject$1s, _templateObject2$1d, _templateObject3$14, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$A, _templateObject8$u, _templateObject9$o, _templateObject10$k, _templateObject11$d, _templateObject12$a;
13054
+ var Container$W = styled.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"])));
13026
13055
  var LeftArea = styled.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: var(--columnPadding, 16px);\n flex: 1 0 0;\n"])));
13027
- var BackLinkIcon = styled.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"])));
13056
+ var BackLinkIcon = styled.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"])));
13028
13057
  var BackLink = styled(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) {
13029
13058
  return props.$iconInGutter ? '-24px' : '0';
13030
13059
  }, BackLinkIcon, BackLinkIcon, function (_ref) {
13031
13060
  var $showDivider = _ref.$showDivider;
13032
13061
  return $showDivider && 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 "])));
13033
13062
  });
13034
- var ExtraActionIcon = styled.div(_templateObject6$F || (_templateObject6$F = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n"])));
13035
- var ExtraAction = styled.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);
13036
- var Breadcrumbs = styled.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
13037
- var Breadcrumb = styled.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"])));
13038
- var BreadcrumbIcon = styled.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"])));
13063
+ var ExtraActionIcon = styled.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n"])));
13064
+ var ExtraAction = styled.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);
13065
+ var Breadcrumbs = styled.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
13066
+ var Breadcrumb = styled.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"])));
13067
+ var BreadcrumbIcon = styled.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"])));
13039
13068
  var BreadcrumbLink = styled(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"])));
13040
13069
  var RightArea = styled.div(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n flex: 1;\n align-items: center;\n display: flex;\n justify-content: right;\n"])));
13041
13070
 
@@ -13117,10 +13146,10 @@ var Tabs = function Tabs(_ref) {
13117
13146
  }, children);
13118
13147
  };
13119
13148
 
13120
- var _templateObject$1r, _templateObject2$1e, _templateObject3$14, _templateObject4$$, _templateObject5$V;
13121
- var Container$X = styled.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"])));
13149
+ var _templateObject$1t, _templateObject2$1e, _templateObject3$15, _templateObject4$$, _templateObject5$V;
13150
+ var Container$X = styled.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"])));
13122
13151
  var HeaderArea = styled.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"])));
13123
- var TabArea = styled.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"])));
13152
+ var TabArea = styled.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"])));
13124
13153
  var TabAreaInner = styled.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"])));
13125
13154
  var Content = styled.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"])));
13126
13155
 
@@ -13139,8 +13168,8 @@ var ContentLayout = function ContentLayout(_ref) {
13139
13168
  }, 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));
13140
13169
  };
13141
13170
 
13142
- var _templateObject$1s, _templateObject2$1f;
13143
- var FullWidthContainer = styled.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n"])), function (_ref) {
13171
+ var _templateObject$1u, _templateObject2$1f;
13172
+ var FullWidthContainer = styled.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n"])), function (_ref) {
13144
13173
  var $contentHeight = _ref.$contentHeight;
13145
13174
  return $contentHeight + 'px';
13146
13175
  });
@@ -13166,10 +13195,10 @@ var FullWidthContentBlock = function FullWidthContentBlock(_ref2) {
13166
13195
  }, children));
13167
13196
  };
13168
13197
 
13169
- var _templateObject$1t, _templateObject2$1g, _templateObject3$15, _templateObject4$10, _templateObject5$W, _templateObject6$G, _templateObject7$D, _templateObject8$w;
13170
- var Inner$1 = styled.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"])));
13198
+ var _templateObject$1v, _templateObject2$1g, _templateObject3$16, _templateObject4$10, _templateObject5$W, _templateObject6$H, _templateObject7$B, _templateObject8$v;
13199
+ var Inner$1 = styled.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"])));
13171
13200
  var Line = styled.div(_templateObject2$1g || (_templateObject2$1g = _taggedTemplateLiteralLoose(["\n background: var(--grey-10);\n flex: 1;\n"])));
13172
- var IconContainer$2 = styled.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n svg {\n path {\n stroke: var(--grey-11);\n }\n }\n"])));
13201
+ var IconContainer$2 = styled.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n svg {\n path {\n stroke: var(--grey-11);\n }\n }\n"])));
13173
13202
  var IconDefault = styled.svg(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n transform: ", ";\n"])), function (_ref) {
13174
13203
  var $layout = _ref.$layout;
13175
13204
  return $layout === 'horizontal' ? 'rotate(0deg)' : 'rotate(90deg)';
@@ -13192,9 +13221,9 @@ var IconArrow = styled.svg(_templateObject5$W || (_templateObject5$W = _taggedTe
13192
13221
  return 'transform: rotate(0deg);';
13193
13222
  }
13194
13223
  });
13195
- var Container$Y = styled.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) {
13224
+ var Container$Y = styled.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) {
13196
13225
  var $layout = _ref3.$layout;
13197
- return $layout === 'horizontal' ? 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) : 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);
13226
+ return $layout === 'horizontal' ? 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) : 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);
13198
13227
  });
13199
13228
 
13200
13229
  var ResizeLine = function ResizeLine(_ref4) {
@@ -13239,15 +13268,15 @@ var ResizeLine = function ResizeLine(_ref4) {
13239
13268
  }))), React__default.createElement(Line, null)));
13240
13269
  };
13241
13270
 
13242
- 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;
13243
- var DebugData = styled.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"])));
13271
+ 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;
13272
+ var DebugData = styled.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"])));
13244
13273
  var MainArea = styled.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n\n ", "\n"])), function (_ref) {
13245
13274
  var $layout = _ref.$layout,
13246
13275
  $minDimension = _ref.$minDimension;
13247
- return $layout === 'vertical' ? css(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : css(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
13276
+ return $layout === 'vertical' ? css(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : css(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
13248
13277
  });
13249
13278
  var SideAreaInner = styled.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"])));
13250
- var SideArea = styled.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) {
13279
+ var SideArea = styled.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) {
13251
13280
  var $defaultSize = _ref2.$defaultSize;
13252
13281
  return $defaultSize;
13253
13282
  }, function (_ref3) {
@@ -13257,15 +13286,15 @@ var SideArea = styled.div(_templateObject6$H || (_templateObject6$H = _taggedTem
13257
13286
  var $layout = _ref4.$layout,
13258
13287
  $maxDimension = _ref4.$maxDimension,
13259
13288
  $minDimension = _ref4.$minDimension;
13260
- return $layout === 'vertical' ? 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) : 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);
13289
+ return $layout === 'vertical' ? 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) : 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);
13261
13290
  }, function (_ref5) {
13262
13291
  var $layout = _ref5.$layout,
13263
13292
  $collapseState = _ref5.$collapseState,
13264
13293
  $minDimension = _ref5.$minDimension;
13265
- return $collapseState === 'collapsing' ? 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;
13294
+ return $collapseState === 'collapsing' ? 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;
13266
13295
  }, function (_ref6) {
13267
13296
  var $collapseState = _ref6.$collapseState;
13268
- return $collapseState === 'collapsed' ? css(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
13297
+ return $collapseState === 'collapsed' ? css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
13269
13298
  }, function (_ref7) {
13270
13299
  var $layout = _ref7.$layout,
13271
13300
  $collapseState = _ref7.$collapseState,
@@ -13616,100 +13645,66 @@ var clampInt = function clampInt(value, lower, upper) {
13616
13645
  return clampedInt;
13617
13646
  };
13618
13647
 
13619
- var _templateObject$1v, _templateObject2$1i, _templateObject3$17, _templateObject4$12, _templateObject5$Y, _templateObject6$I, _templateObject7$F;
13648
+ var _templateObject$1x, _templateObject2$1i, _templateObject3$18, _templateObject4$12, _templateObject5$Y, _templateObject6$J, _templateObject7$D;
13620
13649
  var MOBILE_CLOSE_HEIGHT = 50;
13621
13650
  var MOBILE_NAVBAR_HEIGHT = 68;
13622
- var Layout = styled.div(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
13651
+ var Layout = styled.div(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
13623
13652
  var MobileLayout = styled.div(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose([""])));
13624
- var Content$1 = styled.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) {
13653
+ var Content$1 = styled.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) {
13625
13654
  var maxWidth = _ref.maxWidth;
13626
13655
  return maxWidth && css(_templateObject4$12 || (_templateObject4$12 = _taggedTemplateLiteralLoose(["\n & > div {\n max-width: ", ";\n }\n "])), maxWidth);
13627
13656
  });
13628
13657
  var MainContainer = styled.div(_templateObject5$Y || (_templateObject5$Y = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n flex-direction: column;\n"])));
13629
- var ContentArea = styled.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) {
13658
+ var ContentArea = styled.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) {
13630
13659
  var legacyLayout = _ref2.legacyLayout,
13631
13660
  paddingOverride = _ref2.paddingOverride,
13632
13661
  maxWidth = _ref2.maxWidth;
13633
- return legacyLayout && 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');
13634
- });
13635
-
13636
- 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;
13637
- var ContextTitle = styled.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n opacity: 0;\n\n ", "\n\n ", "\n"])), function (_ref) {
13638
- var theme = _ref.theme;
13639
- return css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
13640
- }, function (_ref2) {
13641
- var compact = _ref2.compact;
13642
- return compact && css(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
13643
- });
13644
- var ContextIcon$1 = styled.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) {
13645
- var theme = _ref3.theme;
13646
- return 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);
13647
- });
13648
- var ContextIndicator = styled.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) {
13649
- var theme = _ref4.theme;
13650
- return css(_templateObject7$G || (_templateObject7$G = _taggedTemplateLiteralLoose(["\n transition: opacity 0 ", ";\n "])), theme.animation.easing.primary.easeInOut);
13651
- });
13652
- var ContextActionBaseCSS$1 = 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"])));
13653
- var StyledAnchor = styled.a(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n display: flex;\n text-decoration: none;\n"])));
13654
- var ExternalIconWrapper = styled.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
13655
- var ContextWrapper = styled.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) {
13656
- var theme = _ref5.theme;
13657
- return theme && css(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
13658
- }, function (_ref6) {
13659
- var $menuOpen = _ref6.$menuOpen;
13660
- return $menuOpen && css(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
13661
- }, ContextIcon$1, function (_ref7) {
13662
- var theme = _ref7.theme;
13663
- return theme.styles.global.mainMenu.iconBackground.hover;
13664
- }, IconWrapper);
13665
- var ContextActionA = styled(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) {
13666
- var theme = _ref8.theme;
13667
- return theme && css(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
13668
- }, function (_ref9) {
13669
- var $menuOpen = _ref9.$menuOpen;
13670
- return $menuOpen && css(_templateObject16$6 || (_templateObject16$6 = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
13671
- }, ContextIcon$1, function (_ref10) {
13672
- var theme = _ref10.theme;
13673
- return theme.styles.global.mainMenu.iconBackground.hover;
13674
- }, IconWrapper, function (_ref11) {
13675
- var $isActive = _ref11.$isActive;
13676
- return $isActive && css(_templateObject17$6 || (_templateObject17$6 = _taggedTemplateLiteralLoose(["\n ", ",\n &:hover ", "{\n ", ";\n }\n "])), ContextIcon$1, ContextIcon$1, function (_ref12) {
13677
- var theme = _ref12.theme;
13678
- return theme.styles.global.mainMenu.iconBackground.active;
13679
- });
13680
- });
13681
- var ContextActionButton$1 = styled.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) {
13682
- var theme = _ref13.theme;
13683
- return theme && css(_templateObject19$4 || (_templateObject19$4 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
13684
- }, function (_ref14) {
13685
- var menuOpen = _ref14.menuOpen,
13686
- theme = _ref14.theme;
13687
- return menuOpen && 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);
13688
- }, ContextIcon$1, function (_ref15) {
13689
- var theme = _ref15.theme;
13690
- return theme.styles.global.mainMenu.iconBackground.hover;
13691
- }, IconWrapper, function (_ref16) {
13692
- var isActive = _ref16.isActive;
13693
- return isActive && css(_templateObject21$3 || (_templateObject21$3 = _taggedTemplateLiteralLoose(["\n ", ",\n &:hover ", "{\n ", ";\n }\n "])), ContextIcon$1, ContextIcon$1, function (_ref17) {
13694
- var theme = _ref17.theme;
13695
- return theme.styles.global.mainMenu.iconBackground.active;
13696
- });
13697
- });
13698
-
13699
- var ContextItem = function ContextItem(_ref18) {
13700
- var _ref18$hasSubmenu = _ref18.hasSubmenu,
13701
- hasSubmenu = _ref18$hasSubmenu === void 0 ? false : _ref18$hasSubmenu,
13702
- _ref18$contextKey = _ref18.contextKey,
13703
- contextKey = _ref18$contextKey === void 0 ? -1 : _ref18$contextKey,
13704
- submenuOpen = _ref18.submenuOpen,
13705
- menuOpen = _ref18.menuOpen,
13706
- title = _ref18.title,
13707
- href = _ref18.href,
13708
- icon = _ref18.icon,
13709
- compact = _ref18.compact,
13710
- isActive = _ref18.isActive,
13711
- isExternalLink = _ref18.isExternalLink,
13712
- onClickCallback = _ref18.onClickCallback;
13662
+ return legacyLayout && 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');
13663
+ });
13664
+
13665
+ 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;
13666
+ var ContextTitle = styled.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) {
13667
+ var compact = _ref.compact;
13668
+ return compact && css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
13669
+ });
13670
+ var ContextIcon$1 = styled.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"])));
13671
+ var ContextIndicator = styled.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"])));
13672
+ var ContextActionBaseCSS$1 = 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"])));
13673
+ var StyledAnchor = styled.a(_templateObject6$K || (_templateObject6$K = _taggedTemplateLiteralLoose(["\n display: flex;\n text-decoration: none;\n"])));
13674
+ var ExternalIconWrapper = styled.div(_templateObject7$E || (_templateObject7$E = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
13675
+ var ContextWrapper = styled.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) {
13676
+ var $menuOpen = _ref2.$menuOpen;
13677
+ return $menuOpen && css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
13678
+ }, ContextIcon$1, IconWrapper);
13679
+ var ContextActionA = styled(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) {
13680
+ var $menuOpen = _ref3.$menuOpen;
13681
+ return $menuOpen && css(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
13682
+ }, ContextIcon$1, IconWrapper, function (_ref4) {
13683
+ var $isActive = _ref4.$isActive;
13684
+ return $isActive && css(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n ", ",\n &:hover ", "{\n background-color: var(--global-menu-icon-background-active);\n }\n "])), ContextIcon$1, ContextIcon$1);
13685
+ });
13686
+ var ContextActionButton$1 = styled.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) {
13687
+ var menuOpen = _ref5.menuOpen;
13688
+ return menuOpen && 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);
13689
+ }, ContextIcon$1, IconWrapper, function (_ref6) {
13690
+ var isActive = _ref6.isActive;
13691
+ return isActive && css(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n ", ",\n &:hover ", "{\n background-color: var(--global-menu-icon-background-active);\n }\n "])), ContextIcon$1, ContextIcon$1);
13692
+ });
13693
+
13694
+ var ContextItem = function ContextItem(_ref7) {
13695
+ var _ref7$hasSubmenu = _ref7.hasSubmenu,
13696
+ hasSubmenu = _ref7$hasSubmenu === void 0 ? false : _ref7$hasSubmenu,
13697
+ _ref7$contextKey = _ref7.contextKey,
13698
+ contextKey = _ref7$contextKey === void 0 ? -1 : _ref7$contextKey,
13699
+ submenuOpen = _ref7.submenuOpen,
13700
+ menuOpen = _ref7.menuOpen,
13701
+ title = _ref7.title,
13702
+ href = _ref7.href,
13703
+ icon = _ref7.icon,
13704
+ compact = _ref7.compact,
13705
+ isActive = _ref7.isActive,
13706
+ isExternalLink = _ref7.isExternalLink,
13707
+ onClickCallback = _ref7.onClickCallback;
13713
13708
  var internal = React__default.createElement(React__default.Fragment, null, React__default.createElement(ContextIcon$1, Object.assign({}, {
13714
13709
  compact: compact
13715
13710
  }), React__default.createElement(Icon, {
@@ -13886,54 +13881,40 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
13886
13881
  };
13887
13882
  };
13888
13883
 
13889
- 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;
13890
- var Submenu = styled.ul(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
13884
+ 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;
13885
+ var Submenu = styled.ul(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
13891
13886
  var SubmenuHeader = styled.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
13892
- var SubmenuItemTitle = styled.span(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n display: block;\n ", ";\n\n"])), function (_ref) {
13893
- var theme = _ref.theme;
13894
- return theme && css(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", "\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subheader);
13895
- });
13896
- var SubmenuItemLink = styled(Link)(_templateObject5$_ || (_templateObject5$_ = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n"])), resetButtonStyles);
13897
- var ExternalIconWrapper$1 = styled.div(_templateObject6$K || (_templateObject6$K = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
13898
- var SubmenuItemAnchor = styled.a(_templateObject7$H || (_templateObject7$H = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
13899
- var SubmenuItem = styled.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) {
13900
- var colors = _ref2.theme.colors;
13901
- return colors.divider;
13902
- }, SubmenuItemLink, SubmenuItemAnchor, function (_ref3) {
13903
- var theme = _ref3.theme,
13904
- isActive = _ref3.isActive;
13905
- return theme && 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 && css(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n &, &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem.active));
13906
- });
13907
- var SubmenuContainer = styled.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) {
13908
- var theme = _ref4.theme;
13909
- return theme && 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);
13910
- }, function (_ref5) {
13911
- var colors = _ref5.theme.colors;
13912
- return colors.divider;
13913
- });
13914
- var ContextContainer = styled.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) {
13915
- var minHeight = _ref6.minHeight;
13887
+ var SubmenuItemTitle = styled.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"])));
13888
+ var SubmenuItemLink = styled(Link)(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n"])), resetButtonStyles);
13889
+ var ExternalIconWrapper$1 = styled.div(_templateObject5$_ || (_templateObject5$_ = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
13890
+ var SubmenuItemAnchor = styled.a(_templateObject6$L || (_templateObject6$L = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
13891
+ var SubmenuItem = styled.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) {
13892
+ var isActive = _ref.isActive;
13893
+ return css(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--primary-9);\n }\n\n ", "\n\n "])), isActive && css(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--grey-11);\n font-weight: 600;\n }\n "]))));
13894
+ });
13895
+ var SubmenuContainer = styled.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"])));
13896
+ var ContextContainer = styled.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) {
13897
+ var minHeight = _ref2.minHeight;
13916
13898
  return minHeight ? minHeight + "px" : "70px";
13917
- }, SubmenuContainer, function (_ref7) {
13918
- var open = _ref7.open,
13919
- maxHeight = _ref7.maxHeight,
13920
- theme = _ref7.theme;
13921
- return open && 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);
13922
- }, function (_ref8) {
13923
- var loading = _ref8.loading;
13924
- return loading === 'true' && css(_templateObject15$7 || (_templateObject15$7 = _taggedTemplateLiteralLoose(["\n ", "{\n max-height: none !important;\n opacity: 1;\n }\n "])), SubmenuContainer);
13925
- });
13926
-
13927
- var NavigationItem = function NavigationItem(_ref9) {
13928
- var item = _ref9.item,
13929
- menuOpen = _ref9.menuOpen,
13930
- submenuOpen = _ref9.submenuOpen,
13931
- contextKey = _ref9.contextKey,
13932
- loading = _ref9.loading,
13933
- topLevelPath = _ref9.topLevelPath,
13934
- minHeight = _ref9.minHeight,
13935
- onClickCallback = _ref9.onClickCallback,
13936
- readyCallback = _ref9.readyCallback;
13899
+ }, SubmenuContainer, function (_ref3) {
13900
+ var open = _ref3.open,
13901
+ maxHeight = _ref3.maxHeight;
13902
+ return open && 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);
13903
+ }, function (_ref4) {
13904
+ var loading = _ref4.loading;
13905
+ return loading === 'true' && css(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n ", "{\n max-height: none !important;\n opacity: 1;\n }\n "])), SubmenuContainer);
13906
+ });
13907
+
13908
+ var NavigationItem = function NavigationItem(_ref5) {
13909
+ var item = _ref5.item,
13910
+ menuOpen = _ref5.menuOpen,
13911
+ submenuOpen = _ref5.submenuOpen,
13912
+ contextKey = _ref5.contextKey,
13913
+ loading = _ref5.loading,
13914
+ topLevelPath = _ref5.topLevelPath,
13915
+ minHeight = _ref5.minHeight,
13916
+ onClickCallback = _ref5.onClickCallback,
13917
+ readyCallback = _ref5.readyCallback;
13937
13918
  var icon = item.icon,
13938
13919
  title = item.title,
13939
13920
  href = item.href,
@@ -14033,51 +14014,43 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
14033
14014
  return output;
14034
14015
  };
14035
14016
 
14036
- 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;
14037
- var Logo = styled(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"])));
14017
+ 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;
14018
+ var Logo = styled(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"])));
14038
14019
  var LogoMark = styled.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"])));
14039
- var LogoType = styled.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"])));
14020
+ var LogoType = styled.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"])));
14040
14021
  var SVGObject = styled.object(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose([""])));
14041
14022
  var SVGObjectText = styled.object(_templateObject5$$ || (_templateObject5$$ = _taggedTemplateLiteralLoose(["\n max-width: 180px;\n"])));
14042
- var NavigationContainer = styled.div(_templateObject6$L || (_templateObject6$L = _taggedTemplateLiteralLoose([""])));
14043
- var MenuFooter = styled.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) {
14044
- var theme = _ref.theme;
14045
- return theme && css(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n ", "\n "])), theme.styles.global.mainMenu.footerBackground);
14023
+ var NavigationContainer = styled.div(_templateObject6$M || (_templateObject6$M = _taggedTemplateLiteralLoose([""])));
14024
+ var MenuFooter = styled.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"])));
14025
+ var FooterItemContainer = styled.div(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
14026
+ var PushContainer = styled.div(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref) {
14027
+ var isPinned = _ref.isPinned;
14028
+ return css(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
14046
14029
  });
14047
- var FooterItemContainer = styled.div(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
14048
- var PushContainer = styled.div(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref2) {
14049
- var theme = _ref2.theme,
14050
- isPinned = _ref2.isPinned;
14051
- return theme && css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? theme.dimensions.global.mainMenu.width.open : theme.dimensions.global.mainMenu.width.closed);
14030
+ var Container$_ = styled.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) {
14031
+ var open = _ref2.open,
14032
+ desktopSize = _ref2.desktopSize;
14033
+ return 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' ? "" : css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n transition: width var(--speed-normal) var(--easing-primary-out);\n "]))), LogoType, open ? 1 : 0);
14052
14034
  });
14053
- var Container$_ = styled.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) {
14054
- var theme = _ref3.theme,
14055
- open = _ref3.open,
14056
- desktopSize = _ref3.desktopSize;
14057
- return theme && 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' ? "" : 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);
14058
- });
14059
- var ContainerInner = styled.div(_templateObject15$8 || (_templateObject15$8 = _taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"])), function (_ref4) {
14060
- var theme = _ref4.theme;
14061
- return theme.dimensions.global.mainMenu.width.open;
14062
- });
14063
-
14064
- var MainMenu = function MainMenu(_ref5) {
14065
- var content = _ref5.content,
14066
- _ref5$home = _ref5.home,
14067
- home = _ref5$home === void 0 ? "/" : _ref5$home,
14068
- logoMark = _ref5.logoMark,
14069
- logoText = _ref5.logoText,
14070
- _ref5$keepOpenText = _ref5.keepOpenText,
14071
- keepOpenText = _ref5$keepOpenText === void 0 ? "Keep Open" : _ref5$keepOpenText,
14072
- _ref5$autoHideText = _ref5.autoHideText,
14073
- autoHideText = _ref5$autoHideText === void 0 ? "Auto-Hide" : _ref5$autoHideText,
14074
- supportUrl = _ref5.supportUrl,
14075
- _ref5$defaultMenuOpen = _ref5.defaultMenuOpen,
14076
- defaultMenuOpen = _ref5$defaultMenuOpen === void 0 ? true : _ref5$defaultMenuOpen,
14077
- _ref5$canAlwaysPin = _ref5.canAlwaysPin,
14078
- canAlwaysPin = _ref5$canAlwaysPin === void 0 ? false : _ref5$canAlwaysPin,
14079
- _ref5$onMenuToggle = _ref5.onMenuToggle,
14080
- onMenuToggle = _ref5$onMenuToggle === void 0 ? function () {} : _ref5$onMenuToggle;
14035
+ var ContainerInner = styled.div(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n width: var(--global-menu-width-open);\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
14036
+
14037
+ var MainMenu = function MainMenu(_ref3) {
14038
+ var content = _ref3.content,
14039
+ _ref3$home = _ref3.home,
14040
+ home = _ref3$home === void 0 ? "/" : _ref3$home,
14041
+ logoMark = _ref3.logoMark,
14042
+ logoText = _ref3.logoText,
14043
+ _ref3$keepOpenText = _ref3.keepOpenText,
14044
+ keepOpenText = _ref3$keepOpenText === void 0 ? "Keep Open" : _ref3$keepOpenText,
14045
+ _ref3$autoHideText = _ref3.autoHideText,
14046
+ autoHideText = _ref3$autoHideText === void 0 ? "Auto-Hide" : _ref3$autoHideText,
14047
+ supportUrl = _ref3.supportUrl,
14048
+ _ref3$defaultMenuOpen = _ref3.defaultMenuOpen,
14049
+ defaultMenuOpen = _ref3$defaultMenuOpen === void 0 ? true : _ref3$defaultMenuOpen,
14050
+ _ref3$canAlwaysPin = _ref3.canAlwaysPin,
14051
+ canAlwaysPin = _ref3$canAlwaysPin === void 0 ? false : _ref3$canAlwaysPin,
14052
+ _ref3$onMenuToggle = _ref3.onMenuToggle,
14053
+ onMenuToggle = _ref3$onMenuToggle === void 0 ? function () {} : _ref3$onMenuToggle;
14081
14054
 
14082
14055
  var _useMenu = useMenu(defaultMenuOpen, canAlwaysPin),
14083
14056
  menuState = _useMenu.menuState,
@@ -14178,32 +14151,23 @@ var MainMenu = function MainMenu(_ref5) {
14178
14151
  })) : null))), document.body));
14179
14152
  };
14180
14153
 
14181
- var _templateObject$1z, _templateObject2$1m, _templateObject3$1b, _templateObject4$16, _templateObject5$10, _templateObject6$M, _templateObject7$J, _templateObject8$B, _templateObject9$u, _templateObject10$q, _templateObject11$i;
14182
- var MetaConatiner = styled.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"])));
14183
- var LabelTitle = styled.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) {
14184
- var theme = _ref.theme;
14185
- return theme.fontFamily.ui;
14186
- });
14187
- var LabelContent = styled.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"])));
14188
- var LabelNotes = styled.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) {
14189
- var theme = _ref2.theme;
14190
- return theme && css(_templateObject5$10 || (_templateObject5$10 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.data);
14191
- });
14192
- var TitleContainer = styled.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"])));
14193
- var Container$$ = styled.div(_templateObject7$J || (_templateObject7$J = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
14194
- var TitleBox = styled.div(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
14195
- var IconBox = styled.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$$);
14196
- var CopyTextBox = styled.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) {
14197
- var theme = _ref3.theme;
14198
- return theme.fontFamily.data;
14199
- });
14200
- var CopyBox = styled.div(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n"])));
14201
-
14202
- var UserDrawerMeta = function UserDrawerMeta(_ref4) {
14203
- var item = _ref4.item,
14204
- onUserDrawerMetaClick = _ref4.onUserDrawerMetaClick,
14205
- copySuccessMessage = _ref4.copySuccessMessage,
14206
- includeCopyTitle = _ref4.includeCopyTitle;
14154
+ var _templateObject$1B, _templateObject2$1m, _templateObject3$1c, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$H, _templateObject8$A, _templateObject9$t, _templateObject10$p;
14155
+ var MetaConatiner = styled.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"])));
14156
+ var LabelTitle = styled.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"])));
14157
+ var LabelContent = styled.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"])));
14158
+ var LabelNotes = styled.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"])));
14159
+ var TitleContainer = styled.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"])));
14160
+ var Container$$ = styled.div(_templateObject6$N || (_templateObject6$N = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
14161
+ var TitleBox = styled.div(_templateObject7$H || (_templateObject7$H = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
14162
+ var IconBox = styled.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$$);
14163
+ var CopyTextBox = styled.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"])));
14164
+ var CopyBox = styled.div(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose(["\n"])));
14165
+
14166
+ var UserDrawerMeta = function UserDrawerMeta(_ref) {
14167
+ var item = _ref.item,
14168
+ onUserDrawerMetaClick = _ref.onUserDrawerMetaClick,
14169
+ copySuccessMessage = _ref.copySuccessMessage,
14170
+ includeCopyTitle = _ref.includeCopyTitle;
14207
14171
  var icon = item.icon,
14208
14172
  title = item.title,
14209
14173
  subTitle = item.subTitle,
@@ -14267,34 +14231,19 @@ var UserDrawerMeta = function UserDrawerMeta(_ref4) {
14267
14231
  }, notes) : null)));
14268
14232
  };
14269
14233
 
14270
- var _templateObject$1A, _templateObject2$1n, _templateObject3$1c, _templateObject4$17;
14271
- var Container$10 = styled.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) {
14272
- var theme = _ref.theme;
14273
- return theme.colors.divider;
14274
- });
14234
+ var _templateObject$1C, _templateObject2$1n, _templateObject3$1d, _templateObject4$17;
14235
+ var Container$10 = styled.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"])));
14275
14236
  var ColumnContainer = styled.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n padding-left: 14px;\n align-items: flex-start;\n"])));
14276
- var Title$8 = styled.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) {
14277
- var theme = _ref2.theme;
14278
- return theme.fontFamily.ui;
14279
- }, function (_ref3) {
14280
- var theme = _ref3.theme;
14281
- return theme.typography.global.mainMenu.subheader.color;
14282
- });
14283
- var SubTitle$1 = styled.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) {
14284
- var theme = _ref4.theme;
14285
- return theme.fontFamily.ui;
14286
- }, function (_ref5) {
14287
- var theme = _ref5.theme;
14288
- return theme.typography.global.mainMenu.subheader.color;
14289
- });
14237
+ var Title$8 = styled.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"])));
14238
+ var SubTitle$1 = styled.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"])));
14290
14239
 
14291
- var DrawerBottomMenu = function DrawerBottomMenu(_ref6) {
14292
- var _ref6$icon = _ref6.icon,
14293
- icon = _ref6$icon === void 0 ? 'Settings' : _ref6$icon,
14294
- title = _ref6.title,
14295
- subTitle = _ref6.subTitle,
14296
- _ref6$onClickCallback = _ref6.onClickCallback,
14297
- onClickCallback = _ref6$onClickCallback === void 0 ? function () {} : _ref6$onClickCallback;
14240
+ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
14241
+ var _ref$icon = _ref.icon,
14242
+ icon = _ref$icon === void 0 ? 'Settings' : _ref$icon,
14243
+ title = _ref.title,
14244
+ subTitle = _ref.subTitle,
14245
+ _ref$onClickCallback = _ref.onClickCallback,
14246
+ onClickCallback = _ref$onClickCallback === void 0 ? function () {} : _ref$onClickCallback;
14298
14247
  return React__default.createElement(Container$10, {
14299
14248
  onClick: onClickCallback
14300
14249
  }, React__default.createElement(Icon, {
@@ -14304,103 +14253,78 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref6) {
14304
14253
  }), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
14305
14254
  };
14306
14255
 
14307
- 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;
14308
- var DrawerTop = styled.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose([""])));
14309
- var DrawerBottom = styled.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
14310
- var theme = _ref.theme;
14311
- return 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);
14312
- });
14313
- var DrawerHeader = styled.h2(_templateObject4$18 || (_templateObject4$18 = _taggedTemplateLiteralLoose(["\n ", ";\n padding: 0;\n margin: 0 0 5px;\n"])), function (_ref2) {
14314
- var theme = _ref2.theme;
14315
- return theme.typography.global.mainMenu.subheader;
14316
- });
14317
- var CurrentUser = styled.div(_templateObject5$11 || (_templateObject5$11 = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 15px;\n\n ", ";\n"])), function (_ref3) {
14318
- var theme = _ref3.theme;
14319
- return css(_templateObject6$N || (_templateObject6$N = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n ", ";\n "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.typography.global.mainMenu.identity);
14320
- });
14321
- var UserOptions = styled.div(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 10px 20px;\n ", ";\n\n"])), function (_ref4) {
14322
- var theme = _ref4.theme;
14323
- return css(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n "])), theme.styles.global.mainMenu.lines.backgroundColor);
14324
- });
14325
- var Logout = styled.div(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
14326
- var LinkMenu = styled.ul(_templateObject10$r || (_templateObject10$r = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
14327
- var LinkMenuItem = styled.li(_templateObject11$j || (_templateObject11$j = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
14328
- var IconWrapperFooter = styled.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"])));
14329
- var LinkMenuItemA = styled(Link)(_templateObject13$d || (_templateObject13$d = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n\n ", ";\n\n ", ";\n"])), resetButtonStyles, function (_ref5) {
14330
- var theme = _ref5.theme;
14331
- return 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);
14332
- }, function (_ref6) {
14333
- var theme = _ref6.theme,
14334
- isActive = _ref6.isActive;
14335
- return isActive && css(_templateObject15$9 || (_templateObject15$9 = _taggedTemplateLiteralLoose(["\n &, &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem.active);
14336
- });
14337
- var FooterMeta = styled.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) {
14338
- var theme = _ref7.theme;
14339
- return theme.fontFamily.ui;
14340
- }, function (_ref8) {
14341
- var theme = _ref8.theme;
14342
- return theme.styles.global.mainMenu.lines.backgroundColor;
14343
- }, function (_ref9) {
14344
- var icon = _ref9.icon;
14256
+ 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;
14257
+ var DrawerTop = styled.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose([""])));
14258
+ var DrawerBottom = styled.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);
14259
+ var DrawerHeader = styled.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"])));
14260
+ var CurrentUser = styled.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"])));
14261
+ var UserOptions = styled.div(_templateObject5$11 || (_templateObject5$11 = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 10px 20px;\n border-bottom: var(--dividing-line) 1px solid;\n"])));
14262
+ var Logout = styled.div(_templateObject6$O || (_templateObject6$O = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
14263
+ var LinkMenu = styled.ul(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
14264
+ var LinkMenuItem = styled.li(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
14265
+ var IconWrapperFooter = styled.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"])));
14266
+ var LinkMenuItemA = styled(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) {
14267
+ var isActive = _ref.isActive;
14268
+ return isActive && css(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--primary-9);\n }\n "])));
14269
+ });
14270
+ var FooterMeta = styled.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) {
14271
+ var icon = _ref2.icon;
14345
14272
  return icon !== '' ? '31px;' : '21px;';
14346
14273
  });
14347
- var NavigationContainer$1 = styled.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) {
14348
- var theme = _ref10.theme;
14349
- return css(_templateObject18$5 || (_templateObject18$5 = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n "])), theme.colors.divider);
14350
- });
14351
- var FooterText = styled.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) {
14352
- var icon = _ref11.icon;
14274
+ var NavigationContainer$1 = styled.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"])));
14275
+ var FooterText = styled.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) {
14276
+ var icon = _ref3.icon;
14353
14277
  return icon !== '' ? '136px;' : '164px;';
14354
14278
  });
14355
14279
 
14356
- var UserMenu = function UserMenu(_ref12) {
14357
- var _ref12$hasLanguage = _ref12.hasLanguage,
14358
- hasLanguage = _ref12$hasLanguage === void 0 ? false : _ref12$hasLanguage,
14359
- _ref12$selectedLangua = _ref12.selectedLanguageText,
14360
- selectedLanguageText = _ref12$selectedLangua === void 0 ? '' : _ref12$selectedLangua,
14361
- _ref12$hasLogout = _ref12.hasLogout,
14362
- hasLogout = _ref12$hasLogout === void 0 ? true : _ref12$hasLogout,
14363
- _ref12$logoutLink = _ref12.logoutLink,
14364
- logoutLink = _ref12$logoutLink === void 0 ? '/logout' : _ref12$logoutLink,
14365
- _ref12$logoutText = _ref12.logoutText,
14366
- logoutText = _ref12$logoutText === void 0 ? 'Logout' : _ref12$logoutText,
14367
- _ref12$hasCurrentUser = _ref12.hasCurrentUser,
14368
- hasCurrentUser = _ref12$hasCurrentUser === void 0 ? true : _ref12$hasCurrentUser,
14369
- _ref12$currentUserTex = _ref12.currentUserText,
14370
- currentUserText = _ref12$currentUserTex === void 0 ? 'Current User' : _ref12$currentUserTex,
14371
- _ref12$accountOptionT = _ref12.accountOptionText,
14372
- accountOptionText = _ref12$accountOptionT === void 0 ? "Account Options" : _ref12$accountOptionT,
14373
- _ref12$userSubmenu = _ref12.userSubmenu,
14374
- userSubmenu = _ref12$userSubmenu === void 0 ? [] : _ref12$userSubmenu,
14375
- userDrawerBespoke = _ref12.userDrawerBespoke,
14376
- loggedInUser = _ref12.loggedInUser,
14377
- _ref12$hasSwitchTheme = _ref12.hasSwitchTheme,
14378
- hasSwitchTheme = _ref12$hasSwitchTheme === void 0 ? false : _ref12$hasSwitchTheme,
14379
- _ref12$isLightMode = _ref12.isLightMode,
14380
- isLightMode = _ref12$isLightMode === void 0 ? true : _ref12$isLightMode,
14381
- _ref12$switchThemeTex = _ref12.switchThemeText,
14382
- switchThemeText = _ref12$switchThemeTex === void 0 ? 'SWITCH THEME' : _ref12$switchThemeTex,
14383
- _ref12$selectedThemeT = _ref12.selectedThemeText,
14384
- selectedThemeText = _ref12$selectedThemeT === void 0 ? '' : _ref12$selectedThemeT,
14385
- _ref12$onLogout = _ref12.onLogout,
14386
- onLogout = _ref12$onLogout === void 0 ? function () {} : _ref12$onLogout,
14387
- _ref12$onLanguageTogg = _ref12.onLanguageToggle,
14388
- onLanguageToggle = _ref12$onLanguageTogg === void 0 ? function () {} : _ref12$onLanguageTogg,
14389
- closeOnClick = _ref12.closeOnClick,
14390
- _ref12$onThemeToggle = _ref12.onThemeToggle,
14391
- onThemeToggle = _ref12$onThemeToggle === void 0 ? function () {} : _ref12$onThemeToggle,
14392
- _ref12$userDrawerFoot = _ref12.userDrawerFooter,
14393
- userDrawerFooter = _ref12$userDrawerFoot === void 0 ? {
14280
+ var UserMenu = function UserMenu(_ref4) {
14281
+ var _ref4$hasLanguage = _ref4.hasLanguage,
14282
+ hasLanguage = _ref4$hasLanguage === void 0 ? false : _ref4$hasLanguage,
14283
+ _ref4$selectedLanguag = _ref4.selectedLanguageText,
14284
+ selectedLanguageText = _ref4$selectedLanguag === void 0 ? '' : _ref4$selectedLanguag,
14285
+ _ref4$hasLogout = _ref4.hasLogout,
14286
+ hasLogout = _ref4$hasLogout === void 0 ? true : _ref4$hasLogout,
14287
+ _ref4$logoutLink = _ref4.logoutLink,
14288
+ logoutLink = _ref4$logoutLink === void 0 ? '/logout' : _ref4$logoutLink,
14289
+ _ref4$logoutText = _ref4.logoutText,
14290
+ logoutText = _ref4$logoutText === void 0 ? 'Logout' : _ref4$logoutText,
14291
+ _ref4$hasCurrentUser = _ref4.hasCurrentUser,
14292
+ hasCurrentUser = _ref4$hasCurrentUser === void 0 ? true : _ref4$hasCurrentUser,
14293
+ _ref4$currentUserText = _ref4.currentUserText,
14294
+ currentUserText = _ref4$currentUserText === void 0 ? 'Current User' : _ref4$currentUserText,
14295
+ _ref4$accountOptionTe = _ref4.accountOptionText,
14296
+ accountOptionText = _ref4$accountOptionTe === void 0 ? "Account Options" : _ref4$accountOptionTe,
14297
+ _ref4$userSubmenu = _ref4.userSubmenu,
14298
+ userSubmenu = _ref4$userSubmenu === void 0 ? [] : _ref4$userSubmenu,
14299
+ userDrawerBespoke = _ref4.userDrawerBespoke,
14300
+ loggedInUser = _ref4.loggedInUser,
14301
+ _ref4$hasSwitchTheme = _ref4.hasSwitchTheme,
14302
+ hasSwitchTheme = _ref4$hasSwitchTheme === void 0 ? false : _ref4$hasSwitchTheme,
14303
+ _ref4$isLightMode = _ref4.isLightMode,
14304
+ isLightMode = _ref4$isLightMode === void 0 ? true : _ref4$isLightMode,
14305
+ _ref4$switchThemeText = _ref4.switchThemeText,
14306
+ switchThemeText = _ref4$switchThemeText === void 0 ? 'SWITCH THEME' : _ref4$switchThemeText,
14307
+ _ref4$selectedThemeTe = _ref4.selectedThemeText,
14308
+ selectedThemeText = _ref4$selectedThemeTe === void 0 ? '' : _ref4$selectedThemeTe,
14309
+ _ref4$onLogout = _ref4.onLogout,
14310
+ onLogout = _ref4$onLogout === void 0 ? function () {} : _ref4$onLogout,
14311
+ _ref4$onLanguageToggl = _ref4.onLanguageToggle,
14312
+ onLanguageToggle = _ref4$onLanguageToggl === void 0 ? function () {} : _ref4$onLanguageToggl,
14313
+ closeOnClick = _ref4.closeOnClick,
14314
+ _ref4$onThemeToggle = _ref4.onThemeToggle,
14315
+ onThemeToggle = _ref4$onThemeToggle === void 0 ? function () {} : _ref4$onThemeToggle,
14316
+ _ref4$userDrawerFoote = _ref4.userDrawerFooter,
14317
+ userDrawerFooter = _ref4$userDrawerFoote === void 0 ? {
14394
14318
  icon: '',
14395
14319
  title: ''
14396
- } : _ref12$userDrawerFoot,
14397
- copySuccessMessage = _ref12.copySuccessMessage,
14398
- includeCopyTitle = _ref12.includeCopyTitle,
14399
- _ref12$onUserDrawerMe = _ref12.onUserDrawerMetaClick,
14400
- onUserDrawerMetaClick = _ref12$onUserDrawerMe === void 0 ? function () {} : _ref12$onUserDrawerMe,
14401
- userDrawerMeta = _ref12.userDrawerMeta,
14402
- hasUserDrawerMeta = _ref12.hasUserDrawerMeta,
14403
- hasUserDrawerFooter = _ref12.hasUserDrawerFooter;
14320
+ } : _ref4$userDrawerFoote,
14321
+ copySuccessMessage = _ref4.copySuccessMessage,
14322
+ includeCopyTitle = _ref4.includeCopyTitle,
14323
+ _ref4$onUserDrawerMet = _ref4.onUserDrawerMetaClick,
14324
+ onUserDrawerMetaClick = _ref4$onUserDrawerMet === void 0 ? function () {} : _ref4$onUserDrawerMet,
14325
+ userDrawerMeta = _ref4.userDrawerMeta,
14326
+ hasUserDrawerMeta = _ref4.hasUserDrawerMeta,
14327
+ hasUserDrawerFooter = _ref4.hasUserDrawerFooter;
14404
14328
  var icon = userDrawerFooter.icon,
14405
14329
  title = userDrawerFooter.title;
14406
14330
  var logoutHandler = useCallback(function (e) {
@@ -14431,9 +14355,9 @@ var UserMenu = function UserMenu(_ref12) {
14431
14355
  includeCopyTitle: includeCopyTitle,
14432
14356
  copySuccessMessage: copySuccessMessage
14433
14357
  }));
14434
- })) : 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) {
14435
- var text = _ref13.text,
14436
- href = _ref13.href;
14358
+ })) : 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) {
14359
+ var text = _ref5.text,
14360
+ href = _ref5.href;
14437
14361
  return React__default.createElement(LinkMenuItem, {
14438
14362
  key: index
14439
14363
  }, React__default.createElement(LinkMenuItemA, {
@@ -14465,19 +14389,19 @@ var UserMenu = function UserMenu(_ref12) {
14465
14389
  }, title)) : null));
14466
14390
  };
14467
14391
 
14468
- var _templateObject$1C, _templateObject2$1p, _templateObject3$1e, _templateObject4$19, _templateObject5$12, _templateObject6$O, _templateObject7$L, _templateObject8$D;
14469
- var Container$11 = styled.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"])));
14392
+ var _templateObject$1E, _templateObject2$1p, _templateObject3$1f, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$J, _templateObject8$C;
14393
+ var Container$11 = styled.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"])));
14470
14394
  var ImgWrapper = styled.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n overflow: hidden;\n height: 40px;\n width: 40px;\n flex-shrink: 0;\n"])));
14471
- var EmptyImg = styled.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-5);\n width: 100%;\n height: 100%;\n"])));
14395
+ var EmptyImg = styled.div(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-5);\n width: 100%;\n height: 100%;\n"])));
14472
14396
  var Image$2 = styled.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) {
14473
14397
  return p.image;
14474
14398
  }, function (p) {
14475
14399
  return p.image ? 'block' : 'none';
14476
14400
  });
14477
14401
  var InfoContainer = styled.div(_templateObject5$12 || (_templateObject5$12 = _taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
14478
- var Title$9 = styled.div(_templateObject6$O || (_templateObject6$O = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n font-weight: 500;\n color: var(--grey-11);\n"])));
14479
- var Message = styled.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"])));
14480
- var TimeMsg = styled.div(_templateObject8$D || (_templateObject8$D = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n color: var(--grey-12);\n margin-top: 15px;\n"])));
14402
+ var Title$9 = styled.div(_templateObject6$P || (_templateObject6$P = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n font-weight: 500;\n color: var(--grey-11);\n"])));
14403
+ var Message = styled.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"])));
14404
+ var TimeMsg = styled.div(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n color: var(--grey-12);\n margin-top: 15px;\n"])));
14481
14405
 
14482
14406
  var NotificationItem = function NotificationItem(_ref) {
14483
14407
  var imgUrl = _ref.imgUrl,
@@ -14489,16 +14413,10 @@ var NotificationItem = function NotificationItem(_ref) {
14489
14413
  }) : 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)));
14490
14414
  };
14491
14415
 
14492
- var _templateObject$1D, _templateObject2$1q, _templateObject3$1f;
14493
- var Container$12 = styled.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
14494
- var StatusContainer = styled.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) {
14495
- var theme = _ref.theme;
14496
- return theme.colors.divider;
14497
- });
14498
- var NotificationWrapper = styled.div(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n"])), function (_ref2) {
14499
- var colors = _ref2.theme.colors;
14500
- return colors.divider;
14501
- });
14416
+ var _templateObject$1F, _templateObject2$1q, _templateObject3$1g;
14417
+ var Container$12 = styled.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
14418
+ var StatusContainer = styled.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"])));
14419
+ var NotificationWrapper = styled.div(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n border-bottom: var(--dividing-line) 1px solid;\n"])));
14502
14420
 
14503
14421
  var renderNotifications = function renderNotifications(items, type) {
14504
14422
  return items.map(function (item, index) {
@@ -14508,15 +14426,15 @@ var renderNotifications = function renderNotifications(items, type) {
14508
14426
  });
14509
14427
  };
14510
14428
 
14511
- var NotificationsHistory = function NotificationsHistory(_ref3) {
14512
- var read = _ref3.read,
14513
- unread = _ref3.unread,
14514
- _ref3$noNotifications = _ref3.noNotificationsText,
14515
- noNotificationsText = _ref3$noNotifications === void 0 ? 'No new notifications' : _ref3$noNotifications,
14516
- _ref3$readNotificatio = _ref3.readNotificationsText,
14517
- readNotificationsText = _ref3$readNotificatio === void 0 ? 'New' : _ref3$readNotificatio,
14518
- _ref3$unreadNotificat = _ref3.unreadNotificationsText,
14519
- unreadNotificationsText = _ref3$unreadNotificat === void 0 ? 'Read' : _ref3$unreadNotificat;
14429
+ var NotificationsHistory = function NotificationsHistory(_ref) {
14430
+ var read = _ref.read,
14431
+ unread = _ref.unread,
14432
+ _ref$noNotificationsT = _ref.noNotificationsText,
14433
+ noNotificationsText = _ref$noNotificationsT === void 0 ? 'No new notifications' : _ref$noNotificationsT,
14434
+ _ref$readNotification = _ref.readNotificationsText,
14435
+ readNotificationsText = _ref$readNotification === void 0 ? 'New' : _ref$readNotification,
14436
+ _ref$unreadNotificati = _ref.unreadNotificationsText,
14437
+ unreadNotificationsText = _ref$unreadNotificati === void 0 ? 'Read' : _ref$unreadNotificati;
14520
14438
 
14521
14439
  if (read.length === 0 && unread.length === 0) {
14522
14440
  return React__default.createElement(Container$12, null, React__default.createElement(StatusContainer, null, noNotificationsText));
@@ -14525,108 +14443,80 @@ var NotificationsHistory = function NotificationsHistory(_ref3) {
14525
14443
  return React__default.createElement(Container$12, null, unread && React__default.createElement(Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
14526
14444
  };
14527
14445
 
14528
- 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;
14529
- var Container$13 = styled.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) {
14530
- var theme = _ref.theme,
14531
- colors = _ref.theme.colors;
14532
- return colors && 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);
14533
- });
14534
- var SearchBar = styled.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"])));
14535
- var IconWrapper$4 = styled.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"])));
14536
- var SearchInput = styled.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) {
14537
- var theme = _ref2.theme;
14538
- return theme.fontFamily.data;
14539
- }, function (_ref3) {
14540
- var typography = _ref3.theme.typography;
14541
- return typography.global.topBar.search.value;
14542
- }, function (_ref4) {
14543
- var typography = _ref4.theme.typography;
14544
- return typography.global.topBar.search.placeholder;
14545
- });
14546
- var ButtonArea = styled.div(_templateObject6$P || (_templateObject6$P = _taggedTemplateLiteralLoose(["\n height: inherit;\n padding-right: 10px;\n display: flex;\n"])));
14446
+ 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;
14447
+ var Container$13 = styled.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"])));
14448
+ var SearchBar = styled.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"])));
14449
+ var IconWrapper$4 = styled.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"])));
14450
+ var SearchInput = styled.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);
14451
+ var ButtonArea = styled.div(_templateObject5$13 || (_templateObject5$13 = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n gap: 0;\n"])));
14452
+ var buttonClickAnimation = 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"])));
14547
14453
  var DrawerToggle = styled.button.attrs({
14548
14454
  type: 'button'
14549
- })(_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) {
14550
- var theme = _ref5.theme;
14551
- return 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);
14552
- }, function (_ref6) {
14553
- var isActive = _ref6.isActive,
14554
- theme = _ref6.theme;
14555
- return isActive && css(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: ", ";\n }\n "])), theme.colors.menu.active);
14455
+ })(_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) {
14456
+ var isActive = _ref.isActive;
14457
+ return isActive && 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);
14556
14458
  });
14557
- var DrawerPortalWrapper = styled.div(_templateObject10$s || (_templateObject10$s = _taggedTemplateLiteralLoose([""])));
14558
- var Drawer = styled.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) {
14559
- var theme = _ref7.theme;
14560
- return theme.fontFamily.ui;
14561
- }, function (_ref8) {
14562
- var theme = _ref8.theme;
14563
- return theme.styles.global.mainMenu.background;
14564
- }, function (_ref9) {
14565
- var theme = _ref9.theme;
14566
- return theme.styles.global.mainMenu.lines.backgroundColor;
14567
- }, function (_ref10) {
14568
- var baseWidth = _ref10.baseWidth;
14459
+ var DrawerPortalWrapper = styled.div(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose([""])));
14460
+ var Drawer = styled.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) {
14461
+ var baseWidth = _ref2.baseWidth;
14569
14462
  return baseWidth ? baseWidth : "200px";
14570
- }, function (_ref11) {
14571
- var theme = _ref11.theme;
14572
- return 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);
14573
- }, function (_ref12) {
14574
- var isOpen = _ref12.isOpen;
14575
- return isOpen && css(_templateObject13$e || (_templateObject13$e = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
14576
- });
14577
- var NotificationsContainer = styled.div(_templateObject14$c || (_templateObject14$c = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
14578
-
14579
- var TopBar = function TopBar(_ref13) {
14580
- var _ref13$hasNotificatio = _ref13.hasNotifications,
14581
- hasNotifications = _ref13$hasNotificatio === void 0 ? false : _ref13$hasNotificatio,
14582
- _ref13$hasLanguage = _ref13.hasLanguage,
14583
- hasLanguage = _ref13$hasLanguage === void 0 ? false : _ref13$hasLanguage,
14584
- _ref13$selectedLangua = _ref13.selectedLanguageText,
14585
- selectedLanguageText = _ref13$selectedLangua === void 0 ? '' : _ref13$selectedLangua,
14586
- _ref13$hasLogout = _ref13.hasLogout,
14587
- hasLogout = _ref13$hasLogout === void 0 ? true : _ref13$hasLogout,
14588
- _ref13$logoutLink = _ref13.logoutLink,
14589
- logoutLink = _ref13$logoutLink === void 0 ? '/logout' : _ref13$logoutLink,
14590
- _ref13$logoutText = _ref13.logoutText,
14591
- logoutText = _ref13$logoutText === void 0 ? 'Logout' : _ref13$logoutText,
14592
- _ref13$hasSearch = _ref13.hasSearch,
14593
- hasSearch = _ref13$hasSearch === void 0 ? false : _ref13$hasSearch,
14594
- _ref13$hasCurrentUser = _ref13.hasCurrentUser,
14595
- hasCurrentUser = _ref13$hasCurrentUser === void 0 ? true : _ref13$hasCurrentUser,
14596
- _ref13$currentUserTex = _ref13.currentUserText,
14597
- currentUserText = _ref13$currentUserTex === void 0 ? 'Current User' : _ref13$currentUserTex,
14598
- _ref13$accountOptionT = _ref13.accountOptionText,
14599
- accountOptionText = _ref13$accountOptionT === void 0 ? 'Account Options' : _ref13$accountOptionT,
14600
- _ref13$searchPlacehol = _ref13.searchPlaceholder,
14601
- searchPlaceholder = _ref13$searchPlacehol === void 0 ? 'Search for devices, analysis tasks, etc.' : _ref13$searchPlacehol,
14602
- _ref13$userSubmenu = _ref13.userSubmenu,
14603
- userSubmenu = _ref13$userSubmenu === void 0 ? [] : _ref13$userSubmenu,
14604
- userDrawerBespoke = _ref13.userDrawerBespoke,
14605
- loggedInUser = _ref13.loggedInUser,
14606
- notificationsHistory = _ref13.notificationsHistory,
14607
- customDrawer = _ref13.customDrawer,
14608
- _ref13$hasSwitchTheme = _ref13.hasSwitchTheme,
14609
- hasSwitchTheme = _ref13$hasSwitchTheme === void 0 ? false : _ref13$hasSwitchTheme,
14610
- _ref13$isLightMode = _ref13.isLightMode,
14611
- isLightMode = _ref13$isLightMode === void 0 ? true : _ref13$isLightMode,
14612
- _ref13$switchThemeTex = _ref13.switchThemeText,
14613
- switchThemeText = _ref13$switchThemeTex === void 0 ? 'SWITCH THEME' : _ref13$switchThemeTex,
14614
- _ref13$selectedThemeT = _ref13.selectedThemeText,
14615
- selectedThemeText = _ref13$selectedThemeT === void 0 ? '' : _ref13$selectedThemeT,
14616
- _ref13$onLogout = _ref13.onLogout,
14617
- onLogout = _ref13$onLogout === void 0 ? function () {} : _ref13$onLogout,
14618
- _ref13$onLanguageTogg = _ref13.onLanguageToggle,
14619
- onLanguageToggle = _ref13$onLanguageTogg === void 0 ? function () {} : _ref13$onLanguageTogg,
14620
- _ref13$onThemeToggle = _ref13.onThemeToggle,
14621
- onThemeToggle = _ref13$onThemeToggle === void 0 ? function () {} : _ref13$onThemeToggle,
14622
- userDrawerFooter = _ref13.userDrawerFooter,
14623
- userDrawerMeta = _ref13.userDrawerMeta,
14624
- _ref13$onUserDrawerMe = _ref13.onUserDrawerMetaClick,
14625
- onUserDrawerMetaClick = _ref13$onUserDrawerMe === void 0 ? function () {} : _ref13$onUserDrawerMe,
14626
- hasUserDrawerMeta = _ref13.hasUserDrawerMeta,
14627
- copySuccessMessage = _ref13.copySuccessMessage,
14628
- includeCopyTitle = _ref13.includeCopyTitle,
14629
- hasUserDrawerFooter = _ref13.hasUserDrawerFooter;
14463
+ }, function (_ref3) {
14464
+ var isOpen = _ref3.isOpen;
14465
+ return isOpen && css(_templateObject11$j || (_templateObject11$j = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
14466
+ });
14467
+ var NotificationsContainer = styled.div(_templateObject12$g || (_templateObject12$g = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
14468
+
14469
+ var TopBar = function TopBar(_ref4) {
14470
+ var _ref4$hasNotification = _ref4.hasNotifications,
14471
+ hasNotifications = _ref4$hasNotification === void 0 ? false : _ref4$hasNotification,
14472
+ _ref4$hasLanguage = _ref4.hasLanguage,
14473
+ hasLanguage = _ref4$hasLanguage === void 0 ? false : _ref4$hasLanguage,
14474
+ _ref4$selectedLanguag = _ref4.selectedLanguageText,
14475
+ selectedLanguageText = _ref4$selectedLanguag === void 0 ? '' : _ref4$selectedLanguag,
14476
+ _ref4$hasLogout = _ref4.hasLogout,
14477
+ hasLogout = _ref4$hasLogout === void 0 ? true : _ref4$hasLogout,
14478
+ _ref4$logoutLink = _ref4.logoutLink,
14479
+ logoutLink = _ref4$logoutLink === void 0 ? '/logout' : _ref4$logoutLink,
14480
+ _ref4$logoutText = _ref4.logoutText,
14481
+ logoutText = _ref4$logoutText === void 0 ? 'Logout' : _ref4$logoutText,
14482
+ _ref4$hasSearch = _ref4.hasSearch,
14483
+ hasSearch = _ref4$hasSearch === void 0 ? false : _ref4$hasSearch,
14484
+ _ref4$hasCurrentUser = _ref4.hasCurrentUser,
14485
+ hasCurrentUser = _ref4$hasCurrentUser === void 0 ? true : _ref4$hasCurrentUser,
14486
+ _ref4$currentUserText = _ref4.currentUserText,
14487
+ currentUserText = _ref4$currentUserText === void 0 ? 'Current User' : _ref4$currentUserText,
14488
+ _ref4$accountOptionTe = _ref4.accountOptionText,
14489
+ accountOptionText = _ref4$accountOptionTe === void 0 ? 'Account Options' : _ref4$accountOptionTe,
14490
+ _ref4$searchPlacehold = _ref4.searchPlaceholder,
14491
+ searchPlaceholder = _ref4$searchPlacehold === void 0 ? 'Search for devices, analysis tasks, etc.' : _ref4$searchPlacehold,
14492
+ _ref4$userSubmenu = _ref4.userSubmenu,
14493
+ userSubmenu = _ref4$userSubmenu === void 0 ? [] : _ref4$userSubmenu,
14494
+ userDrawerBespoke = _ref4.userDrawerBespoke,
14495
+ loggedInUser = _ref4.loggedInUser,
14496
+ notificationsHistory = _ref4.notificationsHistory,
14497
+ customDrawer = _ref4.customDrawer,
14498
+ _ref4$hasSwitchTheme = _ref4.hasSwitchTheme,
14499
+ hasSwitchTheme = _ref4$hasSwitchTheme === void 0 ? false : _ref4$hasSwitchTheme,
14500
+ _ref4$isLightMode = _ref4.isLightMode,
14501
+ isLightMode = _ref4$isLightMode === void 0 ? true : _ref4$isLightMode,
14502
+ _ref4$switchThemeText = _ref4.switchThemeText,
14503
+ switchThemeText = _ref4$switchThemeText === void 0 ? 'SWITCH THEME' : _ref4$switchThemeText,
14504
+ _ref4$selectedThemeTe = _ref4.selectedThemeText,
14505
+ selectedThemeText = _ref4$selectedThemeTe === void 0 ? '' : _ref4$selectedThemeTe,
14506
+ _ref4$onLogout = _ref4.onLogout,
14507
+ onLogout = _ref4$onLogout === void 0 ? function () {} : _ref4$onLogout,
14508
+ _ref4$onLanguageToggl = _ref4.onLanguageToggle,
14509
+ onLanguageToggle = _ref4$onLanguageToggl === void 0 ? function () {} : _ref4$onLanguageToggl,
14510
+ _ref4$onThemeToggle = _ref4.onThemeToggle,
14511
+ onThemeToggle = _ref4$onThemeToggle === void 0 ? function () {} : _ref4$onThemeToggle,
14512
+ userDrawerFooter = _ref4.userDrawerFooter,
14513
+ userDrawerMeta = _ref4.userDrawerMeta,
14514
+ _ref4$onUserDrawerMet = _ref4.onUserDrawerMetaClick,
14515
+ onUserDrawerMetaClick = _ref4$onUserDrawerMet === void 0 ? function () {} : _ref4$onUserDrawerMet,
14516
+ hasUserDrawerMeta = _ref4.hasUserDrawerMeta,
14517
+ copySuccessMessage = _ref4.copySuccessMessage,
14518
+ includeCopyTitle = _ref4.includeCopyTitle,
14519
+ hasUserDrawerFooter = _ref4.hasUserDrawerFooter;
14630
14520
 
14631
14521
  var _useState = useState(null),
14632
14522
  openDrawer = _useState[0],
@@ -14644,8 +14534,8 @@ var TopBar = function TopBar(_ref13) {
14644
14534
 
14645
14535
  return React__default.createElement(Container$13, null, hasSearch ? React__default.createElement(SearchBar, null, React__default.createElement(IconWrapper$4, null, React__default.createElement(Icon, {
14646
14536
  icon: 'Search',
14647
- size: 18,
14648
- color: 'dimmed'
14537
+ size: 16,
14538
+ color: 'grey-6'
14649
14539
  })), React__default.createElement(SearchInput, {
14650
14540
  placeholder: searchPlaceholder
14651
14541
  })) : React__default.createElement("div", null), React__default.createElement(ButtonArea, null, customDrawer && React__default.createElement(DrawerToggle, {
@@ -14660,7 +14550,7 @@ var TopBar = function TopBar(_ref13) {
14660
14550
  }
14661
14551
  }, React__default.createElement(Icon, {
14662
14552
  icon: 'Notifications',
14663
- size: 18,
14553
+ size: 20,
14664
14554
  color: 'dimmed'
14665
14555
  })), React__default.createElement(DrawerToggle, {
14666
14556
  isActive: openDrawer === 'user',
@@ -14669,7 +14559,7 @@ var TopBar = function TopBar(_ref13) {
14669
14559
  }
14670
14560
  }, React__default.createElement(Icon, {
14671
14561
  icon: 'UserProfile',
14672
- size: 18,
14562
+ size: 20,
14673
14563
  color: 'dimmed'
14674
14564
  }))), ReactDom.createPortal(React__default.createElement(DrawerPortalWrapper, null, React__default.createElement(Drawer, {
14675
14565
  isOpen: openDrawer === 'user'
@@ -14708,8 +14598,8 @@ var TopBar = function TopBar(_ref13) {
14708
14598
  }, customDrawer.customComponent)), document.body));
14709
14599
  };
14710
14600
 
14711
- var _templateObject$1F;
14712
- var TabListWrapper = styled.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n"])));
14601
+ var _templateObject$1H;
14602
+ var TabListWrapper = styled.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n"])));
14713
14603
 
14714
14604
  var TabList = function TabList(_ref) {
14715
14605
  var children = _ref.children,
@@ -14726,11 +14616,11 @@ var TabList = function TabList(_ref) {
14726
14616
 
14727
14617
  var _excluded$H = ["children", "tabFor", "onClick"];
14728
14618
 
14729
- var _templateObject$1G, _templateObject2$1s, _templateObject3$1h;
14730
- var TabComponent = styled.div(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
14619
+ var _templateObject$1I, _templateObject2$1s, _templateObject3$1i;
14620
+ var TabComponent = styled.div(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
14731
14621
  var TabLabel = styled.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) {
14732
14622
  var theme = _ref.theme;
14733
- return css(_templateObject3$1h || (_templateObject3$1h = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
14623
+ return css(_templateObject3$1i || (_templateObject3$1i = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
14734
14624
  }, function (_ref2) {
14735
14625
  var active = _ref2.active;
14736
14626
  return active ? '600' : '500';
@@ -14765,8 +14655,8 @@ var Tab = function Tab(_ref5) {
14765
14655
 
14766
14656
  var _excluded$I = ["children", "tabId"];
14767
14657
 
14768
- var _templateObject$1H;
14769
- var Container$14 = styled.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n"])));
14658
+ var _templateObject$1J;
14659
+ var Container$14 = styled.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n"])));
14770
14660
 
14771
14661
  var TabContent = function TabContent(_ref) {
14772
14662
  var children = _ref.children,
@@ -14781,11 +14671,11 @@ var TabContent = function TabContent(_ref) {
14781
14671
 
14782
14672
  var _excluded$J = ["tabFor", "icon", "closeId", "counter", "status"];
14783
14673
 
14784
- var _templateObject$1I, _templateObject2$1t, _templateObject3$1i, _templateObject4$1b;
14785
- var Container$15 = styled.button(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
14674
+ var _templateObject$1K, _templateObject2$1t, _templateObject3$1j, _templateObject4$1b;
14675
+ var Container$15 = styled.button(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
14786
14676
  var LinkTab = styled.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) {
14787
14677
  var theme = _ref.theme;
14788
- return 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);
14678
+ return 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);
14789
14679
  }, function (_ref2) {
14790
14680
  var isActive = _ref2.isActive,
14791
14681
  theme = _ref2.theme;
@@ -14823,10 +14713,10 @@ var MobileTab = function MobileTab(_ref3) {
14823
14713
 
14824
14714
  var _excluded$K = ["icon", "title", "subtitle", "tabFor"];
14825
14715
 
14826
- var _templateObject$1J, _templateObject2$1u, _templateObject3$1j, _templateObject4$1c, _templateObject5$14, _templateObject6$Q;
14827
- var Container$16 = styled.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) {
14716
+ var _templateObject$1L, _templateObject2$1u, _templateObject3$1k, _templateObject4$1c, _templateObject5$14, _templateObject6$R;
14717
+ var Container$16 = styled.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) {
14828
14718
  var active = _ref.active;
14829
- return active ? css(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : css(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
14719
+ return active ? css(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : css(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
14830
14720
  }, IconWrapper);
14831
14721
  var Title$a = styled.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) {
14832
14722
  var theme = _ref2.theme;
@@ -14839,7 +14729,7 @@ var SubTitle$2 = styled.div(_templateObject5$14 || (_templateObject5$14 = _tagge
14839
14729
  var theme = _ref4.theme;
14840
14730
  return theme.fontFamily.data;
14841
14731
  });
14842
- var TextGroup$1 = styled.div(_templateObject6$Q || (_templateObject6$Q = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n margin-right: 20px;\n"])));
14732
+ var TextGroup$1 = styled.div(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n margin-right: 20px;\n"])));
14843
14733
 
14844
14734
  var TabWithIcon = function TabWithIcon(_ref5) {
14845
14735
  var icon = _ref5.icon,
@@ -14873,8 +14763,8 @@ var TabWithIcon = function TabWithIcon(_ref5) {
14873
14763
  }), title), subtitle && React__default.createElement(SubTitle$2, null, subtitle)));
14874
14764
  };
14875
14765
 
14876
- var _templateObject$1K, _templateObject2$1v;
14877
- var Container$17 = styled.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose([""])));
14766
+ var _templateObject$1M, _templateObject2$1v;
14767
+ var Container$17 = styled.div(_templateObject$1M || (_templateObject$1M = _taggedTemplateLiteralLoose([""])));
14878
14768
  var TabListWrapper$1 = styled.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) {
14879
14769
  var paddingLeft = _ref.paddingLeft;
14880
14770
  return paddingLeft ? paddingLeft : '87px';
@@ -14913,19 +14803,16 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
14913
14803
 
14914
14804
  var _excluded$L = ["closeId", "closeText"];
14915
14805
 
14916
- var _templateObject$1L, _templateObject2$1w, _templateObject3$1k, _templateObject4$1d;
14917
- var StyledButton$7 = styled.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) {
14918
- var theme = _ref.theme;
14919
- return 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);
14920
- }, MOBILE_CLOSE_HEIGHT);
14921
- var IconContainer$3 = styled.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"])));
14922
- var TextWrapper$1 = styled.div(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
14806
+ var _templateObject$1N, _templateObject2$1w, _templateObject3$1l;
14807
+ var StyledButton$7 = styled.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);
14808
+ var IconContainer$3 = styled.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"])));
14809
+ var TextWrapper$1 = styled.div(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
14923
14810
 
14924
- var CloseButton$1 = function CloseButton(_ref2) {
14925
- var closeId = _ref2.closeId,
14926
- _ref2$closeText = _ref2.closeText,
14927
- closeText = _ref2$closeText === void 0 ? 'CLOSE MENU' : _ref2$closeText,
14928
- props = _objectWithoutPropertiesLoose(_ref2, _excluded$L);
14811
+ var CloseButton$1 = function CloseButton(_ref) {
14812
+ var closeId = _ref.closeId,
14813
+ _ref$closeText = _ref.closeText,
14814
+ closeText = _ref$closeText === void 0 ? 'CLOSE MENU' : _ref$closeText,
14815
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
14929
14816
 
14930
14817
  var _useContext = useContext(TabContext),
14931
14818
  setSelected = _useContext.setSelected;
@@ -14941,8 +14828,8 @@ var CloseButton$1 = function CloseButton(_ref2) {
14941
14828
  })), React__default.createElement(TextWrapper$1, null, closeText));
14942
14829
  };
14943
14830
 
14944
- var _templateObject$1M, _templateObject2$1x;
14945
- var Container$18 = styled.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);
14831
+ var _templateObject$1O, _templateObject2$1x;
14832
+ var Container$18 = styled.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);
14946
14833
  var ContentWrapper = styled.div(_templateObject2$1x || (_templateObject2$1x = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
14947
14834
 
14948
14835
  var MobileNavbarContent = function MobileNavbarContent(_ref) {
@@ -14955,17 +14842,14 @@ var MobileNavbarContent = function MobileNavbarContent(_ref) {
14955
14842
  return selected === closeId ? null : React__default.createElement(Container$18, null, React__default.createElement(ContentWrapper, null, children));
14956
14843
  };
14957
14844
 
14958
- var _templateObject$1N, _templateObject2$1y, _templateObject3$1l;
14959
- var Container$19 = styled.div(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose([""])));
14960
- var ItemWrapper = styled.div(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n ", ";\n"])), function (_ref) {
14961
- var theme = _ref.theme;
14962
- return css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n border-bottom: 1px solid ", "\n "])), theme.colors.divider);
14963
- });
14845
+ var _templateObject$1P, _templateObject2$1y;
14846
+ var Container$19 = styled.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteralLoose([""])));
14847
+ var ItemWrapper = styled.div(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n border-bottom: 1px solid var(--dividing-line);\n"])));
14964
14848
 
14965
- var MobileMenu = function MobileMenu(_ref2) {
14966
- var content = _ref2.content,
14967
- supportUrl = _ref2.supportUrl,
14968
- closeId = _ref2.closeId;
14849
+ var MobileMenu = function MobileMenu(_ref) {
14850
+ var content = _ref.content,
14851
+ supportUrl = _ref.supportUrl,
14852
+ closeId = _ref.closeId;
14969
14853
 
14970
14854
  var _useState = useState(true),
14971
14855
  loading = _useState[0],
@@ -15030,8 +14914,8 @@ var MobileMenu = function MobileMenu(_ref2) {
15030
14914
  })));
15031
14915
  };
15032
14916
 
15033
- var _templateObject$1O, _templateObject2$1z, _templateObject3$1m;
15034
- var Logo$1 = styled(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);
14917
+ var _templateObject$1Q, _templateObject2$1z, _templateObject3$1m;
14918
+ var Logo$1 = styled(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);
15035
14919
  var LogoMark$1 = styled.div(_templateObject2$1z || (_templateObject2$1z = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n"])));
15036
14920
  var SVGObject$1 = styled.object(_templateObject3$1m || (_templateObject3$1m = _taggedTemplateLiteralLoose([""])));
15037
14921
 
@@ -15057,24 +14941,21 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
15057
14941
 
15058
14942
  var _excluded$M = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
15059
14943
 
15060
- var _templateObject$1P;
15061
- var Container$1a = styled.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteralLoose(["\n background: ", ";\n z-index: 100;\n display: flex;\n flex-direction: column;\n"])), function (_ref) {
15062
- var theme = _ref.theme;
15063
- return theme.styles.global.mainMenu.background;
15064
- });
15065
-
15066
- var MobileUserMenu = function MobileUserMenu(_ref2) {
15067
- var closeId = _ref2.closeId,
15068
- hasLanguage = _ref2.hasLanguage,
15069
- hasLogout = _ref2.hasLogout,
15070
- logoutLink = _ref2.logoutLink,
15071
- hasCurrentUser = _ref2.hasCurrentUser,
15072
- userSubmenu = _ref2.userSubmenu,
15073
- userDrawerBespoke = _ref2.userDrawerBespoke,
15074
- loggedInUser = _ref2.loggedInUser,
15075
- onLogout = _ref2.onLogout,
15076
- onLanguageToggle = _ref2.onLanguageToggle,
15077
- props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
14944
+ var _templateObject$1R;
14945
+ var Container$1a = styled.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"])));
14946
+
14947
+ var MobileUserMenu = function MobileUserMenu(_ref) {
14948
+ var closeId = _ref.closeId,
14949
+ hasLanguage = _ref.hasLanguage,
14950
+ hasLogout = _ref.hasLogout,
14951
+ logoutLink = _ref.logoutLink,
14952
+ hasCurrentUser = _ref.hasCurrentUser,
14953
+ userSubmenu = _ref.userSubmenu,
14954
+ userDrawerBespoke = _ref.userDrawerBespoke,
14955
+ loggedInUser = _ref.loggedInUser,
14956
+ onLogout = _ref.onLogout,
14957
+ onLanguageToggle = _ref.onLanguageToggle,
14958
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$M);
15078
14959
 
15079
14960
  var _useContext = useContext(TabContext),
15080
14961
  setSelected = _useContext.setSelected;
@@ -15099,42 +14980,36 @@ var MobileUserMenu = function MobileUserMenu(_ref2) {
15099
14980
 
15100
14981
  var _excluded$N = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
15101
14982
 
15102
- var _templateObject$1Q, _templateObject2$1A;
14983
+ var _templateObject$1S, _templateObject2$1A;
15103
14984
  var CLOSE_ID = 'closeMenu';
15104
14985
  var NOTI_TAB = 'notifications';
15105
14986
  var USER_TAB = 'user';
15106
14987
  var MENU_TAB = 'menu';
15107
14988
  var CUSTOM_TAB = 'custom';
15108
- var Container$1b = styled.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) {
15109
- var theme = _ref.theme;
15110
- return theme.styles.global.mainMenu.background.backgroundColor;
15111
- });
15112
- var HeaderContainer = styled.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) {
15113
- var theme = _ref2.theme;
15114
- return theme.colors.divider;
15115
- }, TabListWrapper);
14989
+ var Container$1b = styled.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"])));
14990
+ var HeaderContainer = styled.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);
15116
14991
 
15117
- var MobileNavbar = function MobileNavbar(_ref3) {
15118
- var content = _ref3.content,
15119
- home = _ref3.home,
15120
- logoMark = _ref3.logoMark,
15121
- supportUrl = _ref3.supportUrl,
15122
- _ref3$defaultMenuOpen = _ref3.defaultMenuOpen,
15123
- defaultMenuOpen = _ref3$defaultMenuOpen === void 0 ? true : _ref3$defaultMenuOpen,
15124
- closeText = _ref3.closeText,
15125
- hasLanguage = _ref3.hasLanguage,
15126
- hasLogout = _ref3.hasLogout,
15127
- logoutLink = _ref3.logoutLink,
15128
- hasCurrentUser = _ref3.hasCurrentUser,
15129
- hasNotifications = _ref3.hasNotifications,
15130
- userSubmenu = _ref3.userSubmenu,
15131
- userDrawerBespoke = _ref3.userDrawerBespoke,
15132
- loggedInUser = _ref3.loggedInUser,
15133
- notificationsHistory = _ref3.notificationsHistory,
15134
- customDrawer = _ref3.customDrawer,
15135
- onLogout = _ref3.onLogout,
15136
- onLanguageToggle = _ref3.onLanguageToggle,
15137
- props = _objectWithoutPropertiesLoose(_ref3, _excluded$N);
14992
+ var MobileNavbar = function MobileNavbar(_ref) {
14993
+ var content = _ref.content,
14994
+ home = _ref.home,
14995
+ logoMark = _ref.logoMark,
14996
+ supportUrl = _ref.supportUrl,
14997
+ _ref$defaultMenuOpen = _ref.defaultMenuOpen,
14998
+ defaultMenuOpen = _ref$defaultMenuOpen === void 0 ? true : _ref$defaultMenuOpen,
14999
+ closeText = _ref.closeText,
15000
+ hasLanguage = _ref.hasLanguage,
15001
+ hasLogout = _ref.hasLogout,
15002
+ logoutLink = _ref.logoutLink,
15003
+ hasCurrentUser = _ref.hasCurrentUser,
15004
+ hasNotifications = _ref.hasNotifications,
15005
+ userSubmenu = _ref.userSubmenu,
15006
+ userDrawerBespoke = _ref.userDrawerBespoke,
15007
+ loggedInUser = _ref.loggedInUser,
15008
+ notificationsHistory = _ref.notificationsHistory,
15009
+ customDrawer = _ref.customDrawer,
15010
+ onLogout = _ref.onLogout,
15011
+ onLanguageToggle = _ref.onLanguageToggle,
15012
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
15138
15013
 
15139
15014
  return React__default.createElement(Container$1b, null, React__default.createElement(Tabs, null, React__default.createElement(HeaderContainer, null, React__default.createElement(MobileLogoLink, Object.assign({}, {
15140
15015
  home: home,
@@ -15239,16 +15114,16 @@ var GlobalUI = function GlobalUI(_ref) {
15239
15114
 
15240
15115
  var _excluded$P = ["children"];
15241
15116
 
15242
- var _templateObject$1R, _templateObject2$1B, _templateObject3$1n, _templateObject4$1e, _templateObject5$15, _templateObject6$R, _templateObject7$N, _templateObject8$F, _templateObject9$x;
15243
- var Container$1c = styled.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"])));
15117
+ var _templateObject$1T, _templateObject2$1B, _templateObject3$1n, _templateObject4$1d, _templateObject5$15, _templateObject6$S, _templateObject7$L, _templateObject8$E, _templateObject9$w;
15118
+ var Container$1c = styled.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"])));
15244
15119
  var LogoContainer = styled.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"])));
15245
15120
  var LogoTopText = styled.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"])));
15246
- var LogoBottomText = styled.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"])));
15121
+ var LogoBottomText = styled.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"])));
15247
15122
  var SidebarBox = styled.div(_templateObject5$15 || (_templateObject5$15 = _taggedTemplateLiteralLoose(["\n position: relative;\n border-bottom: 1px solid var(--grey-a7);\n padding: 22px 20px 21px 20px;\n"])));
15248
- var SidebarHeading = styled.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"])));
15249
- var SidebarLinkHeading = styled.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"])));
15250
- var BackLink$1 = styled(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"])));
15251
- var SLink = styled(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"])));
15123
+ var SidebarHeading = styled.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"])));
15124
+ var SidebarLinkHeading = styled.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"])));
15125
+ var BackLink$1 = styled(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"])));
15126
+ var SLink = styled(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"])));
15252
15127
  var SidebarLink = function SidebarLink(_ref) {
15253
15128
  var title = _ref.title,
15254
15129
  to = _ref.to;
@@ -15269,5 +15144,5 @@ var Sidebar = function Sidebar(_ref3) {
15269
15144
  return React__default.createElement(Container$1c, Object.assign({}, props), children);
15270
15145
  };
15271
15146
 
15272
- export { ActionButtons, ActionsBar, AlertBar, AlertWrapper, AreaUploadManager, AvatarUploader, BackLink$1 as BackLink, BaseStyles, BasicSearchInput, Button, ButtonWithIcon, ButtonWithLoading, ButtonsStack, CameraPanelWrapper, CameraPanels, Checkbox, ConfirmationModal, Content$1 as Content, ContentLayout, Controls, CropTool, DatePicker, DebouncedSearcher, DropArea, DurationSlider, EditCell, FilterBar, FilterButton, FilterDropdown, FilterDropdownContainer, FilterInputs, FilterLayout, FiltersResults, FlexContentPlaceholder, Form, FullWidthContentBlock, GlobalUI, Icon, IconButton$2 as IconButton, Input, InputFileButton, IntroductionText, Label, Layout, LineReducer, LineSetContext, LineUI, LineUI$1 as LineUIRTC, LineUIVideo, Logo$2 as Logo, MainContainer, MainMenu, MediaBox, ModalContext, ModalProvider, MultilineContent, Notification, NotificationProvider, PTZContext, PTZProvider, reducer as PTZReducer, PageHeader, PageTitle, Pagination, PasswordField, PercentageSlider, RadioButton, SelectField, SelectWrapper, Sidebar, SidebarBox, SidebarHeading, SidebarLink, SidebarLinkHeading, SliderInput, SmallInput, SortDropdown, Spinner, SplitButton, SplitLayout, StatusIcon, Switch, Tab, TabContent, TabContext, TabList, TabWithIcon, TableHeaderTitle, TableRowThumbnail, Tabs, TabsWithIconBar, Tag, TagList, TagListWrapper$1 as TagListWrapper, TextArea, TextAreaField, TextField, ThemeVariables, TopBar, TypeTable, UtilityHeader, WebRTCPlayer as WebRTCClient, index as defaultTheme, isDateInterval, isFilterItem, resetButtonStyles, useClickOutside, useCopyToClipboard, useInterval, useMediaModal, useModal, useNotification, usePTZ, usePoll, useThemeToggle, useTitle, useTo };
15147
+ export { ActionButtons, ActionsBar, AlertBar, AlertWrapper, AreaUploadManager, AvatarUploader, BackLink$1 as BackLink, BaseStyles, BasicSearchInput, Button, ButtonWithIcon, ButtonWithLoading, ButtonsStack, CameraPanelWrapper, CameraPanels, Checkbox, ConfirmationModal, Content$1 as Content, ContentLayout, Controls, CropTool, DatePicker, DebouncedSearcher, DropArea, DurationSlider, EditCell, FilterBar, FilterButton, FilterDropdown, FilterDropdownContainer, FilterInputs, FilterLayout, FiltersResults, FlexContentPlaceholder, Form, FullWidthContentBlock, GlobalUI, Icon, IconButton$2 as IconButton, Input, InputFileButton, IntroductionText, Label, Layout, LineReducer, LineSetContext, LineUI, LineUI$1 as LineUIRTC, LineUIVideo, Logo$2 as Logo, MainContainer, MainMenu, MediaBox, ModalContext, ModalProvider, MultilineContent, Notification, NotificationProvider, PTZContext, PTZProvider, reducer as PTZReducer, PageHeader, PageTitle, Pagination, PasswordField, PercentageSlider, RadioButton, SelectField, SelectWrapper, Sidebar, SidebarBox, SidebarHeading, SidebarLink, SidebarLinkHeading, SliderInput, SmallInput, SortDropdown, Spinner, SplitButton, SplitLayout, StatusIcon, Switch, Tab, TabContent, TabContext, TabList, TabWithIcon, TableHeaderTitle, TableRowThumbnail, Tabs, TabsWithIconBar, Tag, TagList, TagListWrapper$1 as TagListWrapper, TextArea, TextAreaField, TextField, ThemeVariables, Tooltip, TopBar, TypeTable, UtilityHeader, WebRTCPlayer as WebRTCClient, index as defaultTheme, isDateInterval, isFilterItem, resetButtonStyles, useClickOutside, useCopyToClipboard, useInterval, useMediaModal, useModal, useNotification, usePTZ, usePoll, useThemeToggle, useTitle, useTo };
15273
15148
  //# sourceMappingURL=index.modern.js.map