scorer-ui-kit 2.1.0-beta.4 → 2.1.0-beta.6

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 (8) hide show
  1. package/dist/index.js +161 -153
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +161 -153
  4. package/dist/index.modern.js.map +1 -1
  5. package/dist/themes/light/colors.d.ts +1 -0
  6. package/dist/themes/light/light.d.ts +5 -0
  7. package/dist/themes/light/styles.d.ts +4 -0
  8. package/package.json +1 -1
package/dist/index.modern.js CHANGED
@@ -191,28 +191,28 @@ var typography = {
191
191
  "fontSize": "16px",
192
192
  "fontWeight": 600,
193
193
  "textDecoration": "none",
194
- "color": "var(--grey-11)"
194
+ "color": "var(--white-1)"
195
195
  },
196
196
  "large": {
197
197
  "textAlign": "center",
198
198
  "fontSize": "20px",
199
199
  "fontWeight": 600,
200
200
  "textDecoration": "none",
201
- "color": "var(--grey-11)"
201
+ "color": "var(--white-1)"
202
202
  },
203
203
  "small": {
204
204
  "textAlign": "center",
205
205
  "fontSize": "14px",
206
206
  "fontWeight": 600,
207
207
  "textDecoration": "none",
208
- "color": "var(--grey-11)"
208
+ "color": "var(--white-1)"
209
209
  },
210
210
  "xsmall": {
211
211
  "textAlign": "center",
212
212
  "fontSize": "12px",
213
213
  "fontWeight": 600,
214
214
  "textDecoration": "none",
215
- "color": "var(--grey-11)"
215
+ "color": "var(--white-1)"
216
216
  }
217
217
  },
218
218
  "primary": {
@@ -310,7 +310,7 @@ var typography = {
310
310
  "fontWeight": 500,
311
311
  "lineHeight": "25px",
312
312
  "textDecoration": "none",
313
- "color": "var(--grey-11)"
313
+ "color": "var(--grey-12)"
314
314
  },
315
315
  "compact": {
316
316
  "textAlign": "left",
@@ -318,7 +318,7 @@ var typography = {
318
318
  "fontWeight": 500,
319
319
  "lineHeight": "15px",
320
320
  "textDecoration": "none",
321
- "color": "var(--grey-11)"
321
+ "color": "var(--grey-12)"
322
322
  }
323
323
  }
324
324
  },
@@ -448,7 +448,7 @@ var typography = {
448
448
  "fontSize": "14px",
449
449
  "fontWeight": 300,
450
450
  "textDecoration": "none",
451
- "color": "var(--grey-11)"
451
+ "color": "var(--grey-12)"
452
452
  },
453
453
  "placeholder": {
454
454
  "textAlign": "left",
@@ -530,7 +530,7 @@ var typography = {
530
530
  "fontSize": "14px",
531
531
  "fontWeight": 600,
532
532
  "textDecoration": "none",
533
- "color": "var(--grey-11)"
533
+ "color": "var(--grey-12)"
534
534
  }
535
535
  },
