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.js CHANGED
@@ -194,28 +194,28 @@ var typography = {
194
194
  "fontSize": "16px",
195
195
  "fontWeight": 600,
196
196
  "textDecoration": "none",
197
- "color": "var(--grey-11)"
197
+ "color": "var(--white-1)"
198
198
  },
199
199
  "large": {
200
200
  "textAlign": "center",
201
201
  "fontSize": "20px",
202
202
  "fontWeight": 600,
203
203
  "textDecoration": "none",
204
- "color": "var(--grey-11)"
204
+ "color": "var(--white-1)"
205
205
  },
206
206
  "small": {
207
207
  "textAlign": "center",
208
208
  "fontSize": "14px",
209
209
  "fontWeight": 600,
210
210
  "textDecoration": "none",
211
- "color": "var(--grey-11)"
211
+ "color": "var(--white-1)"
212
212
  },
213
213
  "xsmall": {
214
214
  "textAlign": "center",
215
215
  "fontSize": "12px",
216
216
  "fontWeight": 600,
217
217
  "textDecoration": "none",
218
- "color": "var(--grey-11)"
218
+ "color": "var(--white-1)"
219
219
  }
220
220
  },
221
221
  "primary": {
@@ -313,7 +313,7 @@ var typography = {
313
313
  "fontWeight": 500,
314
314
  "lineHeight": "25px",
315
315
  "textDecoration": "none",
316
- "color": "var(--grey-11)"
316
+ "color": "var(--grey-12)"
317
317
  },
318
318
  "compact": {
319
319
  "textAlign": "left",
@@ -321,7 +321,7 @@ var typography = {
321
321
  "fontWeight": 500,
322
322
  "lineHeight": "15px",
323
323
  "textDecoration": "none",
324
- "color": "var(--grey-11)"
324
+ "color": "var(--grey-12)"
325
325
  }
326
326
  }
327
327
  },
@@ -451,7 +451,7 @@ var typography = {
451
451
  "fontSize": "14px",
452
452
  "fontWeight": 300,
453
453
  "textDecoration": "none",
454
- "color": "var(--grey-11)"
454
+ "color": "var(--grey-12)"
455
455
  },
456
456
  "placeholder": {
457
457
  "textAlign": "left",
@@ -533,7 +533,7 @@ var typography = {
533
533
  "fontSize": "14px",
534
534
  "fontWeight": 600,
535
535
  "textDecoration": "none",
536
- "color": "var(--grey-11)"
536
+ "color": "var(--grey-12)"
537
537
  }
538
538
  },
