scorer-ui-kit 1.7.21 → 1.7.23

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.
package/dist/index.js CHANGED
@@ -3535,6 +3535,17 @@ var DropArea = function DropArea(_ref3) {
3535
3535
 
3536
3536
  setInDropZone(false);
3537
3537
  }, [dropCallback]);
3538
+ var handleWindowDragAndDrop = React.useCallback(function (e) {
3539
+ e.preventDefault();
3540
+ }, []);
3541
+ React.useEffect(function () {
3542
+ window.addEventListener("dragover", handleWindowDragAndDrop);
3543
+ window.addEventListener("drop", handleWindowDragAndDrop);
3544
+ return function () {
3545
+ window.removeEventListener('dragover', handleWindowDragAndDrop);
3546
+ window.removeEventListener('drop', handleWindowDragAndDrop);
3547
+ };
3548
+ }, [handleWindowDragAndDrop]);
3538
3549
  return React__default.createElement(Container$c, Object.assign({}, {
3539
3550
  height: height
3540
3551
  }, props), React__default.createElement(DragAndDrop, Object.assign({}, {
@@ -4420,7 +4431,7 @@ var Container$g = styled__default.div(_templateObject$r || (_templateObject$r =
4420
4431
  return theme.fontFamily.ui;
4421
4432
  });
4422
4433
  var StyledDropArea = styled__default(DropArea)(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
4423
- var InputButtonWrapper = styled__default.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n z-index: 99;\n margin-top: 20px;\n"])));
4434
+ var InputButtonWrapper = styled__default.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n z-index: 99;\n margin-top: 20px;\n display: flex;\n gap: 20px;\n"])));
4424
4435
  var FilesUploadGroup = styled__default.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n padding: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 5px;\n background-color: hsl(204, 15%, 94%);\n position: relative;\n"])), function (_ref2) {
4425
4436
  var hasFiles = _ref2.hasFiles;
4426
4437
  return hasFiles ? '26px 0 20px 0' : '65px 0 42px 0';
@@ -4487,10 +4498,18 @@ var AreaUploadManager = function AreaUploadManager(_ref3) {
4487
4498
  selectFilesText = _ref3$selectFilesText === void 0 ? 'Select Files' : _ref3$selectFilesText,
4488
4499
  _ref3$addMoreFilesTex = _ref3.addMoreFilesText,
4489
4500
  addMoreFilesText = _ref3$addMoreFilesTex === void 0 ? 'Add More Files' : _ref3$addMoreFilesTex,
4501
+ _ref3$clearFilesText = _ref3.clearFilesText,
4502
+ clearFilesText = _ref3$clearFilesText === void 0 ? 'Clear Files' : _ref3$clearFilesText,
4503
+ _ref3$beginUploadText = _ref3.beginUploadText,
4504
+ beginUploadText = _ref3$beginUploadText === void 0 ? 'Begin Upload' : _ref3$beginUploadText,
4490
4505
  allowedFileTypes = _ref3.allowedFileTypes,
4491
4506
  customComponent = _ref3.customComponent,
4492
4507
  _ref3$onChangeCallbac = _ref3.onChangeCallback,
4493
- onChangeCallback = _ref3$onChangeCallbac === void 0 ? function () {} : _ref3$onChangeCallbac;
4508
+ onChangeCallback = _ref3$onChangeCallbac === void 0 ? function () {} : _ref3$onChangeCallbac,
4509
+ _ref3$clearFilesCallb = _ref3.clearFilesCallback,
4510
+ clearFilesCallback = _ref3$clearFilesCallb === void 0 ? function () {} : _ref3$clearFilesCallb,
4511
+ _ref3$beginUploadCall = _ref3.beginUploadCallback,
4512
+ beginUploadCallback = _ref3$beginUploadCall === void 0 ? function () {} : _ref3$beginUploadCall;
4494
4513
 
4495
4514
  var _useState = React.useState(null),
4496
4515
  files = _useState[0],
@@ -4508,6 +4527,10 @@ var AreaUploadManager = function AreaUploadManager(_ref3) {
4508
4527
  setFiles(goodFiles);
4509
4528
  onChangeCallback(goodFiles, rejectedFiles);
4510
4529
  }, [files, allowedFileTypes, onChangeCallback]);
4530
+ var clearFiles = React.useCallback(function () {
4531
+ setFiles(null);
4532
+ clearFilesCallback();
4533
+ }, [clearFilesCallback]);
4511
4534
  return React__default.createElement(Container$g, null, React__default.createElement(FilesUploadGroup, {
4512
4535
  hasFiles: files !== null
4513
4536
  }, React__default.createElement(StyledDropArea, {
@@ -4519,8 +4542,17 @@ var AreaUploadManager = function AreaUploadManager(_ref3) {
4519
4542
  text: files !== null ? addMoreFilesText : selectFilesText,
4520
4543
  inputCallback: handleFiles,
4521
4544
  multiple: true,
4522
- buttonDesign: files !== null ? 'secondary' : 'primary'
4523
- }))));
4545
+ buttonDesign: files !== null ? 'secondary' : 'primary',
4546
+ accept: allowedFileTypes === null || allowedFileTypes === void 0 ? void 0 : allowedFileTypes.join(', ')
4547
+ }), files !== null && React__default.createElement(React.Fragment, null, React__default.createElement(Button, {
4548
+ size: 'small',
4549
+ onClick: beginUploadCallback,
4550
+ design: 'primary'
4551
+ }, beginUploadText), React__default.createElement(Button, {
4552
+ size: 'small',
4553
+ onClick: clearFiles,
4554
+ design: 'secondary'
4555
+ }, clearFilesText)))));
4524
4556
  };
4525
4557
 
4526
4558
  var _excluded$i = ["children", "spacing"];
@@ -5430,7 +5462,7 @@ var LoadingBox = function LoadingBox(_ref2) {
5430
5462
 
5431
5463
  var _excluded$o = ["buttonIcon", "buttonText", "list", "selected", "disabled", "isLoading", "loadingText", "optionType", "hasOptionsFilter", "searchPlaceholder", "maxDisplayedItems", "searchResultText", "emptyResultText", "onSelect"];
5432
5464
 
5433
- var _templateObject$B, _templateObject2$A, _templateObject3$v, _templateObject4$q, _templateObject5$m, _templateObject6$k, _templateObject7$j, _templateObject8$h, _templateObject9$g;
5465
+ var _templateObject$B, _templateObject2$A, _templateObject3$v, _templateObject4$q, _templateObject5$m, _templateObject6$k, _templateObject7$j, _templateObject8$h, _templateObject9$g, _templateObject10$d;
5434
5466
  var Container$o = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
5435
5467
  var TopLine$1 = styled__default.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n ", ";\n height: 3px;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n"])), function (_ref) {
5436
5468
  var theme = _ref.theme;
@@ -5438,7 +5470,7 @@ var TopLine$1 = styled__default.div(_templateObject2$A || (_templateObject2$A =
5438
5470
  });
5439
5471
  var InnerBox = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 4px 9px 0 hsla(204, 22%, 67%, 0.07);\n border-right: solid 1px hsl(207, 16%, 86%);\n border-bottom: solid 1px hsl(207, 16%, 86%);\n border-left: solid 1px hsl(207, 16%, 86%);\n background-color: hsl(200, 23%, 97%);\n"])));
5440
5472
  var StyledFilterOption = styled__default(FilterOption)(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
5441
- var OptionList = styled__default.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n max-height: 162px;\n min-height: 40px;\n overflow-y: scroll;\n ::-webkit-scrollbar { /* Hide scrollbar for Chrome, Safari and Opera */\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n\n ", " {\n height: 35px;\n padding-left: 10px;\n }\n"])), StyledFilterOption);
5473
+ var OptionList = styled__default.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n max-height: 162px;\n min-height: 40px;\n position: relative;\n overflow-y: scroll;\n ::-webkit-scrollbar { /* Hide scrollbar for Chrome, Safari and Opera */\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n\n ", " {\n height: 35px;\n padding-left: 10px;\n }\n"])), StyledFilterOption);
5442
5474
  var ResultsContainer = styled__default.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n border-top: 1px solid hsl(0, 0%, 91%);\n padding-bottom: 8px;\n"])));
5443
5475
  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 hsl(0, 0%, 91%);\n"])), function (_ref2) {
5444
5476
  var theme = _ref2.theme;
@@ -5446,6 +5478,7 @@ var ResultCounter = styled__default.div(_templateObject7$j || (_templateObject7$
5446
5478
  });
5447
5479
  var SearchWrapper = styled__default.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n height: 41px;\n display: flex;\n align-items: center;\n"])));
5448
5480
  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"])));
5481
+ var Gradient = styled__default.div(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 0px;\n bottom: 9px;\n height: 25px;\n background-image: linear-gradient(to bottom, rgba(246, 247, 249, 0) 1%, #F6F7F9 120%);\n width: 100%;\n"])));
5449
5482
 
5450
5483
  var isValueSelected = function isValueSelected(item, selected) {
5451
5484
  var isItemSelected = false;
@@ -5672,7 +5705,7 @@ var FilterDropdown = function FilterDropdown(_ref3) {
5672
5705
  optionType: optionType,
5673
5706
  value: value
5674
5707
  }));
5675
- }) : React__default.createElement(EmptyResultText, null, emptyResultText))))));
5708
+ }) : React__default.createElement(EmptyResultText, null, emptyResultText)), list.length > 5 && React__default.createElement(Gradient, null)))));
5676
5709
  };
5677
5710
 
5678
5711
  var _excluded$p = ["buttonText", "disabled", "list", "isLoading", "loadingText", "isSortAscending", "selected", "descendingText", "ascendingText", "onSelect"];
@@ -5777,7 +5810,7 @@ var SortDropdown = function SortDropdown(_ref6) {
5777
5810
  }))))));
5778
5811
  };
5779
5812
 
5780
- var _templateObject$D, _templateObject2$C, _templateObject3$x, _templateObject4$s, _templateObject5$o, _templateObject6$m, _templateObject7$l, _templateObject8$j, _templateObject9$i, _templateObject10$d, _templateObject11$9, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$2, _templateObject23$1;
5813
+ var _templateObject$D, _templateObject2$C, _templateObject3$x, _templateObject4$s, _templateObject5$o, _templateObject6$m, _templateObject7$l, _templateObject8$j, _templateObject9$i, _templateObject10$e, _templateObject11$9, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$2, _templateObject23$1;
5781
5814
  var Container$q = styled__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
5782
5815
  var ContextActionBaseCSS = styled.css(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n border: none;\n background: none;\n display: flex;\n justify-content:left;\n align-items:center;\n flex-wrap: wrap;\n cursor: pointer;\n outline: none;\n text-decoration: none;\n padding: 0;\n"])));
5783
5816
  var ContextIcon = styled__default.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n ", ";\n width: 30px;\n height: 30px;\n border-radius: 3px;\n display:flex;\n justify-content:center;\n align-items:center;\n svg {\n display: block;\n }\n"])), function (_ref) {
@@ -5803,7 +5836,7 @@ var ContentBox$1 = styled__default.div(_templateObject8$j || (_templateObject8$j
5803
5836
  }, function (_ref7) {
5804
5837
  var openState = _ref7.openState,
5805
5838
  disabled = _ref7.disabled;
5806
- return openState && styled.css(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n display: ", ";\n display: ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && styled.css(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'bottom-left' && styled.css(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'top-left' && styled.css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))), openState.position === 'top-right' && styled.css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))));
5839
+ return openState && styled.css(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n display: ", ";\n display: ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && styled.css(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'bottom-left' && styled.css(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'top-left' && styled.css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))), openState.position === 'top-right' && styled.css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))));
5807
5840
  });
5808
5841
  var ButtonWrapper$1 = styled__default.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
5809
5842
  var TopLine$3 = styled__default.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n ", ";\n height: 3px;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n"])), function (_ref8) {
@@ -6783,7 +6816,7 @@ var StatusIcon = function StatusIcon(_ref5) {
6783
6816
  }));
6784
6817
  };
6785
6818
 
6786
- var _templateObject$J, _templateObject2$H, _templateObject3$C, _templateObject4$w, _templateObject5$s, _templateObject6$p, _templateObject7$o, _templateObject8$m, _templateObject9$j, _templateObject10$e, _templateObject11$a, _templateObject12$7, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3;
6819
+ var _templateObject$J, _templateObject2$H, _templateObject3$C, _templateObject4$w, _templateObject5$s, _templateObject6$p, _templateObject7$o, _templateObject8$m, _templateObject9$j, _templateObject10$f, _templateObject11$a, _templateObject12$7, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3;
6787
6820
  var HandleTouchReactionKeyframes = styled.keyframes(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n 0% {\n transform: scale(1);\n }\n\n 75% {\n transform: scale(3);\n }\n\n 100% {\n transform: scale(1.75);\n }\n"])));
6788
6821
  var HandleMouseReactionKeyframes = styled.keyframes(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n 0% {\n transform: scale(1);\n }\n\n 75% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0.5);\n }\n"])));
6789
6822
  var HandleBase = styled__default.svg(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n overflow: visible;\n cursor: pointer;\n fill: ", ";\n appearance: none;\n"])), function (_ref) {
@@ -6813,7 +6846,7 @@ var HandleReactiveRing = styled__default.circle(_templateObject9$j || (_template
6813
6846
  styling = _ref4.styling;
6814
6847
  return theme.custom.lines[styling].handleReactiveRing.stroke;
6815
6848
  });
6816
- var HandleContrastLayer = styled__default.circle(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n overflow: visible;\n mix-blend-mode: multiply;\n fill: none;\n stroke: ", ";\n"])), function (_ref5) {
6849
+ var HandleContrastLayer = styled__default.circle(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n overflow: visible;\n mix-blend-mode: multiply;\n fill: none;\n stroke: ", ";\n"])), function (_ref5) {
6817
6850
  var theme = _ref5.theme,
6818
6851
  styling = _ref5.styling;
6819
6852
  return theme.custom.lines[styling].handleContrastLayer.stroke;
@@ -7032,7 +7065,7 @@ var HandleUnit = function HandleUnit(props) {
7032
7065
  }, index + pointIndexOffset))));
7033
7066
  };
7034
7067
 