536
536
  "meta": {
@@ -745,7 +745,7 @@ var typography = {
745
745
  "fontSize": "14px",
746
746
  "fontWeight": 400,
747
747
  "textDecoration": "none",
748
- "color": "var(--grey-a11)"
748
+ "color": "var(--grey-a8)"
749
749
  },
750
750
  "default": {
751
751
  "textAlign": "center",
@@ -759,7 +759,7 @@ var typography = {
759
759
  "fontSize": "12px",
760
760
  "fontWeight": 700,
761
761
  "textDecoration": "none",
762
- "color": "calendar: "
762
+ "color": "var(--grey-a12)"
763
763
  }
764
764
  },
765
765
  "monthLink": {
@@ -771,7 +771,7 @@ var typography = {
771
771
  "textTransform": "uppercase",
772
772
  "letterSpacing": "0.4px",
773
773
  "textDecoration": "none",
774
- "color": "var(--grey-8)"
774
+ "color": "var(--grey-9)"
775
775
  },
776
776
  "hover": {
777
777
  "textAlign": "center",
@@ -825,7 +825,7 @@ var typography = {
825
825
  "fontSize": "13px",
826
826
  "fontWeight": 500,
827
827
  "textDecoration": "none",
828
- "color": "var(--white-11)"
828
+ "color": "var(--grey-a12)"
829
829
  }
830
830
  },
831
831
  "presetAction": {
@@ -833,7 +833,7 @@ var typography = {
833
833
  "fontSize": "13px",
834
834
  "fontWeight": 500,
835
835
  "textDecoration": "none",
836
- "color": "var(--white-11)"
836
+ "color": "var(--gray-12)"
837
837
  },
838
838
  "filterButton": {
839
839
  "default": {
@@ -872,7 +872,7 @@ var typography = {
872
872
  "fontSize": "12px",
873
873
  "fontWeight": 400,
874
874
  "textDecoration": "none",
875
- "color": "var(--grey-11)"
875
+ "color": "var(--grey-12)"
876
876
  }
877
877
  }
878
878
  },
@@ -891,7 +891,7 @@ var typography = {
891
891
  "textAlign": "left",
892
892
  "fontSize": "20px",
893
893
  "fontWeight": 400,
894
- "textShadow": "0px 0px 10px #ffffffcc",
894
+ "textShadow": "0px 0px 10px var(--white-a5)",
895
895
  "textDecoration": "none",
896
896
  "color": "var(--grey-11)"
897
897
  },
@@ -911,17 +911,18 @@ var colors = {
911
911
  "pureTop": "var(--black-1)",
912
912
  "divider": "var(--grey-6)",
913
913
  "icons": {
914
- "inverse": "var(--white-1)",
915
- "mono": "var(--black-9)",
916
- "dimmed": "var(--grey-9)",
917
- "subtle": "var(--white-9)",
914
+ "inverse": "var(--grey-1)",
915
+ "mono": "var(--grey-12)",
916
+ "dimmed": "var(--grey-11)",
917
+ "subtle": "var(--grey-10)",
918
918
  "primary": "var(--primary-9)",
919
- "danger": "var(--error-9)"
919
+ "danger": "var(--error-9)",
920
+ "white": "var(--white-1)"
920
921
  },
921
922
  "menu": {
922
923
  "active": "var(--primary-9)",
923
- "hover": "var(--primary-6)",
924
- "default": "var(--primary-a6)",
924
+ "hover": "var(--primary-8)",
925
+ "default": "var(--gray-2)",
925
926
  "indicator": "var(--grey-a1)",
926
927
  "passive": "var(--primary-a7)"
927
928
  },
@@ -933,7 +934,7 @@ var colors = {
933
934
  "warning": "var(--warning-8)"
934
935
  },
935
936
  "status": {
936
- "caution": "var(--warning-7)",
937
+ "caution": "var(--warning-10)",
937
938
  "danger": "var(--error-8)",
938
939
  "folder": "var(--primary-7)",
939
940
  "highlight": "var(--primary-7)",
@@ -956,13 +957,13 @@ var styles = {
956
957
  "input": {
957
958
  "default": {
958
959
  "normal": {
959
- "backgroundColor": "var(--white-1)",
960
+ "backgroundColor": "var(--grey-1)",
960
961
  "borderColor": colors.input.border["default"],
961
962
  "border": colors.input.border["default"] + " 1px solid"
962
963
  },
963
964
  "focused": {
964
- "boxShadow": "0px 3px 7px 0px var(--primary-a11)",
965
- "backgroundColor": "var(--white-1)",
965
+ "boxShadow": "0px 3px 7px 0px var(--primary-a2)",
966
+ "backgroundColor": "var(--grey-1)",
966
967
  "borderColor": "var(--primary-7)",
967
968
  "border": "var(--primary-7) 1px solid"
968
969
  }
@@ -979,49 +980,52 @@ var styles = {
979
980
  },
980
981
  "required": {
981
982
  "focused": {
982
- "boxShadow": "0px 3px 7px 0px var(--primary-a11)",
983
- "backgroundColor": "var(--white-1)",
983
+ "boxShadow": "0px 3px 7px 0px var(--primary-a2)",
984
+ "backgroundColor": "var(--grey-1)",
984
985
  "borderColor": "var(--primary-7)",
985
986
  "border": "var(--primary-7) 2px solid"
986
987
  },
987
988
  "normal": {
988
989
  "borderColor": "var(--primary-7)",
989
- "border": "var(--primary-7) 1px solid"
990
+ "border": "var(--primary-7) 1px solid",
991
+ "backgroundColor": "var(--grey-1)"
990
992
  }
991
993
  },
992
994
  "valid": {
993
995
  "focused": {
994
- "boxShadow": "0px 3px 5px 0px var(--success-a12)",
995
- "backgroundColor": "var(--white-1)",
996
+ "boxShadow": "0px 3px 5px 0px var(--success-a2)",
997
+ "backgroundColor": "var(--grey-1)",
996
998
  "borderColor": "var(--success-7)",
997
999
  "border": "var(--success-7) 2px solid"
998
1000
  },
999
1001
  "normal": {
1000
1002
  "borderColor": "var(--success-7)",
1001
- "border": "var(--success-7) 1px solid"
1003
+ "border": "var(--success-7) 1px solid",
1004
+ "backgroundColor": "var(--grey-1)"
1002
1005
  }
1003
1006
  },
1004
1007
  "invalid": {
1005
1008
  "focused": {
1006
- "boxShadow": "0px 3px 7px 0px var(--error-a1)",
1007
- "backgroundColor": "var(--white-1)",
1009
+ "boxShadow": "0px 3px 7px 0px var(--error-a2)",
1010
+ "backgroundColor": "var(--grey-1)",
1008
1011
  "borderColor": "var(--error-8)",
1009
1012
  "border": "var(--error-8) 2px solid"
1010
1013
  },
1011
1014
  "normal": {
1012
1015
  "borderColor": "var(--error-8)",
1013
- "border": "var(--error-8) 1px solid"
1016
+ "border": "var(--error-8) 1px solid",
1017
+ "backgroundColor": "var(--grey-1)"
1014
1018
  }
1015
1019
  },
1016
1020
  "processing": {
1017
1021
  "focused": {
1018
- "boxShadow": "0px 3px 7px 0px var(--primary-a10)",
1019
- "backgroundColor": "var(--white-1)",
1022
+ "boxShadow": "0px 3px 7px 0px var(--primary-a2)",
1023
+ "backgroundColor": "var(--grey-1)",
1020
1024
  "borderColor": "var(--primary-7)",
1021
1025
  "border": "var(--primary-7) 2px solid"
1022
1026
  },
1023
1027
  "normal": {
1024
- "backgroundColor": "var(--white-1)",
1028
+ "backgroundColor": "var(--grey-1)",
1025
1029
  "borderColor": "var(--primary-7)",
1026
1030
  "border": "var(--primary-7) 1px solid"
1027
1031
  }
@@ -1039,45 +1043,46 @@ var styles = {
1039
1043
  "button": {
1040
1044
  "primary": {
1041
1045
  "default": {
1042
- "backgroundColor": "var(--primary-7)",
1043
- "backgroundImage": "linear-gradient(135.00deg, var(--primary-7) 0%, var(--primary-7) 100%)"
1046
+ "backgroundColor": "var(--primary-9)",
1047
+ "backgroundImage": "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
1044
1048
  },
1045
1049
  "hover": {
1046
- "backgroundColor": "var(--primary-8)"
1050
+ "backgroundColor": "var(--primary-10)"
1047
1051
  },
1048
1052
  "active": {
1049
- "backgroundColor": "var(--primary-7)"
1053
+ "backgroundColor": "var(--primary-9)"
1050
1054
  },
1051
1055
  "divider": {
1052
- "backgroundColor": "var(--primary-7)"
1056
+ "backgroundColor": "var(--primary-a8)"
1053
1057
  },
1054
1058
  "disabled": {
1055
- "backgroundColor": "var(--primary-7)",
1056
- "backgroundImage": "linear-gradient(135.00deg, var(--primary-7) 0%, var(--primary-7) 100%)"
1059
+ "backgroundColor": "var(--primary-a10)",
1060
+ "backgroundImage": "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
1057
1061
  },
1058
1062
  "actionArea": {
1059
- "backgroundColor": "var(--primary-7)",
1060
- "backgroundImage": "linear-gradient(135.00deg, var(--primary-7) 0%, var(--primary-7) 100%)"
1063
+ "backgroundColor": "var(--primary-9)",
1064
+ "backgroundImage": "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
1061
1065
  }
1062
1066
  },
1063
1067
  "secondary": {
1064
1068
  "default": {
1065
- "backgroundColor": "var(--grey-5)"
1069
+ "backgroundColor": "var(--grey-9)"
1066
1070
  },
1067
1071
  "hover": {
1068
- "backgroundColor": "var(--grey-5)"
1072
+ "backgroundColor": "var(--grey-10)"
1069
1073
  },
1070
1074
  "active": {
1071
- "backgroundColor": "var(--grey-6)"
1075
+ "backgroundColor": "var(--grey-9)"
1072
1076
  },
1073
1077
  "disabled": {
1074
- "backgroundColor": "var(--grey-2)"
1078
+ "backgroundColor": "var(--grey-a10)"
1075
1079
  },
1076
1080
  "divider": {
1077
1081
  "backgroundColor": "var(--grey-a8)"
1078
1082
  },
1079
1083
  "actionArea": {
1080
- "backgroundColor": "var(--grey-a3)"
1084
+ "backgroundColor": "var(--grey-9)",
1085
+ "backgroundImage": "linear-gradient(135.00deg, var(--grey-9) 0%, var(--grey-8) 100%)"
1081
1086
  }
1082
1087
  },
1083
1088
  "danger": {
@@ -1086,13 +1091,13 @@ var styles = {
1086
1091
  "backgroundImage": "linear-gradient(317.51deg, var(--error-9) 0%, var(--error-8) 100%)"
1087
1092
  },
1088
1093
  "hover": {
1089
- "backgroundColor": "var(--error-9)"
1094
+ "backgroundColor": "var(--error-10)"
1090
1095
  },
1091
1096
  "active": {
1092
- "backgroundColor": "var(--error-8)"
1097
+ "backgroundColor": "var(--error-9)"
1093
1098
  },
1094
1099
  "disabled": {
1095
- "backgroundColor": "var(--error-6)"
1100
+ "backgroundColor": "var(--error-a10)"
1096
1101
  },
1097
1102
  "divider": {
1098
1103
  "backgroundColor": "var(--error-8)"
@@ -1119,8 +1124,8 @@ var styles = {
1119
1124
  },
1120
1125
  "disabled": {
1121
1126
  "outer": {
1122
- "backgroundColor": "var(--white-1)",
1123
- "backgroundImage": "linear-gradient(180.00deg, var(--white-1) 0%, var(--grey-1) 100%)",
1127
+ "backgroundColor": "var(--grey-1)",
1128
+ "backgroundImage": "linear-gradient(180.00deg, var(--grey-1)0%, var(--grey-1) 100%)",
1124
1129
  "borderColor": "var(--grey-a7)",
1125
1130
  "border": "var(--grey-a7) 1px solid"
1126
1131
  },
@@ -1228,13 +1233,13 @@ var styles = {
1228
1233
  "locked": {
1229
1234
  "default": {
1230
1235
  "outer": {
1231
- "backgroundColor": "var(--white-1)",
1232
- "backgroundImage": "linear-gradient(180.00deg, var(--white-1) 0%, var(--grey-1) 100%)",
1233
- "borderColor": "var(--grey-a7)",
1234
- "border": "var(--grey-a7) 1px solid"
1236
+ "backgroundColor": "var(--grey-1) ",
1237
+ "backgroundImage": "linear-gradient(180.00deg, var(--grey-1) 0%, var(--grey-1) 100%)",
1238
+ "borderColor": "var(--grey-a8)",
1239
+ "border": "var(--grey-a8) 1px solid"
1235
1240
  },
1236
1241
  "inner": {
1237
- "backgroundColor": "var(--grey-6)"
1242
+ "backgroundColor": "var(--grey-8)"
1238
1243
  }
1239
1244
  }
1240
1245
  }
@@ -1247,12 +1252,12 @@ var styles = {
1247
1252
  "border": "var(--grey-6) 2px solid"
1248
1253
  },
1249
1254
  "default": {
1250
- "borderColor": "var(--grey-8)",
1251
- "border": "var(--grey-8) 2px solid"
1255
+ "borderColor": "var(--grey-9)",
1256
+ "border": "var(--grey-9) 2px solid"
1252
1257
  },
1253
1258
  "hover": {
1254
- "borderColor": "var(--primary-7)",
1255
- "border": "var(--primary-7) 2px solid"
1259
+ "borderColor": "var(--primary-8)",
1260
+ "border": "var(--primary-8) 2px solid"
1256
1261
  }
1257
1262
  },
1258
1263
  "checked": {
@@ -1262,11 +1267,11 @@ var styles = {
1262
1267
  },
1263
1268
  "default": {
1264
1269
  "boxShadow": "inset 0px 1px 5px 0px var(--grey-a1)",
1265
- "backgroundColor": "var(--primary-7)"
1270
+ "backgroundColor": "var(--primary-8)"
1266
1271
  },
1267
1272
  "hover": {
1268
1273
  "boxShadow": "inset 0px 1px 5px 0px var(--grey-a1)",
1269
- "backgroundColor": "var(--primary-7)"
1274
+ "backgroundColor": "var(--primary-8)"
1270
1275
  }
1271
1276
  },
1272
1277
  "indeterminate": {
@@ -1312,7 +1317,7 @@ var styles = {
1312
1317
  "drawer": {
1313
1318
  "background": {
1314
1319
  "boxShadow": "-5px 0px 10px 0px var(--white-a2)",
1315
- "backgroundColor": "var(--white-1)"
1320
+ "backgroundColor": "var(--grey-1)"
1316
1321
  }
1317
1322
  },
1318
1323
  "topBar": {
@@ -1369,7 +1374,7 @@ var styles = {
1369
1374
  "dropdownContainer": {
1370
1375
  "background": {
1371
1376
  "boxShadow": "0px 5px 25px 0px var(--primary-a1)",
1372
- "backgroundColor": "var(--white-1)",
1377
+ "backgroundColor": "var(--grey-1)",
1373
1378
  "borderColor": "var(--grey-6)",
1374
1379
  "border": "var(--grey-6) 1px solid"
1375
1380
  },
@@ -1380,7 +1385,7 @@ var styles = {
1380
1385
  "filterButton": {
1381
1386
  "default": {
1382
1387
  "boxShadow": "0px 4px 9px 0px var(--primary-a1)",
1383
- "backgroundColor": "var(--grey-2)",
1388
+ "backgroundColor": "var(--grey-1)",
1384
1389
  "borderColor": "var(--grey-7)",
1385
1390
  "border": "var(--grey-7) 1px solid",
1386
1391
  "textColor": "var(--grey-11)"
@@ -1394,7 +1399,7 @@ var styles = {
1394
1399
  },
1395
1400
  "hover": {
1396
1401
  "boxShadow": "0px 4px 9px 0px var(--primary-a1)",
1397
- "backgroundColor": "var(--primary-6)",
1402
+ "backgroundColor": "var(--primary-7)",
1398
1403
  "borderColor": "var(--primary-7)",
1399
1404
  "border": "var(--primary-7) 1px solid",
1400
1405
  "textColor": "var(--white-1)"
@@ -1403,13 +1408,13 @@ var styles = {
1403
1408
  "searchInput": {
1404
1409
  "default": {
1405
1410
  "boxShadow": "0px 4px 9px 0px var(--primary-a2)",
1406
- "backgroundColor": "var(--white-1)",
1411
+ "backgroundColor": "var(--grey-1)",
1407
1412
  "borderColor": "var(--grey-7)",
1408
1413
  "border": "var(--grey-7) 1px solid"
1409
1414
  },
1410
1415
  "focused": {
1411
1416
  "boxShadow": "0px 4px 9px 0px var(--primary-a2)",
1412
- "backgroundColor": "var(--white-1)",
1417
+ "backgroundColor": "var(--grey-1)",
1413
1418
  "borderColor": "var(--primary-6)",
1414
1419
  "border": "var(--primary-6) 1px solid"
1415
1420
  }
@@ -1437,7 +1442,7 @@ var styles = {
1437
1442
  "backgroundColor": "var(--grey-4)"
1438
1443
  },
1439
1444
  "default": {
1440
- "backgroundColor": "var(--grey-a4)"
1445
+ "backgroundColor": "var(--grey-2)"
1441
1446
  }
1442
1447
  }
1443
1448
  }
@@ -1467,7 +1472,7 @@ var styles = {
1467
1472
  "filterButton": {
1468
1473
  "active": {
1469
1474
  "boxShadow": "0px 4px 9px 0px var(--primary-a1)",
1470
- "backgroundColor": "var(--grey-2)",
1475
+ "backgroundColor": "var(--grey-1)",
1471
1476
  "borderColor": "var(--primary-7)",
1472
1477
  "border": "var(--primary-7) 1px solid"
1473
1478
  }
@@ -1478,7 +1483,7 @@ var styles = {
1478
1483
  },
1479
1484
  "container": {
1480
1485
  "boxShadow": "0px 10px 15px 0px var(--primary-a1)",
1481
- "backgroundColor": "var(--white-1)",
1486
+ "backgroundColor": "var(--grey-1)",
1482
1487
  "borderColor": "var(--grey-6)",
1483
1488
  "border": "var(--grey-6) 1px solid"
1484
1489
  }
@@ -1718,7 +1723,7 @@ var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$
1718
1723
  var IconButton = styled.button(_templateObject$2 || (_templateObject$2 = _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) {
1719
1724
  var _ref$selected = _ref.selected,
1720
1725
  selected = _ref$selected === void 0 ? false : _ref$selected;
1721
- return selected && css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid hsl(207, 80%, 64%);\n "])));
1726
+ return selected && css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
1722
1727
  });
1723
1728
  var AlertWrapper = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n min-height: 50px;\n border-radius: 3px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n\n padding: 0 14px;\n\n font-family: ", ";\n ", ";\n ", ";\n\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n"])), function (_ref2) {
1724
1729
  var theme = _ref2.theme;
@@ -1806,7 +1811,7 @@ var IconNames$1 = {
1806
1811
  var IconButton$1 = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n ", ";\n ", "\n &:focus {\n outline: none;\n }\n\n &:hover {\n opacity: .8;\n }\n &:active:enabled {\n opacity: .9;\n }\n &:disabled {\n opacity: 0.1;\n }\n"])), resetButtonStyles, function (_ref7) {
1807
1812
  var _ref7$selected = _ref7.selected,
1808
1813
  selected = _ref7$selected === void 0 ? false : _ref7$selected;
1809
- return selected && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid hsl(207, 80%, 64%);\n "])));
1814
+ return selected && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
1810
1815
  });
1811
1816
  var TextButton = styled.button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: ", ";\n ", ";\n font-weight: 700;\n\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n &:active:enabled {\n opacity: .9;\n }\n &:disabled {\n opacity: 0.1;\n }\n"])), resetButtonStyles, function (_ref8) {
1812
1817
  var theme = _ref8.theme;
@@ -1955,7 +1960,7 @@ var TextContainer = styled.div(_templateObject$5 || (_templateObject$5 = _tagged
1955
1960
  var theme = _ref2.theme;
1956
1961
  return theme && css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n transition: padding ", " ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
1957
1962
  });
1958
- 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: hsla(0, 0%, 100%, 1.000);\n }\n }\n"])), function (_ref3) {
1963
+ 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) {
1959
1964
  var position = _ref3.position;
1960
1965
  return css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n order: ", ";\n "])), position && position === 'left' ? 0 : 2);
1961
1966
  });
@@ -2071,7 +2076,7 @@ var TextContainer$1 = styled.div(_templateObject3$6 || (_templateObject3$6 = _ta
2071
2076
  var theme = _ref2.theme;
2072
2077
  return theme && css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n transition: padding ", " ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
2073
2078
  });
2074
- var LoadingContainer = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n height: inherit;\n flex: 0 0 35px;\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) {
2079
+ 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) {
2075
2080
  var theme = _ref3.theme,
2076
2081
  position = _ref3.position;
2077
2082
  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);
@@ -2226,7 +2231,7 @@ var InputContainer = styled.div(_templateObject10$2 || (_templateObject10$2 = _t
2226
2231
  var hasAction = _ref6.hasAction;
2227
2232
  return hasAction && css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n ", "{\n padding-right: 60px;\n\n // Used to control password manager injection.\n background-position: calc(100% - 50px) 50% !important;\n }\n "])), StyledInput);
2228
2233
  });
2229
- var Container$2 = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n\n ", "{\n ", ";\n\n &:focus {}\n\n ", "\n }\n\n ", " {\n background: ", ";\n border-color: ", ";\n\n ", "\n }\n\n &:focus-within ", " {\n ", ";\n }\n\n"])), StyledInput, function (_ref7) {
2234
+ var Container$2 = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n\n ", "{\n ", ";\n\n &:focus {}\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"])), StyledInput, function (_ref7) {
2230
2235
  var theme = _ref7.theme,
2231
2236
  fieldState = _ref7.fieldState;
2232
2237
  return theme.styles.form.input[fieldState].normal;
@@ -2320,7 +2325,7 @@ var Input = function Input(_ref13) {
2320
2325
  var _excluded$5 = ["htmlFor", "labelText", "rightAlign", "children"];
2321
2326
 
2322
2327
  var _templateObject$b, _templateObject2$a;
2323
- var StyledLabel = styled.label(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: hsl(207, 5%, 57%);\n font-size: 14px;\n font-weight: 500;\n ", ";\n"])), function (_ref) {
2328
+ var StyledLabel = styled.label(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-10);\n font-size: 14px;\n font-weight: 500;\n ", ";\n"])), function (_ref) {
2324
2329
  var theme = _ref.theme;
2325
2330
  return theme.fontFamily.ui;
2326
2331
  }, function (_ref2) {
@@ -2365,7 +2370,7 @@ var InputContainer$1 = styled.div(_templateObject5$6 || (_templateObject5$6 = _t
2365
2370
  var hasAction = _ref3.hasAction;
2366
2371
  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);
2367
2372
  });
2368
- 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: #99a1a3;\n line-height:30px;\n"])), function (_ref4) {
2373
+ 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) {
2369
2374
  var theme = _ref4.theme;
2370
2375
  return theme.fontFamily.ui;
2371
2376
  });
@@ -2492,6 +2497,10 @@ var Container$4 = styled.label(_templateObject7$5 || (_templateObject7$5 = _tagg
2492
2497
  return p.useIntent && intentPosition(p.theme.dimensions.form["switch"].positions[getPositionKey(p.position)], p.checked);
2493
2498
  });
2494
2499
 
2500
+ var isTypeSwitchState = function isTypeSwitchState(value) {
2501
+ return value === 'default' || value === 'loading' || value === 'locked' || value === 'disabled' || value === 'failure';
2502
+ };
2503
+
2495
2504
  var Switch = function Switch(_ref4) {
2496
2505
  var _inputRef$current4;
2497
2506
 
@@ -2559,7 +2568,7 @@ var Switch = function Switch(_ref4) {
2559
2568
  updateThemeChoice();
2560
2569
  }, [leftTheme, rightTheme, updateThemeChoice]);
2561
2570
  useEffect(function () {
2562
- setSwitchState(stateCheck(state));
2571
+ if (isTypeSwitchState(state)) setSwitchState(stateCheck(state));
2563
2572
  }, [state, setSwitchState]);
2564
2573
  useEffect(function () {
2565
2574
  if (state === 'locked') {
@@ -2854,7 +2863,7 @@ var FeedbackMessage$1 = styled.div(_templateObject7$8 || (_templateObject7$8 = _
2854
2863
  var theme = _ref4.theme;
2855
2864
  return theme.typography.form.feedback.message;
2856
2865
  });
2857
- var Container$7 = 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 hsla(207, 65.8%, 31%, 0.078);\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) {
2866
+ var Container$7 = 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) {
2858
2867
  var theme = _ref5.theme,
2859
2868
  fieldState = _ref5.fieldState;
2860
2869
  return theme.styles.form.input[fieldState].normal;
@@ -2874,13 +2883,13 @@ var Container$7 = styled.div(_templateObject8$7 || (_templateObject8$7 = _tagged
2874
2883
  return ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n display:none;\n "])));
2875
2884
  }, FeedbackContainer$1, function (_ref10) {
2876
2885
  var fieldState = _ref10.fieldState;
2877
- return fieldState === 'required' ? "\n box-shadow: 0px 3px 7px 0px hsla(207, 67.8%, 35.3%, 0.071);\n " : null;
2886
+ return fieldState === 'required' ? "\n box-shadow: 0px 3px 7px 0px var(--primary-a3);\n " : null;
2878
2887
  }, function (_ref11) {
2879
2888
  var fieldState = _ref11.fieldState;
2880
- return fieldState === 'valid' ? "\n box-shadow: 0px 3px 5px 0px hsla(120, 76.6%, 15.1%, 0.071);\n " : null;
2889
+ return fieldState === 'valid' ? "\n box-shadow: 0px 3px 5px 0px var(--success-a3);\n " : null;
2881
2890
  }, function (_ref12) {
2882
2891
  var fieldState = _ref12.fieldState;
2883
- return fieldState === 'invalid' ? "\n box-shadow: 0px 3px 7px 0px hsla(0, 100%, 50%, 0.102);\n " : null;
2892
+ return fieldState === 'invalid' ? "\n box-shadow: 0px 3px 7px 0px var(--error-a3);\n " : null;
2884
2893
  });
2885
2894
 
2886
2895
  var TextArea = function TextArea(_ref13) {
@@ -2904,21 +2913,21 @@ var TextArea = function TextArea(_ref13) {
2904
2913
  return React__default.createElement(Icon, {
2905
2914
  icon: 'Required',
2906
2915
  size: 20,
2907
- color: 'inverse'
2916
+ color: 'white'
2908
2917
  });
2909
2918
 
2910
2919
  case 'valid':
2911
2920
  return React__default.createElement(Icon, {
2912
2921
  icon: 'Success',
2913
2922
  size: 20,
2914
- color: 'inverse'
2923
+ color: 'white'
2915
2924
  });
2916
2925
 
2917
2926
  case 'invalid':
2918
2927
  return React__default.createElement(Icon, {
2919
2928
  icon: 'Invalid',
2920
2929
  size: 20,
2921
- color: 'inverse'
2930
+ color: 'white'
2922
2931
  });
2923
2932
 
2924
2933
  case 'processing':
@@ -3112,12 +3121,12 @@ var HiddenInput$1 = styled.input(_templateObject3$f || (_templateObject3$f = _ta
3112
3121
  var disabled = _ref3.disabled;
3113
3122
  return disabled ? "not-allowed" : "pointer";
3114
3123
  });
3115
- 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, hsl(210, 30%, 96%), hsl(203, 42%, 94%) 98%);\n"])), ThumbDiameter / 2, ThumbDiameter);
3116
- 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: hsl(205, 77%, 64%);\n"])), function (_ref4) {
3124
+ 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);
3125
+ 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) {
3117
3126
  var leftValue = _ref4.leftValue;
3118
3127
  return "calc(" + leftValue + "% + 7px)";
3119
3128
  });
3120
- var MarkLabel = styled.span(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: -24px;\n left: ", ";\n\n font-size: 10px;\n font-style: italic;\n line-height: normal;\n text-align: center;\n color: hsla(195, 10%, 52%, 0.72);\n\n ", "\n ", "\n ", "\n"])), function (_ref5) {
3129
+ var MarkLabel = styled.span(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: -24px;\n left: ", ";\n\n font-size: 10px;\n font-style: italic;\n line-height: normal;\n text-align: center;\n color: var(--grey-a11);\n\n ", "\n ", "\n ", "\n"])), function (_ref5) {
3121
3130
  var leftValue = _ref5.leftValue;
3122
3131
  return "calc(" + leftValue + "% + 7px)";
3123
3132
  }, function (_ref6) {
@@ -3394,12 +3403,12 @@ var _excluded$b = ["max", "min", "defaultValue", "title", "timeUnit", "controlle
3394
3403
 
3395
3404
  var _templateObject$k, _templateObject2$j, _templateObject3$h, _templateObject4$f, _templateObject5$d;
3396
3405
  var Container$a = styled.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose([""])));
3397
- var Headers = styled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n color: hsl(207, 5%, 57%);\n display: flex;\n justify-content: space-between;\n margin-bottom: 30px;\n padding: 0 6px;\n"])));
3406
+ var Headers = styled.div(_templateObject2$j || (_templateObject2$j = _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"])));
3398
3407
  var ValueLabel = styled(Label)(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-bottom: 0;\n"])), function (_ref) {
3399
3408
  var theme = _ref.theme;
3400
3409
  return theme.fontFamily.ui;
3401
3410
  });
3402
- var Unit = styled.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: hsla(195, 10%, 52%, 0.72);\n font-style: italic;\n font-size: 12px;\n line-height: 1.5;\n"])), function (_ref2) {
3411
+ 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) {
3403
3412
  var theme = _ref2.theme;
3404
3413
  return theme.fontFamily.data;
3405
3414
  });
@@ -3449,7 +3458,7 @@ var _excluded$c = ["defaultValue", "inputCallback", "updateThumbColor", "updateT
3449
3458
 
3450
3459
  var _templateObject$l, _templateObject2$k, _templateObject3$i;
3451
3460
  var Container$b = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose([""])));
3452
- var Headers$1 = styled.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n color: hsl(207, 5%, 57%);\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n padding: 0 6px;\n"])));
3461
+ var Headers$1 = 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: 20px;\n padding: 0 6px;\n"])));
3453
3462
  var ValueTitle$1 = styled(Label)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref) {
3454
3463
  var theme = _ref.theme;
3455
3464
  return theme.fontFamily.data;
@@ -3602,7 +3611,7 @@ var Container$c = styled.div(_templateObject$m || (_templateObject$m = _taggedTe
3602
3611
  });
3603
3612
  var DragAndDrop = styled.div(_templateObject2$l || (_templateObject2$l = _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) {
3604
3613
  var inDropZone = _ref2.inDropZone;
3605
- return inDropZone ? "dashed #afa9a9 2px" : null;
3614
+ return inDropZone ? "dashed var(--grey-8) 2px" : null;
3606
3615
  });
3607
3616
 
3608
3617
  var DropArea = function DropArea(_ref3) {
@@ -3919,7 +3928,7 @@ var TopLine = styled.div(_templateObject2$m || (_templateObject2$m = _taggedTemp
3919
3928
  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);
3920
3929
  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);
3921
3930
  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);
3922
- var resizeSquaresCss = css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 10px;\n height: 10px;\n border: solid 1px hsl(0, 1%, 28%);\n background-color: hsl(0, 0%, 100%);\n"])));
3931
+ 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"])));
3923
3932
  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) {
3924
3933
  var isResizable = _ref.isResizable;
3925
3934
  return isResizable && css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n cursor: n-resize;\n "])));
@@ -3992,7 +4001,7 @@ var CropArea = function CropArea(_ref9) {
3992
4001
  };
3993
4002
 
3994
4003
  var _templateObject$o, _templateObject2$n, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$c, _templateObject7$c, _templateObject8$b, _templateObject9$b;
3995
- var Container$d = styled.div(_templateObject$o || (_templateObject$o = _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: hsla(202, 33%, 95%, 0.51);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n font-family: ", ";\n z-index: 999;\n"])), function (_ref) {
4004
+ var Container$d = styled.div(_templateObject$o || (_templateObject$o = _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) {
3996
4005
  var theme = _ref.theme;
3997
4006
  return theme.fontFamily.ui;
3998
4007
  });
@@ -4003,7 +4012,7 @@ var TextGroup = styled.div(_templateObject4$h || (_templateObject4$h = _taggedTe
4003
4012
  return theme.colors.icons.mono;
4004
4013
  }, IconWrapper);
4005
4014
  var ButtonsGroup = styled.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n button + button {\n margin-left: 10px;\n }\n"])));
4006
- 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: hsla(202, 33%, 95%, 0.8);\n background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.8) 35px, rgba(255,255,255,.8) 70px);\n"])), function (_ref3) {
4015
+ 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 (_ref3) {
4007
4016
  var canvasHeight = _ref3.canvasHeight;
4008
4017
  return canvasHeight ? canvasHeight + "px" : "462px";
4009
4018
  }, function (_ref4) {
@@ -4011,7 +4020,7 @@ var PreviewArea = styled.div(_templateObject6$c || (_templateObject6$c = _tagged
4011
4020
  return canvasWidth ? canvasWidth + "px" : "485px";
4012
4021
  });
4013
4022
  var HiddenImage = styled.img(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
4014
- var SelectedArea = styled.div(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n border: dashed 1px hsl(0, 0%, 24%);\n box-shadow: 0 0 0 9999em hsla(0, 0%, 32%, 0.75);\n ", ";\n cursor: move;\n"])), function (_ref5) {
4023
+ 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 (_ref5) {
4015
4024
  var cropLeft = _ref5.cropLeft,
4016
4025
  cropTop = _ref5.cropTop,
4017
4026
  cropWidth = _ref5.cropWidth,
@@ -4335,9 +4344,9 @@ var Container$e = styled.div(_templateObject$p || (_templateObject$p = _taggedTe
4335
4344
  return css(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
4336
4345
  });
4337
4346
  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);
4338
- 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: hsl(0, 0%, 90%);\n"])));
4347
+ 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"])));
4339
4348
  var PreviewImage = styled.img(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n ", "\n object-fit: cover;\n"])), PhotoContainerStyle);
4340
- var PlaceholderText = styled.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n color: hsl(207, 5%, 57%);\n font-size: 14px;\n"])));
4349
+ var PlaceholderText = styled.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n color: var(--grey-10);\n font-size: 14px;\n"])));
4341
4350
  var NoPhoto = styled.div(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n ", "\n padding-top: 15px;\n ", " {\n margin-top: 18px;\n }\n"])), PhotoContainerStyle, PlaceholderText);
4342
4351
  var StyledInputFileButton = styled(InputFileButton)(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
4343
4352
  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"])));
@@ -4495,7 +4504,7 @@ var _excluded$h = ["icons", "color", "size", "weight"];
4495
4504
  var _templateObject$q, _templateObject2$p, _templateObject3$m;
4496
4505
  var Container$f = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 27px;\n ", " {\n display: flex;\n align-items: center;\n }\n"])), IconWrapper);
4497
4506
  var PlusIcon = styled(Icon)(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose([""])));
4498
- var PlusIconWrapper = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n margin: 0 30px;\n ", "{\n transform: rotate(45deg);\n [stroke]{\n stroke: hsl(205, 22%, 66%);\n }\n }\n"])), IconWrapper);
4507
+ 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);
4499
4508
 
4500
4509
  var BigIconsSummary = function BigIconsSummary(_ref) {
4501
4510
  var icons = _ref.icons,
@@ -4537,8 +4546,8 @@ var FilesUploadGroup = styled.div(_templateObject4$j || (_templateObject4$j = _t
4537
4546
  var theme = _ref3.theme;
4538
4547
  return theme.styles.filters.dropdownContainer.background;
4539
4548
  });
4540
- var Title = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n color: hsl(208, 8%, 38%);\n font-size: 20px;\n"])));
4541
- var Description = styled.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n line-height: 2.14;\n text-align: center;\n color: hsl(207, 5%, 57%);\n margin-top: 10px;\n max-width: 386px;\n"])));
4549
+ var Title = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n color: var(--grey-11);\n font-size: 20px;\n"])));
4550
+ 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"])));
4542
4551
 
4543
4552
  var getUpdateFiles = function getUpdateFiles(newFiles, files, allowedFileTypes) {
4544
4553
  var newFilesTransfer = new DataTransfer();
@@ -5168,10 +5177,9 @@ var StyledButton$3 = styled.button(_templateObject3$q || (_templateObject3$q = _
5168
5177
  theme = _ref2.theme;
5169
5178
  return theme && css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n\n ", ";\n ", ";\n\n font-family: ", ";\n transition: opacity ", " ", ";\n\n ", " {\n padding: 0 9px;\n display: flex;\n align-items: center;\n [stroke]{\n stroke: ", ";\n }\n }\n\n &:hover:enabled {\n ", ";\n ", ";\n transition:\n background ", " ", ",\n border ", " ", ";\n }\n\n &:active:enabled {\n ", ";\n ", ";\n }\n\n &:hover:enabled, &:active:enabled {\n ", " {\n [stroke]{\n transition: stroke ", " ", ";\n stroke: ", ";\n }\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 50%;\n }\n"])), styles.filters.filterButton["default"], typography.filters.filterButton["default"], theme.fontFamily.ui, theme.animation.speed.normal, theme.animation.easing.primary.inOut, IconWrapper, theme.colors.icons.dimmed, styles.filters.filterButton.hover, typography.filters.filterButton.hover, animation.speed.fast, animation.easing.primary.inOut, animation.speed.fast, animation.easing.primary.inOut, styles.filters.filterButton.active, typography.filters.filterButton.active, IconWrapper, animation.speed.faster, animation.easing.primary.inOut, theme.colors.pureBase);
5170
5179
  }, function (_ref3) {
5171
- var theme = _ref3.theme,
5172
- isOpen = _ref3.isOpen,
5180
+ var isOpen = _ref3.isOpen,
5173
5181
  hasFlipArrow = _ref3.hasFlipArrow;
5174
- return isOpen && hasFlipArrow && css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n background-color: hsl(205, 100%, 72%);\n border: solid 1px hsl(205, 100%, 72%);\n color: ", ";\n\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n "])), theme.colors.icons.inverse, IconWrapper, theme.colors.icons.inverse);
5182
+ return isOpen && hasFlipArrow && css(_templateObject5$k || (_templateObject5$k = _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);
5175
5183
  });
5176
5184
  var InnerContainer$3 = styled.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
5177
5185
  var ButtonText = styled.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n padding-right: ", ";\n"])), function (_ref4) {
@@ -5211,7 +5219,7 @@ var FilterButton = function FilterButton(_ref5) {
5211
5219
  var _excluded$l = ["title", "value", "optionType", "selected", "disabled", "onClick"];
5212
5220
 
5213
5221
  var _templateObject$x, _templateObject2$w, _templateObject3$r, _templateObject4$n, _templateObject5$l, _templateObject6$i, _templateObject7$h, _templateObject8$f, _templateObject9$f, _templateObject10$d;
5214
- var Title$1 = styled.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n display: block;\n color: hsl(0, 0%, 56%);\n font-size: 14px;\n font-weight: 500;\n margin-left: 12px;\n user-select: none;\n pointer-events: none;\n"])), function (_ref) {
5222
+ var Title$1 = styled.div(_templateObject$x || (_templateObject$x = _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) {
5215
5223
  var theme = _ref.theme;
5216
5224
  return theme.fontFamily.data;
5217
5225
  });
@@ -5227,7 +5235,7 @@ var Container$k = styled.div(_templateObject7$h || (_templateObject7$h = _tagged
5227
5235
  var styles = _ref3.theme.styles,
5228
5236
  selected = _ref3.selected,
5229
5237
  disabled = _ref3.disabled;
5230
- return styles && css(_templateObject8$f || (_templateObject8$f = _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.checked.hover.backgroundColor, FakeCheckbox, styles.form.checkbox.unchecked.hover, FakeRadioButton, styles.form.checkbox.unchecked.hover.borderColor, selected && css(_templateObject9$f || (_templateObject9$f = _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$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))));
5238
+ return styles && css(_templateObject8$f || (_templateObject8$f = _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$f || (_templateObject9$f = _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$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))));
5231
5239
  });
5232
5240
 
5233
5241
  var FilterOption = function FilterOption(_ref4) {
@@ -5471,8 +5479,8 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
5471
5479
  };
5472
5480
 
5473
5481
  var _templateObject$A, _templateObject2$z, _templateObject3$u;
5474
- var Container$n = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 146px;\n border-top: 1px solid hsl(0, 0%, 91%);\n"])));
5475
- var LoadingText = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n ", "\n color: hsl(0, 0%, 55%);\n font-size: 12px;\n font-style: italic;\n padding: 15px 0;\n"])), function (_ref) {
5482
+ var Container$n = styled.div(_templateObject$A || (_templateObject$A = _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"])));
5483
+ var LoadingText = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n ", "\n color: var(--grey-11);\n font-size: 12px;\n font-style: italic;\n padding: 15px 0;\n"])), function (_ref) {
5476
5484
  var theme = _ref.theme;
5477
5485
  return theme && css(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.data);
5478
5486
  });
@@ -5503,7 +5511,7 @@ var ResultsContainer = styled.div(_templateObject6$k || (_templateObject6$k = _t
5503
5511
  var theme = _ref3.theme;
5504
5512
  return theme.colors.divider;
5505
5513
  });
5506
- var ResultCounter = styled.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n opacity: 0.75;\n font-family: ", ";\n color: hsl(0, 0%, 55%);\n font-size: 12px;\n font-style: italic;\n font-weight: 300;\n display: flex;\n align-items: center;\n justify-content: left;\n padding-left: 9px;\n height: 30px;\n margin-bottom: 6px;\n border-bottom: ", " 1px solid;\n"])), function (_ref4) {
5514
+ var ResultCounter = styled.div(_templateObject7$j || (_templateObject7$j = _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;\n"])), function (_ref4) {
5507
5515
  var theme = _ref4.theme;
5508
5516
  return theme.fontFamily.data;
5509
5517
  }, function (_ref5) {
@@ -5511,7 +5519,7 @@ var ResultCounter = styled.div(_templateObject7$j || (_templateObject7$j = _tagg
5511
5519
  return theme.colors.divider;
5512
5520
  });
5513
5521
  var SearchWrapper = styled.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n height: 41px;\n display: flex;\n align-items: center;\n"])));
5514
- var EmptyResultText = styled.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n display: block;\n color: hsl(0, 0%, 56%);\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"])));
5522
+ var EmptyResultText = styled.div(_templateObject9$g || (_templateObject9$g = _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"])));
5515
5523
 
5516
5524
  var isValueSelected = function isValueSelected(item, selected) {
5517
5525
  var isItemSelected = false;
@@ -5749,7 +5757,7 @@ var TopLine$2 = styled.div(_templateObject2$B || (_templateObject2$B = _taggedTe
5749
5757
  var theme = _ref.theme;
5750
5758
  return theme.styles.filters.dropdownContainer.topBorder;
5751
5759
  });
5752
- var InnerBox$1 = styled.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 4px 9px 0 hsla(204, 22%, 67%, 0.07);\n border: solid 1px hsl(207, 16%, 86%);\n border-top: unset;\n ", ";\n"])), function (_ref2) {
5760
+ var InnerBox$1 = styled.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border: solid 1px var(--grey-7);\n border-top: unset;\n ", ";\n"])), function (_ref2) {
5753
5761
  var theme = _ref2.theme;
5754
5762
  return theme.styles.filters.dropdownContainer.background;
5755
5763
  });
@@ -5762,7 +5770,7 @@ var OrderGroup = styled.div(_templateObject6$l || (_templateObject6$l = _taggedT
5762
5770
  var colors = _ref4.theme.colors;
5763
5771
  return colors.divider;
5764
5772
  });
5765
- var OrderButton = styled.button(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n ", ";\n width: 100%;\n display: flex;\n align-items: center;\n font-family: ", ";\n color: hsl(0, 0%, 56%);\n font-size: 14px;\n height: 35px;\n ", "\n"])), resetButtonStyles, function (_ref5) {
5773
+ var OrderButton = styled.button(_templateObject7$k || (_templateObject7$k = _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, function (_ref5) {
5766
5774
  var theme = _ref5.theme;
5767
5775
  return theme.fontFamily.data;
5768
5776
  }, function (_ref6) {
@@ -6073,11 +6081,11 @@ var _excluded$s = ["labelLists", "totalResults", "resultTextTemplate", "clearTex
6073
6081
 
6074
6082
  var _templateObject$F, _templateObject2$D, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$k;
6075
6083
  var Container$s = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 12px;\n min-height: 22px;\n"])));
6076
- var ResultsTextWrapper = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: hsl(207, 5%, 57%);\n"])), function (_ref) {
6084
+ var ResultsTextWrapper = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-9);\n"])), function (_ref) {
6077
6085
  var theme = _ref.theme;
6078
6086
  return theme.fontFamily.ui;
6079
6087
  });
6080
- var FilterLabel = styled.div(_templateObject3$y || (_templateObject3$y = _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: hsl(207, 5%, 57%);\n\n ", ";\n\n ", " {\n display: flex;\n align-items: center;\n }\n border-right: 1px solid hsla(0, 0%, 13%, 0.16);\n"])), function (_ref2) {
6088
+ var FilterLabel = styled.div(_templateObject3$y || (_templateObject3$y = _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\n ", ";\n\n ", " {\n display: flex;\n align-items: center;\n }\n border-right: 1px solid var(--grey-8);\n"])), function (_ref2) {
6081
6089
  var theme = _ref2.theme;
6082
6090
  return theme && css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.data);
6083
6091
  }, IconWrapper);
@@ -6085,7 +6093,7 @@ var FilterLabelText = styled.div(_templateObject5$q || (_templateObject5$q = _ta
6085
6093
  var hasIcon = _ref3.hasIcon;
6086
6094
  return hasIcon ? '0 15px 0 9px' : '0 15px 0 0';
6087
6095
  });
6088
- var ClearTextButton = styled.button(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: ", ";\n color: hsl(216, 4%, 77%);\n margin-left: 11px;\n font-size: 12px;\n"])), resetButtonStyles, function (_ref4) {
6096
+ var ClearTextButton = styled.button(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: ", ";\n color: var(--grey-10);\n margin-left: 11px;\n font-size: 12px;\n"])), resetButtonStyles, function (_ref4) {
6089
6097
  var theme = _ref4.theme;
6090
6098
  return theme.fontFamily.data;
6091
6099
  });
@@ -6181,7 +6189,7 @@ var FiltersResults = function FiltersResults(_ref5) {
6181
6189
  var _excluded$t = ["filtersTitle", "hasShowMore", "searchersConfig", "dropdownsConfig", "datePickersConfig", "showMoreText", "showLessText", "resultTextTemplate", "clearText", "totalResults", "singleFilter", "resultsDateFormat", "onChangeCallback"];
6182
6190
 
6183
6191
  var _templateObject$G, _templateObject2$E, _templateObject3$z;
6184
- var Title$2 = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: hsl(207, 5%, 57%);\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 17px;\n"])), function (_ref) {
6192
+ var Title$2 = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-10);\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 17px;\n"])), function (_ref) {
6185
6193
  var theme = _ref.theme;
6186
6194
  return theme.fontFamily.ui;
6187
6195
  });
@@ -6622,7 +6630,7 @@ var StatusCounter = styled.div(_templateObject2$F || (_templateObject2$F = _tagg
6622
6630
  }, function (_ref2) {
6623
6631
  var theme = _ref2.theme,
6624
6632
  color = _ref2.color;
6625
- return color ? theme.colors.status[color] : 'hsla(0, 0%, 91.8%, 0)';
6633
+ return color ? theme.colors.status[color] : 'var(--grey-5)';
6626
6634
  });
6627
6635
  var StatusDot = styled.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n width: 6px;\n height: 6px;\n border-radius: 50%;\n position: absolute;\n top: -4px;\n right: -7px;\n ", "\n background-color: ", ";\n"])), function (_ref3) {
6628
6636
  var animation = _ref3.theme.animation;
@@ -6630,7 +6638,7 @@ var StatusDot = styled.div(_templateObject4$u || (_templateObject4$u = _taggedTe
6630
6638
  }, function (_ref4) {
6631
6639
  var theme = _ref4.theme,
6632
6640
  color = _ref4.color;
6633
- return color ? theme.colors.status[color] : 'hsla(0, 0%, 91.8%, 0)';
6641
+ return color ? theme.colors.status[color] : 'var(--grey-5)';
6634
6642
  });
6635
6643
 
6636
6644
  var StatusIcon = function StatusIcon(_ref5) {
@@ -8581,7 +8589,7 @@ var MediaBoxWrapper = styled.div(_templateObject$T || (_templateObject$T = _tagg
8581
8589
  var minWidth = _ref2.minWidth;
8582
8590
  return minWidth && "min-width: " + minWidth;
8583
8591
  });
8584
- var mediaStyle = "\n max-width: 100%;\n max-height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n";
8592
+ var mediaStyle = "\n max-width: 100%;\n max-height: 100%;\n border-radius: 3px;\n background-color: var(--grey-11);\n";
8585
8593
  var LoadingOverlay$3 = styled.div(_templateObject2$O || (_templateObject2$O = _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"])));
8586
8594
  var Video$3 = styled.video(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n ", ";\n outline: none;\n\n ", ";\n"])), mediaStyle, function (_ref3) {
8587
8595
  var theme = _ref3.theme,
@@ -8692,7 +8700,7 @@ var MediaBox = function MediaBox(_ref5) {
8692
8700
  };
8693
8701
 
8694
8702
  var _templateObject$U, _templateObject2$P, _templateObject3$I, _templateObject4$C, _templateObject5$z, _templateObject6$s, _templateObject7$r;
8695
- var Container$C = styled.div(_templateObject$U || (_templateObject$U = _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: hsla(202, 33%, 95%, 0.51);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n z-index: 999;\n ", "\n\n font-family: ", ";\n ", ";\n"])), function (_ref) {
8703
+ var Container$C = styled.div(_templateObject$U || (_templateObject$U = _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) {
8696
8704
  var theme = _ref.theme;
8697
8705
  return theme && css(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose([""])));
8698
8706
  }, function (_ref2) {
@@ -8709,7 +8717,7 @@ var CloseButton = styled.button(_templateObject4$C || (_templateObject4$C = _tag
8709
8717
  }, IconWrapper, function (_ref5) {
8710
8718
  var _ref5$selected = _ref5.selected,
8711
8719
  selected = _ref5$selected === void 0 ? false : _ref5$selected;
8712
- return selected && css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid hsl(207, 80%, 64%);\n "])));
8720
+ return selected && css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
8713
8721
  }, function (_ref6) {
8714
8722
  var theme = _ref6.theme;
8715
8723
  return theme && css(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n opacity: .8;\n transition: transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.inOut);
@@ -8994,7 +9002,7 @@ var Image$2 = styled.img(_templateObject6$t || (_templateObject6$t = _taggedTemp
8994
9002
  var showImage = _ref5.showImage;
8995
9003
  return showImage === true ? 'block' : 'none';
8996
9004
  });
8997
- var PlayableDrop = styled.div(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: hsla(0, 0%, 0%, .5);\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: hsla(0, 0%, 100%, 1.000);\n }\n }\n };\n"])), IconWrapper);
9005
+ var PlayableDrop = styled.div(_templateObject7$s || (_templateObject7$s = _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);
8998
9006
 
8999
9007
  var TableRowThumbnail = function TableRowThumbnail(_ref6) {
9000
9008
  var _ref6$hoverZoom = _ref6.hoverZoom,
@@ -9494,12 +9502,12 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
9494
9502
  var _templateObject$$, _templateObject2$W, _templateObject3$N, _templateObject4$H, _templateObject5$D;
9495
9503
  var Container$F = styled.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose([""])));
9496
9504
  var TableContainer = styled.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n display: table;\n width: 100%;\n position: relative;\n"])));
9497
- var LoadingText$1 = styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n color: hsla(195, 10%, 52%, 0.72);\n"])));
9505
+ var LoadingText$1 = styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n color: var(--grey-a11);\n"])));
9498
9506
  var LoadingBox$1 = styled.div(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n z-index: 99;\n background-color: ", ";\n height: calc(100% - 50px);\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) {
9499
9507
  var theme = _ref.theme;
9500
9508
  return theme.styles.tables.loadingOverlay;
9501
9509
  }, LoadingText$1);
9502
- var EmptyTableBox = styled.div(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n z-index: 99;\n padding: 20px;\n width: 100%;\n min-height: 100px;\n text-align: center;\n h3 {\n font-weight: 500;\n color: hsl(208, 8%, 38%);\n }\n color: hsl(207, 5%, 57%);\n"])));
9510
+ var EmptyTableBox = styled.div(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n z-index: 99;\n padding: 20px;\n width: 100%;\n min-height: 100px;\n text-align: center;\n h3 {\n font-weight: 500;\n color: var(--grey-11);\n }\n color: var(--grey-10);\n"])));
9503
9511
 
9504
9512
  var isChecked = function isChecked(_ref2) {
9505
9513
  var _ref2$_checked = _ref2._checked,
@@ -9595,7 +9603,7 @@ var Container$G = styled.div(_templateObject$10 || (_templateObject$10 = _tagged
9595
9603
  var StyledButton$4 = styled(Button)(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9596
9604
  var StyledLoadingButton = styled(ButtonWithLoading)(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9597
9605
  var StyledLink = styled(Link)(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n color: inherit;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n"])));
9598
- var EditContainer = styled.div(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n min-width: 320px;\n background-color: hsl(0, 0%, 100%);\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$4, StyledLoadingButton);
9606
+ var EditContainer = styled.div(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n min-width: 320px;\n background-color: var(--gray-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$4, StyledLoadingButton);
9599
9607
  var StyledIconButton$1 = styled(IconButton$2)(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose([""])));
9600
9608
  var TextContainer$2 = 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) {
9601
9609
  var alignment = _ref2.alignment;
@@ -11427,25 +11435,25 @@ var LeftData = styled.div(_templateObject2$13 || (_templateObject2$13 = _taggedT
11427
11435
  }, IconWrapper);
11428
11436
  var RightData = styled.div(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["\n padding: 0 12px 0 16px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
11429
11437
  var DeviceDataGroup = styled.div(_templateObject5$M || (_templateObject5$M = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n justify-content: center;\n"])));
11430
- var LeftTitle = styled.div(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n ", ";\n ", "};\n ", ";\n\n color: hsla(195, 10%, 52%, 0.72);\n font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
11438
+ var LeftTitle = styled.div(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n ", ";\n ", "};\n ", ";\n\n color: var(--grey-a10);\n font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
11431
11439
  var hasRightData = _ref2.hasRightData;
11432
11440
  return hasRightData ? "max-margin: 140px;" : "max-margin: 250px;";
11433
11441
  }, function (_ref3) {
11434
11442
  var hasMarginBottom = _ref3.hasMarginBottom;
11435
11443
  return hasMarginBottom && "margin-bottom: 1px;";
11436
11444
  });
11437
- var LeftSubTitle = styled.div(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n ", "\n\n color: hsl(208, 8%, 38%);\n font-size: 16px;\n"])), function (_ref4) {
11445
+ var LeftSubTitle = styled.div(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n ", "\n\n color: var(--grey-11);\n font-size: 16px;\n"])), function (_ref4) {
11438
11446
  var theme = _ref4.theme;
11439
11447
  return theme.fontFamily.data;
11440
11448
  }, EllipsisStyles, function (_ref5) {
11441
11449
  var hasRightData = _ref5.hasRightData;
11442
11450
  return hasRightData ? "max-width: 140px;" : "max-width: 250px;";
11443
11451
  });
11444
- var Title$5 = styled.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: hsla(195, 10%, 52%, 0.72);\n font-size: 10px;\n ", ";\n"])), EllipsisStyles, function (_ref6) {
11452
+ 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 (_ref6) {
11445
11453
  var hasMarginBottom = _ref6.hasMarginBottom;
11446
11454
  return hasMarginBottom && "margin-bottom: 6px;";
11447
11455
  });
11448
- var SubTitle = styled.div(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: hsl(195, 10%, 52%);\n font-size: 12px;\n"])), EllipsisStyles);
11456
+ var SubTitle = styled.div(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: var(--grey-11);\n font-size: 12px;\n"])), EllipsisStyles);
11449
11457
 
11450
11458
  var PanelMetaData = function PanelMetaData(_ref7) {
11451
11459
  var _ref7$deviceIcon = _ref7.deviceIcon,
@@ -11479,7 +11487,7 @@ var PanelMetaData = function PanelMetaData(_ref7) {
11479
11487
  var _excluded$A = ["streamProps", "panelMetaData", "customBottom", "panelOnClick"];
11480
11488
 
11481
11489
  var _templateObject$1a;
11482
- var CameraPanelWrapper = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n width: 300px;\n height: 230px;\n border-radius: 3px;\n box-shadow: 0 2px 10px 0 hsla(211, 42%, 86%, 0.41);\n background-color: ", ";\n }\n\n ", ";\n"])), function (_ref) {
11490
+ var CameraPanelWrapper = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n width: 300px;\n height: 230px;\n border-radius: 3px;\n box-shadow: 0 2px 10px 0 var(--grey-a5);\n background-color: ", ";\n }\n\n ", ";\n"])), function (_ref) {
11483
11491
  var theme = _ref.theme;
11484
11492
  return theme.styles.global.background.backgroundImage;
11485
11493
  }, function (_ref2) {
@@ -11517,7 +11525,7 @@ var _excluded$B = ["icon", "size", "weight", "label", "linkTo"];
11517
11525
  var _templateObject$1c, _templateObject2$14, _templateObject3$X, _templateObject4$R;
11518
11526
  var TextContainer$3 = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
11519
11527
  var StyledLink$1 = styled(Link)(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n"])));
11520
- var TagWrapper = styled.div(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n font-size: ", "px;\n font-weight: 500;\n color: hsl(200, 3%, 39%);\n padding: 4px 10px;\n border: solid 1px hsl(120, 1%, 85%);\n display: inline-flex;\n align-items: center;\n border-radius: 3px;\n height: 26px;\n\n ", " {\n [stroke]{\n ", ";\n }\n margin-right: 8px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n ", ";\n"])), function (_ref) {
11528
+ var TagWrapper = styled.div(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n font-size: ", "px;\n font-weight: 500;\n color: var(--grey-11);\n padding: 4px 10px;\n border: solid 1px var(--grey-8);\n display: inline-flex;\n align-items: center;\n border-radius: 3px;\n height: 26px;\n\n ", " {\n [stroke]{\n ", ";\n }\n margin-right: 8px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n ", ";\n"])), function (_ref) {
11521
11529
  var theme = _ref.theme;
11522
11530
  return theme.fontFamily.ui;
11523
11531
  }, function (_ref2) {
@@ -11612,14 +11620,14 @@ var _excluded$D = ["design", "size", "position", "text"];
11612
11620
 
11613
11621
  var _templateObject$1e, _templateObject2$15, _templateObject3$Y, _templateObject4$S, _templateObject5$N, _templateObject6$A;
11614
11622
  var Container$Q = styled.div(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose([""])));
11615
- var Title$6 = styled.div(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: hsl(207, 5%, 57%);\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 17px;\n"])), function (_ref) {
11623
+ var Title$6 = styled.div(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-10);\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 17px;\n"])), function (_ref) {
11616
11624
  var theme = _ref.theme;
11617
11625
  return theme.fontFamily.ui;
11618
11626
  });
11619
11627
  var ButtonsWrapper$1 = styled.div(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
11620
11628
  var LeftButtons = styled.div(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["\n button {\n margin: 0 10px 10px 0;\n }\n"])));
11621
11629
  var RightButtons = styled.div(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
11622
- var SelectedResults = styled.div(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-top: 29px;\n min-height: 19px;\n color: hsl(207, 5%, 57%);\n font-size: 12px;\n"])), function (_ref2) {
11630
+ var SelectedResults = styled.div(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-top: 29px;\n min-height: 19px;\n color: var(--grey-10);\n font-size: 12px;\n"])), function (_ref2) {
11623
11631
  var theme = _ref2.theme;
11624
11632
  return theme.fontFamily.ui;
11625
11633
  });
@@ -12738,16 +12746,16 @@ var UserMenu = function UserMenu(_ref7) {
12738
12746
  var _templateObject$1m, _templateObject2$1d, _templateObject3$14, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$C, _templateObject8$y;
12739
12747
  var Container$U = styled.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 18px 20px 12px 20px;\n height: 122px;\n"])));
12740
12748
  var ImgWrapper = styled.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n overflow: hidden;\n height: 40px;\n width: 40px;\n flex-shrink: 0;\n"])));
12741
- var EmptyImg = styled.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n background-color: hsl(210, 22%, 91%);\n width: 100%;\n height: 100%;\n"])));
12742
- var Image$3 = styled.div(_templateObject4$_ || (_templateObject4$_ = _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) {
12749
+ var EmptyImg = styled.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-5);\n width: 100%;\n height: 100%;\n"])));
12750
+ var Image$3 = styled.div(_templateObject4$_ || (_templateObject4$_ = _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) {
12743
12751
  return p.image;
12744
12752
  }, function (p) {
12745
12753
  return p.image ? 'block' : 'none';
12746
12754
  });
12747
12755
  var InfoContainer = styled.div(_templateObject5$U || (_templateObject5$U = _taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
12748
- var Title$9 = styled.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n font-weight: 500;\n color: hsl(0, 0%, 34%);\n"])));
12749
- var Message = styled.div(_templateObject7$C || (_templateObject7$C = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n overflow: hidden;\n color: hsl(0, 0%, 34%);\n margin: 4px 0;\n height: 30px;\n text-overflow: ellipsis;\n overflow: hidden;\n display: inline-block;\n vertical-align: middle;\n"])));
12750
- var TimeMsg = styled.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n color: hsl(0, 0%, 67%);\n margin-top: 15px;\n"])));
12756
+ var Title$9 = styled.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n font-weight: 500;\n color: var(--grey-11);\n"])));
12757
+ var Message = styled.div(_templateObject7$C || (_templateObject7$C = _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"])));
12758
+ var TimeMsg = styled.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n color: var(--grey-12);\n margin-top: 15px;\n"])));
12751
12759
 
12752
12760
  var NotificationItem = function NotificationItem(_ref) {
12753
12761
  var imgUrl = _ref.imgUrl,
@@ -12761,7 +12769,7 @@ var NotificationItem = function NotificationItem(_ref) {
12761
12769
 
12762
12770
  var _templateObject$1n, _templateObject2$1e, _templateObject3$15;
12763
12771
  var Container$V = styled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
12764
- var StatusContainer = styled.h2(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n padding: 10px 0 10px 20px;\n font-size: 14px;\n font-weight: 500;\n color: hsl(0, 0%, 34%);\n border-bottom: ", " 1px solid;\n margin: 0;\n"])), function (_ref) {
12772
+ var StatusContainer = styled.h2(_templateObject2$1e || (_templateObject2$1e = _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) {
12765
12773
  var theme = _ref.theme;
12766
12774
  return theme.colors.divider;
12767
12775
  });
@@ -12799,7 +12807,7 @@ var _templateObject$1o, _templateObject2$1f, _templateObject3$16, _templateObjec
12799
12807
  var Container$W = styled.div(_templateObject$1o || (_templateObject$1o = _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) {
12800
12808
  var theme = _ref.theme,
12801
12809
  colors = _ref.theme.colors;
12802
- return colors && css(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n // box-shadow: 5px 7px 10px 0 hsla(205, 16%, 77%, 0.1);\n background-color:", ";\n "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.styles.global.mainMenu.background.backgroundColor);
12810
+ return colors && css(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n background-color:", ";\n "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.styles.global.mainMenu.background.backgroundColor);
12803
12811
  });
12804
12812
  var SearchBar = styled.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n margin-left: 25px;\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
12805
12813
  var IconWrapper$3 = styled.div(_templateObject4$$ || (_templateObject4$$ = _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"])));
@@ -13011,10 +13019,10 @@ var TabLabel = styled.label(_templateObject2$1g || (_templateObject2$1g = _tagge
13011
13019
  return active ? '600' : '500';
13012
13020
  }, function (_ref3) {
13013
13021
  var active = _ref3.active;
13014
- return active ? '#0097ce' : '#787878';
13022
+ return active ? 'var(--primary-11)' : 'var(--grey-11)';
13015
13023
  }, function (_ref4) {
13016
13024
  var active = _ref4.active;
13017
- return active ? '2px solid #0097ce' : '2px solid transparent';
13025
+ return active ? '2px solid var(--primary-11)' : '2px solid transparent';
13018
13026
  });
13019
13027
 
13020
13028
  var Tab = function Tab(_ref5) {
@@ -13101,16 +13109,16 @@ var _excluded$H = ["icon", "title", "subtitle", "tabFor"];
13101
13109
  var _templateObject$1t, _templateObject2$1i, _templateObject3$19, _templateObject4$11, _templateObject5$W, _templateObject6$I;
13102
13110
  var Container$Z = styled.div(_templateObject$1t || (_templateObject$1t = _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) {
13103
13111
  var active = _ref.active;
13104
- return active ? css(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid hsl(196, 100%, 40%);\n "]))) : css(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
13112
+ return active ? css(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : css(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
13105
13113
  }, IconWrapper);
13106
13114
  var Title$a = styled.div(_templateObject4$11 || (_templateObject4$11 = _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) {
13107
13115
  var theme = _ref2.theme;
13108
13116
  return theme.fontFamily.ui;
13109
13117
  }, function (_ref3) {
13110
13118
  var active = _ref3.active;
13111
- return active ? 'hsl(196, 100%, 40%)' : 'hsl(0, 0%, 46%)';
13119
+ return active ? 'var(--primary-11)' : 'var(--grey-11)';
13112
13120
  });
13113
- var SubTitle$2 = styled.div(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n font-family: ", ";\n font-style: italic;\n color: hsla(195, 10%, 52%, 0.72);\n flex-shrink: 0;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (_ref4) {
13121
+ var SubTitle$2 = styled.div(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n font-family: ", ";\n font-style: italic;\n color: var(--grey-a10);\n flex-shrink: 0;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (_ref4) {
13114
13122
  var theme = _ref4.theme;
13115
13123
  return theme.fontFamily.data;
13116
13124
  });
@@ -13150,7 +13158,7 @@ var TabWithIcon = function TabWithIcon(_ref5) {
13150
13158
 
13151
13159
  var _templateObject$1u, _templateObject2$1j;
13152
13160
  var Container$_ = styled.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose([""])));
13153
- var TabListWrapper$1 = styled.div(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n padding-top: 10px;\n padding-left: ", ";\n box-shadow: 0 -5px 5px 0 hsla(0, 0%, 0%, 0.01);\n border-bottom: 1px solid hsl(0, 0%, 89%);\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) {
13161
+ var TabListWrapper$1 = styled.div(_templateObject2$1j || (_templateObject2$1j = _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) {
13154
13162
  var paddingLeft = _ref.paddingLeft;
13155
13163
  return paddingLeft ? paddingLeft : '87px';
13156
13164
  });