539
539
  "meta": {
@@ -748,7 +748,7 @@ var typography = {
748
748
  "fontSize": "14px",
749
749
  "fontWeight": 400,
750
750
  "textDecoration": "none",
751
- "color": "var(--grey-a11)"
751
+ "color": "var(--grey-a8)"
752
752
  },
753
753
  "default": {
754
754
  "textAlign": "center",
@@ -762,7 +762,7 @@ var typography = {
762
762
  "fontSize": "12px",
763
763
  "fontWeight": 700,
764
764
  "textDecoration": "none",
765
- "color": "calendar: "
765
+ "color": "var(--grey-a12)"
766
766
  }
767
767
  },
768
768
  "monthLink": {
@@ -774,7 +774,7 @@ var typography = {
774
774
  "textTransform": "uppercase",
775
775
  "letterSpacing": "0.4px",
776
776
  "textDecoration": "none",
777
- "color": "var(--grey-8)"
777
+ "color": "var(--grey-9)"
778
778
  },
779
779
  "hover": {
780
780
  "textAlign": "center",
@@ -828,7 +828,7 @@ var typography = {
828
828
  "fontSize": "13px",
829
829
  "fontWeight": 500,
830
830
  "textDecoration": "none",
831
- "color": "var(--white-11)"
831
+ "color": "var(--grey-a12)"
832
832
  }
833
833
  },
834
834
  "presetAction": {
@@ -836,7 +836,7 @@ var typography = {
836
836
  "fontSize": "13px",
837
837
  "fontWeight": 500,
838
838
  "textDecoration": "none",
839
- "color": "var(--white-11)"
839
+ "color": "var(--gray-12)"
840
840
  },
841
841
  "filterButton": {
842
842
  "default": {
@@ -875,7 +875,7 @@ var typography = {
875
875
  "fontSize": "12px",
876
876
  "fontWeight": 400,
877
877
  "textDecoration": "none",
878
- "color": "var(--grey-11)"
878
+ "color": "var(--grey-12)"
879
879
  }
880
880
  }
881
881
  },
@@ -894,7 +894,7 @@ var typography = {
894
894
  "textAlign": "left",
895
895
  "fontSize": "20px",
896
896
  "fontWeight": 400,
897
- "textShadow": "0px 0px 10px #ffffffcc",
897
+ "textShadow": "0px 0px 10px var(--white-a5)",
898
898
  "textDecoration": "none",
899
899
  "color": "var(--grey-11)"
900
900
  },
@@ -914,17 +914,18 @@ var colors = {
914
914
  "pureTop": "var(--black-1)",
915
915
  "divider": "var(--grey-6)",
916
916
  "icons": {
917
- "inverse": "var(--white-1)",
918
- "mono": "var(--black-9)",
919
- "dimmed": "var(--grey-9)",
920
- "subtle": "var(--white-9)",
917
+ "inverse": "var(--grey-1)",
918
+ "mono": "var(--grey-12)",
919
+ "dimmed": "var(--grey-11)",
920
+ "subtle": "var(--grey-10)",
921
921
  "primary": "var(--primary-9)",
922
- "danger": "var(--error-9)"
922
+ "danger": "var(--error-9)",
923
+ "white": "var(--white-1)"
923
924
  },
924
925
  "menu": {
925
926
  "active": "var(--primary-9)",
926
- "hover": "var(--primary-6)",
927
- "default": "var(--primary-a6)",
927
+ "hover": "var(--primary-8)",
928
+ "default": "var(--gray-2)",
928
929
  "indicator": "var(--grey-a1)",
929
930
  "passive": "var(--primary-a7)"
930
931
  },
@@ -936,7 +937,7 @@ var colors = {
936
937
  "warning": "var(--warning-8)"
937
938
  },
938
939
  "status": {
939
- "caution": "var(--warning-7)",
940
+ "caution": "var(--warning-10)",
940
941
  "danger": "var(--error-8)",
941
942
  "folder": "var(--primary-7)",
942
943
  "highlight": "var(--primary-7)",
@@ -959,13 +960,13 @@ var styles = {
959
960
  "input": {
960
961
  "default": {
961
962
  "normal": {
962
- "backgroundColor": "var(--white-1)",
963
+ "backgroundColor": "var(--grey-1)",
963
964
  "borderColor": colors.input.border["default"],
964
965
  "border": colors.input.border["default"] + " 1px solid"
965
966
  },
966
967
  "focused": {
967
- "boxShadow": "0px 3px 7px 0px var(--primary-a11)",
968
- "backgroundColor": "var(--white-1)",
968
+ "boxShadow": "0px 3px 7px 0px var(--primary-a2)",
969
+ "backgroundColor": "var(--grey-1)",
969
970
  "borderColor": "var(--primary-7)",
970
971
  "border": "var(--primary-7) 1px solid"
971
972
  }
@@ -982,49 +983,52 @@ var styles = {
982
983
  },
983
984
  "required": {
984
985
  "focused": {
985
- "boxShadow": "0px 3px 7px 0px var(--primary-a11)",
986
- "backgroundColor": "var(--white-1)",
986
+ "boxShadow": "0px 3px 7px 0px var(--primary-a2)",
987
+ "backgroundColor": "var(--grey-1)",
987
988
  "borderColor": "var(--primary-7)",
988
989
  "border": "var(--primary-7) 2px solid"
989
990
  },
990
991
  "normal": {
991
992
  "borderColor": "var(--primary-7)",
992
- "border": "var(--primary-7) 1px solid"
993
+ "border": "var(--primary-7) 1px solid",
994
+ "backgroundColor": "var(--grey-1)"
993
995
  }
994
996
  },
995
997
  "valid": {
996
998
  "focused": {
997
- "boxShadow": "0px 3px 5px 0px var(--success-a12)",
998
- "backgroundColor": "var(--white-1)",
999
+ "boxShadow": "0px 3px 5px 0px var(--success-a2)",
1000
+ "backgroundColor": "var(--grey-1)",
999
1001
  "borderColor": "var(--success-7)",
1000
1002
  "border": "var(--success-7) 2px solid"
1001
1003
  },
1002
1004
  "normal": {
1003
1005
  "borderColor": "var(--success-7)",
1004
- "border": "var(--success-7) 1px solid"
1006
+ "border": "var(--success-7) 1px solid",
1007
+ "backgroundColor": "var(--grey-1)"
1005
1008
  }
1006
1009
  },
1007
1010
  "invalid": {
1008
1011
  "focused": {
1009
- "boxShadow": "0px 3px 7px 0px var(--error-a1)",
1010
- "backgroundColor": "var(--white-1)",
1012
+ "boxShadow": "0px 3px 7px 0px var(--error-a2)",
1013
+ "backgroundColor": "var(--grey-1)",
1011
1014
  "borderColor": "var(--error-8)",
1012
1015
  "border": "var(--error-8) 2px solid"
1013
1016
  },
1014
1017
  "normal": {
1015
1018
  "borderColor": "var(--error-8)",
1016
- "border": "var(--error-8) 1px solid"
1019
+ "border": "var(--error-8) 1px solid",
1020
+ "backgroundColor": "var(--grey-1)"
1017
1021
  }
1018
1022
  },
1019
1023
  "processing": {
1020
1024
  "focused": {
1021
- "boxShadow": "0px 3px 7px 0px var(--primary-a10)",
1022
- "backgroundColor": "var(--white-1)",
1025
+ "boxShadow": "0px 3px 7px 0px var(--primary-a2)",
1026
+ "backgroundColor": "var(--grey-1)",
1023
1027
  "borderColor": "var(--primary-7)",
1024
1028
  "border": "var(--primary-7) 2px solid"
1025
1029
  },
1026
1030
  "normal": {
1027
- "backgroundColor": "var(--white-1)",
1031
+ "backgroundColor": "var(--grey-1)",
1028
1032
  "borderColor": "var(--primary-7)",
1029
1033
  "border": "var(--primary-7) 1px solid"
1030
1034
  }
@@ -1042,45 +1046,46 @@ var styles = {
1042
1046
  "button": {
1043
1047
  "primary": {
1044
1048
  "default": {
1045
- "backgroundColor": "var(--primary-7)",
1046
- "backgroundImage": "linear-gradient(135.00deg, var(--primary-7) 0%, var(--primary-7) 100%)"
1049
+ "backgroundColor": "var(--primary-9)",
1050
+ "backgroundImage": "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
1047
1051
  },
1048
1052
  "hover": {
1049
- "backgroundColor": "var(--primary-8)"
1053
+ "backgroundColor": "var(--primary-10)"
1050
1054
  },
1051
1055
  "active": {
1052
- "backgroundColor": "var(--primary-7)"
1056
+ "backgroundColor": "var(--primary-9)"
1053
1057
  },
1054
1058
  "divider": {
1055
- "backgroundColor": "var(--primary-7)"
1059
+ "backgroundColor": "var(--primary-a8)"
1056
1060
  },
1057
1061
  "disabled": {
1058
- "backgroundColor": "var(--primary-7)",
1059
- "backgroundImage": "linear-gradient(135.00deg, var(--primary-7) 0%, var(--primary-7) 100%)"
1062
+ "backgroundColor": "var(--primary-a10)",
1063
+ "backgroundImage": "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
1060
1064
  },
1061
1065
  "actionArea": {
1062
- "backgroundColor": "var(--primary-7)",
1063
- "backgroundImage": "linear-gradient(135.00deg, var(--primary-7) 0%, var(--primary-7) 100%)"
1066
+ "backgroundColor": "var(--primary-9)",
1067
+ "backgroundImage": "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
1064
1068
  }
1065
1069
  },
1066
1070
  "secondary": {
1067
1071
  "default": {
1068
- "backgroundColor": "var(--grey-5)"
1072
+ "backgroundColor": "var(--grey-9)"
1069
1073
  },
1070
1074
  "hover": {
1071
- "backgroundColor": "var(--grey-5)"
1075
+ "backgroundColor": "var(--grey-10)"
1072
1076
  },
1073
1077
  "active": {
1074
- "backgroundColor": "var(--grey-6)"
1078
+ "backgroundColor": "var(--grey-9)"
1075
1079
  },
1076
1080
  "disabled": {
1077
- "backgroundColor": "var(--grey-2)"
1081
+ "backgroundColor": "var(--grey-a10)"
1078
1082
  },
1079
1083
  "divider": {
1080
1084
  "backgroundColor": "var(--grey-a8)"
1081
1085
  },
1082
1086
  "actionArea": {
1083
- "backgroundColor": "var(--grey-a3)"
1087
+ "backgroundColor": "var(--grey-9)",
1088
+ "backgroundImage": "linear-gradient(135.00deg, var(--grey-9) 0%, var(--grey-8) 100%)"
1084
1089
  }
1085
1090
  },
1086
1091
  "danger": {
@@ -1089,13 +1094,13 @@ var styles = {
1089
1094
  "backgroundImage": "linear-gradient(317.51deg, var(--error-9) 0%, var(--error-8) 100%)"
1090
1095
  },
1091
1096
  "hover": {
1092
- "backgroundColor": "var(--error-9)"
1097
+ "backgroundColor": "var(--error-10)"
1093
1098
  },
1094
1099
  "active": {
1095
- "backgroundColor": "var(--error-8)"
1100
+ "backgroundColor": "var(--error-9)"
1096
1101
  },
1097
1102
  "disabled": {
1098
- "backgroundColor": "var(--error-6)"
1103
+ "backgroundColor": "var(--error-a10)"
1099
1104
  },
1100
1105
  "divider": {
1101
1106
  "backgroundColor": "var(--error-8)"
@@ -1122,8 +1127,8 @@ var styles = {
1122
1127
  },
1123
1128
  "disabled": {
1124
1129
  "outer": {
1125
- "backgroundColor": "var(--white-1)",
1126
- "backgroundImage": "linear-gradient(180.00deg, var(--white-1) 0%, var(--grey-1) 100%)",
1130
+ "backgroundColor": "var(--grey-1)",
1131
+ "backgroundImage": "linear-gradient(180.00deg, var(--grey-1)0%, var(--grey-1) 100%)",
1127
1132
  "borderColor": "var(--grey-a7)",
1128
1133
  "border": "var(--grey-a7) 1px solid"
1129
1134
  },
@@ -1231,13 +1236,13 @@ var styles = {
1231
1236
  "locked": {
1232
1237
  "default": {
1233
1238
  "outer": {
1234
- "backgroundColor": "var(--white-1)",
1235
- "backgroundImage": "linear-gradient(180.00deg, var(--white-1) 0%, var(--grey-1) 100%)",
1236
- "borderColor": "var(--grey-a7)",
1237
- "border": "var(--grey-a7) 1px solid"
1239
+ "backgroundColor": "var(--grey-1) ",
1240
+ "backgroundImage": "linear-gradient(180.00deg, var(--grey-1) 0%, var(--grey-1) 100%)",
1241
+ "borderColor": "var(--grey-a8)",
1242
+ "border": "var(--grey-a8) 1px solid"
1238
1243
  },
1239
1244
  "inner": {
1240
- "backgroundColor": "var(--grey-6)"
1245
+ "backgroundColor": "var(--grey-8)"
1241
1246
  }
1242
1247
  }
1243
1248
  }
@@ -1250,12 +1255,12 @@ var styles = {
1250
1255
  "border": "var(--grey-6) 2px solid"
1251
1256
  },
1252
1257
  "default": {
1253
- "borderColor": "var(--grey-8)",
1254
- "border": "var(--grey-8) 2px solid"
1258
+ "borderColor": "var(--grey-9)",
1259
+ "border": "var(--grey-9) 2px solid"
1255
1260
  },
1256
1261
  "hover": {
1257
- "borderColor": "var(--primary-7)",
1258
- "border": "var(--primary-7) 2px solid"
1262
+ "borderColor": "var(--primary-8)",
1263
+ "border": "var(--primary-8) 2px solid"
1259
1264
  }
1260
1265
  },
1261
1266
  "checked": {
@@ -1265,11 +1270,11 @@ var styles = {
1265
1270
  },
1266
1271
  "default": {
1267
1272
  "boxShadow": "inset 0px 1px 5px 0px var(--grey-a1)",
1268
- "backgroundColor": "var(--primary-7)"
1273
+ "backgroundColor": "var(--primary-8)"
1269
1274
  },
1270
1275
  "hover": {
1271
1276
  "boxShadow": "inset 0px 1px 5px 0px var(--grey-a1)",
1272
- "backgroundColor": "var(--primary-7)"
1277
+ "backgroundColor": "var(--primary-8)"
1273
1278
  }
1274
1279
  },
1275
1280
  "indeterminate": {
@@ -1315,7 +1320,7 @@ var styles = {
1315
1320
  "drawer": {
1316
1321
  "background": {
1317
1322
  "boxShadow": "-5px 0px 10px 0px var(--white-a2)",
1318
- "backgroundColor": "var(--white-1)"
1323
+ "backgroundColor": "var(--grey-1)"
1319
1324
  }
1320
1325
  },
1321
1326
  "topBar": {
@@ -1372,7 +1377,7 @@ var styles = {
1372
1377
  "dropdownContainer": {
1373
1378
  "background": {
1374
1379
  "boxShadow": "0px 5px 25px 0px var(--primary-a1)",
1375
- "backgroundColor": "var(--white-1)",
1380
+ "backgroundColor": "var(--grey-1)",
1376
1381
  "borderColor": "var(--grey-6)",
1377
1382
  "border": "var(--grey-6) 1px solid"
1378
1383
  },
@@ -1383,7 +1388,7 @@ var styles = {
1383
1388
  "filterButton": {
1384
1389
  "default": {
1385
1390
  "boxShadow": "0px 4px 9px 0px var(--primary-a1)",
1386
- "backgroundColor": "var(--grey-2)",
1391
+ "backgroundColor": "var(--grey-1)",
1387
1392
  "borderColor": "var(--grey-7)",
1388
1393
  "border": "var(--grey-7) 1px solid",
1389
1394
  "textColor": "var(--grey-11)"
@@ -1397,7 +1402,7 @@ var styles = {
1397
1402
  },
1398
1403
  "hover": {
1399
1404
  "boxShadow": "0px 4px 9px 0px var(--primary-a1)",
1400
- "backgroundColor": "var(--primary-6)",
1405
+ "backgroundColor": "var(--primary-7)",
1401
1406
  "borderColor": "var(--primary-7)",
1402
1407
  "border": "var(--primary-7) 1px solid",
1403
1408
  "textColor": "var(--white-1)"
@@ -1406,13 +1411,13 @@ var styles = {
1406
1411
  "searchInput": {
1407
1412
  "default": {
1408
1413
  "boxShadow": "0px 4px 9px 0px var(--primary-a2)",
1409
- "backgroundColor": "var(--white-1)",
1414
+ "backgroundColor": "var(--grey-1)",
1410
1415
  "borderColor": "var(--grey-7)",
1411
1416
  "border": "var(--grey-7) 1px solid"
1412
1417
  },
1413
1418
  "focused": {
1414
1419
  "boxShadow": "0px 4px 9px 0px var(--primary-a2)",
1415
- "backgroundColor": "var(--white-1)",
1420
+ "backgroundColor": "var(--grey-1)",
1416
1421
  "borderColor": "var(--primary-6)",
1417
1422
  "border": "var(--primary-6) 1px solid"
1418
1423
  }
@@ -1440,7 +1445,7 @@ var styles = {
1440
1445
  "backgroundColor": "var(--grey-4)"
1441
1446
  },
1442
1447
  "default": {
1443
- "backgroundColor": "var(--grey-a4)"
1448
+ "backgroundColor": "var(--grey-2)"
1444
1449
  }
1445
1450
  }
1446
1451
  }
@@ -1470,7 +1475,7 @@ var styles = {
1470
1475
  "filterButton": {
1471
1476
  "active": {
1472
1477
  "boxShadow": "0px 4px 9px 0px var(--primary-a1)",
1473
- "backgroundColor": "var(--grey-2)",
1478
+ "backgroundColor": "var(--grey-1)",
1474
1479
  "borderColor": "var(--primary-7)",
1475
1480
  "border": "var(--primary-7) 1px solid"
1476
1481
  }
@@ -1481,7 +1486,7 @@ var styles = {
1481
1486
  },
1482
1487
  "container": {
1483
1488
  "boxShadow": "0px 10px 15px 0px var(--primary-a1)",
1484
- "backgroundColor": "var(--white-1)",
1489
+ "backgroundColor": "var(--grey-1)",
1485
1490
  "borderColor": "var(--grey-6)",
1486
1491
  "border": "var(--grey-6) 1px solid"
1487
1492
  }
@@ -1721,7 +1726,7 @@ var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$
1721
1726
  var IconButton = styled__default.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) {
1722
1727
  var _ref$selected = _ref.selected,
1723
1728
  selected = _ref$selected === void 0 ? false : _ref$selected;
1724
- return selected && styled.css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid hsl(207, 80%, 64%);\n "])));
1729
+ return selected && styled.css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
1725
1730
  });
1726
1731
  var AlertWrapper = styled__default.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) {
1727
1732
  var theme = _ref2.theme;
@@ -1809,7 +1814,7 @@ var IconNames$1 = {
1809
1814
  var IconButton$1 = styled__default.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) {
1810
1815
  var _ref7$selected = _ref7.selected,
1811
1816
  selected = _ref7$selected === void 0 ? false : _ref7$selected;
1812
- return selected && styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid hsl(207, 80%, 64%);\n "])));
1817
+ return selected && styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
1813
1818
  });
1814
1819
  var TextButton = styled__default.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) {
1815
1820
  var theme = _ref8.theme;
@@ -1958,7 +1963,7 @@ var TextContainer = styled__default.div(_templateObject$5 || (_templateObject$5
1958
1963
  var theme = _ref2.theme;
1959
1964
  return theme && styled.css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n transition: padding ", " ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
1960
1965
  });
1961
- var IconContainer = styled__default.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n flex-shrink: 0;\n\n ", "\n\n svg {\n display:block;\n path, rect, circle, d {\n stroke: hsla(0, 0%, 100%, 1.000);\n }\n }\n"])), function (_ref3) {
1966
+ var IconContainer = styled__default.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n flex-shrink: 0;\n\n ", "\n\n svg {\n display:block;\n path, rect, circle, d {\n stroke: var(--white-1);\n }\n }\n"])), function (_ref3) {
1962
1967
  var position = _ref3.position;
1963
1968
  return styled.css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n order: ", ";\n "])), position && position === 'left' ? 0 : 2);
1964
1969
  });
@@ -2074,7 +2079,7 @@ var TextContainer$1 = styled__default.div(_templateObject3$6 || (_templateObject
2074
2079
  var theme = _ref2.theme;
2075
2080
  return theme && styled.css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n transition: padding ", " ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
2076
2081
  });
2077
- var LoadingContainer = styled__default.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) {
2082
+ var LoadingContainer = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n height: inherit;\n flex: 0 0 36px;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n opacity: 0;\n\n ", "\n\n svg {\n display:block;\n }\n"])), function (_ref3) {
2078
2083
  var theme = _ref3.theme,
2079
2084
  position = _ref3.position;
2080
2085
  return styled.css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n transition:\n flex ", " ", " ", ",\n opacity ", " ", ";\n\n order: ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut, theme.animation.speed.slow, theme.animation.speed.slow, theme.animation.easing.primary.easeInOut, position && position === 'left' ? 0 : 2);
@@ -2229,7 +2234,7 @@ var InputContainer = styled__default.div(_templateObject10$2 || (_templateObject
2229
2234
  var hasAction = _ref6.hasAction;
2230
2235
  return hasAction && styled.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);
2231
2236
  });
2232
- var Container$2 = styled__default.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) {
2237
+ var Container$2 = styled__default.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) {
2233
2238
  var theme = _ref7.theme,
2234
2239
  fieldState = _ref7.fieldState;
2235
2240
  return theme.styles.form.input[fieldState].normal;
@@ -2323,7 +2328,7 @@ var Input = function Input(_ref13) {
2323
2328
  var _excluded$5 = ["htmlFor", "labelText", "rightAlign", "children"];
2324
2329
 
2325
2330
  var _templateObject$b, _templateObject2$a;
2326
- var StyledLabel = styled__default.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) {
2331
+ var StyledLabel = styled__default.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) {
2327
2332
  var theme = _ref.theme;
2328
2333
  return theme.fontFamily.ui;
2329
2334
  }, function (_ref2) {
@@ -2368,7 +2373,7 @@ var InputContainer$1 = styled__default.div(_templateObject5$6 || (_templateObjec
2368
2373
  var hasAction = _ref3.hasAction;
2369
2374
  return hasAction && styled.css(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n ", "{\n padding-right: 200px;\n\n // Used to control password manager injection.\n background-position: calc(100% - 50px) 50% !important;\n }\n "])), StyledInput$1);
2370
2375
  });
2371
- var UnitKey = styled__default.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 10px;\n bottom: 0;\n top:0;\n font-family: ", ";\n font-size: 12px;\n color: #99a1a3;\n line-height:30px;\n"])), function (_ref4) {
2376
+ var UnitKey = styled__default.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 10px;\n bottom: 0;\n top:0;\n font-family: ", ";\n font-size: 12px;\n color: var(--grey-10);\n line-height:30px;\n"])), function (_ref4) {
2372
2377
  var theme = _ref4.theme;
2373
2378
  return theme.fontFamily.ui;
2374
2379
  });
@@ -2495,6 +2500,10 @@ var Container$4 = styled__default.label(_templateObject7$5 || (_templateObject7$
2495
2500
  return p.useIntent && intentPosition(p.theme.dimensions.form["switch"].positions[getPositionKey(p.position)], p.checked);
2496
2501
  });
2497
2502
 
2503
+ var isTypeSwitchState = function isTypeSwitchState(value) {
2504
+ return value === 'default' || value === 'loading' || value === 'locked' || value === 'disabled' || value === 'failure';
2505
+ };
2506
+
2498
2507
  var Switch = function Switch(_ref4) {
2499
2508
  var _inputRef$current4;
2500
2509
 
@@ -2562,7 +2571,7 @@ var Switch = function Switch(_ref4) {
2562
2571
  updateThemeChoice();
2563
2572
  }, [leftTheme, rightTheme, updateThemeChoice]);
2564
2573
  React.useEffect(function () {
2565
- setSwitchState(stateCheck(state));
2574
+ if (isTypeSwitchState(state)) setSwitchState(stateCheck(state));
2566
2575
  }, [state, setSwitchState]);
2567
2576
  React.useEffect(function () {
2568
2577
  if (state === 'locked') {
@@ -2857,7 +2866,7 @@ var FeedbackMessage$1 = styled__default.div(_templateObject7$8 || (_templateObje
2857
2866
  var theme = _ref4.theme;
2858
2867
  return theme.typography.form.feedback.message;
2859
2868
  });
2860
- var Container$7 = styled__default.div(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex-direction: column;\n ", "{\n ", ";\n\n &:focus {\n box-shadow: 0px 3px 7px 0px 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) {
2869
+ var Container$7 = styled__default.div(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex-direction: column;\n ", "{\n ", ";\n\n &:focus {\n box-shadow: 0px 3px 7px 0px var(--primary-a3);\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", "\n }\n\n ", " {\n background: ", ";\n border-color: ", ";\n\n ", "\n }\n\n &:focus-within ", " {\n ", ";\n\n ", ";\n\n ", ";\n }\n\n"])), StyledTextArea, function (_ref5) {
2861
2870
  var theme = _ref5.theme,
2862
2871
  fieldState = _ref5.fieldState;
2863
2872
  return theme.styles.form.input[fieldState].normal;
@@ -2877,13 +2886,13 @@ var Container$7 = styled__default.div(_templateObject8$7 || (_templateObject8$7
2877
2886
  return ['default', 'disabled'].indexOf(fieldState) !== -1 && styled.css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n display:none;\n "])));
2878
2887
  }, FeedbackContainer$1, function (_ref10) {
2879
2888
  var fieldState = _ref10.fieldState;
2880
- return fieldState === 'required' ? "\n box-shadow: 0px 3px 7px 0px hsla(207, 67.8%, 35.3%, 0.071);\n " : null;
2889
+ return fieldState === 'required' ? "\n box-shadow: 0px 3px 7px 0px var(--primary-a3);\n " : null;
2881
2890
  }, function (_ref11) {
2882
2891
  var fieldState = _ref11.fieldState;
2883
- return fieldState === 'valid' ? "\n box-shadow: 0px 3px 5px 0px hsla(120, 76.6%, 15.1%, 0.071);\n " : null;
2892
+ return fieldState === 'valid' ? "\n box-shadow: 0px 3px 5px 0px var(--success-a3);\n " : null;
2884
2893
  }, function (_ref12) {
2885
2894
  var fieldState = _ref12.fieldState;
2886
- return fieldState === 'invalid' ? "\n box-shadow: 0px 3px 7px 0px hsla(0, 100%, 50%, 0.102);\n " : null;
2895
+ return fieldState === 'invalid' ? "\n box-shadow: 0px 3px 7px 0px var(--error-a3);\n " : null;
2887
2896
  });
2888
2897
 
2889
2898
  var TextArea = function TextArea(_ref13) {
@@ -2907,21 +2916,21 @@ var TextArea = function TextArea(_ref13) {
2907
2916
  return React__default.createElement(Icon, {
2908
2917
  icon: 'Required',
2909
2918
  size: 20,
2910
- color: 'inverse'
2919
+ color: 'white'
2911
2920
  });
2912
2921
 
2913
2922
  case 'valid':
2914
2923
  return React__default.createElement(Icon, {
2915
2924
  icon: 'Success',
2916
2925
  size: 20,
2917
- color: 'inverse'
2926
+ color: 'white'
2918
2927
  });
2919
2928
 
2920
2929
  case 'invalid':
2921
2930
  return React__default.createElement(Icon, {
2922
2931
  icon: 'Invalid',
2923
2932
  size: 20,
2924
- color: 'inverse'
2933
+ color: 'white'
2925
2934
  });
2926
2935
 
2927
2936
  case 'processing':
@@ -3115,12 +3124,12 @@ var HiddenInput$1 = styled__default.input(_templateObject3$f || (_templateObject
3115
3124
  var disabled = _ref3.disabled;
3116
3125
  return disabled ? "not-allowed" : "pointer";
3117
3126
  });
3118
- var Rail = styled__default.div(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", "px;\n top: 10px;\n width: calc(100% - ", "px);\n height: 2px;\n border-radius: 11px;\n background-image: linear-gradient(to bottom, hsl(210, 30%, 96%), hsl(203, 42%, 94%) 98%);\n"])), ThumbDiameter / 2, ThumbDiameter);
3119
- var Mark = styled__default.span(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: -3px;\n left: ", ";\n width: 1px;\n height: 9px;\n opacity: 0.25;\n background-color: hsl(205, 77%, 64%);\n"])), function (_ref4) {
3127
+ var Rail = styled__default.div(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", "px;\n top: 10px;\n width: calc(100% - ", "px);\n height: 2px;\n border-radius: 11px;\n background-image: linear-gradient(to bottom, var(--grey-10), var(--primary-10) 98%);\n"])), ThumbDiameter / 2, ThumbDiameter);
3128
+ var Mark = styled__default.span(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: -3px;\n left: ", ";\n width: 1px;\n height: 9px;\n opacity: 0.25;\n background-color: var(--primary-11);\n"])), function (_ref4) {
3120
3129
  var leftValue = _ref4.leftValue;
3121
3130
  return "calc(" + leftValue + "% + 7px)";
3122
3131
  });
3123
- var MarkLabel = styled__default.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) {
3132
+ var MarkLabel = styled__default.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) {
3124
3133
  var leftValue = _ref5.leftValue;
3125
3134
  return "calc(" + leftValue + "% + 7px)";
3126
3135
  }, function (_ref6) {
@@ -3397,12 +3406,12 @@ var _excluded$b = ["max", "min", "defaultValue", "title", "timeUnit", "controlle
3397
3406
 
3398
3407
  var _templateObject$k, _templateObject2$j, _templateObject3$h, _templateObject4$f, _templateObject5$d;
3399
3408
  var Container$a = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose([""])));
3400
- var Headers = styled__default.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"])));
3409
+ var Headers = styled__default.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"])));
3401
3410
  var ValueLabel = styled__default(Label)(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-bottom: 0;\n"])), function (_ref) {
3402
3411
  var theme = _ref.theme;
3403
3412
  return theme.fontFamily.ui;
3404
3413
  });
3405
- var Unit = styled__default.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) {
3414
+ var Unit = styled__default.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-a11);\n font-style: italic;\n font-size: 12px;\n line-height: 1.5;\n"])), function (_ref2) {
3406
3415
  var theme = _ref2.theme;
3407
3416
  return theme.fontFamily.data;
3408
3417
  });
@@ -3452,7 +3461,7 @@ var _excluded$c = ["defaultValue", "inputCallback", "updateThumbColor", "updateT
3452
3461
 
3453
3462
  var _templateObject$l, _templateObject2$k, _templateObject3$i;
3454
3463
  var Container$b = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose([""])));
3455
- var Headers$1 = styled__default.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"])));
3464
+ var Headers$1 = styled__default.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n padding: 0 6px;\n"])));
3456
3465
  var ValueTitle$1 = styled__default(Label)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref) {
3457
3466
  var theme = _ref.theme;
3458
3467
  return theme.fontFamily.data;
@@ -3605,7 +3614,7 @@ var Container$c = styled__default.div(_templateObject$m || (_templateObject$m =
3605
3614
  });
3606
3615
  var DragAndDrop = styled__default.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) {
3607
3616
  var inDropZone = _ref2.inDropZone;
3608
- return inDropZone ? "dashed #afa9a9 2px" : null;
3617
+ return inDropZone ? "dashed var(--grey-8) 2px" : null;
3609
3618
  });
3610
3619
 
3611
3620
  var DropArea = function DropArea(_ref3) {
@@ -3922,7 +3931,7 @@ var TopLine = styled__default.div(_templateObject2$m || (_templateObject2$m = _t
3922
3931
  var RightLine = styled__default.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: e-resize;\n right: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
3923
3932
  var BottomLine = styled__default.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n ", "\n cursor: s-resize;\n bottom: -3px;\n height: 5px;\n width: 100%;\n left: 0;\n"])), CropLineStyle);
3924
3933
  var LeftLine = styled__default.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: w-resize;\n left: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
3925
- var resizeSquaresCss = styled.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"])));
3934
+ var resizeSquaresCss = styled.css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 10px;\n height: 10px;\n border: solid 1px var(--black-a12);\n background-color: var(--white-1);\n"])));
3926
3935
  var PointN = styled__default.div(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n margin-left: -5px;\n left: 50%;\n ", ";\n"])), resizeSquaresCss, function (_ref) {
3927
3936
  var isResizable = _ref.isResizable;
3928
3937
  return isResizable && styled.css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n cursor: n-resize;\n "])));
@@ -3995,7 +4004,7 @@ var CropArea = function CropArea(_ref9) {
3995
4004
  };
3996
4005
 
3997
4006
  var _templateObject$o, _templateObject2$n, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$c, _templateObject7$c, _templateObject8$b, _templateObject9$b;
3998
- var Container$d = styled__default.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) {
4007
+ var Container$d = styled__default.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) {
3999
4008
  var theme = _ref.theme;
4000
4009
  return theme.fontFamily.ui;
4001
4010
  });
@@ -4006,7 +4015,7 @@ var TextGroup = styled__default.div(_templateObject4$h || (_templateObject4$h =
4006
4015
  return theme.colors.icons.mono;
4007
4016
  }, IconWrapper);
4008
4017
  var ButtonsGroup = styled__default.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n button + button {\n margin-left: 10px;\n }\n"])));
4009
- var PreviewArea = styled__default.div(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n height: ", ";\n width: ", ";\n border-radius: 5px;\n background-color: 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) {
4018
+ var PreviewArea = styled__default.div(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n height: ", ";\n width: ", ";\n border-radius: 5px;\n background-color: var(--grey-3);\n background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, var(--white-a10) 35px, var(--white-a10) 70px);\n"])), function (_ref3) {
4010
4019
  var canvasHeight = _ref3.canvasHeight;
4011
4020
  return canvasHeight ? canvasHeight + "px" : "462px";
4012
4021
  }, function (_ref4) {
@@ -4014,7 +4023,7 @@ var PreviewArea = styled__default.div(_templateObject6$c || (_templateObject6$c
4014
4023
  return canvasWidth ? canvasWidth + "px" : "485px";
4015
4024
  });
4016
4025
  var HiddenImage = styled__default.img(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
4017
- var SelectedArea = styled__default.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) {
4026
+ var SelectedArea = styled__default.div(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n border: dashed 1px var(--black-a12);\n box-shadow: 0 0 0 9999em var(--black-a11);\n ", ";\n cursor: move;\n"])), function (_ref5) {
4018
4027
  var cropLeft = _ref5.cropLeft,
4019
4028
  cropTop = _ref5.cropTop,
4020
4029
  cropWidth = _ref5.cropWidth,
@@ -4338,9 +4347,9 @@ var Container$e = styled__default.div(_templateObject$p || (_templateObject$p =
4338
4347
  return styled.css(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
4339
4348
  });
4340
4349
  var PreviewImageGroup = styled__default.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-bottom: 17px;\n height: ", ";\n width: ", ";\n"])), PHOTO_HEIGHT, PHOTO_WIDTH);
4341
- var PhotoContainerStyle = styled.css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 5px;\n background-color: hsl(0, 0%, 90%);\n"])));
4350
+ var PhotoContainerStyle = styled.css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 5px;\n background-color: var(--grey-5);\n"])));
4342
4351
  var PreviewImage = styled__default.img(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n ", "\n object-fit: cover;\n"])), PhotoContainerStyle);
4343
- var PlaceholderText = styled__default.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n color: hsl(207, 5%, 57%);\n font-size: 14px;\n"])));
4352
+ var PlaceholderText = styled__default.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n color: var(--grey-10);\n font-size: 14px;\n"])));
4344
4353
  var NoPhoto = styled__default.div(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n ", "\n padding-top: 15px;\n ", " {\n margin-top: 18px;\n }\n"])), PhotoContainerStyle, PlaceholderText);
4345
4354
  var StyledInputFileButton = styled__default(InputFileButton)(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
4346
4355
  var ButtonsWrapper = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n button {\n margin-bottom: 10px;\n }\n\n"])));
@@ -4498,7 +4507,7 @@ var _excluded$h = ["icons", "color", "size", "weight"];
4498
4507
  var _templateObject$q, _templateObject2$p, _templateObject3$m;
4499
4508
  var Container$f = styled__default.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);
4500
4509
  var PlusIcon = styled__default(Icon)(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose([""])));
4501
- var PlusIconWrapper = styled__default.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);
4510
+ var PlusIconWrapper = styled__default.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n margin: 0 30px;\n ", "{\n transform: rotate(45deg);\n [stroke]{\n stroke: var(--primary-7);\n }\n }\n"])), IconWrapper);
4502
4511
 
4503
4512
  var BigIconsSummary = function BigIconsSummary(_ref) {
4504
4513
  var icons = _ref.icons,
@@ -4540,8 +4549,8 @@ var FilesUploadGroup = styled__default.div(_templateObject4$j || (_templateObjec
4540
4549
  var theme = _ref3.theme;
4541
4550
  return theme.styles.filters.dropdownContainer.background;
4542
4551
  });
4543
- var Title = styled__default.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n color: hsl(208, 8%, 38%);\n font-size: 20px;\n"])));
4544
- var Description = styled__default.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n line-height: 2.14;\n text-align: center;\n color: hsl(207, 5%, 57%);\n margin-top: 10px;\n max-width: 386px;\n"])));
4552
+ var Title = styled__default.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n color: var(--grey-11);\n font-size: 20px;\n"])));
4553
+ var Description = styled__default.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n line-height: 2.14;\n text-align: center;\n color: var(--grey-10);\n margin-top: 10px;\n max-width: 386px;\n"])));
4545
4554
 
4546
4555
  var getUpdateFiles = function getUpdateFiles(newFiles, files, allowedFileTypes) {
4547
4556
  var newFilesTransfer = new DataTransfer();
@@ -5171,10 +5180,9 @@ var StyledButton$3 = styled__default.button(_templateObject3$q || (_templateObje
5171
5180
  theme = _ref2.theme;
5172
5181
  return theme && styled.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);
5173
5182
  }, function (_ref3) {
5174
- var theme = _ref3.theme,
5175
- isOpen = _ref3.isOpen,
5183
+ var isOpen = _ref3.isOpen,
5176
5184
  hasFlipArrow = _ref3.hasFlipArrow;
5177
- return isOpen && hasFlipArrow && styled.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);
5185
+ return isOpen && hasFlipArrow && styled.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);
5178
5186
  });
5179
5187
  var InnerContainer$3 = styled__default.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
5180
5188
  var ButtonText = styled__default.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n padding-right: ", ";\n"])), function (_ref4) {
@@ -5214,7 +5222,7 @@ var FilterButton = function FilterButton(_ref5) {
5214
5222
  var _excluded$l = ["title", "value", "optionType", "selected", "disabled", "onClick"];
5215
5223
 
5216
5224
  var _templateObject$x, _templateObject2$w, _templateObject3$r, _templateObject4$n, _templateObject5$l, _templateObject6$i, _templateObject7$h, _templateObject8$f, _templateObject9$f, _templateObject10$d;
5217
- var Title$1 = styled__default.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) {
5225
+ var Title$1 = styled__default.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) {
5218
5226
  var theme = _ref.theme;
5219
5227
  return theme.fontFamily.data;
5220
5228
  });
@@ -5230,7 +5238,7 @@ var Container$k = styled__default.div(_templateObject7$h || (_templateObject7$h
5230
5238
  var styles = _ref3.theme.styles,
5231
5239
  selected = _ref3.selected,
5232
5240
  disabled = _ref3.disabled;
5233
- return styles && styled.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 && styled.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 && styled.css(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))));
5241
+ return styles && styled.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 && styled.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 && styled.css(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))));
5234
5242
  });
5235
5243
 
5236
5244
  var FilterOption = function FilterOption(_ref4) {
@@ -5474,8 +5482,8 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
5474
5482
  };
5475
5483
 
5476
5484
  var _templateObject$A, _templateObject2$z, _templateObject3$u;
5477
- var Container$n = styled__default.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"])));
5478
- var LoadingText = styled__default.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) {
5485
+ var Container$n = styled__default.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"])));
5486
+ var LoadingText = styled__default.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) {
5479
5487
  var theme = _ref.theme;
5480
5488
  return theme && styled.css(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.data);
5481
5489
  });
@@ -5506,7 +5514,7 @@ var ResultsContainer = styled__default.div(_templateObject6$k || (_templateObjec
5506
5514
  var theme = _ref3.theme;
5507
5515
  return theme.colors.divider;
5508
5516
  });
5509
- var ResultCounter = styled__default.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) {
5517
+ var ResultCounter = styled__default.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) {
5510
5518
  var theme = _ref4.theme;
5511
5519
  return theme.fontFamily.data;
5512
5520
  }, function (_ref5) {
@@ -5514,7 +5522,7 @@ var ResultCounter = styled__default.div(_templateObject7$j || (_templateObject7$
5514
5522
  return theme.colors.divider;
5515
5523
  });
5516
5524
  var SearchWrapper = styled__default.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n height: 41px;\n display: flex;\n align-items: center;\n"])));
5517
- var EmptyResultText = styled__default.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"])));
5525
+ var EmptyResultText = styled__default.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"])));
5518
5526
 
5519
5527
  var isValueSelected = function isValueSelected(item, selected) {
5520
5528
  var isItemSelected = false;
@@ -5752,7 +5760,7 @@ var TopLine$2 = styled__default.div(_templateObject2$B || (_templateObject2$B =
5752
5760
  var theme = _ref.theme;
5753
5761
  return theme.styles.filters.dropdownContainer.topBorder;
5754
5762
  });
5755
- var InnerBox$1 = styled__default.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) {
5763
+ var InnerBox$1 = styled__default.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) {
5756
5764
  var theme = _ref2.theme;
5757
5765
  return theme.styles.filters.dropdownContainer.background;
5758
5766
  });
@@ -5765,7 +5773,7 @@ var OrderGroup = styled__default.div(_templateObject6$l || (_templateObject6$l =
5765
5773
  var colors = _ref4.theme.colors;
5766
5774
  return colors.divider;
5767
5775
  });
5768
- var OrderButton = styled__default.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) {
5776
+ var OrderButton = styled__default.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) {
5769
5777
  var theme = _ref5.theme;
5770
5778
  return theme.fontFamily.data;
5771
5779
  }, function (_ref6) {
@@ -6076,11 +6084,11 @@ var _excluded$s = ["labelLists", "totalResults", "resultTextTemplate", "clearTex
6076
6084
 
6077
6085
  var _templateObject$F, _templateObject2$D, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$k;
6078
6086
  var Container$s = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 12px;\n min-height: 22px;\n"])));
6079
- var ResultsTextWrapper = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: hsl(207, 5%, 57%);\n"])), function (_ref) {
6087
+ var ResultsTextWrapper = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-9);\n"])), function (_ref) {
6080
6088
  var theme = _ref.theme;
6081
6089
  return theme.fontFamily.ui;
6082
6090
  });
6083
- var FilterLabel = styled__default.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) {
6091
+ var FilterLabel = styled__default.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) {
6084
6092
  var theme = _ref2.theme;
6085
6093
  return theme && styled.css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.data);
6086
6094
  }, IconWrapper);
@@ -6088,7 +6096,7 @@ var FilterLabelText = styled__default.div(_templateObject5$q || (_templateObject
6088
6096
  var hasIcon = _ref3.hasIcon;
6089
6097
  return hasIcon ? '0 15px 0 9px' : '0 15px 0 0';
6090
6098
  });
6091
- var ClearTextButton = styled__default.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) {
6099
+ var ClearTextButton = styled__default.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) {
6092
6100
  var theme = _ref4.theme;
6093
6101
  return theme.fontFamily.data;
6094
6102
  });
@@ -6184,7 +6192,7 @@ var FiltersResults = function FiltersResults(_ref5) {
6184
6192
  var _excluded$t = ["filtersTitle", "hasShowMore", "searchersConfig", "dropdownsConfig", "datePickersConfig", "showMoreText", "showLessText", "resultTextTemplate", "clearText", "totalResults", "singleFilter", "resultsDateFormat", "onChangeCallback"];
6185
6193
 
6186
6194
  var _templateObject$G, _templateObject2$E, _templateObject3$z;
6187
- var Title$2 = styled__default.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) {
6195
+ var Title$2 = styled__default.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) {
6188
6196
  var theme = _ref.theme;
6189
6197
  return theme.fontFamily.ui;
6190
6198
  });
@@ -6625,7 +6633,7 @@ var StatusCounter = styled__default.div(_templateObject2$F || (_templateObject2$
6625
6633
  }, function (_ref2) {
6626
6634
  var theme = _ref2.theme,
6627
6635
  color = _ref2.color;
6628
- return color ? theme.colors.status[color] : 'hsla(0, 0%, 91.8%, 0)';
6636
+ return color ? theme.colors.status[color] : 'var(--grey-5)';
6629
6637
  });
6630
6638
  var StatusDot = styled__default.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) {
6631
6639
  var animation = _ref3.theme.animation;
@@ -6633,7 +6641,7 @@ var StatusDot = styled__default.div(_templateObject4$u || (_templateObject4$u =
6633
6641
  }, function (_ref4) {
6634
6642
  var theme = _ref4.theme,
6635
6643
  color = _ref4.color;
6636
- return color ? theme.colors.status[color] : 'hsla(0, 0%, 91.8%, 0)';
6644
+ return color ? theme.colors.status[color] : 'var(--grey-5)';
6637
6645
  });
6638
6646
 
6639
6647
  var StatusIcon = function StatusIcon(_ref5) {
@@ -8584,7 +8592,7 @@ var MediaBoxWrapper = styled__default.div(_templateObject$T || (_templateObject$
8584
8592
  var minWidth = _ref2.minWidth;
8585
8593
  return minWidth && "min-width: " + minWidth;
8586
8594
  });
8587
- var mediaStyle = "\n max-width: 100%;\n max-height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n";
8595
+ var mediaStyle = "\n max-width: 100%;\n max-height: 100%;\n border-radius: 3px;\n background-color: var(--grey-11);\n";
8588
8596
  var LoadingOverlay$3 = styled__default.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"])));
8589
8597
  var Video$3 = styled__default.video(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n ", ";\n outline: none;\n\n ", ";\n"])), mediaStyle, function (_ref3) {
8590
8598
  var theme = _ref3.theme,
@@ -8695,7 +8703,7 @@ var MediaBox = function MediaBox(_ref5) {
8695
8703
  };
8696
8704
 
8697
8705
  var _templateObject$U, _templateObject2$P, _templateObject3$I, _templateObject4$C, _templateObject5$z, _templateObject6$s, _templateObject7$r;
8698
- var Container$C = styled__default.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) {
8706
+ var Container$C = styled__default.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) {
8699
8707
  var theme = _ref.theme;
8700
8708
  return theme && styled.css(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose([""])));
8701
8709
  }, function (_ref2) {
@@ -8712,7 +8720,7 @@ var CloseButton = styled__default.button(_templateObject4$C || (_templateObject4
8712
8720
  }, IconWrapper, function (_ref5) {
8713
8721
  var _ref5$selected = _ref5.selected,
8714
8722
  selected = _ref5$selected === void 0 ? false : _ref5$selected;
8715
- return selected && styled.css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid hsl(207, 80%, 64%);\n "])));
8723
+ return selected && styled.css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
8716
8724
  }, function (_ref6) {
8717
8725
  var theme = _ref6.theme;
8718
8726
  return theme && styled.css(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n opacity: .8;\n transition: transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.inOut);
@@ -8997,7 +9005,7 @@ var Image$2 = styled__default.img(_templateObject6$t || (_templateObject6$t = _t
8997
9005
  var showImage = _ref5.showImage;
8998
9006
  return showImage === true ? 'block' : 'none';
8999
9007
  });
9000
- var PlayableDrop = styled__default.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);
9008
+ var PlayableDrop = styled__default.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);
9001
9009
 
9002
9010
  var TableRowThumbnail = function TableRowThumbnail(_ref6) {
9003
9011
  var _ref6$hoverZoom = _ref6.hoverZoom,
@@ -9497,12 +9505,12 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
9497
9505
  var _templateObject$$, _templateObject2$W, _templateObject3$N, _templateObject4$H, _templateObject5$D;
9498
9506
  var Container$F = styled__default.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose([""])));
9499
9507
  var TableContainer = styled__default.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n display: table;\n width: 100%;\n position: relative;\n"])));
9500
- var LoadingText$1 = styled__default.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n color: hsla(195, 10%, 52%, 0.72);\n"])));
9508
+ var LoadingText$1 = styled__default.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n color: var(--grey-a11);\n"])));
9501
9509
  var LoadingBox$1 = styled__default.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) {
9502
9510
  var theme = _ref.theme;
9503
9511
  return theme.styles.tables.loadingOverlay;
9504
9512
  }, LoadingText$1);
9505
- var EmptyTableBox = styled__default.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"])));
9513
+ var EmptyTableBox = styled__default.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"])));
9506
9514
 
9507
9515
  var isChecked = function isChecked(_ref2) {
9508
9516
  var _ref2$_checked = _ref2._checked,
@@ -9598,7 +9606,7 @@ var Container$G = styled__default.div(_templateObject$10 || (_templateObject$10
9598
9606
  var StyledButton$4 = styled__default(Button)(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9599
9607
  var StyledLoadingButton = styled__default(ButtonWithLoading)(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9600
9608
  var StyledLink = styled__default(reactRouterDom.Link)(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n color: inherit;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n"])));
9601
- var EditContainer = styled__default.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);
9609
+ var EditContainer = styled__default.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);
9602
9610
  var StyledIconButton$1 = styled__default(IconButton$2)(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose([""])));
9603
9611
  var TextContainer$2 = styled__default.div(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-right: 18px;\n\n ", "\n\n ", "\n\n ", " {\n opacity: 0;\n position: absolute;\n top: 7px;\n right: 0;\n };\n\n &:hover {\n ", " {\n opacity: 1;\n };\n }\n"])), function (_ref2) {
9604
9612
  var alignment = _ref2.alignment;
@@ -11430,25 +11438,25 @@ var LeftData = styled__default.div(_templateObject2$13 || (_templateObject2$13 =
11430
11438
  }, IconWrapper);
11431
11439
  var RightData = styled__default.div(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["\n padding: 0 12px 0 16px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
11432
11440
  var DeviceDataGroup = styled__default.div(_templateObject5$M || (_templateObject5$M = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n justify-content: center;\n"])));
11433
- var LeftTitle = styled__default.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) {
11441
+ var LeftTitle = styled__default.div(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n ", ";\n ", "};\n ", ";\n\n color: var(--grey-a10);\n font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
11434
11442
  var hasRightData = _ref2.hasRightData;
11435
11443
  return hasRightData ? "max-margin: 140px;" : "max-margin: 250px;";
11436
11444
  }, function (_ref3) {
11437
11445
  var hasMarginBottom = _ref3.hasMarginBottom;
11438
11446
  return hasMarginBottom && "margin-bottom: 1px;";
11439
11447
  });
11440
- var LeftSubTitle = styled__default.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) {
11448
+ var LeftSubTitle = styled__default.div(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n ", "\n\n color: var(--grey-11);\n font-size: 16px;\n"])), function (_ref4) {
11441
11449
  var theme = _ref4.theme;
11442
11450
  return theme.fontFamily.data;
11443
11451
  }, EllipsisStyles, function (_ref5) {
11444
11452
  var hasRightData = _ref5.hasRightData;
11445
11453
  return hasRightData ? "max-width: 140px;" : "max-width: 250px;";
11446
11454
  });
11447
- var Title$5 = styled__default.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) {
11455
+ var Title$5 = styled__default.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: var(--grey-a10);\n font-size: 10px;\n ", ";\n"])), EllipsisStyles, function (_ref6) {
11448
11456
  var hasMarginBottom = _ref6.hasMarginBottom;
11449
11457
  return hasMarginBottom && "margin-bottom: 6px;";
11450
11458
  });
11451
- var SubTitle = styled__default.div(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: hsl(195, 10%, 52%);\n font-size: 12px;\n"])), EllipsisStyles);
11459
+ var SubTitle = styled__default.div(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: var(--grey-11);\n font-size: 12px;\n"])), EllipsisStyles);
11452
11460
 
11453
11461
  var PanelMetaData = function PanelMetaData(_ref7) {
11454
11462
  var _ref7$deviceIcon = _ref7.deviceIcon,
@@ -11482,7 +11490,7 @@ var PanelMetaData = function PanelMetaData(_ref7) {
11482
11490
  var _excluded$A = ["streamProps", "panelMetaData", "customBottom", "panelOnClick"];
11483
11491
 
11484
11492
  var _templateObject$1a;
11485
- var CameraPanelWrapper = styled__default.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) {
11493
+ var CameraPanelWrapper = styled__default.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) {
11486
11494
  var theme = _ref.theme;
11487
11495
  return theme.styles.global.background.backgroundImage;
11488
11496
  }, function (_ref2) {
@@ -11520,7 +11528,7 @@ var _excluded$B = ["icon", "size", "weight", "label", "linkTo"];
11520
11528
  var _templateObject$1c, _templateObject2$14, _templateObject3$X, _templateObject4$R;
11521
11529
  var TextContainer$3 = styled__default.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
11522
11530
  var StyledLink$1 = styled__default(reactRouterDom.Link)(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n"])));
11523
- var TagWrapper = styled__default.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) {
11531
+ var TagWrapper = styled__default.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) {
11524
11532
  var theme = _ref.theme;
11525
11533
  return theme.fontFamily.ui;
11526
11534
  }, function (_ref2) {
@@ -11615,14 +11623,14 @@ var _excluded$D = ["design", "size", "position", "text"];
11615
11623
 
11616
11624
  var _templateObject$1e, _templateObject2$15, _templateObject3$Y, _templateObject4$S, _templateObject5$N, _templateObject6$A;
11617
11625
  var Container$Q = styled__default.div(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose([""])));
11618
- var Title$6 = styled__default.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) {
11626
+ var Title$6 = styled__default.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) {
11619
11627
  var theme = _ref.theme;
11620
11628
  return theme.fontFamily.ui;
11621
11629
  });
11622
11630
  var ButtonsWrapper$1 = styled__default.div(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
11623
11631
  var LeftButtons = styled__default.div(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["\n button {\n margin: 0 10px 10px 0;\n }\n"])));
11624
11632
  var RightButtons = styled__default.div(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
11625
- var SelectedResults = styled__default.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) {
11633
+ var SelectedResults = styled__default.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) {
11626
11634
  var theme = _ref2.theme;
11627
11635
  return theme.fontFamily.ui;
11628
11636
  });
@@ -12741,16 +12749,16 @@ var UserMenu = function UserMenu(_ref7) {
12741
12749
  var _templateObject$1m, _templateObject2$1d, _templateObject3$14, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$C, _templateObject8$y;
12742
12750
  var Container$U = styled__default.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"])));
12743
12751
  var ImgWrapper = styled__default.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n overflow: hidden;\n height: 40px;\n width: 40px;\n flex-shrink: 0;\n"])));
12744
- var EmptyImg = styled__default.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n background-color: hsl(210, 22%, 91%);\n width: 100%;\n height: 100%;\n"])));
12745
- var Image$3 = styled__default.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) {
12752
+ var EmptyImg = styled__default.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-5);\n width: 100%;\n height: 100%;\n"])));
12753
+ var Image$3 = styled__default.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) {
12746
12754
  return p.image;
12747
12755
  }, function (p) {
12748
12756
  return p.image ? 'block' : 'none';
12749
12757
  });
12750
12758
  var InfoContainer = styled__default.div(_templateObject5$U || (_templateObject5$U = _taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
12751
- var Title$9 = styled__default.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n font-weight: 500;\n color: hsl(0, 0%, 34%);\n"])));
12752
- var Message = styled__default.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"])));
12753
- var TimeMsg = styled__default.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"])));
12759
+ var Title$9 = styled__default.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n font-weight: 500;\n color: var(--grey-11);\n"])));
12760
+ var Message = styled__default.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"])));
12761
+ var TimeMsg = styled__default.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n color: var(--grey-12);\n margin-top: 15px;\n"])));
12754
12762
 
12755
12763
  var NotificationItem = function NotificationItem(_ref) {
12756
12764
  var imgUrl = _ref.imgUrl,
@@ -12764,7 +12772,7 @@ var NotificationItem = function NotificationItem(_ref) {
12764
12772
 
12765
12773
  var _templateObject$1n, _templateObject2$1e, _templateObject3$15;
12766
12774
  var Container$V = styled__default.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
12767
- var StatusContainer = styled__default.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) {
12775
+ var StatusContainer = styled__default.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) {
12768
12776
  var theme = _ref.theme;
12769
12777
  return theme.colors.divider;
12770
12778
  });
@@ -12802,7 +12810,7 @@ var _templateObject$1o, _templateObject2$1f, _templateObject3$16, _templateObjec
12802
12810
  var Container$W = styled__default.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) {
12803
12811
  var theme = _ref.theme,
12804
12812
  colors = _ref.theme.colors;
12805
- return colors && styled.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);
12813
+ return colors && styled.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);
12806
12814
  });
12807
12815
  var SearchBar = styled__default.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"])));
12808
12816
  var IconWrapper$3 = styled__default.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"])));
@@ -13014,10 +13022,10 @@ var TabLabel = styled__default.label(_templateObject2$1g || (_templateObject2$1g
13014
13022
  return active ? '600' : '500';
13015
13023
  }, function (_ref3) {
13016
13024
  var active = _ref3.active;
13017
- return active ? '#0097ce' : '#787878';
13025
+ return active ? 'var(--primary-11)' : 'var(--grey-11)';
13018
13026
  }, function (_ref4) {
13019
13027
  var active = _ref4.active;
13020
- return active ? '2px solid #0097ce' : '2px solid transparent';
13028
+ return active ? '2px solid var(--primary-11)' : '2px solid transparent';
13021
13029
  });
13022
13030
 
13023
13031
  var Tab = function Tab(_ref5) {
@@ -13104,16 +13112,16 @@ var _excluded$H = ["icon", "title", "subtitle", "tabFor"];
13104
13112
  var _templateObject$1t, _templateObject2$1i, _templateObject3$19, _templateObject4$11, _templateObject5$W, _templateObject6$I;
13105
13113
  var Container$Z = styled__default.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) {
13106
13114
  var active = _ref.active;
13107
- return active ? styled.css(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid hsl(196, 100%, 40%);\n "]))) : styled.css(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
13115
+ return active ? styled.css(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : styled.css(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
13108
13116
  }, IconWrapper);
13109
13117
  var Title$a = styled__default.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) {
13110
13118
  var theme = _ref2.theme;
13111
13119
  return theme.fontFamily.ui;
13112
13120
  }, function (_ref3) {
13113
13121
  var active = _ref3.active;
13114
- return active ? 'hsl(196, 100%, 40%)' : 'hsl(0, 0%, 46%)';
13122
+ return active ? 'var(--primary-11)' : 'var(--grey-11)';
13115
13123
  });
13116
- var SubTitle$2 = styled__default.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) {
13124
+ var SubTitle$2 = styled__default.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) {
13117
13125
  var theme = _ref4.theme;
13118
13126
  return theme.fontFamily.data;
13119
13127
  });
@@ -13153,7 +13161,7 @@ var TabWithIcon = function TabWithIcon(_ref5) {
13153
13161
 
13154
13162
  var _templateObject$1u, _templateObject2$1j;
13155
13163
  var Container$_ = styled__default.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose([""])));
13156
- var TabListWrapper$1 = styled__default.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) {
13164
+ var TabListWrapper$1 = styled__default.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) {
13157
13165
  var paddingLeft = _ref.paddingLeft;
13158
13166
  return paddingLeft ? paddingLeft : '87px';
13159
13167
  });