7035
- var _templateObject$K, _templateObject2$I, _templateObject3$D, _templateObject4$x, _templateObject5$t, _templateObject6$q, _templateObject7$p, _templateObject8$n, _templateObject9$k, _templateObject10$f, _templateObject11$b, _templateObject12$8, _templateObject13$6;
7068
+ var _templateObject$K, _templateObject2$I, _templateObject3$D, _templateObject4$x, _templateObject5$t, _templateObject6$q, _templateObject7$p, _templateObject8$n, _templateObject9$k, _templateObject10$g, _templateObject11$b, _templateObject12$8, _templateObject13$6, _templateObject14$5;
7036
7069
  var ContrastLine = styled__default.line(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n stroke: ", ";\n mix-blend-mode: multiply;\n stroke-width: ", "px;\n stroke-opacity: ", ";\n cursor: pointer;\n"])), function (_ref) {
7037
7070
  var theme = _ref.theme,
7038
7071
  styling = _ref.styling;
@@ -7068,21 +7101,24 @@ var GrabHandleIndexText$1 = styled__default.text(_templateObject7$p || (_templat
7068
7101
  styling = _ref7.styling;
7069
7102
  return theme.custom.lines[styling].grabHandleText.stroke;
7070
7103
  });
7071
- var LabelText$2 = styled__default.text(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n cursor: pointer;\n"])), function (_ref8) {
7104
+ var LabelText$2 = styled__default.text(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n cursor: pointer;\n ", "\n"])), function (_ref8) {
7072
7105
  var theme = _ref8.theme,
7073
7106
  styling = _ref8.styling;
7074
7107
  return theme.custom.lines[styling].label.fill;
7108
+ }, function (_ref9) {
7109
+ var showLabelShadow = _ref9.showLabelShadow;
7110
+ return showLabelShadow && styled.css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n text-shadow:\n -1px -1px 0 #000, \n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000;\n "])));
7075
7111
  });
7076
- var GrabHandleContrast = styled__default(GrabHandle)(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref9) {
7077
- var theme = _ref9.theme,
7078
- styling = _ref9.styling;
7112
+ var GrabHandleContrast = styled__default(GrabHandle)(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref10) {
7113
+ var theme = _ref10.theme,
7114
+ styling = _ref10.styling;
7079
7115
  return theme.custom.lines[styling].grabHandleContrast.stroke;
7080
7116
  });
7081
- var GrabHandleGroup = styled__default.g(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n\n ", ", ", " {\n transition: r 250ms ease;\n }\n\n ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
7082
- return props.showIndex && styled.css(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n ", ", ", " {\n pointer-events: none;\n r: ", ";\n }\n "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
7117
+ var GrabHandleGroup = styled__default.g(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n\n ", ", ", " {\n transition: r 250ms ease;\n }\n\n ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
7118
+ return props.showIndex && styled.css(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n ", ", ", " {\n pointer-events: none;\n r: ", ";\n }\n "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
7083
7119
  });
7084
- var DMCircle = styled__default.circle(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n fill: hsla(203, 100%, 35%, 0.49);\n cursor: pointer;\n"])));
7085
- var IconFormat = styled__default(Icon)(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
7120
+ var DMCircle = styled__default.circle(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n fill: hsla(203, 100%, 35%, 0.49);\n cursor: pointer;\n"])));
7121
+ var IconFormat = styled__default(Icon)(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
7086
7122
 
7087
7123
  var LineUnit = function LineUnit(props) {
7088
7124
  var x1 = props.x1,
@@ -7109,7 +7145,9 @@ var LineUnit = function LineUnit(props) {
7109
7145
  revealSetIndex = options.revealSetIndex,
7110
7146
  showMoveHandle = options.showMoveHandle,
7111
7147
  setIndexOffset = options.setIndexOffset,
7112
- showDirectionMark = options.showDirectionMark;
7148
+ showDirectionMark = options.showDirectionMark,
7149
+ _options$showLabelSha = options.showLabelShadow,
7150
+ showLabelShadow = _options$showLabelSha === void 0 ? false : _options$showLabelSha;
7113
7151
 
7114
7152
  var _useState = React.useState(),
7115
7153
  showLineBorder = _useState[0],
@@ -7236,7 +7274,8 @@ var LineUnit = function LineUnit(props) {
7236
7274
  fontSize: 14 + "px",
7237
7275
  x: 0,
7238
7276
  y: 0,
7239
- showIndex: revealSetIndex || handleFinderActive
7277
+ showIndex: revealSetIndex || handleFinderActive,
7278
+ showLabelShadow: showLabelShadow
7240
7279
  }, label)));
7241
7280
  };
7242
7281
 
@@ -7309,38 +7348,50 @@ var LineUnit = function LineUnit(props) {
7309
7348
  fontSize: unit * 14 + "px",
7310
7349
  x: midpoint.x - 16 * unit,
7311
7350
  y: midpoint.y - 15 * unit,
7312
- showIndex: revealSetIndex || handleFinderActive
7351
+ showIndex: revealSetIndex || handleFinderActive,
7352
+ showLabelShadow: showLabelShadow
7313
7353
  }, label));
7314
7354
  };
7315
7355
 
7316
7356
  var LineSetContext = React.createContext({});
7317
7357
 
7318
- var _templateObject$L, _templateObject2$J;
7319
- var Point = styled__default.circle(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n fill: ", ";\n"])), function (_ref) {
7320
- var theme = _ref.theme,
7321
- styling = _ref.styling;
7358
+ var _templateObject$L, _templateObject2$J, _templateObject3$E, _templateObject4$y;
7359
+ var FilledPolygon = styled__default.polygon(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n fill: ", ";\n opacity: ", ";\n"])), function (_ref) {
7360
+ var color = _ref.color;
7361
+ return color;
7362
+ }, function (_ref2) {
7363
+ var opacity = _ref2.opacity;
7364
+ return opacity;
7365
+ });
7366
+ var Point = styled__default.circle(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n fill: ", ";\n"])), function (_ref3) {
7367
+ var theme = _ref3.theme,
7368
+ styling = _ref3.styling;
7322
7369
  return theme.custom.lines[styling].point.fill;
7323
7370
  });
7324
- var AreaLabelText = styled__default.text(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n pointer-events: none;\n"])), function (_ref2) {
7325
- var theme = _ref2.theme,
7326
- styling = _ref2.styling;
7371
+ var AreaLabelText = styled__default.text(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n pointer-events: none;\n ", "\n"])), function (_ref4) {
7372
+ var theme = _ref4.theme,
7373
+ styling = _ref4.styling;
7327
7374
  return theme.custom.lines[styling].label.fill;
7375
+ }, function (_ref5) {
7376
+ var showAreaLabelShadow = _ref5.showAreaLabelShadow;
7377
+ return showAreaLabelShadow && styled.css(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n text-shadow:\n -1px -1px 0 #000, \n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000;\n "])));
7328
7378
  });
7329
7379
 
7330
- var AreaLabel = function AreaLabel(_ref3) {
7380
+ var AreaLabel = function AreaLabel(_ref6) {
7331
7381
  var _lineSetData$areaName;
7332
7382
 
7333
- var lineSetData = _ref3.lineSetData,
7334
- unit = _ref3.unit;
7383
+ var lineSetData = _ref6.lineSetData,
7384
+ unit = _ref6.unit,
7385
+ showAreaLabelShadow = _ref6.showAreaLabelShadow;
7335
7386
  var pointsLength = lineSetData.points.length;
7336
7387
  if (pointsLength < 3) return null;
7337
7388
  var midpoint = {
7338
7389
  x: 0,
7339
7390
  y: 0
7340
7391
  };
7341
- lineSetData.points.map(function (_ref4) {
7342
- var x = _ref4.x,
7343
- y = _ref4.y;
7392
+ lineSetData.points.map(function (_ref7) {
7393
+ var x = _ref7.x,
7394
+ y = _ref7.y;
7344
7395
  midpoint.x += x;
7345
7396
  midpoint.y += y;
7346
7397
  return null;
@@ -7354,27 +7405,30 @@ var AreaLabel = function AreaLabel(_ref3) {
7354
7405
  fontSize: unit * 14 + "px",
7355
7406
  styling: lineSetData.styling || 'primary',
7356
7407
  x: midpoint.x - 4 * Textlen * unit,
7357
- y: midpoint.y + 6 * unit
7408
+ y: midpoint.y + 6 * unit,
7409
+ showAreaLabelShadow: showAreaLabelShadow
7358
7410
  }, lineSetData.areaName);
7359
7411
  };
7360
7412
 
7361
- var LineSet = function LineSet(_ref5) {
7362
- var getCTM = _ref5.getCTM,
7363
- boundaries = _ref5.boundaries,
7364
- unit = _ref5.unit,
7365
- size = _ref5.size,
7366
- lineSetId = _ref5.lineSetId,
7367
- options = _ref5.options,
7368
- onLineMoveEnd = _ref5.onLineMoveEnd,
7369
- onLineClick = _ref5.onLineClick,
7370
- lineClickSensingBorder = _ref5.lineClickSensingBorder,
7371
- hasClickSensingBorder = _ref5.hasClickSensingBorder;
7413
+ var LineSet = function LineSet(_ref8) {
7414
+ var getCTM = _ref8.getCTM,
7415
+ boundaries = _ref8.boundaries,
7416
+ unit = _ref8.unit,
7417
+ size = _ref8.size,
7418
+ lineSetId = _ref8.lineSetId,
7419
+ options = _ref8.options,
7420
+ onLineMoveEnd = _ref8.onLineMoveEnd,
7421
+ onLineClick = _ref8.onLineClick,
7422
+ lineClickSensingBorder = _ref8.lineClickSensingBorder,
7423
+ hasClickSensingBorder = _ref8.hasClickSensingBorder;
7372
7424
 
7373
7425
  var _useContext = React.useContext(LineSetContext),
7374
7426
  state = _useContext.state,
7375
7427
  dispatch = _useContext.dispatch;
7376
7428
 
7377
7429
  var lineSetData = state[lineSetId];
7430
+ var _options$showLabelSha = options.showLabelShadow,
7431
+ showLabelShadow = _options$showLabelSha === void 0 ? false : _options$showLabelSha;
7378
7432
 
7379
7433
  var _useState = React.useState([]),
7380
7434
  handleAngles = _useState[0],
@@ -7459,11 +7513,11 @@ var LineSet = function LineSet(_ref5) {
7459
7513
  y: (pointerPosition.y - screenCTM.f) / screenCTM.d - handleRadius
7460
7514
  };
7461
7515
  var newPoints = points.map(function (_handle, index) {
7462
- var _ref6 = handleRelation.current[index] || {},
7463
- _ref6$offsetX = _ref6.offsetX,
7464
- offsetX = _ref6$offsetX === void 0 ? 0 : _ref6$offsetX,
7465
- _ref6$offsetY = _ref6.offsetY,
7466
- offsetY = _ref6$offsetY === void 0 ? 0 : _ref6$offsetY;
7516
+ var _ref9 = handleRelation.current[index] || {},
7517
+ _ref9$offsetX = _ref9.offsetX,
7518
+ offsetX = _ref9$offsetX === void 0 ? 0 : _ref9$offsetX,
7519
+ _ref9$offsetY = _ref9.offsetY,
7520
+ offsetY = _ref9$offsetY === void 0 ? 0 : _ref9$offsetY;
7467
7521
 
7468
7522
  return enforceBoundaries({
7469
7523
  x: Math.round(pointer.x - offsetX),
@@ -7501,9 +7555,9 @@ var LineSet = function LineSet(_ref5) {
7501
7555
  updateHandleAngles(lineSetData);
7502
7556
  }
7503
7557
  }, [lineSetData, updateHandleAngles, handleUsesAngles]);
7504
- var handles = ((lineSetData === null || lineSetData === void 0 ? void 0 : lineSetData.showPointHandle) === undefined || (lineSetData === null || lineSetData === void 0 ? void 0 : lineSetData.showPointHandle)) && lineSetData.points.map(function (_ref7, index) {
7505
- var x = _ref7.x,
7506
- y = _ref7.y;
7558
+ var handles = ((lineSetData === null || lineSetData === void 0 ? void 0 : lineSetData.showPointHandle) === undefined || (lineSetData === null || lineSetData === void 0 ? void 0 : lineSetData.showPointHandle)) && lineSetData.points.map(function (_ref10, index) {
7559
+ var x = _ref10.x,
7560
+ y = _ref10.y;
7507
7561
  return React__default.createElement(HandleUnit, {
7508
7562
  key: index + lineSetId,
7509
7563
  lineSetId: lineSetId,
@@ -7523,9 +7577,9 @@ var LineSet = function LineSet(_ref5) {
7523
7577
  readOnlyHandle: lineSetData.readOnly
7524
7578
  });
7525
7579
  });
7526
- var points = options.showPoint && lineSetData.points.map(function (_ref8, index) {
7527
- var x = _ref8.x,
7528
- y = _ref8.y;
7580
+ var points = options.showPoint && lineSetData.points.map(function (_ref11, index) {
7581
+ var x = _ref11.x,
7582
+ y = _ref11.y;
7529
7583
  return React__default.createElement(Point, {
7530
7584
  styling: lineSetData.styling || 'primary',
7531
7585
  key: index,
@@ -7534,9 +7588,9 @@ var LineSet = function LineSet(_ref5) {
7534
7588
  cy: y
7535
7589
  });
7536
7590
  });
7537
- var lines = lineSetData.points.map(function (_ref9, index) {
7538
- var x1 = _ref9.x,
7539
- y1 = _ref9.y;
7591
+ var lines = lineSetData.points.map(function (_ref12, index) {
7592
+ var x1 = _ref12.x,
7593
+ y1 = _ref12.y;
7540
7594
  var points = lineSetData.points,
7541
7595
  name = lineSetData.name,
7542
7596
  _lineSetData$styling = lineSetData.styling,
@@ -7571,17 +7625,25 @@ var LineSet = function LineSet(_ref5) {
7571
7625
  hasClickSensingBorder: hasClickSensingBorder
7572
7626
  });
7573
7627
  });
7574
- return React__default.createElement("g", null, lines, handles, points, React__default.createElement(AreaLabel, {
7628
+ var polygonPoints = lineSetData.points.map(function (point) {
7629
+ return point.x + "," + point.y;
7630
+ }).join(" ");
7631
+ return React__default.createElement("g", null, React__default.createElement(FilledPolygon, {
7632
+ points: polygonPoints,
7633
+ color: lineSetData.areaFillColor ? lineSetData.areaFillColor : 'transparent',
7634
+ opacity: lineSetData.areaTransparencyLevel ? lineSetData.areaTransparencyLevel / 100 : 0
7635
+ }), lines, handles, points, React__default.createElement(AreaLabel, {
7575
7636
  lineSetData: lineSetData,
7576
- unit: unit
7637
+ unit: unit,
7638
+ showAreaLabelShadow: showLabelShadow
7577
7639
  }));
7578
7640
  };
7579
7641
 
7580
- var _templateObject$M, _templateObject2$K, _templateObject3$E, _templateObject4$y, _templateObject5$u;
7642
+ var _templateObject$M, _templateObject2$K, _templateObject3$F, _templateObject4$z, _templateObject5$u;
7581
7643
  var Container$w = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n\n"])));
7582
7644
  var LoadingOverlay = styled__default.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
7583
- var Frame = styled__default.svg(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
7584
- return props.transculent && styled.css(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
7645
+ var Frame = styled__default.svg(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
7646
+ return props.transculent && styled.css(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
7585
7647
  });
7586
7648
  var Image$1 = styled__default.img(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n object-fit: contain;\n width: 100%;\n height: 100%;\n"])));
7587
7649
 
@@ -7603,6 +7665,8 @@ var LineUI = function LineUI(_ref) {
7603
7665
  showSetIndex = _ref$options.showSetIndex,
7604
7666
  _ref$options$showPoin = _ref$options.showPointLabel,
7605
7667
  showPointLabel = _ref$options$showPoin === void 0 ? false : _ref$options$showPoin,
7668
+ _ref$options$showLabe = _ref$options.showLabelShadow,
7669
+ showLabelShadow = _ref$options$showLabe === void 0 ? false : _ref$options$showLabe,
7606
7670
  showPointHandle = _ref$options.showPointHandle,
7607
7671
  showMoveHandle = _ref$options.showMoveHandle,
7608
7672
  showGrabHandle = _ref$options.showGrabHandle,
@@ -7739,6 +7803,7 @@ var LineUI = function LineUI(_ref) {
7739
7803
  handleFinderActive: handleFinder,
7740
7804
  revealSetIndex: showSetIndex !== false && (showSetIndex || state.length > 1),
7741
7805
  showPointLabel: showPointLabel,
7806
+ showLabelShadow: showLabelShadow,
7742
7807
  showPointHandle: showPointHandle || showPointHandle !== false && showGrabHandle !== false,
7743
7808
  showMoveHandle: showMoveHandle || showMoveHandle !== false && showGrabHandle !== false,
7744
7809
  setIndexOffset: setIndexOffset,
@@ -7783,11 +7848,11 @@ var LineUI = function LineUI(_ref) {
7783
7848
 
7784
7849
  var _excluded$u = ["loop", "autoPlay", "controls", "muted"];
7785
7850
 
7786
- var _templateObject$N, _templateObject2$L, _templateObject3$F, _templateObject4$z, _templateObject5$v;
7851
+ var _templateObject$N, _templateObject2$L, _templateObject3$G, _templateObject4$A, _templateObject5$v;
7787
7852
  var Container$x = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n"])));
7788
7853
  var Video = styled__default.video(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
7789
- var LoadingOverlay$1 = styled__default.div(_templateObject3$F || (_templateObject3$F = _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"])));
7790
- var Frame$1 = styled__default.svg(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
7854
+ var LoadingOverlay$1 = styled__default.div(_templateObject3$G || (_templateObject3$G = _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"])));
7855
+ var Frame$1 = styled__default.svg(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
7791
7856
  return props.transcalent && styled.css(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
7792
7857
  });
7793
7858
 
@@ -7801,6 +7866,10 @@ var LineUIVideo = function LineUIVideo(_ref) {
7801
7866
  onLineClick = _ref$onLineClick === void 0 ? function () {} : _ref$onLineClick,
7802
7867
  _ref$onLoaded = _ref.onLoaded,
7803
7868
  onLoaded = _ref$onLoaded === void 0 ? function () {} : _ref$onLoaded,
7869
+ _ref$lineClickSensing = _ref.lineClickSensingBorder,
7870
+ lineClickSensingBorder = _ref$lineClickSensing === void 0 ? '65' : _ref$lineClickSensing,
7871
+ _ref$hasClickSensingB = _ref.hasClickSensingBorder,
7872
+ hasClickSensingBorder = _ref$hasClickSensingB === void 0 ? true : _ref$hasClickSensingB,
7804
7873
  _ref$videoOptions = _ref.videoOptions,
7805
7874
  _ref$videoOptions$loo = _ref$videoOptions.loop,
7806
7875
  loop = _ref$videoOptions$loo === void 0 ? false : _ref$videoOptions$loo,
@@ -7819,6 +7888,7 @@ var LineUIVideo = function LineUIVideo(_ref) {
7819
7888
  _ref$options$showPoin = _ref$options.showPointLabel,
7820
7889
  showPointLabel = _ref$options$showPoin === void 0 ? false : _ref$options$showPoin,
7821
7890
  showPointHandle = _ref$options.showPointHandle,
7891
+ showLabelShadow = _ref$options.showLabelShadow,
7822
7892
  showMoveHandle = _ref$options.showMoveHandle,
7823
7893
  showGrabHandle = _ref$options.showGrabHandle,
7824
7894
  _ref$options$setIndex = _ref$options.setIndexOffset,
@@ -7956,6 +8026,7 @@ var LineUIVideo = function LineUIVideo(_ref) {
7956
8026
  handleFinderActive: handleFinder,
7957
8027
  revealSetIndex: showSetIndex !== false && (showSetIndex || state.length > 1),
7958
8028
  showPointLabel: showPointLabel,
8029
+ showLabelShadow: showLabelShadow,
7959
8030
  showPointHandle: showPointHandle || showPointHandle !== false && showGrabHandle !== false,
7960
8031
  showMoveHandle: showMoveHandle || showMoveHandle !== false && showGrabHandle !== false,
7961
8032
  setIndexOffset: setIndexOffset,
@@ -7988,6 +8059,8 @@ var LineUIVideo = function LineUIVideo(_ref) {
7988
8059
  }, state.map(function (lineSet, index) {
7989
8060
  return React__default.createElement(LineSet, {
7990
8061
  key: index,
8062
+ hasClickSensingBorder: hasClickSensingBorder,
8063
+ lineClickSensingBorder: lineClickSensingBorder,
7991
8064
  onLineMoveEnd: onLineMoveEnd,
7992
8065
  onLineClick: onLineClick,
7993
8066
  lineSetId: index,
@@ -8347,11 +8420,11 @@ function getPeerId(id) {
8347
8420
  return 'WRP_' + id + '_' + Math.floor(Math.random() * (9000 - 10) + 10).toString();
8348
8421
  }
8349
8422
 
8350
- var _templateObject$P, _templateObject2$M, _templateObject3$G, _templateObject4$A, _templateObject5$w;
8423
+ var _templateObject$P, _templateObject2$M, _templateObject3$H, _templateObject4$B, _templateObject5$w;
8351
8424
  var Container$y = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n"])));
8352
8425
  var Video$2 = styled__default(WebRTCPlayer)(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
8353
- var LoadingOverlay$2 = styled__default.div(_templateObject3$G || (_templateObject3$G = _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"])));
8354
- var Frame$2 = styled__default.svg(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
8426
+ var LoadingOverlay$2 = styled__default.div(_templateObject3$H || (_templateObject3$H = _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"])));
8427
+ var Frame$2 = styled__default.svg(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
8355
8428
  return props.transcalent && styled.css(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
8356
8429
  });
8357
8430
 
@@ -8372,6 +8445,8 @@ var LineUI$1 = function LineUI(_ref) {
8372
8445
  showSetIndex = _ref$options.showSetIndex,
8373
8446
  _ref$options$showPoin = _ref$options.showPointLabel,
8374
8447
  showPointLabel = _ref$options$showPoin === void 0 ? false : _ref$options$showPoin,
8448
+ _ref$options$showLabe = _ref$options.showLabelShadow,
8449
+ showLabelShadow = _ref$options$showLabe === void 0 ? false : _ref$options$showLabe,
8375
8450
  showPointHandle = _ref$options.showPointHandle,
8376
8451
  showMoveHandle = _ref$options.showMoveHandle,
8377
8452
  showGrabHandle = _ref$options.showGrabHandle,
@@ -8511,6 +8586,7 @@ var LineUI$1 = function LineUI(_ref) {
8511
8586
  handleFinderActive: handleFinder,
8512
8587
  revealSetIndex: showSetIndex !== false && (showSetIndex || state.length > 1),
8513
8588
  showPointLabel: showPointLabel,
8589
+ showLabelShadow: showLabelShadow,
8514
8590
  showPointHandle: showPointHandle || showPointHandle !== false && showGrabHandle !== false,
8515
8591
  showMoveHandle: showMoveHandle || showMoveHandle !== false && showGrabHandle !== false,
8516
8592
  setIndexOffset: setIndexOffset,
@@ -8657,6 +8733,32 @@ var LineReducer = (function (state, action) {
8657
8733
  return newState;
8658
8734
  }
8659
8735
 
8736
+ case "UPDATE_FILL_COLOR":
8737
+ {
8738
+ var _update6;
8739
+
8740
+ var _set2 = _extends({}, state[action.index], {
8741
+ areaFillColor: action.data.areaFillColor
8742
+ });
8743
+
8744
+ return update(state, (_update6 = {}, _update6[action.index] = {
8745
+ $set: _set2
8746
+ }, _update6));
8747
+ }
8748
+
8749
+ case "UPDATE_TRANSPARENCY_LEVEL":
8750
+ {
8751
+ var _update7;
8752
+
8753
+ var _set3 = _extends({}, state[action.index], {
8754
+ areaTransparencyLevel: action.data.areaTransparencyLevel
8755
+ });
8756
+
8757
+ return update(state, (_update7 = {}, _update7[action.index] = {
8758
+ $set: _set3
8759
+ }, _update7));
8760
+ }
8761
+
8660
8762
  default:
8661
8763
  console.error("Action " + action['type'] + " not registered.");
8662
8764
  return state;
@@ -8697,12 +8799,12 @@ var makeTitle = function makeTitle(parts, delimiter) {
8697
8799
  return title;
8698
8800
  };
8699
8801
 
8700
- var _templateObject$Q, _templateObject2$N, _templateObject3$H, _templateObject4$B, _templateObject5$x, _templateObject6$r, _templateObject7$q, _templateObject8$o;
8802
+ var _templateObject$Q, _templateObject2$N, _templateObject3$I, _templateObject4$C, _templateObject5$x, _templateObject6$r, _templateObject7$q, _templateObject8$o;
8701
8803
  var Container$z = styled__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
8702
8804
  var IconContainer$1 = styled__default.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: -45px;\n bottom: 0;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n display: block;\n }\n"])));
8703
- var Title$3 = styled__default.h1(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n ", "\n margin: 0 0 20px;\n"])), function (_ref) {
8805
+ var Title$3 = styled__default.h1(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n ", "\n margin: 0 0 20px;\n"])), function (_ref) {
8704
8806
  var theme = _ref.theme;
8705
- return styled.css(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.pageHeader.mainTitle);
8807
+ return styled.css(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.pageHeader.mainTitle);
8706
8808
  });
8707
8809
  var AreaTitleCss = styled.css(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n ", "\n margin: 0;\n position: absolute;\n top: -18px;\n"])), function (_ref2) {
8708
8810
  var theme = _ref2.theme;
@@ -8776,9 +8878,44 @@ var MultilineContent = function MultilineContent(_ref) {
8776
8878
  }));
8777
8879
  };
8778
8880
 
8881
+ var _path, _path2;
8882
+
8883
+ function _extends$1() {
8884
+ _extends$1 = Object.assign || function (target) {
8885
+ for (var i = 1; i < arguments.length; i++) {
8886
+ var source = arguments[i];
8887
+
8888
+ for (var key in source) {
8889
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
8890
+ target[key] = source[key];
8891
+ }
8892
+ }
8893
+ }
8894
+
8895
+ return target;
8896
+ };
8897
+
8898
+ return _extends$1.apply(this, arguments);
8899
+ }
8900
+
8901
+ function SvgNoImageBig(props) {
8902
+ return /*#__PURE__*/React.createElement("svg", _extends$1({
8903
+ width: 610,
8904
+ height: 446,
8905
+ fill: "none",
8906
+ xmlns: "http://www.w3.org/2000/svg"
8907
+ }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
8908
+ fill: "#DDD",
8909
+ d: "M0 0h609.91v446H0z"
8910
+ })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
8911
+ d: "M242.675 210.273V235h-3.429l-12.569-18.135h-.23V235h-3.73v-24.727h3.453l12.581 18.159h.229v-18.159h3.695zm26.921 12.363c0 2.641-.483 4.91-1.448 6.81-.966 1.892-2.29 3.349-3.973 4.371-1.674 1.014-3.578 1.521-5.711 1.521-2.141 0-4.052-.507-5.735-1.521-1.674-1.022-2.994-2.483-3.96-4.383-.966-1.9-1.449-4.166-1.449-6.798 0-2.64.483-4.906 1.449-6.797.966-1.9 2.286-3.357 3.96-4.371 1.683-1.022 3.594-1.533 5.735-1.533 2.133 0 4.037.511 5.711 1.533 1.683 1.014 3.007 2.471 3.973 4.371.965 1.891 1.448 4.157 1.448 6.797zm-3.694 0c0-2.012-.326-3.706-.978-5.083-.644-1.384-1.53-2.431-2.656-3.139-1.119-.716-2.387-1.075-3.804-1.075-1.424 0-2.696.359-3.815 1.075-1.119.708-2.004 1.755-2.656 3.139-.644 1.377-.966 3.071-.966 5.083 0 2.013.322 3.711.966 5.096.652 1.376 1.537 2.422 2.656 3.139 1.119.708 2.391 1.062 3.815 1.062 1.417 0 2.685-.354 3.804-1.062 1.126-.717 2.012-1.763 2.656-3.139.652-1.385.978-3.083.978-5.096zm21.075-12.363V235h-3.731v-24.727h3.731zm5.433 0h4.528l7.872 19.221h.29l7.872-19.221h4.527V235h-3.549v-17.893h-.23l-7.292 17.857h-2.946l-7.293-17.87h-.229V235h-3.55v-24.727zM325.012 235h-3.96l8.899-24.727h4.31L343.159 235h-3.96l-6.991-20.236h-.193L325.012 235zm.664-9.683h12.847v3.139h-12.847v-3.139zm36.627-7.232a7.585 7.585 0 00-.942-1.969 6.038 6.038 0 00-1.389-1.497 5.856 5.856 0 00-1.847-.954 7.439 7.439 0 00-2.258-.326c-1.392 0-2.648.359-3.767 1.075-1.119.716-2.004 1.767-2.656 3.151-.644 1.377-.966 3.063-.966 5.059 0 2.005.326 3.699.978 5.083.652 1.385 1.545 2.435 2.68 3.152 1.135.716 2.427 1.074 3.876 1.074 1.344 0 2.515-.273 3.514-.821a5.723 5.723 0 002.33-2.318c.555-1.006.833-2.189.833-3.55l.966.181h-7.075v-3.078h9.719v2.813c0 2.077-.443 3.88-1.328 5.409a9.043 9.043 0 01-3.646 3.525c-1.546.83-3.317 1.244-5.313 1.244-2.238 0-4.202-.515-5.892-1.545-1.682-1.031-2.994-2.492-3.936-4.383-.942-1.9-1.413-4.154-1.413-6.762 0-1.972.274-3.742.821-5.312.548-1.57 1.316-2.902 2.306-3.997a10.094 10.094 0 013.514-2.523c1.352-.588 2.829-.881 4.431-.881 1.336 0 2.58.197 3.731.591a10.07 10.07 0 013.091 1.679 9.51 9.51 0 012.258 2.583c.595.99.998 2.089 1.207 3.297h-3.827zM371.035 235v-24.727h15.503v3.211h-11.772v7.534h10.963v3.2h-10.963v7.57h11.917V235h-15.648z",
8912
+ fill: "#656565"
8913
+ })));
8914
+ }
8915
+
8779
8916
  var _excluded$x = ["loop", "autoPlay", "controls", "muted"];
8780
8917
 
8781
- var _templateObject$U, _templateObject2$P, _templateObject3$I, _templateObject4$C, _templateObject5$y, _templateObject6$s, _templateObject7$r, _templateObject8$p;
8918
+ var _templateObject$U, _templateObject2$P, _templateObject3$J, _templateObject4$D, _templateObject5$y, _templateObject6$s, _templateObject7$r, _templateObject8$p;
8782
8919
  var MediaBoxWrapper = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n ", ";\n ", ";\n"])), function (_ref) {
8783
8920
  var minHeight = _ref.minHeight;
8784
8921
  return minHeight && "min-height: " + minHeight;
@@ -8788,11 +8925,11 @@ var MediaBoxWrapper = styled__default.div(_templateObject$U || (_templateObject$
8788
8925
  });
8789
8926
  var mediaStyle = "\n max-width: 100%;\n max-height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n";
8790
8927
  var LoadingOverlay$3 = styled__default.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
8791
- var Video$3 = styled__default.video(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n ", ";\n outline: none;\n\n ", ";\n"])), mediaStyle, function (_ref3) {
8928
+ var Video$3 = styled__default.video(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n ", ";\n outline: none;\n\n ", ";\n"])), mediaStyle, function (_ref3) {
8792
8929
  var theme = _ref3.theme,
8793
8930
  isLoaded = _ref3.isLoaded,
8794
8931
  hasModalLimits = _ref3.hasModalLimits;
8795
- return styled.css(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n opacity: ", ";\n\n ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "1" : "0", hasModalLimits && styled.css(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
8932
+ return styled.css(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n opacity: ", ";\n\n ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "1" : "0", hasModalLimits && styled.css(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
8796
8933
  });
8797
8934
  var StyledImage = styled__default.img(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), mediaStyle, function (_ref4) {
8798
8935
  var theme = _ref4.theme,
@@ -8868,7 +9005,6 @@ var MediaBox = function MediaBox(_ref5) {
8868
9005
  minWidth: minWidth,
8869
9006
  minHeight: minHeight
8870
9007
  }), mediaType === 'video' ? React__default.createElement(Video$3, Object.assign({}, {
8871
- src: src,
8872
9008
  loop: loop,
8873
9009
  autoPlay: autoPlay,
8874
9010
  controls: controls,
@@ -8876,39 +9012,37 @@ var MediaBox = function MediaBox(_ref5) {
8876
9012
  onError: onError,
8877
9013
  hasModalLimits: hasModalLimits
8878
9014
  }, videoValues, {
9015
+ src: loadFailed ? '' : src,
8879
9016
  isLoaded: loaded && !loadFailed,
8880
9017
  preload: 'metadata',
8881
9018
  onCanPlayThrough: handleLoad
8882
9019
  })) : React__default.createElement(StyledImage, Object.assign({}, {
8883
- src: src,
8884
9020
  alt: alt,
8885
9021
  onError: onError,
8886
9022
  hasModalLimits: hasModalLimits
8887
9023
  }, {
9024
+ src: loadFailed ? '' : src,
8888
9025
  onLoad: handleLoad,
8889
9026
  isLoaded: loaded && !loadFailed
8890
9027
  })), !loaded && React__default.createElement(LoadingOverlay$3, null, React__default.createElement(Spinner, {
8891
9028
  size: 'large',
8892
9029
  styling: 'primary'
8893
- })), loadFailed && React__default.createElement(LoadingOverlay$3, null, React__default.createElement(Icon, {
8894
- icon: 'MissingImage',
8895
- size: 48
8896
- })));
9030
+ })), loadFailed && React__default.createElement(SvgNoImageBig, null));
8897
9031
  };
8898
9032
 
8899
- var _templateObject$V, _templateObject2$Q, _templateObject3$J, _templateObject4$D, _templateObject5$z, _templateObject6$t;
9033
+ var _templateObject$V, _templateObject2$Q, _templateObject3$K, _templateObject4$E, _templateObject5$z, _templateObject6$t;
8900
9034
  var Container$D = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: 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) {
8901
9035
  var theme = _ref.theme;
8902
9036
  return theme.fontFamily.ui;
8903
9037
  });
8904
9038
  var CloseIcon = styled__default(Icon)(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose([""])));
8905
- var CloseButton = styled__default.button(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n right: 0;\n top: -30px;\n color: ", ";\n font-size: 14px;\n font-weight: 500;\n\n ", " {\n display: flex;\n margin-left: 12px;\n }\n ", "\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n opacity: .9;\n }\n &:disabled {\n opacity: 0.1;\n }\n"])), resetButtonStyles, function (_ref2) {
9039
+ var CloseButton = styled__default.button(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n right: 0;\n top: -30px;\n color: ", ";\n font-size: 14px;\n font-weight: 500;\n\n ", " {\n display: flex;\n margin-left: 12px;\n }\n ", "\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n opacity: .9;\n }\n &:disabled {\n opacity: 0.1;\n }\n"])), resetButtonStyles, function (_ref2) {
8906
9040
  var theme = _ref2.theme;
8907
9041
  return theme.colors.icons.mono;
8908
9042
  }, IconWrapper, function (_ref3) {
8909
9043
  var _ref3$selected = _ref3.selected,
8910
9044
  selected = _ref3$selected === void 0 ? false : _ref3$selected;
8911
- return selected && styled.css(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid hsl(207, 80%, 64%);\n "])));
9045
+ return selected && styled.css(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid hsl(207, 80%, 64%);\n "])));
8912
9046
  }, function (_ref4) {
8913
9047
  var theme = _ref4.theme;
8914
9048
  return theme && styled.css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n opacity: .8;\n transition: transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.inOut);
@@ -9169,37 +9303,34 @@ var useMediaModal = function useMediaModal() {
9169
9303
  };
9170
9304
  };
9171
9305
 
9172
- var _templateObject$W, _templateObject2$R, _templateObject3$K, _templateObject4$E, _templateObject5$A, _templateObject6$u, _templateObject7$s, _templateObject8$q;
9173
- var Container$E = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n position: relative;\n height: inherit;\n background: grey;\n border-radius: 3px;\n overflow: hidden;\n width: 55px;\n height: auto;\n opacity: 0.65;\n margin-right: 10px;\n\n &::after {\n content: '';\n display: block;\n padding-bottom: 75%;\n ", "\n }\n\n ", "\n\n &:hover {\n ", ";\n\n ", "\n }\n\n"])), function (_ref) {
9306
+ var _templateObject$W, _templateObject2$R, _templateObject3$L, _templateObject4$F, _templateObject5$A, _templateObject6$u, _templateObject7$s;
9307
+ var Container$E = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n position: relative;\n height: inherit;\n background: grey;\n border-radius: 3px;\n overflow: hidden;\n width: 55px;\n height: auto;\n opacity: 0.65;\n margin-right: 10px;\n\n &::after {\n content: '';\n display: block;\n padding-bottom: 75%;\n ", "\n }\n\n ", "\n\n &:hover {\n cursor: pointer;\n\n ", "\n }\n\n"])), function (_ref) {
9174
9308
  var aspect = _ref.aspect;
9175
9309
  return aspect === '16:9' && styled.css(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n padding-left: 56.25%;\n "])));
9176
9310
  }, function (_ref2) {
9177
9311
  var theme = _ref2.theme;
9178
- return theme && styled.css(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n transition:\n opacity ", " ", ",\n transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
9312
+ return theme && styled.css(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n transition:\n opacity ", " ", ",\n transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
9179
9313
  }, function (_ref3) {
9180
- var mediaUrl = _ref3.mediaUrl;
9181
- return mediaUrl && styled.css(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n "])));
9182
- }, function (_ref4) {
9183
- var theme = _ref4.theme,
9184
- hoverZoom = _ref4.hoverZoom;
9185
- return theme && hoverZoom && styled.css(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n transform: scale(1.5);\n opacity: 1;\n transition: transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut);
9186
- });
9187
- var ImageWrapper = styled__default.img(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n display: block;\n"])));
9188
- var NoImageWrapper = styled__default.div(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n heigh: 41px;\n width: 55px;\n object-fit: cover;\n display: block;\n"])));
9189
- var PlayableDrop = styled__default.div(_templateObject8$q || (_templateObject8$q = _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);
9190
-
9191
- var TableRowThumbnail = function TableRowThumbnail(_ref5) {
9192
- var _ref5$hoverZoom = _ref5.hoverZoom,
9193
- hoverZoom = _ref5$hoverZoom === void 0 ? true : _ref5$hoverZoom,
9194
- _ref5$image = _ref5.image,
9195
- image = _ref5$image === void 0 ? '' : _ref5$image,
9196
- mediaUrl = _ref5.mediaUrl,
9197
- mediaType = _ref5.mediaType,
9198
- _ref5$retryImageLoad = _ref5.retryImageLoad,
9199
- retryImageLoad = _ref5$retryImageLoad === void 0 ? false : _ref5$retryImageLoad,
9200
- _ref5$retryLimit = _ref5.retryLimit,
9201
- retryLimit = _ref5$retryLimit === void 0 ? 5 : _ref5$retryLimit,
9202
- closeText = _ref5.closeText;
9314
+ var theme = _ref3.theme,
9315
+ hoverZoom = _ref3.hoverZoom;
9316
+ return theme && hoverZoom && styled.css(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n transform: scale(1.5);\n opacity: 1;\n transition: transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut);
9317
+ });
9318
+ var ImageWrapper = styled__default.img(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n display: block;\n"])));
9319
+ var NoImageWrapper = styled__default.div(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n height: 41px;\n width: 55px;\n object-fit: cover;\n display: block;\n"])));
9320
+ 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);
9321
+
9322
+ var TableRowThumbnail = function TableRowThumbnail(_ref4) {
9323
+ var _ref4$hoverZoom = _ref4.hoverZoom,
9324
+ hoverZoom = _ref4$hoverZoom === void 0 ? true : _ref4$hoverZoom,
9325
+ _ref4$image = _ref4.image,
9326
+ image = _ref4$image === void 0 ? '' : _ref4$image,
9327
+ mediaUrl = _ref4.mediaUrl,
9328
+ mediaType = _ref4.mediaType,
9329
+ _ref4$retryImageLoad = _ref4.retryImageLoad,
9330
+ retryImageLoad = _ref4$retryImageLoad === void 0 ? false : _ref4$retryImageLoad,
9331
+ _ref4$retryLimit = _ref4.retryLimit,
9332
+ retryLimit = _ref4$retryLimit === void 0 ? 5 : _ref4$retryLimit,
9333
+ closeText = _ref4.closeText;
9203
9334
 
9204
9335
  var _useState = React.useState(true),
9205
9336
  showImage = _useState[0],
@@ -9220,20 +9351,17 @@ var TableRowThumbnail = function TableRowThumbnail(_ref5) {
9220
9351
  var timeoutRef = React.useRef(null);
9221
9352
  var handleModal = React.useCallback(function () {
9222
9353
  try {
9223
- if (mediaUrl && mediaType) {
9224
- createMediaModal({
9225
- src: mediaUrl,
9226
- mediaType: mediaType,
9227
- minHeight: '240px',
9228
- closeText: closeText
9229
- });
9230
- }
9231
-
9354
+ createMediaModal({
9355
+ src: showImage && mediaUrl ? mediaUrl : '',
9356
+ mediaType: mediaType ? mediaType : 'img',
9357
+ minHeight: '240px',
9358
+ closeText: closeText
9359
+ });
9232
9360
  return Promise.resolve();
9233
9361
  } catch (e) {
9234
9362
  return Promise.reject(e);
9235
9363
  }
9236
- }, [closeText, createMediaModal, mediaType, mediaUrl]);
9364
+ }, [closeText, createMediaModal, mediaType, mediaUrl, showImage]);
9237
9365
  React.useEffect(function () {
9238
9366
  setShowImage(false);
9239
9367
  setRetryCount(0);
@@ -9355,18 +9483,18 @@ var useCopyToClipboard = function useCopyToClipboard() {
9355
9483
  };
9356
9484
  };
9357
9485
 
9358
- var _templateObject$Y, _templateObject2$T, _templateObject3$L, _templateObject4$F, _templateObject5$B, _templateObject6$v, _templateObject7$t, _templateObject8$r, _templateObject9$l, _templateObject10$g, _templateObject11$c;
9486
+ var _templateObject$Y, _templateObject2$T, _templateObject3$M, _templateObject4$G, _templateObject5$B, _templateObject6$v, _templateObject7$t, _templateObject8$q, _templateObject9$l, _templateObject10$h, _templateObject11$c;
9359
9487
  var CopyToClipboard = styled__default.button(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n\n cursor: pointer;\n opacity: 0;\n\n position: absolute;\n right: 0;\n top: 14px;\n width: 20px;\n height: 20px;\n background: transparent;\n border: none;\n outline: none;\n\n ", "\n\n svg {\n display: block;\n }\n\n &:hover {\n opacity: 1 !important;\n }\n\n"])), function (_ref) {
9360
9488
  var theme = _ref.theme;
9361
9489
  return theme && styled.css(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n transition: ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
9362
9490
  });
9363
- var CellContainer = styled__default.div(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: 50px;\n vertical-align: middle;\n position: relative;\n line-height: 30px;\n font-family: ", ";\n\n &:hover ", "{\n opacity: 0.5;\n }\n\n &, a {\n ", "\n }\n\n a:hover {\n text-decoration: underline;\n }\n\n ", ";\n\n ", "\n"])), function (p) {
9491
+ var CellContainer = styled__default.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: 50px;\n vertical-align: middle;\n position: relative;\n line-height: 30px;\n font-family: ", ";\n\n &:hover ", "{\n opacity: 0.5;\n }\n\n &, a {\n ", "\n }\n\n a:hover {\n text-decoration: underline;\n }\n\n ", ";\n\n ", "\n"])), function (p) {
9364
9492
  return p.theme.fontFamily.data;
9365
9493
  }, CopyToClipboard, function (_ref2) {
9366
9494
  var theme = _ref2.theme,
9367
9495
  cellStyle = _ref2.cellStyle,
9368
9496
  alignment = _ref2.alignment;
9369
- return cellStyle === 'firstColumn' ? styled.css(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle]) : styled.css(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle][alignment]);
9497
+ return cellStyle === 'firstColumn' ? styled.css(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle]) : styled.css(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle][alignment]);
9370
9498
  }, function (_ref3) {
9371
9499
  var hasCopyButton = _ref3.hasCopyButton;
9372
9500
  return hasCopyButton && styled.css(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
@@ -9374,11 +9502,11 @@ var CellContainer = styled__default.div(_templateObject3$L || (_templateObject3$
9374
9502
  var hideDivider = _ref4.hideDivider;
9375
9503
  return !hideDivider && styled.css(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n &::after {\n content: '';\n display: block;\n height: 1px;\n background: #afa9a9;\n opacity: 0.25;\n left: 0;\n right: 0;\n width: 100%;\n bottom: 0px;\n position: absolute;\n }\n "])));
9376
9504
  });
9377
- var UnitText = styled__default.span(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
9505
+ var UnitText = styled__default.span(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
9378
9506
  var theme = _ref5.theme;
9379
9507
  return styled.css(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
9380
9508
  });
9381
- var StatusBlip = styled__default.div(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-right: 8px;\n ", "\n"])), function (_ref6) {
9509
+ var StatusBlip = styled__default.div(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-right: 8px;\n ", "\n"])), function (_ref6) {
9382
9510
  var _ref6$status = _ref6.status,
9383
9511
  status = _ref6$status === void 0 ? 'neutral' : _ref6$status,
9384
9512
  colors = _ref6.theme.colors;
@@ -9503,16 +9631,16 @@ var TypeTableRow = function TypeTableRow(_ref2) {
9503
9631
  }));
9504
9632
  };
9505
9633
 
9506
- var _templateObject$_, _templateObject2$V, _templateObject3$M, _templateObject4$G;
9634
+ var _templateObject$_, _templateObject2$V, _templateObject3$N, _templateObject4$H;
9507
9635
  var HeaderTitle = styled__default.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n display: inline-flex;\n justify-content: center;\n align-content: center;\n position: relative;\n padding: 0 2px;\n user-select: none;\n z-index: 99;\n\n ", " {\n position: absolute;\n top: 0px;\n left: -15px;\n display: none;\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n padding: 3px 1px;\n\n ", "\n }\n\n ", "\n\n ", "\n"])), IconWrapper, function (_ref) {
9508
9636
  var ascending = _ref.ascending;
9509
9637
  return ascending && styled.css(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n transform: rotate(180deg);\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n top: 0;\n "])));
9510
9638
  }, function (_ref2) {
9511
9639
  var isSortActive = _ref2.isSortActive;
9512
- return isSortActive && styled.css(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n &:not(hover) {\n ", " {\n display: inline-flex;\n }\n }\n "])), IconWrapper);
9640
+ return isSortActive && styled.css(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n &:not(hover) {\n ", " {\n display: inline-flex;\n }\n }\n "])), IconWrapper);
9513
9641
  }, function (_ref3) {
9514
9642
  var sortable = _ref3.sortable;
9515
- return sortable && styled.css(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n &:hover {\n background-color: hsl(220, 12%, 95%);\n cursor: pointer;\n ", " {\n display: inline-flex;\n background-color: hsl(220, 12%, 95%);\n }\n }\n "])), IconWrapper);
9643
+ return sortable && styled.css(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n &:hover {\n background-color: hsl(220, 12%, 95%);\n cursor: pointer;\n ", " {\n display: inline-flex;\n background-color: hsl(220, 12%, 95%);\n }\n }\n "])), IconWrapper);
9516
9644
  });
9517
9645
 
9518
9646
  var TableHeaderTitle = function TableHeaderTitle(_ref4) {
@@ -9542,18 +9670,18 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
9542
9670
  }), header);
9543
9671
  };
9544
9672
 
9545
- var _templateObject$$, _templateObject2$W, _templateObject3$N, _templateObject4$H, _templateObject5$C, _templateObject6$w, _templateObject7$u, _templateObject8$s, _templateObject9$m, _templateObject10$h, _templateObject11$d, _templateObject12$9, _templateObject13$7, _templateObject14$5, _templateObject15$4;
9673
+ var _templateObject$$, _templateObject2$W, _templateObject3$O, _templateObject4$I, _templateObject5$C, _templateObject6$w, _templateObject7$u, _templateObject8$r, _templateObject9$m, _templateObject10$i, _templateObject11$d, _templateObject12$9, _templateObject13$7, _templateObject14$6, _templateObject15$4;
9546
9674
  var HeaderRow = styled__default.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
9547
9675
  var HeaderItem = styled__default.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: inherit;\n vertical-align:top;\n line-height: 20px;\n position: relative;\n font-family: ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (p) {
9548
9676
  return p.theme.fontFamily.ui;
9549
9677
  }, function (_ref) {
9550
9678
  var hasCopyButton = _ref.hasCopyButton;
9551
- return hasCopyButton && styled.css(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
9679
+ return hasCopyButton && styled.css(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
9552
9680
  }, function (_ref2) {
9553
9681
  var theme = _ref2.theme,
9554
9682
  alignment = _ref2.alignment,
9555
9683
  headerStyle = _ref2.headerStyle;
9556
- return alignment ? styled.css(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle][alignment]) : styled.css(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle]['left']);
9684
+ return alignment ? styled.css(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle][alignment]) : styled.css(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle]['left']);
9557
9685
  }, function (p) {
9558
9686
  return p.fixedWidth && styled.css(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n width: ", "px;\n "])), p.fixedWidth);
9559
9687
  }, function (_ref3) {
@@ -9562,16 +9690,16 @@ var HeaderItem = styled__default.div(_templateObject2$W || (_templateObject2$W =
9562
9690
  }, function (_ref4) {
9563
9691
  var headerStyle = _ref4.headerStyle,
9564
9692
  isSortActive = _ref4.isSortActive;
9565
- return headerStyle === 'subHeader' && styled.css(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n padding-bottom: 15px;\n\n &::after {\n content: '';\n display: block;\n height: 1px;\n background-color: hsl(0, 0%, 89%);\n left: ", ";\n right: 0;\n width: ", ";\n bottom: 0px;\n position: absolute;\n }\n"])), isSortActive ? '-15px' : '0', isSortActive ? 'calc(100% + 15px)' : '100%');
9693
+ return headerStyle === 'subHeader' && styled.css(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n padding-bottom: 15px;\n\n &::after {\n content: '';\n display: block;\n height: 1px;\n background-color: hsl(0, 0%, 89%);\n left: ", ";\n right: 0;\n width: ", ";\n bottom: 0px;\n position: absolute;\n }\n"])), isSortActive ? '-15px' : '0', isSortActive ? 'calc(100% + 15px)' : '100%');
9566
9694
  });
9567
9695
  var TitleItems = styled__default.div(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n ", ";\n"])), function (_ref5) {
9568
9696
  var alignment = _ref5.alignment;
9569
- return alignment && styled.css(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
9697
+ return alignment && styled.css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
9570
9698
  });
9571
9699
  var GroupTitle = styled__default.div(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n align-self: stretch;\n margin-bottom: 4px;\n"])));
9572
9700
  var Title$4 = styled__default.div(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n padding-left: 2px;\n padding-right: 8px;\n color: hsla(210, 2%, 51%, 0.65);\n font-weight: 500;\n font-size: 12px;\n letter-spacing: 0.3px;\n white-space: nowrap;\n"])));
9573
9701
  var EmptyTitle = styled__default.div(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n height: 20px;\n"])));
9574
- var MiddleLine = styled__default.div(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n height: 1px;\n background: hsl(0, 0%, 93%);\n flex: 1;\n ", ";\n"])), function (_ref6) {
9702
+ var MiddleLine = styled__default.div(_templateObject14$6 || (_templateObject14$6 = _taggedTemplateLiteralLoose(["\n height: 1px;\n background: hsl(0, 0%, 93%);\n flex: 1;\n ", ";\n"])), function (_ref6) {
9575
9703
  var isLastOfGroup = _ref6.isLastOfGroup;
9576
9704
  return isLastOfGroup && styled.css(_templateObject15$4 || (_templateObject15$4 = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n "])));
9577
9705
  });
@@ -9704,11 +9832,11 @@ var TypeTableHeader = function TypeTableHeader(_ref7) {
9704
9832
  }));
9705
9833
  };
9706
9834
 
9707
- var _templateObject$10, _templateObject2$X, _templateObject3$O, _templateObject4$I, _templateObject5$D;
9835
+ var _templateObject$10, _templateObject2$X, _templateObject3$P, _templateObject4$J, _templateObject5$D;
9708
9836
  var Container$G = styled__default.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose([""])));
9709
9837
  var TableContainer = styled__default.div(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n display: table;\n width: 100%;\n position: relative;\n"])));
9710
- var LoadingText$1 = styled__default.div(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n color: hsla(195, 10%, 52%, 0.72);\n"])));
9711
- var LoadingBox$1 = styled__default.div(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n z-index: 99;\n background-color: ", ";\n height: calc(100% - 50px);\n opacity: 85%;\n width: 100%;\n min-height: 100px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 20px;\n\n ", " {\n margin-top: 10px;\n }\n"])), function (_ref) {
9838
+ var LoadingText$1 = styled__default.div(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n color: hsla(195, 10%, 52%, 0.72);\n"])));
9839
+ var LoadingBox$1 = styled__default.div(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n z-index: 99;\n background-color: ", ";\n height: calc(100% - 50px);\n opacity: 85%;\n width: 100%;\n min-height: 100px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 20px;\n\n ", " {\n margin-top: 10px;\n }\n"])), function (_ref) {
9712
9840
  var theme = _ref.theme;
9713
9841
  return theme.colors["pureBase"];
9714
9842
  }, LoadingText$1);
@@ -9802,22 +9930,22 @@ var TypeTable = function TypeTable(_ref3) {
9802
9930
 
9803
9931
  var _excluded$y = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
9804
9932
 
9805
- var _templateObject$11, _templateObject2$Y, _templateObject3$P, _templateObject4$J, _templateObject5$E, _templateObject6$x, _templateObject7$v, _templateObject8$t, _templateObject9$n, _templateObject10$i;
9933
+ var _templateObject$11, _templateObject2$Y, _templateObject3$Q, _templateObject4$K, _templateObject5$E, _templateObject6$x, _templateObject7$v, _templateObject8$s, _templateObject9$n, _templateObject10$j;
9806
9934
  var Container$H = styled__default.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
9807
9935
  var theme = _ref.theme;
9808
9936
  return styled.css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
9809
9937
  });
9810
- var StyledButton$4 = styled__default(Button)(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9811
- var StyledLoadingButton = styled__default(ButtonWithLoading)(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9938
+ var StyledButton$4 = styled__default(Button)(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9939
+ var StyledLoadingButton = styled__default(ButtonWithLoading)(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9812
9940
  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"])));
9813
9941
  var EditContainer = styled__default.div(_templateObject6$x || (_templateObject6$x = _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);
9814
9942
  var StyledIconButton$1 = styled__default(IconButton$2)(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose([""])));
9815
- var TextContainer$2 = styled__default.div(_templateObject8$t || (_templateObject8$t = _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) {
9943
+ var TextContainer$2 = styled__default.div(_templateObject8$s || (_templateObject8$s = _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) {
9816
9944
  var alignment = _ref2.alignment;
9817
9945
  return alignment === 'center' && styled.css(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
9818
9946
  }, function (_ref3) {
9819
9947
  var alignment = _ref3.alignment;
9820
- return alignment === 'right' && styled.css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
9948
+ return alignment === 'right' && styled.css(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
9821
9949
  }, StyledIconButton$1, StyledIconButton$1);
9822
9950
 
9823
9951
  var EditCell = function EditCell(_ref4) {
@@ -10270,14 +10398,14 @@ var PTZProvider = function PTZProvider(_ref) {
10270
10398
  }, children);
10271
10399
  };
10272
10400
 
10273
- var _templateObject$12, _templateObject2$Z, _templateObject3$Q, _templateObject4$K, _templateObject5$F;
10401
+ var _templateObject$12, _templateObject2$Z, _templateObject3$R, _templateObject4$L, _templateObject5$F;
10274
10402
  var Active = styled__default.g(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
10275
10403
  var active = _ref.active;
10276
10404
  return active && styled.css(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10277
10405
  });
10278
- var Hover = styled__default.g(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10406
+ var Hover = styled__default.g(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10279
10407
  var hover = _ref2.hover;
10280
- return hover && styled.css(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10408
+ return hover && styled.css(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10281
10409
  });
10282
10410
  var Container$I = styled__default.g(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n"])));
10283
10411
 
@@ -10352,14 +10480,14 @@ var Up = function Up() {
10352
10480
  })));
10353
10481
  };
10354
10482
 
10355
- var _templateObject$13, _templateObject2$_, _templateObject3$R, _templateObject4$L, _templateObject5$G, _templateObject6$y;
10483
+ var _templateObject$13, _templateObject2$_, _templateObject3$S, _templateObject4$M, _templateObject5$G, _templateObject6$y;
10356
10484
  var Active$1 = styled__default.g(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
10357
10485
  var active = _ref.active;
10358
10486
  return active && styled.css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10359
10487
  });
10360
- var Hover$1 = styled__default.g(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10488
+ var Hover$1 = styled__default.g(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10361
10489
  var hover = _ref2.hover;
10362
- return hover && styled.css(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10490
+ return hover && styled.css(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10363
10491
  });
10364
10492
  var Container$J = styled__default.g(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n"])));
10365
10493
  var Arrow = styled__default.g(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n\n"])));
@@ -10436,14 +10564,14 @@ var Down = function Down() {
10436
10564
  })));
10437
10565
  };
10438
10566
 
10439
- var _templateObject$14, _templateObject2$$, _templateObject3$S, _templateObject4$M, _templateObject5$H;
10567
+ var _templateObject$14, _templateObject2$$, _templateObject3$T, _templateObject4$N, _templateObject5$H;
10440
10568
  var Active$2 = styled__default.g(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
10441
10569
  var active = _ref.active;
10442
10570
  return active && styled.css(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10443
10571
  });
10444
- var Hover$2 = styled__default.g(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10572
+ var Hover$2 = styled__default.g(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10445
10573
  var hover = _ref2.hover;
10446
- return hover && styled.css(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10574
+ return hover && styled.css(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10447
10575
  });
10448
10576
  var Container$K = styled__default.g(_templateObject5$H || (_templateObject5$H = _taggedTemplateLiteralLoose(["\n"])));
10449
10577
 
@@ -10520,14 +10648,14 @@ var Left = function Left() {
10520
10648
  })));
10521
10649
  };
10522
10650
 
10523
- var _templateObject$15, _templateObject2$10, _templateObject3$T, _templateObject4$N, _templateObject5$I;
10651
+ var _templateObject$15, _templateObject2$10, _templateObject3$U, _templateObject4$O, _templateObject5$I;
10524
10652
  var Active$3 = styled__default.g(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
10525
10653
  var active = _ref.active;
10526
10654
  return active && styled.css(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10527
10655
  });
10528
- var Hover$3 = styled__default.g(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10656
+ var Hover$3 = styled__default.g(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10529
10657
  var hover = _ref2.hover;
10530
- return hover && styled.css(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10658
+ return hover && styled.css(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10531
10659
  });
10532
10660
  var Container$L = styled__default.g(_templateObject5$I || (_templateObject5$I = _taggedTemplateLiteralLoose(["\n"])));
10533
10661
 
@@ -11417,14 +11545,14 @@ var ZoomBase = function ZoomBase(_ref) {
11417
11545
  })), children));
11418
11546
  };
11419
11547
 
11420
- var _templateObject$16, _templateObject2$11, _templateObject3$U, _templateObject4$O, _templateObject5$J;
11548
+ var _templateObject$16, _templateObject2$11, _templateObject3$V, _templateObject4$P, _templateObject5$J;
11421
11549
  var Active$4 = styled__default.g(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11422
11550
  var active = _ref.active;
11423
11551
  return active && styled.css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11424
11552
  });
11425
- var Hover$4 = styled__default.g(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11553
+ var Hover$4 = styled__default.g(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11426
11554
  var hover = _ref2.hover;
11427
- return hover && styled.css(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11555
+ return hover && styled.css(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11428
11556
  });
11429
11557
  var Container$M = styled__default.g(_templateObject5$J || (_templateObject5$J = _taggedTemplateLiteralLoose(["\n"])));
11430
11558
 
@@ -11494,14 +11622,14 @@ var Up$1 = function Up() {
11494
11622
  })));
11495
11623
  };
11496
11624
 
11497
- var _templateObject$17, _templateObject2$12, _templateObject3$V, _templateObject4$P, _templateObject5$K;
11625
+ var _templateObject$17, _templateObject2$12, _templateObject3$W, _templateObject4$Q, _templateObject5$K;
11498
11626
  var Active$5 = styled__default.g(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11499
11627
  var active = _ref.active;
11500
11628
  return active && styled.css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11501
11629
  });
11502
- var Hover$5 = styled__default.g(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11630
+ var Hover$5 = styled__default.g(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11503
11631
  var hover = _ref2.hover;
11504
- return hover && styled.css(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11632
+ return hover && styled.css(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11505
11633
  });
11506
11634
  var Container$N = styled__default.g(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n"])));
11507
11635
 
@@ -11582,21 +11710,21 @@ var Controls = function Controls(_ref) {
11582
11710
 
11583
11711
  var _excluded$z = ["isEmptyWithIcon", "status", "noticeIcon", "hasNotice", "noticeMessage", "noticeTitle", "emptyIcon"];
11584
11712
 
11585
- var _templateObject$19, _templateObject2$13, _templateObject3$W, _templateObject4$Q, _templateObject5$L, _templateObject6$z, _templateObject7$w, _templateObject8$u, _templateObject9$o;
11713
+ var _templateObject$19, _templateObject2$13, _templateObject3$X, _templateObject4$R, _templateObject5$L, _templateObject6$z, _templateObject7$w, _templateObject8$t, _templateObject9$o;
11586
11714
  var Container$P = styled__default.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 170px;\n border-radius: 3px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n position: relative;\n\n ", " {\n height: 100%;\n width: 100%;\n text-align: center;\n img, video {\n border-radius: 3px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n"])), MediaBoxWrapper);
11587
11715
  var EmptyWithIcon = styled__default.div(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n ", "\n;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref) {
11588
11716
  var hasPadding = _ref.hasPadding;
11589
11717
  return hasPadding && "\n padding-bottom: 43px\n ";
11590
11718
  }, IconWrapper);
11591
- var Notice = styled__default.div(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n ", ";\n opacity: 0.85;\n height: 46px;\n width: 300px;\n position: absolute;\n bottom: 0px;\n left: 0px;\n display: flex;\n align-items: center;\n padding: 10px;\n"])), function (_ref2) {
11719
+ var Notice = styled__default.div(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n ", ";\n opacity: 0.85;\n height: 46px;\n width: 300px;\n position: absolute;\n bottom: 0px;\n left: 0px;\n display: flex;\n align-items: center;\n padding: 10px;\n"])), function (_ref2) {
11592
11720
  var theme = _ref2.theme,
11593
11721
  color = _ref2.color;
11594
- return color && styled.css(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n "])), theme.colors.feedback[color], theme.colors.icons.inverse);
11722
+ return color && styled.css(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n "])), theme.colors.feedback[color], theme.colors.icons.inverse);
11595
11723
  });
11596
11724
  var NoticeMessage = styled__default.div(_templateObject5$L || (_templateObject5$L = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 10px;\n"])), EllipsisStyles);
11597
11725
  var NoticeTitle = styled__default.div(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 12px;\n"])), EllipsisStyles);
11598
11726
  var NoticeIcon = styled__default.div(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n height: 20px;\n width: 20px;\n margin-left: 2px;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), IconWrapper);
11599
- var NoticeTextGroup = styled__default.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n"])));
11727
+ var NoticeTextGroup = styled__default.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n"])));
11600
11728
  var StatusLine = styled__default.div(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 3px;\n width: 100%;\n"])), function (_ref3) {
11601
11729
  var theme = _ref3.theme,
11602
11730
  color = _ref3.color;
@@ -11633,14 +11761,14 @@ var MediaStream = function MediaStream(_ref4) {
11633
11761
  }));
11634
11762
  };
11635
11763
 
11636
- var _templateObject$1a, _templateObject2$14, _templateObject3$X, _templateObject4$R, _templateObject5$M, _templateObject6$A, _templateObject7$x, _templateObject8$v, _templateObject9$p;
11764
+ var _templateObject$1a, _templateObject2$14, _templateObject3$Y, _templateObject4$S, _templateObject5$M, _templateObject6$A, _templateObject7$x, _templateObject8$u, _templateObject9$p;
11637
11765
  var Container$Q = styled__default.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 60px;\n"])));
11638
11766
  var LeftData = styled__default.div(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n ", ";\n\n padding: 0 12px 0 12px;\n display: flex;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref) {
11639
11767
  var theme = _ref.theme,
11640
11768
  hasRightData = _ref.hasRightData;
11641
- return hasRightData && styled.css(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n border-right: ", " 1px solid;\n width: 195px;\n "])), theme.colors.divider);
11769
+ return hasRightData && styled.css(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n border-right: ", " 1px solid;\n width: 195px;\n "])), theme.colors.divider);
11642
11770
  }, IconWrapper);
11643
- var RightData = styled__default.div(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose(["\n padding: 0 12px 0 16px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
11771
+ var RightData = styled__default.div(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["\n padding: 0 12px 0 16px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
11644
11772
  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"])));
11645
11773
  var LeftTitle = styled__default.div(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n ", ";\n ", "};\n ", ";\n\n color: hsla(195, 10%, 52%, 0.72);\n font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
11646
11774
  var hasRightData = _ref2.hasRightData;
@@ -11656,7 +11784,7 @@ var LeftSubTitle = styled__default.div(_templateObject7$x || (_templateObject7$x
11656
11784
  var hasRightData = _ref5.hasRightData;
11657
11785
  return hasRightData ? "max-width: 140px;" : "max-width: 250px;";
11658
11786
  });
11659
- var Title$5 = styled__default.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: hsla(195, 10%, 52%, 0.72);\n font-size: 10px;\n ", ";\n"])), EllipsisStyles, function (_ref6) {
11787
+ var Title$5 = styled__default.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: hsla(195, 10%, 52%, 0.72);\n font-size: 10px;\n ", ";\n"])), EllipsisStyles, function (_ref6) {
11660
11788
  var hasMarginBottom = _ref6.hasMarginBottom;
11661
11789
  return hasMarginBottom && "margin-bottom: 6px;";
11662
11790
  });
@@ -11729,10 +11857,10 @@ var CameraPanels = function CameraPanels(_ref) {
11729
11857
 
11730
11858
  var _excluded$B = ["icon", "size", "weight", "label", "linkTo"];
11731
11859
 
11732
- var _templateObject$1d, _templateObject2$15, _templateObject3$Y, _templateObject4$S;
11860
+ var _templateObject$1d, _templateObject2$15, _templateObject3$Z, _templateObject4$T;
11733
11861
  var TextContainer$3 = styled__default.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
11734
11862
  var StyledLink$1 = styled__default(reactRouterDom.Link)(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n"])));
11735
- var TagWrapper = styled__default.div(_templateObject3$Y || (_templateObject3$Y = _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) {
11863
+ var TagWrapper = styled__default.div(_templateObject3$Z || (_templateObject3$Z = _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) {
11736
11864
  var theme = _ref.theme;
11737
11865
  return theme.fontFamily.ui;
11738
11866
  }, function (_ref2) {
@@ -11745,7 +11873,7 @@ var TagWrapper = styled__default.div(_templateObject3$Y || (_templateObject3$Y =
11745
11873
  var theme = _ref4.theme,
11746
11874
  hoverColor = _ref4.hoverColor,
11747
11875
  enableHover = _ref4.enableHover;
11748
- return enableHover && styled.css(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: ", ";\n color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.colors.icons[hoverColor], theme.colors.icons[hoverColor], IconWrapper, theme.colors.icons[hoverColor]);
11876
+ return enableHover && styled.css(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: ", ";\n color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.colors.icons[hoverColor], theme.colors.icons[hoverColor], IconWrapper, theme.colors.icons[hoverColor]);
11749
11877
  });
11750
11878
 
11751
11879
  var Tag = function Tag(_ref5) {
@@ -11825,14 +11953,14 @@ var DebouncedSearcher = function DebouncedSearcher(_ref) {
11825
11953
 
11826
11954
  var _excluded$D = ["design", "size", "position", "text"];
11827
11955
 
11828
- var _templateObject$1f, _templateObject2$16, _templateObject3$Z, _templateObject4$T, _templateObject5$N, _templateObject6$B;
11956
+ var _templateObject$1f, _templateObject2$16, _templateObject3$_, _templateObject4$U, _templateObject5$N, _templateObject6$B;
11829
11957
  var Container$R = styled__default.div(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose([""])));
11830
11958
  var Title$6 = styled__default.div(_templateObject2$16 || (_templateObject2$16 = _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) {
11831
11959
  var theme = _ref.theme;
11832
11960
  return theme.fontFamily.ui;
11833
11961
  });
11834
- var ButtonsWrapper$1 = styled__default.div(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
11835
- var LeftButtons = styled__default.div(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["\n button {\n margin: 0 10px 10px 0;\n }\n"])));
11962
+ var ButtonsWrapper$1 = styled__default.div(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
11963
+ var LeftButtons = styled__default.div(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["\n button {\n margin: 0 10px 10px 0;\n }\n"])));
11836
11964
  var RightButtons = styled__default.div(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
11837
11965
  var SelectedResults = styled__default.div(_templateObject6$B || (_templateObject6$B = _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) {
11838
11966
  var theme = _ref2.theme;
@@ -12099,11 +12227,11 @@ function useBreakpoints() {
12099
12227
  return breakpoints;
12100
12228
  }
12101
12229
 
12102
- var _templateObject$1g, _templateObject2$17, _templateObject3$_, _templateObject4$U, _templateObject5$O;
12230
+ var _templateObject$1g, _templateObject2$17, _templateObject3$$, _templateObject4$V, _templateObject5$O;
12103
12231
  var Container$S = styled__default.div(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose([""])));
12104
12232
  var Title$7 = styled__default.div(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose(["\n text-shadow: 0 0 10px hsla(0, 0%, 100%, 0.8);\n font-size: 20px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n color: hsl(210, 6%, 47%);\n"])));
12105
- var MessageBox$1 = styled__default.div(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.79;\n letter-spacing: normal;\n color: hsl(200, 1%, 49%);\n margin: 28px 0;\n"])));
12106
- var StyledButton$5 = styled__default(Button)(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["\n margin-left: 10px;\n"])));
12233
+ var MessageBox$1 = styled__default.div(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.79;\n letter-spacing: normal;\n color: hsl(200, 1%, 49%);\n margin: 28px 0;\n"])));
12234
+ var StyledButton$5 = styled__default(Button)(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["\n margin-left: 10px;\n"])));
12107
12235
  var ButtonsGroup$1 = styled__default.div(_templateObject5$O || (_templateObject5$O = _taggedTemplateLiteralLoose(["\n text-align: right;\n"])));
12108
12236
 
12109
12237
  var ConfirmationModal = function ConfirmationModal(_ref) {
@@ -12146,18 +12274,18 @@ var ConfirmationModal = function ConfirmationModal(_ref) {
12146
12274
  }, rightButtonText)));
12147
12275
  };
12148
12276
 
12149
- var _templateObject$1h, _templateObject2$18, _templateObject3$$, _templateObject4$V, _templateObject5$P, _templateObject6$C;
12277
+ var _templateObject$1h, _templateObject2$18, _templateObject3$10, _templateObject4$W, _templateObject5$P, _templateObject6$C;
12150
12278
  var MOBILE_CLOSE_HEIGHT = 50;
12151
12279
  var MOBILE_NAVBAR_HEIGHT = 68;
12152
12280
  var Layout = styled__default.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n height: 100%;\n"])));
12153
12281
  var MobileLayout = styled__default.div(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose([""])));
12154
- var Content = styled__default.div(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n padding: ", ";\n flex: 1;\n overflow: auto;\n\n & > div {\n max-width: 1400px;\n }\n\n ", "\n"])), function (_ref) {
12282
+ var Content = styled__default.div(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n padding: ", ";\n flex: 1;\n overflow: auto;\n\n & > div {\n max-width: 1400px;\n }\n\n ", "\n"])), function (_ref) {
12155
12283
  var _ref$padBottom = _ref.padBottom,
12156
12284
  padBottom = _ref$padBottom === void 0 ? true : _ref$padBottom;
12157
12285
  return padBottom ? '70px 90px' : '70px 90px 0';
12158
12286
  }, function (_ref2) {
12159
12287
  var maxWidth = _ref2.maxWidth;
12160
- return maxWidth && styled.css(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["\n & > div {\n max-width: ", ";\n }\n "])), maxWidth);
12288
+ return maxWidth && styled.css(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["\n & > div {\n max-width: ", ";\n }\n "])), maxWidth);
12161
12289
  });
12162
12290
  var MainContainer = styled__default.div(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n flex-direction: column;\n"])));
12163
12291
  var ContentArea = styled__default.div(_templateObject6$C || (_templateObject6$C = _taggedTemplateLiteralLoose(["\n flex: 1;\n width: 100%;\n padding: ", ";\n margin-left: auto;\n margin-right: auto;\n\n @media ", " {\n padding: ", ";\n }\n\n @media ", " {\n max-width: ", ";\n padding: ", ";\n }\n"])), function (_ref3) {
@@ -12174,15 +12302,15 @@ var ContentArea = styled__default.div(_templateObject6$C || (_templateObject6$C
12174
12302
  return paddingOverride ? paddingOverride : '70px 90px';
12175
12303
  });
12176
12304
 
12177
- var _templateObject$1i, _templateObject2$19, _templateObject3$10, _templateObject4$W, _templateObject5$Q, _templateObject6$D, _templateObject7$y, _templateObject8$w, _templateObject9$q, _templateObject10$j, _templateObject11$e, _templateObject12$a, _templateObject13$8, _templateObject14$6, _templateObject15$5, _templateObject16$4, _templateObject17$4, _templateObject18$3, _templateObject19$3, _templateObject20$3, _templateObject21$3;
12305
+ var _templateObject$1i, _templateObject2$19, _templateObject3$11, _templateObject4$X, _templateObject5$Q, _templateObject6$D, _templateObject7$y, _templateObject8$v, _templateObject9$q, _templateObject10$k, _templateObject11$e, _templateObject12$a, _templateObject13$8, _templateObject14$7, _templateObject15$5, _templateObject16$4, _templateObject17$4, _templateObject18$3, _templateObject19$3, _templateObject20$3, _templateObject21$3;
12178
12306
  var ContextTitle = styled__default.div(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose(["\n opacity: 0;\n\n ", "\n\n ", "\n"])), function (_ref) {
12179
12307
  var theme = _ref.theme;
12180
12308
  return styled.css(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
12181
12309
  }, function (_ref2) {
12182
12310
  var compact = _ref2.compact;
12183
- return compact && styled.css(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
12311
+ return compact && styled.css(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
12184
12312
  });
12185
- var ContextIcon$1 = styled__default.div(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["\n ", ";\n\n flex: 0 0 40px;\n width: 40px;\n height: 40px;\n margin: 0 20px;\n\n border-radius: 7px;\n display:flex;\n justify-content:center;\n align-items:center;\n\n svg {\n display: block;\n }\n"])), function (_ref3) {
12313
+ var ContextIcon$1 = styled__default.div(_templateObject4$X || (_templateObject4$X = _taggedTemplateLiteralLoose(["\n ", ";\n\n flex: 0 0 40px;\n width: 40px;\n height: 40px;\n margin: 0 20px;\n\n border-radius: 7px;\n display:flex;\n justify-content:center;\n align-items:center;\n\n svg {\n display: block;\n }\n"])), function (_ref3) {
12186
12314
  var theme = _ref3.theme;
12187
12315
  return styled.css(_templateObject5$Q || (_templateObject5$Q = _taggedTemplateLiteralLoose(["\n ", ";\n transition: background ", " ", ";\n "])), theme.styles.global.mainMenu.iconBackground["default"], theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
12188
12316
  });
@@ -12190,9 +12318,9 @@ var ContextIndicator = styled__default.div(_templateObject6$D || (_templateObjec
12190
12318
  var theme = _ref4.theme;
12191
12319
  return styled.css(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose(["\n transition: opacity 0 ", ";\n "])), theme.animation.easing.primary.easeInOut);
12192
12320
  });
12193
- var ContextActionBaseCSS$1 = styled.css(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n border: none;\n background: none;\n display: flex;\n justify-content:left;\n align-items:center;\n flex-wrap: wrap;\n cursor: pointer;\n width: 100%;\n outline: none;\n padding: 0;\n text-decoration: none;\n"])));
12321
+ var ContextActionBaseCSS$1 = styled.css(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n border: none;\n background: none;\n display: flex;\n justify-content:left;\n align-items:center;\n flex-wrap: wrap;\n cursor: pointer;\n width: 100%;\n outline: none;\n padding: 0;\n text-decoration: none;\n"])));
12194
12322
  var StyledAnchor = styled__default.a(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n display: flex;\n text-decoration: none;\n"])));
12195
- var ExternalIconWrapper = styled__default.div(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
12323
+ var ExternalIconWrapper = styled__default.div(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
12196
12324
  var ContextWrapper = styled__default.div(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n ", ";\n ", "{\n [stroke]{\n stroke: ", ";\n }\n }\n }\n"])), ContextActionBaseCSS$1, function (_ref5) {
12197
12325
  var theme = _ref5.theme;
12198
12326
  return theme && styled.css(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
@@ -12206,7 +12334,7 @@ var ContextWrapper = styled__default.div(_templateObject11$e || (_templateObject
12206
12334
  var theme = _ref8.theme;
12207
12335
  return theme.colors.icons['inverse'];
12208
12336
  });
12209
- var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject14$6 || (_templateObject14$6 = _taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n ", ";\n ", "{\n [stroke]{\n stroke: ", ";\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref9) {
12337
+ var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject14$7 || (_templateObject14$7 = _taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n ", ";\n ", "{\n [stroke]{\n stroke: ", ";\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref9) {
12210
12338
  var theme = _ref9.theme;
12211
12339
  return theme && styled.css(_templateObject15$5 || (_templateObject15$5 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
12212
12340
  }, function (_ref10) {
@@ -12436,23 +12564,23 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
12436
12564
  };
12437
12565
  };
12438
12566
 
12439
- var _templateObject$1j, _templateObject2$1a, _templateObject3$11, _templateObject4$X, _templateObject5$R, _templateObject6$E, _templateObject7$z, _templateObject8$x, _templateObject9$r, _templateObject10$k, _templateObject11$f, _templateObject12$b, _templateObject13$9, _templateObject14$7, _templateObject15$6;
12567
+ var _templateObject$1j, _templateObject2$1a, _templateObject3$12, _templateObject4$Y, _templateObject5$R, _templateObject6$E, _templateObject7$z, _templateObject8$w, _templateObject9$r, _templateObject10$l, _templateObject11$f, _templateObject12$b, _templateObject13$9, _templateObject14$8, _templateObject15$6;
12440
12568
  var Submenu = styled__default.ul(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
12441
12569
  var SubmenuHeader = styled__default.div(_templateObject2$1a || (_templateObject2$1a = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
12442
- var SubmenuItemTitle = styled__default.span(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose(["\n display: block;\n ", ";\n\n"])), function (_ref) {
12570
+ var SubmenuItemTitle = styled__default.span(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n display: block;\n ", ";\n\n"])), function (_ref) {
12443
12571
  var theme = _ref.theme;
12444
- return theme && styled.css(_templateObject4$X || (_templateObject4$X = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", "\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subheader);
12572
+ return theme && styled.css(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", "\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subheader);
12445
12573
  });
12446
12574
  var SubmenuItemLink = styled__default(reactRouterDom.Link)(_templateObject5$R || (_templateObject5$R = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n"])), resetButtonStyles);
12447
12575
  var ExternalIconWrapper$1 = styled__default.div(_templateObject6$E || (_templateObject6$E = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
12448
12576
  var SubmenuItemAnchor = styled__default.a(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
12449
- var SubmenuItem = styled__default.li(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n display: block;\n height: 30px;\n padding-left: 40px;\n position: relative;\n\n &::after {\n display: block;\n content: '';\n height: 1px;\n width: 14px;\n position: absolute;\n left: 0;\n top: 10px;\n background: ", ";\n }\n\n ", ", ", "{\n\n ", ";\n\n\n\n }\n"])), function (_ref2) {
12577
+ var SubmenuItem = styled__default.li(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n display: block;\n height: 30px;\n padding-left: 40px;\n position: relative;\n\n &::after {\n display: block;\n content: '';\n height: 1px;\n width: 14px;\n position: absolute;\n left: 0;\n top: 10px;\n background: ", ";\n }\n\n ", ", ", "{\n\n ", ";\n\n\n\n }\n"])), function (_ref2) {
12450
12578
  var colors = _ref2.theme.colors;
12451
12579
  return colors.divider;
12452
12580
  }, SubmenuItemLink, SubmenuItemAnchor, function (_ref3) {
12453
12581
  var theme = _ref3.theme,
12454
12582
  isActive = _ref3.isActive;
12455
- return theme && styled.css(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n\n &:hover {\n ", ";\n }\n\n ", "\n\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover, isActive && styled.css(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n &, &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem.active));
12583
+ return theme && styled.css(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n\n &:hover {\n ", ";\n }\n\n ", "\n\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover, isActive && styled.css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n &, &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem.active));
12456
12584
  });
12457
12585
  var SubmenuContainer = styled__default.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n ", ";\n\n position: relative;\n overflow: hidden;\n\n &::after {\n display: block;\n content: '';\n width: 1px;\n position: absolute;\n left: 40px;\n top: 0;\n bottom: 35px;\n background: ", ";\n }\n\n"])), function (_ref4) {
12458
12586
  var theme = _ref4.theme;
@@ -12468,7 +12596,7 @@ var ContextContainer = styled__default.div(_templateObject13$9 || (_templateObje
12468
12596
  var open = _ref7.open,
12469
12597
  maxHeight = _ref7.maxHeight,
12470
12598
  theme = _ref7.theme;
12471
- return open && styled.css(_templateObject14$7 || (_templateObject14$7 = _taggedTemplateLiteralLoose(["\n ", "{\n transition:\n max-height ", " ", ",\n opacity ", " ", ";\n max-height: ", "px !important;\n opacity: 1;\n }\n "])), SubmenuContainer, theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut, maxHeight);
12599
+ return open && styled.css(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n ", "{\n transition:\n max-height ", " ", ",\n opacity ", " ", ";\n max-height: ", "px !important;\n opacity: 1;\n }\n "])), SubmenuContainer, theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut, maxHeight);
12472
12600
  }, function (_ref8) {
12473
12601
  var loading = _ref8.loading;
12474
12602
  return loading === 'true' && styled.css(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n ", "{\n max-height: none !important;\n opacity: 1;\n }\n "])), SubmenuContainer);
@@ -12583,19 +12711,19 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
12583
12711
  return output;
12584
12712
  };
12585
12713
 
12586
- var _templateObject$1k, _templateObject2$1b, _templateObject3$12, _templateObject4$Y, _templateObject5$S, _templateObject6$F, _templateObject7$A, _templateObject8$y, _templateObject9$s, _templateObject10$l, _templateObject11$g, _templateObject12$c, _templateObject13$a, _templateObject14$8, _templateObject15$7;
12714
+ var _templateObject$1k, _templateObject2$1b, _templateObject3$13, _templateObject4$Z, _templateObject5$S, _templateObject6$F, _templateObject7$A, _templateObject8$x, _templateObject9$s, _templateObject10$m, _templateObject11$g, _templateObject12$c, _templateObject13$a, _templateObject14$9, _templateObject15$7;
12587
12715
  var Logo = styled__default(reactRouterDom.Link)(_templateObject$1k || (_templateObject$1k = _taggedTemplateLiteralLoose(["\n height: 50px;\n margin: 0 20px 55px 15px;\n display: flex;\n\n object {\n pointer-events: none;\n }\n"])));
12588
12716
  var LogoMark = styled__default.div(_templateObject2$1b || (_templateObject2$1b = _taggedTemplateLiteralLoose(["\n height: 50px;\n flex: 0 0 50px;\n margin-right: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n\n"])));
12589
- var LogoType = styled__default.div(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n flex: 1;\n height: 50px;\n display: flex;\n justify-content: left;\n align-items: center;\n"])));
12590
- var SVGObject = styled__default.object(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose([""])));
12717
+ var LogoType = styled__default.div(_templateObject3$13 || (_templateObject3$13 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n flex: 1;\n height: 50px;\n display: flex;\n justify-content: left;\n align-items: center;\n"])));
12718
+ var SVGObject = styled__default.object(_templateObject4$Z || (_templateObject4$Z = _taggedTemplateLiteralLoose([""])));
12591
12719
  var SVGObjectText = styled__default.object(_templateObject5$S || (_templateObject5$S = _taggedTemplateLiteralLoose(["\n max-width: 180px;\n"])));
12592
12720
  var NavigationContainer = styled__default.div(_templateObject6$F || (_templateObject6$F = _taggedTemplateLiteralLoose([""])));
12593
12721
  var MenuFooter = styled__default.div(_templateObject7$A || (_templateObject7$A = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n flex-direction: column;\n flex: 1;\n justify-content: flex-end;\n"])), function (_ref) {
12594
12722
  var theme = _ref.theme;
12595
- return theme && styled.css(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n ", "\n "])), theme.styles.global.mainMenu.footerBackground);
12723
+ return theme && styled.css(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n ", "\n "])), theme.styles.global.mainMenu.footerBackground);
12596
12724
  });
12597
12725
  var FooterItemContainer = styled__default.div(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
12598
- var PushContainer = styled__default.div(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref2) {
12726
+ var PushContainer = styled__default.div(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref2) {
12599
12727
  var theme = _ref2.theme,
12600
12728
  isPinned = _ref2.isPinned;
12601
12729
  return theme && styled.css(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? theme.dimensions.global.mainMenu.width.open : theme.dimensions.global.mainMenu.width.closed);
@@ -12604,7 +12732,7 @@ var Container$T = styled__default.div(_templateObject12$c || (_templateObject12$
12604
12732
  var theme = _ref3.theme,
12605
12733
  open = _ref3.open,
12606
12734
  desktopSize = _ref3.desktopSize;
12607
- return theme && styled.css(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n ", "\n ", ";\n width: ", ";\n border-right: 1px solid ", ";\n\n ", "{\n transition: opacity ", " ", ";\n opacity: ", ";\n }\n "])), theme.styles.global.mainMenu.background, desktopSize === 'xxlarge' ? "" : styled.css(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n transition: width ", " ", "\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut), open ? theme.dimensions.global.mainMenu.width.open : theme.dimensions.global.mainMenu.width.closed, theme.styles.global.mainMenu.lines.backgroundColor, LogoType, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, open ? 1 : 0);
12735
+ return theme && styled.css(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n ", "\n ", ";\n width: ", ";\n border-right: 1px solid ", ";\n\n ", "{\n transition: opacity ", " ", ";\n opacity: ", ";\n }\n "])), theme.styles.global.mainMenu.background, desktopSize === 'xxlarge' ? "" : styled.css(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n transition: width ", " ", "\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut), open ? theme.dimensions.global.mainMenu.width.open : theme.dimensions.global.mainMenu.width.closed, theme.styles.global.mainMenu.lines.backgroundColor, LogoType, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, open ? 1 : 0);
12608
12736
  });
12609
12737
  var ContainerInner = styled__default.div(_templateObject15$7 || (_templateObject15$7 = _taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"])), function (_ref4) {
12610
12738
  var theme = _ref4.theme;
@@ -12723,22 +12851,22 @@ var MainMenu = function MainMenu(_ref5) {
12723
12851
  })) : null))), document.body));
12724
12852
  };
12725
12853
 
12726
- var _templateObject$1l, _templateObject2$1c, _templateObject3$13, _templateObject4$Z, _templateObject5$T, _templateObject6$G, _templateObject7$B, _templateObject8$z, _templateObject9$t, _templateObject10$m, _templateObject11$h;
12854
+ var _templateObject$1l, _templateObject2$1c, _templateObject3$14, _templateObject4$_, _templateObject5$T, _templateObject6$G, _templateObject7$B, _templateObject8$y, _templateObject9$t, _templateObject10$n, _templateObject11$h;
12727
12855
  var MetaConatiner = styled__default.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose(["\n margin: 10px 10px;\n border: 1px solid #e2e2e380;\n background-color: #eeeded80;\n border-radius: 5px;\n &:active { \n box-shadow: 4px 4px #eeeded80;\n }\n"])));
12728
12856
  var LabelTitle = styled__default.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n max-width: 130px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n opacity: 0.76;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: #575757;\n font-family: ", ";\n margin-top: 2px;\n"])), function (_ref) {
12729
12857
  var theme = _ref.theme;
12730
12858
  return theme.fontFamily.ui;
12731
12859
  });
12732
- var LabelContent = styled__default.div(_templateObject3$13 || (_templateObject3$13 = _taggedTemplateLiteralLoose(["\n font-size: 10px;\n padding-left: 10px;\n max-width: 200px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 4px 0 5px 0;\n white-space: nowrap;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: rgba(87, 87, 87, 0.5);\n"])));
12733
- var LabelNotes = styled__default.div(_templateObject4$Z || (_templateObject4$Z = _taggedTemplateLiteralLoose(["\n padding-left: 10px;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 5px 0 8px 0;\n max-height: 23px;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: rgba(87, 87, 87, 0.5);\n ", "\n"])), function (_ref2) {
12860
+ var LabelContent = styled__default.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n font-size: 10px;\n padding-left: 10px;\n max-width: 200px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 4px 0 5px 0;\n white-space: nowrap;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: rgba(87, 87, 87, 0.5);\n"])));
12861
+ var LabelNotes = styled__default.div(_templateObject4$_ || (_templateObject4$_ = _taggedTemplateLiteralLoose(["\n padding-left: 10px;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 5px 0 8px 0;\n max-height: 23px;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: rgba(87, 87, 87, 0.5);\n ", "\n"])), function (_ref2) {
12734
12862
  var theme = _ref2.theme;
12735
12863
  return theme && styled.css(_templateObject5$T || (_templateObject5$T = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.data);
12736
12864
  });
12737
12865
  var TitleContainer = styled__default.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n display: flex;\n gap:6px;\n flex-direction: row;\n align-items: center;\n margin-left: 10px;\n margin: 3px 0 5px 10px;\n"])));
12738
12866
  var Container$U = styled__default.div(_templateObject7$B || (_templateObject7$B = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
12739
- var TitleBox = styled__default.div(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
12867
+ var TitleBox = styled__default.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
12740
12868
  var IconBox = styled__default.div(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n padding: 1px 5px 0 0;\n"])));
12741
- var CopyTextBox = styled__default.pre(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n padding: 5px;\n font-size: 10px;\n line-height: 1.2;\n box-shadow: 2px 2px 4px (195deg 16% 72% / 72%);\n border: 1px solid hsl(195deg 5% 60% / 72%);\n background-color: #f8f9fa;\n border-radius: 5px;\n opacity: 0.76;\n font-weight: 500;\n color: #575757;\n position: absolute; \n max-width: 170px;\n white-space: pre-wrap;\n font-family: ", ";\n right:10px;\n margin-top: -23px;\n"])), function (_ref3) {
12869
+ var CopyTextBox = styled__default.pre(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n padding: 5px;\n font-size: 10px;\n line-height: 1.2;\n box-shadow: 2px 2px 4px (195deg 16% 72% / 72%);\n border: 1px solid hsl(195deg 5% 60% / 72%);\n background-color: #f8f9fa;\n border-radius: 5px;\n opacity: 0.76;\n font-weight: 500;\n color: #575757;\n position: absolute; \n max-width: 170px;\n white-space: pre-wrap;\n font-family: ", ";\n right:10px;\n margin-top: -23px;\n"])), function (_ref3) {
12742
12870
  var theme = _ref3.theme;
12743
12871
  return theme.fontFamily.data;
12744
12872
  });
@@ -12812,13 +12940,13 @@ var UserDrawerMeta = function UserDrawerMeta(_ref4) {
12812
12940
  }, notes) : null)));
12813
12941
  };
12814
12942
 
12815
- var _templateObject$1m, _templateObject2$1d, _templateObject3$14, _templateObject4$_, _templateObject5$U, _templateObject6$H, _templateObject7$C, _templateObject8$A, _templateObject9$u, _templateObject10$n, _templateObject11$i, _templateObject12$d, _templateObject13$b, _templateObject14$9, _templateObject15$8, _templateObject16$5, _templateObject17$5, _templateObject18$4, _templateObject19$4, _templateObject20$4, _templateObject21$4, _templateObject22$3;
12943
+ var _templateObject$1m, _templateObject2$1d, _templateObject3$15, _templateObject4$$, _templateObject5$U, _templateObject6$H, _templateObject7$C, _templateObject8$z, _templateObject9$u, _templateObject10$o, _templateObject11$i, _templateObject12$d, _templateObject13$b, _templateObject14$a, _templateObject15$8, _templateObject16$5, _templateObject17$5, _templateObject18$4, _templateObject19$4, _templateObject20$4, _templateObject21$4, _templateObject22$3;
12816
12944
  var DrawerTop = styled__default.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose([""])));
12817
12945
  var DrawerBottom = styled__default.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
12818
12946
  var theme = _ref.theme;
12819
- return styled.css(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n width: 100%;\n position: fixed;\n bottom: 50px;\n\n @media ", " {\n position: static;\n bottom: 0;\n }\n "])), theme.deviceMediaQuery.large);
12947
+ return styled.css(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n width: 100%;\n position: fixed;\n bottom: 50px;\n\n @media ", " {\n position: static;\n bottom: 0;\n }\n "])), theme.deviceMediaQuery.large);
12820
12948
  });
12821
- var DrawerHeader = styled__default.h2(_templateObject4$_ || (_templateObject4$_ = _taggedTemplateLiteralLoose(["\n ", ";\n padding: 0;\n margin: 0 0 5px;\n"])), function (_ref2) {
12949
+ var DrawerHeader = styled__default.h2(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n ", ";\n padding: 0;\n margin: 0 0 5px;\n"])), function (_ref2) {
12822
12950
  var theme = _ref2.theme;
12823
12951
  return theme.typography.global.mainMenu.subheader;
12824
12952
  });
@@ -12830,14 +12958,14 @@ var UserOptions = styled__default.div(_templateObject7$C || (_templateObject7$C
12830
12958
  var colors = _ref4.theme.colors;
12831
12959
  return colors.divider;
12832
12960
  });
12833
- var Logout = styled__default.div(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
12961
+ var Logout = styled__default.div(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
12834
12962
  var LinkMenu = styled__default.ul(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
12835
- var LinkMenuItem = styled__default.li(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
12963
+ var LinkMenuItem = styled__default.li(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
12836
12964
  var IconWrapper$4 = styled__default.div(_templateObject11$i || (_templateObject11$i = _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"])));
12837
12965
  var IconWrapperFooter = styled__default.div(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n width: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n padding-right: 20px;\n"])));
12838
12966
  var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n\n ", ";\n\n ", ";\n"])), resetButtonStyles, function (_ref5) {
12839
12967
  var theme = _ref5.theme;
12840
- return styled.css(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n ", ";\n\n &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover);
12968
+ return styled.css(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n ", ";\n\n &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover);
12841
12969
  }, function (_ref6) {
12842
12970
  var theme = _ref6.theme,
12843
12971
  isActive = _ref6.isActive;
@@ -12967,11 +13095,11 @@ var UserMenu = function UserMenu(_ref16) {
12967
13095
  }, title)) : null));
12968
13096
  };
12969
13097
 
12970
- var _templateObject$1n, _templateObject2$1e, _templateObject3$15, _templateObject4$$, _templateObject5$V, _templateObject6$I, _templateObject7$D, _templateObject8$B;
13098
+ var _templateObject$1n, _templateObject2$1e, _templateObject3$16, _templateObject4$10, _templateObject5$V, _templateObject6$I, _templateObject7$D, _templateObject8$A;
12971
13099
  var Container$V = styled__default.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 18px 20px 12px 20px;\n height: 122px;\n"])));
12972
13100
  var ImgWrapper = styled__default.div(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n overflow: hidden;\n height: 40px;\n width: 40px;\n flex-shrink: 0;\n"])));
12973
- var EmptyImg = styled__default.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n background-color: hsl(210, 22%, 91%);\n width: 100%;\n height: 100%;\n"])));
12974
- var Image$2 = 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) {
13101
+ var EmptyImg = styled__default.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n background-color: hsl(210, 22%, 91%);\n width: 100%;\n height: 100%;\n"])));
13102
+ var Image$2 = styled__default.div(_templateObject4$10 || (_templateObject4$10 = _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) {
12975
13103
  return p.image;
12976
13104
  }, function (p) {
12977
13105
  return p.image ? 'block' : 'none';
@@ -12979,7 +13107,7 @@ var Image$2 = styled__default.div(_templateObject4$$ || (_templateObject4$$ = _t
12979
13107
  var InfoContainer = styled__default.div(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
12980
13108
  var Title$8 = styled__default.div(_templateObject6$I || (_templateObject6$I = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n font-weight: 500;\n color: hsl(0, 0%, 34%);\n"])));
12981
13109
  var Message = styled__default.div(_templateObject7$D || (_templateObject7$D = _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"])));
12982
- var TimeMsg = styled__default.div(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n color: hsl(0, 0%, 67%);\n margin-top: 15px;\n"])));
13110
+ var TimeMsg = styled__default.div(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n color: hsl(0, 0%, 67%);\n margin-top: 15px;\n"])));
12983
13111
 
12984
13112
  var NotificationItem = function NotificationItem(_ref) {
12985
13113
  var imgUrl = _ref.imgUrl,
@@ -12991,13 +13119,13 @@ var NotificationItem = function NotificationItem(_ref) {
12991
13119
  }) : React__default.createElement(EmptyImg, null)), React__default.createElement(InfoContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(Message, null, message), React__default.createElement(TimeMsg, null, time)));
12992
13120
  };
12993
13121
 
12994
- var _templateObject$1o, _templateObject2$1f, _templateObject3$16;
13122
+ var _templateObject$1o, _templateObject2$1f, _templateObject3$17;
12995
13123
  var Container$W = styled__default.div(_templateObject$1o || (_templateObject$1o = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
12996
13124
  var StatusContainer = styled__default.h2(_templateObject2$1f || (_templateObject2$1f = _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) {
12997
13125
  var theme = _ref.theme;
12998
13126
  return theme.colors.divider;
12999
13127
  });
13000
- var NotificationWrapper = styled__default.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n"])), function (_ref2) {
13128
+ var NotificationWrapper = styled__default.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n"])), function (_ref2) {
13001
13129
  var colors = _ref2.theme.colors;
13002
13130
  return colors.divider;
13003
13131
  });
@@ -13027,14 +13155,14 @@ var NotificationsHistory = function NotificationsHistory(_ref3) {
13027
13155
  return React__default.createElement(Container$W, null, unread && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
13028
13156
  };
13029
13157
 
13030
- var _templateObject$1p, _templateObject2$1g, _templateObject3$17, _templateObject4$10, _templateObject5$W, _templateObject6$J, _templateObject7$E, _templateObject8$C, _templateObject9$v, _templateObject10$o, _templateObject11$j, _templateObject12$e, _templateObject13$c, _templateObject14$a;
13158
+ var _templateObject$1p, _templateObject2$1g, _templateObject3$18, _templateObject4$11, _templateObject5$W, _templateObject6$J, _templateObject7$E, _templateObject8$B, _templateObject9$v, _templateObject10$p, _templateObject11$j, _templateObject12$e, _templateObject13$c, _templateObject14$b;
13031
13159
  var Container$X = styled__default.div(_templateObject$1p || (_templateObject$1p = _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) {
13032
13160
  var theme = _ref.theme,
13033
13161
  colors = _ref.theme.colors;
13034
13162
  return colors && styled.css(_templateObject2$1g || (_templateObject2$1g = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n box-shadow: 5px 7px 10px 0 hsla(205, 16%, 77%, 0.1);\n background-color:", ";\n "])), colors.divider, theme.styles.global.mainMenu.background.backgroundColor);
13035
13163
  });
13036
- var SearchBar = styled__default.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n margin-left: 25px;\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
13037
- var IconWrapper$5 = styled__default.div(_templateObject4$10 || (_templateObject4$10 = _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"])));
13164
+ var SearchBar = styled__default.div(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n margin-left: 25px;\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
13165
+ var IconWrapper$5 = styled__default.div(_templateObject4$11 || (_templateObject4$11 = _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"])));
13038
13166
  var SearchInput = styled__default.input(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n flex: 1;\n height: 35px;\n line-height: 35px;\n border: none;\n outline: none;\n\n ", ";\n\n &::placeholder {\n font-style: italic;\n ", ";\n }\n"])), function (_ref2) {
13039
13167
  var theme = _ref2.theme;
13040
13168
  return theme.fontFamily.data;
@@ -13050,13 +13178,13 @@ var DrawerToggle = styled__default.button.attrs({
13050
13178
  type: 'button'
13051
13179
  })(_templateObject7$E || (_templateObject7$E = _taggedTemplateLiteralLoose(["\n width: 60px;\n margin: 0 5px;\n height: inherit;\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n\n ", ";\n\n ", "\n"])), function (_ref5) {
13052
13180
  var theme = _ref5.theme;
13053
- return styled.css(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid ", ";\n\n &:hover {\n border-bottom-color: ", ";\n }\n\n transition: border ", " ", ";\n "])), theme.colors.menu.indicator, theme.colors.menu.hover, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
13181
+ return styled.css(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid ", ";\n\n &:hover {\n border-bottom-color: ", ";\n }\n\n transition: border ", " ", ";\n "])), theme.colors.menu.indicator, theme.colors.menu.hover, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
13054
13182
  }, function (_ref6) {
13055
13183
  var isActive = _ref6.isActive,
13056
13184
  theme = _ref6.theme;
13057
13185
  return isActive && styled.css(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: ", ";\n }\n "])), theme.colors.menu.active);
13058
13186
  });
13059
- var DrawerPortalWrapper = styled__default.div(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose([""])));
13187
+ var DrawerPortalWrapper = styled__default.div(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose([""])));
13060
13188
  var Drawer = styled__default.div(_templateObject11$j || (_templateObject11$j = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n\n position: fixed;\n right: -10px;\n top: 65px;\n bottom: 0;\n background: ", ";\n border-left: ", " 1px solid;\n width: ", ";\n opacity: 0;\n visibility: hidden;\n z-index: 100;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n ", ";\n\n ", "\n"])), function (_ref7) {
13061
13189
  var theme = _ref7.theme;
13062
13190
  return theme.fontFamily.ui;
@@ -13076,7 +13204,7 @@ var Drawer = styled__default.div(_templateObject11$j || (_templateObject11$j = _
13076
13204
  var isOpen = _ref12.isOpen;
13077
13205
  return isOpen && styled.css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
13078
13206
  });
13079
- var NotificationsContainer = styled__default.div(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
13207
+ var NotificationsContainer = styled__default.div(_templateObject14$b || (_templateObject14$b = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
13080
13208
 
13081
13209
  var TopBar = function TopBar(_ref13) {
13082
13210
  var _ref13$hasNotificatio = _ref13.hasNotifications,
@@ -13230,11 +13358,11 @@ var TabList = function TabList(_ref) {
13230
13358
 
13231
13359
  var _excluded$E = ["children", "tabFor", "onClick"];
13232
13360
 
13233
- var _templateObject$1r, _templateObject2$1h, _templateObject3$18;
13361
+ var _templateObject$1r, _templateObject2$1h, _templateObject3$19;
13234
13362
  var TabComponent = styled__default.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
13235
13363
  var TabLabel = styled__default.label(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n height: 40px;\n ", "\n font-size: 15px;\n font-weight: ", ";\n letter-spacing: 0.09px;\n color: ", ";\n cursor: pointer;\n border-bottom: ", ";\n padding-top: 6px;\n padding-bottom: 14px;\n flex-shrink: 0;\n"])), function (_ref) {
13236
13364
  var theme = _ref.theme;
13237
- return styled.css(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
13365
+ return styled.css(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
13238
13366
  }, function (_ref2) {
13239
13367
  var active = _ref2.active;
13240
13368
  return active ? '600' : '500';
@@ -13285,15 +13413,15 @@ var TabContent = function TabContent(_ref) {
13285
13413
 
13286
13414
  var _excluded$G = ["tabFor", "icon", "closeId", "counter", "status"];
13287
13415
 
13288
- var _templateObject$1t, _templateObject2$1i, _templateObject3$19, _templateObject4$11;
13416
+ var _templateObject$1t, _templateObject2$1i, _templateObject3$1a, _templateObject4$12;
13289
13417
  var Container$Z = styled__default.button(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
13290
13418
  var LinkTab = styled__default.div(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n\n ", ";\n\n ", "\n"])), function (_ref) {
13291
13419
  var theme = _ref.theme;
13292
- return styled.css(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n transition: border ", " ", ";\n border-bottom: 5px solid ", ";\n\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n\n &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.colors.menu.indicator, IconWrapper, theme.colors.icons['dimmed'], theme.colors.menu.hover, IconWrapper, theme.colors.menu.hover);
13420
+ return styled.css(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n transition: border ", " ", ";\n border-bottom: 5px solid ", ";\n\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n\n &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.colors.menu.indicator, IconWrapper, theme.colors.icons['dimmed'], theme.colors.menu.hover, IconWrapper, theme.colors.menu.hover);
13293
13421
  }, function (_ref2) {
13294
13422
  var isActive = _ref2.isActive,
13295
13423
  theme = _ref2.theme;
13296
- return isActive && styled.css(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.colors.menu.active, IconWrapper, theme.colors.menu.active);
13424
+ return isActive && styled.css(_templateObject4$12 || (_templateObject4$12 = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.colors.menu.active, IconWrapper, theme.colors.menu.active);
13297
13425
  });
13298
13426
 
13299
13427
  var MobileTab = function MobileTab(_ref3) {
@@ -13327,12 +13455,12 @@ var MobileTab = function MobileTab(_ref3) {
13327
13455
 
13328
13456
  var _excluded$H = ["icon", "title", "subtitle", "tabFor"];
13329
13457
 
13330
- var _templateObject$1u, _templateObject2$1j, _templateObject3$1a, _templateObject4$12, _templateObject5$X, _templateObject6$K;
13458
+ var _templateObject$1u, _templateObject2$1j, _templateObject3$1b, _templateObject4$13, _templateObject5$X, _templateObject6$K;
13331
13459
  var Container$_ = styled__default.div(_templateObject$1u || (_templateObject$1u = _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) {
13332
13460
  var active = _ref.active;
13333
- return active ? styled.css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid hsl(196, 100%, 40%);\n "]))) : styled.css(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
13461
+ return active ? styled.css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid hsl(196, 100%, 40%);\n "]))) : styled.css(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
13334
13462
  }, IconWrapper);
13335
- var Title$9 = styled__default.div(_templateObject4$12 || (_templateObject4$12 = _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) {
13463
+ var Title$9 = styled__default.div(_templateObject4$13 || (_templateObject4$13 = _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) {
13336
13464
  var theme = _ref2.theme;
13337
13465
  return theme.fontFamily.ui;
13338
13466
  }, function (_ref3) {
@@ -13417,13 +13545,13 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
13417
13545
 
13418
13546
  var _excluded$I = ["closeId", "closeText"];
13419
13547
 
13420
- var _templateObject$1w, _templateObject2$1l, _templateObject3$1b, _templateObject4$13;
13548
+ var _templateObject$1w, _templateObject2$1l, _templateObject3$1c, _templateObject4$14;
13421
13549
  var StyledButton$6 = styled__default.button(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n ", "\n\n ", ";\n \n height: ", "px;\n position: fixed;\n bottom: 0;\n font-size: 14px;\n outline: none;\n\n width: 100%;\n text-align: center;\n white-space: nowrap;\n padding: 0 40px;\n\n"])), resetButtonStyles, function (_ref) {
13422
13550
  var theme = _ref.theme;
13423
13551
  return styled.css(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n ", ";\n border-top: 1px solid ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"], theme.styles.global.mainMenu.background, theme.colors.divider);
13424
13552
  }, MOBILE_CLOSE_HEIGHT);
13425
- var IconContainer$2 = styled__default.div(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n height: inherit;\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n margin: 0 20px;\n\n svg {\n display:block;\n }\n"])));
13426
- var TextWrapper = styled__default.div(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
13553
+ var IconContainer$2 = styled__default.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n height: inherit;\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n margin: 0 20px;\n\n svg {\n display:block;\n }\n"])));
13554
+ var TextWrapper = styled__default.div(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
13427
13555
 
13428
13556
  var CloseButton$1 = function CloseButton(_ref2) {
13429
13557
  var closeId = _ref2.closeId,
@@ -13459,11 +13587,11 @@ var MobileNavbarContent = function MobileNavbarContent(_ref) {
13459
13587
  return selected === closeId ? null : React__default.createElement(Container$10, null, React__default.createElement(ContentWrapper, null, children));
13460
13588
  };
13461
13589
 
13462
- var _templateObject$1y, _templateObject2$1n, _templateObject3$1c;
13590
+ var _templateObject$1y, _templateObject2$1n, _templateObject3$1d;
13463
13591
  var Container$11 = styled__default.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose([""])));
13464
13592
  var ItemWrapper = styled__default.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n ", ";\n"])), function (_ref) {
13465
13593
  var theme = _ref.theme;
13466
- return styled.css(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n border-bottom: 1px solid ", "\n "])), theme.colors.divider);
13594
+ return styled.css(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n border-bottom: 1px solid ", "\n "])), theme.colors.divider);
13467
13595
  });
13468
13596
 
13469
13597
  var MobileMenu = function MobileMenu(_ref2) {
@@ -13534,10 +13662,10 @@ var MobileMenu = function MobileMenu(_ref2) {
13534
13662
  })));
13535
13663
  };
13536
13664
 
13537
- var _templateObject$1z, _templateObject2$1o, _templateObject3$1d;
13665
+ var _templateObject$1z, _templateObject2$1o, _templateObject3$1e;
13538
13666
  var Logo$1 = styled__default(reactRouterDom.Link)(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n flex-basis: 0;\n flex-grow: 1;\n justify-content: center;\n align-items: center;\n object {\n pointer-events: none;\n height: 25px;\n }\n"])), resetButtonStyles);
13539
13667
  var LogoMark$1 = styled__default.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n"])));
13540
- var SVGObject$1 = styled__default.object(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose([""])));
13668
+ var SVGObject$1 = styled__default.object(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose([""])));
13541
13669
 
13542
13670
  var MobileLogoLink = function MobileLogoLink(_ref) {
13543
13671
  var _ref$home = _ref.home,
@@ -13732,15 +13860,15 @@ var GlobalUI = function GlobalUI(_ref) {
13732
13860
 
13733
13861
  var _excluded$K = ["children"];
13734
13862
 
13735
- var _templateObject$1C, _templateObject2$1q, _templateObject3$1e, _templateObject4$14, _templateObject5$Y, _templateObject6$L, _templateObject7$F, _templateObject8$D, _templateObject9$w;
13863
+ var _templateObject$1C, _templateObject2$1q, _templateObject3$1f, _templateObject4$15, _templateObject5$Y, _templateObject6$L, _templateObject7$F, _templateObject8$C, _templateObject9$w;
13736
13864
  var Container$14 = styled__default.div(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteralLoose(["\n width: 286px;\n border-right: 1px solid hsla(0, 0%, 84%, 50%);\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n"])));
13737
13865
  var LogoContainer = styled__default.div(_templateObject2$1q || (_templateObject2$1q = _taggedTemplateLiteralLoose(["\n height: 84px;\n color: hsl(205, 7%, 35%);\n border-bottom: 1px solid hsla(0, 0%, 84%, 50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding-top: 18px;\n padding-bottom: 15px;\n"])));
13738
- var LogoTopText = styled__default.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n height: 31px;\n font-family: Monorale;\n font-size: 18px;\n font-weight: 500;\n line-height: 1.72;\n letter-spacing: 4.5px;\n text-align: center;\n"])));
13739
- var LogoBottomText = styled__default.div(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose(["\n height: 19px;\n font-family: Monorale;\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n letter-spacing: 14.11px;\n text-align: center;\n"])));
13866
+ var LogoTopText = styled__default.div(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose(["\n height: 31px;\n font-family: Monorale;\n font-size: 18px;\n font-weight: 500;\n line-height: 1.72;\n letter-spacing: 4.5px;\n text-align: center;\n"])));
13867
+ var LogoBottomText = styled__default.div(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose(["\n height: 19px;\n font-family: Monorale;\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n letter-spacing: 14.11px;\n text-align: center;\n"])));
13740
13868
  var SidebarBox = styled__default.div(_templateObject5$Y || (_templateObject5$Y = _taggedTemplateLiteralLoose(["\n position: relative;\n border-bottom: 1px solid hsla(0, 0%, 84%, 50%);\n padding: 22px 20px 21px 20px;\n"])));
13741
13869
  var SidebarHeading = styled__default.div(_templateObject6$L || (_templateObject6$L = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: hsl(0, 0%, 50%);\n margin-bottom: 18px;\n"])));
13742
13870
  var SidebarLinkHeading = styled__default.div(_templateObject7$F || (_templateObject7$F = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: hsl(0, 0%, 50%);\n"])));
13743
- var BackLink = styled__default(reactRouterDom.Link)(_templateObject8$D || (_templateObject8$D = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: hsl(0, 0%, 50%);\n"])));
13871
+ var BackLink = styled__default(reactRouterDom.Link)(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: hsl(0, 0%, 50%);\n"])));
13744
13872
  var SLink = styled__default(reactRouterDom.Link)(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 30px;\n top: 15px;\n /* width: 80px; */\n /* height: 30px; */\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n color: hsl(0, 0%, 55%);\n border-radius: 3px;\n background-color: hsl(206, 70%, 96%);\n text-decoration: none;\n padding: 7px 20px;\n"])));
13745
13873
  var SidebarLink = function SidebarLink(_ref) {
13746
13874
  var title = _ref.title,