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.
@@ -3532,6 +3532,17 @@ var DropArea = function DropArea(_ref3) {
3532
3532
 
3533
3533
  setInDropZone(false);
3534
3534
  }, [dropCallback]);
3535
+ var handleWindowDragAndDrop = useCallback(function (e) {
3536
+ e.preventDefault();
3537
+ }, []);
3538
+ useEffect(function () {
3539
+ window.addEventListener("dragover", handleWindowDragAndDrop);
3540
+ window.addEventListener("drop", handleWindowDragAndDrop);
3541
+ return function () {
3542
+ window.removeEventListener('dragover', handleWindowDragAndDrop);
3543
+ window.removeEventListener('drop', handleWindowDragAndDrop);
3544
+ };
3545
+ }, [handleWindowDragAndDrop]);
3535
3546
  return React__default.createElement(Container$c, Object.assign({}, {
3536
3547
  height: height
3537
3548
  }, props), React__default.createElement(DragAndDrop, Object.assign({}, {
@@ -4417,7 +4428,7 @@ var Container$g = styled.div(_templateObject$r || (_templateObject$r = _taggedTe
4417
4428
  return theme.fontFamily.ui;
4418
4429
  });
4419
4430
  var StyledDropArea = styled(DropArea)(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
4420
- var InputButtonWrapper = styled.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n z-index: 99;\n margin-top: 20px;\n"])));
4431
+ var InputButtonWrapper = styled.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n z-index: 99;\n margin-top: 20px;\n display: flex;\n gap: 20px;\n"])));
4421
4432
  var FilesUploadGroup = styled.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n padding: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 5px;\n background-color: hsl(204, 15%, 94%);\n position: relative;\n"])), function (_ref2) {
4422
4433
  var hasFiles = _ref2.hasFiles;
4423
4434
  return hasFiles ? '26px 0 20px 0' : '65px 0 42px 0';
@@ -4484,10 +4495,18 @@ var AreaUploadManager = function AreaUploadManager(_ref3) {
4484
4495
  selectFilesText = _ref3$selectFilesText === void 0 ? 'Select Files' : _ref3$selectFilesText,
4485
4496
  _ref3$addMoreFilesTex = _ref3.addMoreFilesText,
4486
4497
  addMoreFilesText = _ref3$addMoreFilesTex === void 0 ? 'Add More Files' : _ref3$addMoreFilesTex,
4498
+ _ref3$clearFilesText = _ref3.clearFilesText,
4499
+ clearFilesText = _ref3$clearFilesText === void 0 ? 'Clear Files' : _ref3$clearFilesText,
4500
+ _ref3$beginUploadText = _ref3.beginUploadText,
4501
+ beginUploadText = _ref3$beginUploadText === void 0 ? 'Begin Upload' : _ref3$beginUploadText,
4487
4502
  allowedFileTypes = _ref3.allowedFileTypes,
4488
4503
  customComponent = _ref3.customComponent,
4489
4504
  _ref3$onChangeCallbac = _ref3.onChangeCallback,
4490
- onChangeCallback = _ref3$onChangeCallbac === void 0 ? function () {} : _ref3$onChangeCallbac;
4505
+ onChangeCallback = _ref3$onChangeCallbac === void 0 ? function () {} : _ref3$onChangeCallbac,
4506
+ _ref3$clearFilesCallb = _ref3.clearFilesCallback,
4507
+ clearFilesCallback = _ref3$clearFilesCallb === void 0 ? function () {} : _ref3$clearFilesCallb,
4508
+ _ref3$beginUploadCall = _ref3.beginUploadCallback,
4509
+ beginUploadCallback = _ref3$beginUploadCall === void 0 ? function () {} : _ref3$beginUploadCall;
4491
4510
 
4492
4511
  var _useState = useState(null),
4493
4512
  files = _useState[0],
@@ -4505,6 +4524,10 @@ var AreaUploadManager = function AreaUploadManager(_ref3) {
4505
4524
  setFiles(goodFiles);
4506
4525
  onChangeCallback(goodFiles, rejectedFiles);
4507
4526
  }, [files, allowedFileTypes, onChangeCallback]);
4527
+ var clearFiles = useCallback(function () {
4528
+ setFiles(null);
4529
+ clearFilesCallback();
4530
+ }, [clearFilesCallback]);
4508
4531
  return React__default.createElement(Container$g, null, React__default.createElement(FilesUploadGroup, {
4509
4532
  hasFiles: files !== null
4510
4533
  }, React__default.createElement(StyledDropArea, {
@@ -4516,8 +4539,17 @@ var AreaUploadManager = function AreaUploadManager(_ref3) {
4516
4539
  text: files !== null ? addMoreFilesText : selectFilesText,
4517
4540
  inputCallback: handleFiles,
4518
4541
  multiple: true,
4519
- buttonDesign: files !== null ? 'secondary' : 'primary'
4520
- }))));
4542
+ buttonDesign: files !== null ? 'secondary' : 'primary',
4543
+ accept: allowedFileTypes === null || allowedFileTypes === void 0 ? void 0 : allowedFileTypes.join(', ')
4544
+ }), files !== null && React__default.createElement(Fragment, null, React__default.createElement(Button, {
4545
+ size: 'small',
4546
+ onClick: beginUploadCallback,
4547
+ design: 'primary'
4548
+ }, beginUploadText), React__default.createElement(Button, {
4549
+ size: 'small',
4550
+ onClick: clearFiles,
4551
+ design: 'secondary'
4552
+ }, clearFilesText)))));
4521
4553
  };
4522
4554
 
4523
4555
  var _excluded$i = ["children", "spacing"];
@@ -5427,7 +5459,7 @@ var LoadingBox = function LoadingBox(_ref2) {
5427
5459
 
5428
5460
  var _excluded$o = ["buttonIcon", "buttonText", "list", "selected", "disabled", "isLoading", "loadingText", "optionType", "hasOptionsFilter", "searchPlaceholder", "maxDisplayedItems", "searchResultText", "emptyResultText", "onSelect"];
5429
5461
 
5430
- var _templateObject$B, _templateObject2$A, _templateObject3$v, _templateObject4$q, _templateObject5$m, _templateObject6$k, _templateObject7$j, _templateObject8$h, _templateObject9$g;
5462
+ var _templateObject$B, _templateObject2$A, _templateObject3$v, _templateObject4$q, _templateObject5$m, _templateObject6$k, _templateObject7$j, _templateObject8$h, _templateObject9$g, _templateObject10$d;
5431
5463
  var Container$o = styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
5432
5464
  var TopLine$1 = styled.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) {
5433
5465
  var theme = _ref.theme;
@@ -5435,7 +5467,7 @@ var TopLine$1 = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTe
5435
5467
  });
5436
5468
  var InnerBox = styled.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"])));
5437
5469
  var StyledFilterOption = styled(FilterOption)(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
5438
- var OptionList = styled.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);
5470
+ var OptionList = styled.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);
5439
5471
  var ResultsContainer = styled.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n border-top: 1px solid hsl(0, 0%, 91%);\n padding-bottom: 8px;\n"])));
5440
5472
  var ResultCounter = styled.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n opacity: 0.75;\n font-family: ", ";\n color: hsl(0, 0%, 55%);\n font-size: 12px;\n font-style: italic;\n font-weight: 300;\n display: flex;\n align-items: center;\n justify-content: left;\n padding-left: 9px;\n height: 30px;\n margin-bottom: 6px;\n border-bottom: 1px solid hsl(0, 0%, 91%);\n"])), function (_ref2) {
5441
5473
  var theme = _ref2.theme;
@@ -5443,6 +5475,7 @@ var ResultCounter = styled.div(_templateObject7$j || (_templateObject7$j = _tagg
5443
5475
  });
5444
5476
  var SearchWrapper = styled.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n height: 41px;\n display: flex;\n align-items: center;\n"])));
5445
5477
  var EmptyResultText = styled.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n display: block;\n color: hsl(0, 0%, 56%);\n margin-left: 12px;\n user-select: none;\n pointer-events: none;\n height: 35px;\n display: flex;\n align-items: center;\n font-size: 12px;\n"])));
5478
+ var Gradient = styled.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"])));
5446
5479
 
5447
5480
  var isValueSelected = function isValueSelected(item, selected) {
5448
5481
  var isItemSelected = false;
@@ -5669,7 +5702,7 @@ var FilterDropdown = function FilterDropdown(_ref3) {
5669
5702
  optionType: optionType,
5670
5703
  value: value
5671
5704
  }));
5672
- }) : React__default.createElement(EmptyResultText, null, emptyResultText))))));
5705
+ }) : React__default.createElement(EmptyResultText, null, emptyResultText)), list.length > 5 && React__default.createElement(Gradient, null)))));
5673
5706
  };
5674
5707
 
5675
5708
  var _excluded$p = ["buttonText", "disabled", "list", "isLoading", "loadingText", "isSortAscending", "selected", "descendingText", "ascendingText", "onSelect"];
@@ -5774,7 +5807,7 @@ var SortDropdown = function SortDropdown(_ref6) {
5774
5807
  }))))));
5775
5808
  };
5776
5809
 
5777
- 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;
5810
+ 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;
5778
5811
  var Container$q = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
5779
5812
  var ContextActionBaseCSS = 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"])));
5780
5813
  var ContextIcon = styled.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) {
@@ -5800,7 +5833,7 @@ var ContentBox$1 = styled.div(_templateObject8$j || (_templateObject8$j = _tagge
5800
5833
  }, function (_ref7) {
5801
5834
  var openState = _ref7.openState,
5802
5835
  disabled = _ref7.disabled;
5803
- return openState && 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' && css(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'bottom-left' && css(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'top-left' && css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))), openState.position === 'top-right' && css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))));
5836
+ return openState && 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' && css(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'bottom-left' && css(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'top-left' && css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))), openState.position === 'top-right' && css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))));
5804
5837
  });
5805
5838
  var ButtonWrapper$1 = styled.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
5806
5839
  var TopLine$3 = styled.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) {
@@ -6780,7 +6813,7 @@ var StatusIcon = function StatusIcon(_ref5) {
6780
6813
  }));
6781
6814
  };
6782
6815
 
6783
- 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;
6816
+ 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;
6784
6817
  var HandleTouchReactionKeyframes = 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"])));
6785
6818
  var HandleMouseReactionKeyframes = 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"])));
6786
6819
  var HandleBase = styled.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) {
@@ -6810,7 +6843,7 @@ var HandleReactiveRing = styled.circle(_templateObject9$j || (_templateObject9$j
6810
6843
  styling = _ref4.styling;
6811
6844
  return theme.custom.lines[styling].handleReactiveRing.stroke;
6812
6845
  });
6813
- var HandleContrastLayer = styled.circle(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n overflow: visible;\n mix-blend-mode: multiply;\n fill: none;\n stroke: ", ";\n"])), function (_ref5) {
6846
+ var HandleContrastLayer = styled.circle(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n overflow: visible;\n mix-blend-mode: multiply;\n fill: none;\n stroke: ", ";\n"])), function (_ref5) {
6814
6847
  var theme = _ref5.theme,
6815
6848
  styling = _ref5.styling;
6816
6849
  return theme.custom.lines[styling].handleContrastLayer.stroke;
@@ -7029,7 +7062,7 @@ var HandleUnit = function HandleUnit(props) {
7029
7062
  }, index + pointIndexOffset))));
7030
7063
  };
7031
7064
 
7032
- 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;
7065
+ 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;
7033
7066
  var ContrastLine = styled.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) {
7034
7067
  var theme = _ref.theme,
7035
7068
  styling = _ref.styling;
@@ -7065,21 +7098,24 @@ var GrabHandleIndexText$1 = styled.text(_templateObject7$p || (_templateObject7$
7065
7098
  styling = _ref7.styling;
7066
7099
  return theme.custom.lines[styling].grabHandleText.stroke;
7067
7100
  });
7068
- var LabelText$2 = styled.text(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n cursor: pointer;\n"])), function (_ref8) {
7101
+ var LabelText$2 = styled.text(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n cursor: pointer;\n ", "\n"])), function (_ref8) {
7069
7102
  var theme = _ref8.theme,
7070
7103
  styling = _ref8.styling;
7071
7104
  return theme.custom.lines[styling].label.fill;
7105
+ }, function (_ref9) {
7106
+ var showLabelShadow = _ref9.showLabelShadow;
7107
+ return showLabelShadow && 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 "])));
7072
7108
  });
7073
- var GrabHandleContrast = styled(GrabHandle)(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref9) {
7074
- var theme = _ref9.theme,
7075
- styling = _ref9.styling;
7109
+ var GrabHandleContrast = styled(GrabHandle)(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref10) {
7110
+ var theme = _ref10.theme,
7111
+ styling = _ref10.styling;
7076
7112
  return theme.custom.lines[styling].grabHandleContrast.stroke;
7077
7113
  });
7078
- var GrabHandleGroup = styled.g(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n\n ", ", ", " {\n transition: r 250ms ease;\n }\n\n ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
7079
- return props.showIndex && css(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n ", ", ", " {\n pointer-events: none;\n r: ", ";\n }\n "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
7114
+ var GrabHandleGroup = styled.g(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n\n ", ", ", " {\n transition: r 250ms ease;\n }\n\n ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
7115
+ return props.showIndex && css(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n ", ", ", " {\n pointer-events: none;\n r: ", ";\n }\n "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
7080
7116
  });
7081
- var DMCircle = styled.circle(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n fill: hsla(203, 100%, 35%, 0.49);\n cursor: pointer;\n"])));
7082
- var IconFormat = styled(Icon)(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
7117
+ var DMCircle = styled.circle(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n fill: hsla(203, 100%, 35%, 0.49);\n cursor: pointer;\n"])));
7118
+ var IconFormat = styled(Icon)(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
7083
7119
 
7084
7120
  var LineUnit = function LineUnit(props) {
7085
7121
  var x1 = props.x1,
@@ -7106,7 +7142,9 @@ var LineUnit = function LineUnit(props) {
7106
7142
  revealSetIndex = options.revealSetIndex,
7107
7143
  showMoveHandle = options.showMoveHandle,
7108
7144
  setIndexOffset = options.setIndexOffset,
7109
- showDirectionMark = options.showDirectionMark;
7145
+ showDirectionMark = options.showDirectionMark,
7146
+ _options$showLabelSha = options.showLabelShadow,
7147
+ showLabelShadow = _options$showLabelSha === void 0 ? false : _options$showLabelSha;
7110
7148
 
7111
7149
  var _useState = useState(),
7112
7150
  showLineBorder = _useState[0],
@@ -7233,7 +7271,8 @@ var LineUnit = function LineUnit(props) {
7233
7271
  fontSize: 14 + "px",
7234
7272
  x: 0,
7235
7273
  y: 0,
7236
- showIndex: revealSetIndex || handleFinderActive
7274
+ showIndex: revealSetIndex || handleFinderActive,
7275
+ showLabelShadow: showLabelShadow
7237
7276
  }, label)));
7238
7277
  };
7239
7278
 
@@ -7306,38 +7345,50 @@ var LineUnit = function LineUnit(props) {
7306
7345
  fontSize: unit * 14 + "px",
7307
7346
  x: midpoint.x - 16 * unit,
7308
7347
  y: midpoint.y - 15 * unit,
7309
- showIndex: revealSetIndex || handleFinderActive
7348
+ showIndex: revealSetIndex || handleFinderActive,
7349
+ showLabelShadow: showLabelShadow
7310
7350
  }, label));
7311
7351
  };
7312
7352
 
7313
7353
  var LineSetContext = createContext({});
7314
7354
 
7315
- var _templateObject$L, _templateObject2$J;
7316
- var Point = styled.circle(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n fill: ", ";\n"])), function (_ref) {
7317
- var theme = _ref.theme,
7318
- styling = _ref.styling;
7355
+ var _templateObject$L, _templateObject2$J, _templateObject3$E, _templateObject4$y;
7356
+ var FilledPolygon = styled.polygon(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n fill: ", ";\n opacity: ", ";\n"])), function (_ref) {
7357
+ var color = _ref.color;
7358
+ return color;
7359
+ }, function (_ref2) {
7360
+ var opacity = _ref2.opacity;
7361
+ return opacity;
7362
+ });
7363
+ var Point = styled.circle(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n fill: ", ";\n"])), function (_ref3) {
7364
+ var theme = _ref3.theme,
7365
+ styling = _ref3.styling;
7319
7366
  return theme.custom.lines[styling].point.fill;
7320
7367
  });
7321
- var AreaLabelText = styled.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) {
7322
- var theme = _ref2.theme,
7323
- styling = _ref2.styling;
7368
+ var AreaLabelText = styled.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) {
7369
+ var theme = _ref4.theme,
7370
+ styling = _ref4.styling;
7324
7371
  return theme.custom.lines[styling].label.fill;
7372
+ }, function (_ref5) {
7373
+ var showAreaLabelShadow = _ref5.showAreaLabelShadow;
7374
+ return showAreaLabelShadow && 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 "])));
7325
7375
  });
7326
7376
 
7327
- var AreaLabel = function AreaLabel(_ref3) {
7377
+ var AreaLabel = function AreaLabel(_ref6) {
7328
7378
  var _lineSetData$areaName;
7329
7379
 
7330
- var lineSetData = _ref3.lineSetData,
7331
- unit = _ref3.unit;
7380
+ var lineSetData = _ref6.lineSetData,
7381
+ unit = _ref6.unit,
7382
+ showAreaLabelShadow = _ref6.showAreaLabelShadow;
7332
7383
  var pointsLength = lineSetData.points.length;
7333
7384
  if (pointsLength < 3) return null;
7334
7385
  var midpoint = {
7335
7386
  x: 0,
7336
7387
  y: 0
7337
7388
  };
7338
- lineSetData.points.map(function (_ref4) {
7339
- var x = _ref4.x,
7340
- y = _ref4.y;
7389
+ lineSetData.points.map(function (_ref7) {
7390
+ var x = _ref7.x,
7391
+ y = _ref7.y;
7341
7392
  midpoint.x += x;
7342
7393
  midpoint.y += y;
7343
7394
  return null;
@@ -7351,27 +7402,30 @@ var AreaLabel = function AreaLabel(_ref3) {
7351
7402
  fontSize: unit * 14 + "px",
7352
7403
  styling: lineSetData.styling || 'primary',
7353
7404
  x: midpoint.x - 4 * Textlen * unit,
7354
- y: midpoint.y + 6 * unit
7405
+ y: midpoint.y + 6 * unit,
7406
+ showAreaLabelShadow: showAreaLabelShadow
7355
7407
  }, lineSetData.areaName);
7356
7408
  };
7357
7409
 
7358
- var LineSet = function LineSet(_ref5) {
7359
- var getCTM = _ref5.getCTM,
7360
- boundaries = _ref5.boundaries,
7361
- unit = _ref5.unit,
7362
- size = _ref5.size,
7363
- lineSetId = _ref5.lineSetId,
7364
- options = _ref5.options,
7365
- onLineMoveEnd = _ref5.onLineMoveEnd,
7366
- onLineClick = _ref5.onLineClick,
7367
- lineClickSensingBorder = _ref5.lineClickSensingBorder,
7368
- hasClickSensingBorder = _ref5.hasClickSensingBorder;
7410
+ var LineSet = function LineSet(_ref8) {
7411
+ var getCTM = _ref8.getCTM,
7412
+ boundaries = _ref8.boundaries,
7413
+ unit = _ref8.unit,
7414
+ size = _ref8.size,
7415
+ lineSetId = _ref8.lineSetId,
7416
+ options = _ref8.options,
7417
+ onLineMoveEnd = _ref8.onLineMoveEnd,
7418
+ onLineClick = _ref8.onLineClick,
7419
+ lineClickSensingBorder = _ref8.lineClickSensingBorder,
7420
+ hasClickSensingBorder = _ref8.hasClickSensingBorder;
7369
7421
 
7370
7422
  var _useContext = useContext(LineSetContext),
7371
7423
  state = _useContext.state,
7372
7424
  dispatch = _useContext.dispatch;
7373
7425
 
7374
7426
  var lineSetData = state[lineSetId];
7427
+ var _options$showLabelSha = options.showLabelShadow,
7428
+ showLabelShadow = _options$showLabelSha === void 0 ? false : _options$showLabelSha;
7375
7429
 
7376
7430
  var _useState = useState([]),
7377
7431
  handleAngles = _useState[0],
@@ -7456,11 +7510,11 @@ var LineSet = function LineSet(_ref5) {
7456
7510
  y: (pointerPosition.y - screenCTM.f) / screenCTM.d - handleRadius
7457
7511
  };
7458
7512
  var newPoints = points.map(function (_handle, index) {
7459
- var _ref6 = handleRelation.current[index] || {},
7460
- _ref6$offsetX = _ref6.offsetX,
7461
- offsetX = _ref6$offsetX === void 0 ? 0 : _ref6$offsetX,
7462
- _ref6$offsetY = _ref6.offsetY,
7463
- offsetY = _ref6$offsetY === void 0 ? 0 : _ref6$offsetY;
7513
+ var _ref9 = handleRelation.current[index] || {},
7514
+ _ref9$offsetX = _ref9.offsetX,
7515
+ offsetX = _ref9$offsetX === void 0 ? 0 : _ref9$offsetX,
7516
+ _ref9$offsetY = _ref9.offsetY,
7517
+ offsetY = _ref9$offsetY === void 0 ? 0 : _ref9$offsetY;
7464
7518
 
7465
7519
  return enforceBoundaries({
7466
7520
  x: Math.round(pointer.x - offsetX),
@@ -7498,9 +7552,9 @@ var LineSet = function LineSet(_ref5) {
7498
7552
  updateHandleAngles(lineSetData);
7499
7553
  }
7500
7554
  }, [lineSetData, updateHandleAngles, handleUsesAngles]);
7501
- 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) {
7502
- var x = _ref7.x,
7503
- y = _ref7.y;
7555
+ 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) {
7556
+ var x = _ref10.x,
7557
+ y = _ref10.y;
7504
7558
  return React__default.createElement(HandleUnit, {
7505
7559
  key: index + lineSetId,
7506
7560
  lineSetId: lineSetId,
@@ -7520,9 +7574,9 @@ var LineSet = function LineSet(_ref5) {
7520
7574
  readOnlyHandle: lineSetData.readOnly
7521
7575
  });
7522
7576
  });
7523
- var points = options.showPoint && lineSetData.points.map(function (_ref8, index) {
7524
- var x = _ref8.x,
7525
- y = _ref8.y;
7577
+ var points = options.showPoint && lineSetData.points.map(function (_ref11, index) {
7578
+ var x = _ref11.x,
7579
+ y = _ref11.y;
7526
7580
  return React__default.createElement(Point, {
7527
7581
  styling: lineSetData.styling || 'primary',
7528
7582
  key: index,
@@ -7531,9 +7585,9 @@ var LineSet = function LineSet(_ref5) {
7531
7585
  cy: y
7532
7586
  });
7533
7587
  });
7534
- var lines = lineSetData.points.map(function (_ref9, index) {
7535
- var x1 = _ref9.x,
7536
- y1 = _ref9.y;
7588
+ var lines = lineSetData.points.map(function (_ref12, index) {
7589
+ var x1 = _ref12.x,
7590
+ y1 = _ref12.y;
7537
7591
  var points = lineSetData.points,
7538
7592
  name = lineSetData.name,
7539
7593
  _lineSetData$styling = lineSetData.styling,
@@ -7568,17 +7622,25 @@ var LineSet = function LineSet(_ref5) {
7568
7622
  hasClickSensingBorder: hasClickSensingBorder
7569
7623
  });
7570
7624
  });
7571
- return React__default.createElement("g", null, lines, handles, points, React__default.createElement(AreaLabel, {
7625
+ var polygonPoints = lineSetData.points.map(function (point) {
7626
+ return point.x + "," + point.y;
7627
+ }).join(" ");
7628
+ return React__default.createElement("g", null, React__default.createElement(FilledPolygon, {
7629
+ points: polygonPoints,
7630
+ color: lineSetData.areaFillColor ? lineSetData.areaFillColor : 'transparent',
7631
+ opacity: lineSetData.areaTransparencyLevel ? lineSetData.areaTransparencyLevel / 100 : 0
7632
+ }), lines, handles, points, React__default.createElement(AreaLabel, {
7572
7633
  lineSetData: lineSetData,
7573
- unit: unit
7634
+ unit: unit,
7635
+ showAreaLabelShadow: showLabelShadow
7574
7636
  }));
7575
7637
  };
7576
7638
 
7577
- var _templateObject$M, _templateObject2$K, _templateObject3$E, _templateObject4$y, _templateObject5$u;
7639
+ var _templateObject$M, _templateObject2$K, _templateObject3$F, _templateObject4$z, _templateObject5$u;
7578
7640
  var Container$w = styled.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"])));
7579
7641
  var LoadingOverlay = styled.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"])));
7580
- var Frame = styled.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) {
7581
- return props.transculent && css(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
7642
+ var Frame = styled.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) {
7643
+ return props.transculent && css(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
7582
7644
  });
7583
7645
  var Image$1 = styled.img(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n object-fit: contain;\n width: 100%;\n height: 100%;\n"])));
7584
7646
 
@@ -7600,6 +7662,8 @@ var LineUI = function LineUI(_ref) {
7600
7662
  showSetIndex = _ref$options.showSetIndex,
7601
7663
  _ref$options$showPoin = _ref$options.showPointLabel,
7602
7664
  showPointLabel = _ref$options$showPoin === void 0 ? false : _ref$options$showPoin,
7665
+ _ref$options$showLabe = _ref$options.showLabelShadow,
7666
+ showLabelShadow = _ref$options$showLabe === void 0 ? false : _ref$options$showLabe,
7603
7667
  showPointHandle = _ref$options.showPointHandle,
7604
7668
  showMoveHandle = _ref$options.showMoveHandle,
7605
7669
  showGrabHandle = _ref$options.showGrabHandle,
@@ -7736,6 +7800,7 @@ var LineUI = function LineUI(_ref) {
7736
7800
  handleFinderActive: handleFinder,
7737
7801
  revealSetIndex: showSetIndex !== false && (showSetIndex || state.length > 1),
7738
7802
  showPointLabel: showPointLabel,
7803
+ showLabelShadow: showLabelShadow,
7739
7804
  showPointHandle: showPointHandle || showPointHandle !== false && showGrabHandle !== false,
7740
7805
  showMoveHandle: showMoveHandle || showMoveHandle !== false && showGrabHandle !== false,
7741
7806
  setIndexOffset: setIndexOffset,
@@ -7780,11 +7845,11 @@ var LineUI = function LineUI(_ref) {
7780
7845
 
7781
7846
  var _excluded$u = ["loop", "autoPlay", "controls", "muted"];
7782
7847
 
7783
- var _templateObject$N, _templateObject2$L, _templateObject3$F, _templateObject4$z, _templateObject5$v;
7848
+ var _templateObject$N, _templateObject2$L, _templateObject3$G, _templateObject4$A, _templateObject5$v;
7784
7849
  var Container$x = styled.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"])));
7785
7850
  var Video = styled.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"])));
7786
- var LoadingOverlay$1 = styled.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"])));
7787
- var Frame$1 = styled.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) {
7851
+ var LoadingOverlay$1 = styled.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"])));
7852
+ var Frame$1 = styled.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) {
7788
7853
  return props.transcalent && css(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
7789
7854
  });
7790
7855
 
@@ -7798,6 +7863,10 @@ var LineUIVideo = function LineUIVideo(_ref) {
7798
7863
  onLineClick = _ref$onLineClick === void 0 ? function () {} : _ref$onLineClick,
7799
7864
  _ref$onLoaded = _ref.onLoaded,
7800
7865
  onLoaded = _ref$onLoaded === void 0 ? function () {} : _ref$onLoaded,
7866
+ _ref$lineClickSensing = _ref.lineClickSensingBorder,
7867
+ lineClickSensingBorder = _ref$lineClickSensing === void 0 ? '65' : _ref$lineClickSensing,
7868
+ _ref$hasClickSensingB = _ref.hasClickSensingBorder,
7869
+ hasClickSensingBorder = _ref$hasClickSensingB === void 0 ? true : _ref$hasClickSensingB,
7801
7870
  _ref$videoOptions = _ref.videoOptions,
7802
7871
  _ref$videoOptions$loo = _ref$videoOptions.loop,
7803
7872
  loop = _ref$videoOptions$loo === void 0 ? false : _ref$videoOptions$loo,
@@ -7816,6 +7885,7 @@ var LineUIVideo = function LineUIVideo(_ref) {
7816
7885
  _ref$options$showPoin = _ref$options.showPointLabel,
7817
7886
  showPointLabel = _ref$options$showPoin === void 0 ? false : _ref$options$showPoin,
7818
7887
  showPointHandle = _ref$options.showPointHandle,
7888
+ showLabelShadow = _ref$options.showLabelShadow,
7819
7889
  showMoveHandle = _ref$options.showMoveHandle,
7820
7890
  showGrabHandle = _ref$options.showGrabHandle,
7821
7891
  _ref$options$setIndex = _ref$options.setIndexOffset,
@@ -7953,6 +8023,7 @@ var LineUIVideo = function LineUIVideo(_ref) {
7953
8023
  handleFinderActive: handleFinder,
7954
8024
  revealSetIndex: showSetIndex !== false && (showSetIndex || state.length > 1),
7955
8025
  showPointLabel: showPointLabel,
8026
+ showLabelShadow: showLabelShadow,
7956
8027
  showPointHandle: showPointHandle || showPointHandle !== false && showGrabHandle !== false,
7957
8028
  showMoveHandle: showMoveHandle || showMoveHandle !== false && showGrabHandle !== false,
7958
8029
  setIndexOffset: setIndexOffset,
@@ -7985,6 +8056,8 @@ var LineUIVideo = function LineUIVideo(_ref) {
7985
8056
  }, state.map(function (lineSet, index) {
7986
8057
  return React__default.createElement(LineSet, {
7987
8058
  key: index,
8059
+ hasClickSensingBorder: hasClickSensingBorder,
8060
+ lineClickSensingBorder: lineClickSensingBorder,
7988
8061
  onLineMoveEnd: onLineMoveEnd,
7989
8062
  onLineClick: onLineClick,
7990
8063
  lineSetId: index,
@@ -8344,11 +8417,11 @@ function getPeerId(id) {
8344
8417
  return 'WRP_' + id + '_' + Math.floor(Math.random() * (9000 - 10) + 10).toString();
8345
8418
  }
8346
8419
 
8347
- var _templateObject$P, _templateObject2$M, _templateObject3$G, _templateObject4$A, _templateObject5$w;
8420
+ var _templateObject$P, _templateObject2$M, _templateObject3$H, _templateObject4$B, _templateObject5$w;
8348
8421
  var Container$y = styled.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"])));
8349
8422
  var Video$2 = styled(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"])));
8350
- var LoadingOverlay$2 = styled.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"])));
8351
- var Frame$2 = styled.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) {
8423
+ var LoadingOverlay$2 = styled.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"])));
8424
+ var Frame$2 = styled.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) {
8352
8425
  return props.transcalent && css(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
8353
8426
  });
8354
8427
 
@@ -8369,6 +8442,8 @@ var LineUI$1 = function LineUI(_ref) {
8369
8442
  showSetIndex = _ref$options.showSetIndex,
8370
8443
  _ref$options$showPoin = _ref$options.showPointLabel,
8371
8444
  showPointLabel = _ref$options$showPoin === void 0 ? false : _ref$options$showPoin,
8445
+ _ref$options$showLabe = _ref$options.showLabelShadow,
8446
+ showLabelShadow = _ref$options$showLabe === void 0 ? false : _ref$options$showLabe,
8372
8447
  showPointHandle = _ref$options.showPointHandle,
8373
8448
  showMoveHandle = _ref$options.showMoveHandle,
8374
8449
  showGrabHandle = _ref$options.showGrabHandle,
@@ -8508,6 +8583,7 @@ var LineUI$1 = function LineUI(_ref) {
8508
8583
  handleFinderActive: handleFinder,
8509
8584
  revealSetIndex: showSetIndex !== false && (showSetIndex || state.length > 1),
8510
8585
  showPointLabel: showPointLabel,
8586
+ showLabelShadow: showLabelShadow,
8511
8587
  showPointHandle: showPointHandle || showPointHandle !== false && showGrabHandle !== false,
8512
8588
  showMoveHandle: showMoveHandle || showMoveHandle !== false && showGrabHandle !== false,
8513
8589
  setIndexOffset: setIndexOffset,
@@ -8654,6 +8730,32 @@ var LineReducer = (function (state, action) {
8654
8730
  return newState;
8655
8731
  }
8656
8732
 
8733
+ case "UPDATE_FILL_COLOR":
8734
+ {
8735
+ var _update6;
8736
+
8737
+ var _set2 = _extends({}, state[action.index], {
8738
+ areaFillColor: action.data.areaFillColor
8739
+ });
8740
+
8741
+ return update(state, (_update6 = {}, _update6[action.index] = {
8742
+ $set: _set2
8743
+ }, _update6));
8744
+ }
8745
+
8746
+ case "UPDATE_TRANSPARENCY_LEVEL":
8747
+ {
8748
+ var _update7;
8749
+
8750
+ var _set3 = _extends({}, state[action.index], {
8751
+ areaTransparencyLevel: action.data.areaTransparencyLevel
8752
+ });
8753
+
8754
+ return update(state, (_update7 = {}, _update7[action.index] = {
8755
+ $set: _set3
8756
+ }, _update7));
8757
+ }
8758
+
8657
8759
  default:
8658
8760
  console.error("Action " + action['type'] + " not registered.");
8659
8761
  return state;
@@ -8694,12 +8796,12 @@ var makeTitle = function makeTitle(parts, delimiter) {
8694
8796
  return title;
8695
8797
  };
8696
8798
 
8697
- var _templateObject$Q, _templateObject2$N, _templateObject3$H, _templateObject4$B, _templateObject5$x, _templateObject6$r, _templateObject7$q, _templateObject8$o;
8799
+ var _templateObject$Q, _templateObject2$N, _templateObject3$I, _templateObject4$C, _templateObject5$x, _templateObject6$r, _templateObject7$q, _templateObject8$o;
8698
8800
  var Container$z = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
8699
8801
  var IconContainer$1 = styled.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"])));
8700
- var Title$3 = styled.h1(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n ", "\n margin: 0 0 20px;\n"])), function (_ref) {
8802
+ var Title$3 = styled.h1(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n ", "\n margin: 0 0 20px;\n"])), function (_ref) {
8701
8803
  var theme = _ref.theme;
8702
- return css(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.pageHeader.mainTitle);
8804
+ return css(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.pageHeader.mainTitle);
8703
8805
  });
8704
8806
  var AreaTitleCss = css(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n ", "\n margin: 0;\n position: absolute;\n top: -18px;\n"])), function (_ref2) {
8705
8807
  var theme = _ref2.theme;
@@ -8773,9 +8875,44 @@ var MultilineContent = function MultilineContent(_ref) {
8773
8875
  }));
8774
8876
  };
8775
8877
 
8878
+ var _path, _path2;
8879
+
8880
+ function _extends$1() {
8881
+ _extends$1 = Object.assign || function (target) {
8882
+ for (var i = 1; i < arguments.length; i++) {
8883
+ var source = arguments[i];
8884
+
8885
+ for (var key in source) {
8886
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
8887
+ target[key] = source[key];
8888
+ }
8889
+ }
8890
+ }
8891
+
8892
+ return target;
8893
+ };
8894
+
8895
+ return _extends$1.apply(this, arguments);
8896
+ }
8897
+
8898
+ function SvgNoImageBig(props) {
8899
+ return /*#__PURE__*/createElement("svg", _extends$1({
8900
+ width: 610,
8901
+ height: 446,
8902
+ fill: "none",
8903
+ xmlns: "http://www.w3.org/2000/svg"
8904
+ }, props), _path || (_path = /*#__PURE__*/createElement("path", {
8905
+ fill: "#DDD",
8906
+ d: "M0 0h609.91v446H0z"
8907
+ })), _path2 || (_path2 = /*#__PURE__*/createElement("path", {
8908
+ 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",
8909
+ fill: "#656565"
8910
+ })));
8911
+ }
8912
+
8776
8913
  var _excluded$x = ["loop", "autoPlay", "controls", "muted"];
8777
8914
 
8778
- var _templateObject$U, _templateObject2$P, _templateObject3$I, _templateObject4$C, _templateObject5$y, _templateObject6$s, _templateObject7$r, _templateObject8$p;
8915
+ var _templateObject$U, _templateObject2$P, _templateObject3$J, _templateObject4$D, _templateObject5$y, _templateObject6$s, _templateObject7$r, _templateObject8$p;
8779
8916
  var MediaBoxWrapper = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n ", ";\n ", ";\n"])), function (_ref) {
8780
8917
  var minHeight = _ref.minHeight;
8781
8918
  return minHeight && "min-height: " + minHeight;
@@ -8785,11 +8922,11 @@ var MediaBoxWrapper = styled.div(_templateObject$U || (_templateObject$U = _tagg
8785
8922
  });
8786
8923
  var mediaStyle = "\n max-width: 100%;\n max-height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n";
8787
8924
  var LoadingOverlay$3 = styled.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
8788
- var Video$3 = styled.video(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n ", ";\n outline: none;\n\n ", ";\n"])), mediaStyle, function (_ref3) {
8925
+ var Video$3 = styled.video(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n ", ";\n outline: none;\n\n ", ";\n"])), mediaStyle, function (_ref3) {
8789
8926
  var theme = _ref3.theme,
8790
8927
  isLoaded = _ref3.isLoaded,
8791
8928
  hasModalLimits = _ref3.hasModalLimits;
8792
- return 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 && css(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
8929
+ return 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 && css(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
8793
8930
  });
8794
8931
  var StyledImage = styled.img(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), mediaStyle, function (_ref4) {
8795
8932
  var theme = _ref4.theme,
@@ -8865,7 +9002,6 @@ var MediaBox = function MediaBox(_ref5) {
8865
9002
  minWidth: minWidth,
8866
9003
  minHeight: minHeight
8867
9004
  }), mediaType === 'video' ? React__default.createElement(Video$3, Object.assign({}, {
8868
- src: src,
8869
9005
  loop: loop,
8870
9006
  autoPlay: autoPlay,
8871
9007
  controls: controls,
@@ -8873,39 +9009,37 @@ var MediaBox = function MediaBox(_ref5) {
8873
9009
  onError: onError,
8874
9010
  hasModalLimits: hasModalLimits
8875
9011
  }, videoValues, {
9012
+ src: loadFailed ? '' : src,
8876
9013
  isLoaded: loaded && !loadFailed,
8877
9014
  preload: 'metadata',
8878
9015
  onCanPlayThrough: handleLoad
8879
9016
  })) : React__default.createElement(StyledImage, Object.assign({}, {
8880
- src: src,
8881
9017
  alt: alt,
8882
9018
  onError: onError,
8883
9019
  hasModalLimits: hasModalLimits
8884
9020
  }, {
9021
+ src: loadFailed ? '' : src,
8885
9022
  onLoad: handleLoad,
8886
9023
  isLoaded: loaded && !loadFailed
8887
9024
  })), !loaded && React__default.createElement(LoadingOverlay$3, null, React__default.createElement(Spinner, {
8888
9025
  size: 'large',
8889
9026
  styling: 'primary'
8890
- })), loadFailed && React__default.createElement(LoadingOverlay$3, null, React__default.createElement(Icon, {
8891
- icon: 'MissingImage',
8892
- size: 48
8893
- })));
9027
+ })), loadFailed && React__default.createElement(SvgNoImageBig, null));
8894
9028
  };
8895
9029
 
8896
- var _templateObject$V, _templateObject2$Q, _templateObject3$J, _templateObject4$D, _templateObject5$z, _templateObject6$t;
9030
+ var _templateObject$V, _templateObject2$Q, _templateObject3$K, _templateObject4$E, _templateObject5$z, _templateObject6$t;
8897
9031
  var Container$D = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: 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) {
8898
9032
  var theme = _ref.theme;
8899
9033
  return theme.fontFamily.ui;
8900
9034
  });
8901
9035
  var CloseIcon = styled(Icon)(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose([""])));
8902
- var CloseButton = styled.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) {
9036
+ var CloseButton = styled.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) {
8903
9037
  var theme = _ref2.theme;
8904
9038
  return theme.colors.icons.mono;
8905
9039
  }, IconWrapper, function (_ref3) {
8906
9040
  var _ref3$selected = _ref3.selected,
8907
9041
  selected = _ref3$selected === void 0 ? false : _ref3$selected;
8908
- return selected && css(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid hsl(207, 80%, 64%);\n "])));
9042
+ return selected && css(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid hsl(207, 80%, 64%);\n "])));
8909
9043
  }, function (_ref4) {
8910
9044
  var theme = _ref4.theme;
8911
9045
  return theme && css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n opacity: .8;\n transition: transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.inOut);
@@ -9166,37 +9300,34 @@ var useMediaModal = function useMediaModal() {
9166
9300
  };
9167
9301
  };
9168
9302
 
9169
- var _templateObject$W, _templateObject2$R, _templateObject3$K, _templateObject4$E, _templateObject5$A, _templateObject6$u, _templateObject7$s, _templateObject8$q;
9170
- var Container$E = styled.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) {
9303
+ var _templateObject$W, _templateObject2$R, _templateObject3$L, _templateObject4$F, _templateObject5$A, _templateObject6$u, _templateObject7$s;
9304
+ var Container$E = styled.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) {
9171
9305
  var aspect = _ref.aspect;
9172
9306
  return aspect === '16:9' && css(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n padding-left: 56.25%;\n "])));
9173
9307
  }, function (_ref2) {
9174
9308
  var theme = _ref2.theme;
9175
- return theme && 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);
9309
+ return theme && 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);
9176
9310
  }, function (_ref3) {
9177
- var mediaUrl = _ref3.mediaUrl;
9178
- return mediaUrl && css(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n "])));
9179
- }, function (_ref4) {
9180
- var theme = _ref4.theme,
9181
- hoverZoom = _ref4.hoverZoom;
9182
- return theme && hoverZoom && 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);
9183
- });
9184
- var ImageWrapper = styled.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"])));
9185
- var NoImageWrapper = styled.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"])));
9186
- var PlayableDrop = styled.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);
9187
-
9188
- var TableRowThumbnail = function TableRowThumbnail(_ref5) {
9189
- var _ref5$hoverZoom = _ref5.hoverZoom,
9190
- hoverZoom = _ref5$hoverZoom === void 0 ? true : _ref5$hoverZoom,
9191
- _ref5$image = _ref5.image,
9192
- image = _ref5$image === void 0 ? '' : _ref5$image,
9193
- mediaUrl = _ref5.mediaUrl,
9194
- mediaType = _ref5.mediaType,
9195
- _ref5$retryImageLoad = _ref5.retryImageLoad,
9196
- retryImageLoad = _ref5$retryImageLoad === void 0 ? false : _ref5$retryImageLoad,
9197
- _ref5$retryLimit = _ref5.retryLimit,
9198
- retryLimit = _ref5$retryLimit === void 0 ? 5 : _ref5$retryLimit,
9199
- closeText = _ref5.closeText;
9311
+ var theme = _ref3.theme,
9312
+ hoverZoom = _ref3.hoverZoom;
9313
+ return theme && hoverZoom && 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);
9314
+ });
9315
+ var ImageWrapper = styled.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"])));
9316
+ var NoImageWrapper = styled.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"])));
9317
+ var PlayableDrop = styled.div(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: hsla(0, 0%, 0%, .5);\n height: 24px;\n width: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n display: flex;\n svg {\n padding-left: 2px;\n path {\n stroke: hsla(0, 0%, 100%, 1.000);\n }\n }\n };\n"])), IconWrapper);
9318
+
9319
+ var TableRowThumbnail = function TableRowThumbnail(_ref4) {
9320
+ var _ref4$hoverZoom = _ref4.hoverZoom,
9321
+ hoverZoom = _ref4$hoverZoom === void 0 ? true : _ref4$hoverZoom,
9322
+ _ref4$image = _ref4.image,
9323
+ image = _ref4$image === void 0 ? '' : _ref4$image,
9324
+ mediaUrl = _ref4.mediaUrl,
9325
+ mediaType = _ref4.mediaType,
9326
+ _ref4$retryImageLoad = _ref4.retryImageLoad,
9327
+ retryImageLoad = _ref4$retryImageLoad === void 0 ? false : _ref4$retryImageLoad,
9328
+ _ref4$retryLimit = _ref4.retryLimit,
9329
+ retryLimit = _ref4$retryLimit === void 0 ? 5 : _ref4$retryLimit,
9330
+ closeText = _ref4.closeText;
9200
9331
 
9201
9332
  var _useState = useState(true),
9202
9333
  showImage = _useState[0],
@@ -9217,20 +9348,17 @@ var TableRowThumbnail = function TableRowThumbnail(_ref5) {
9217
9348
  var timeoutRef = useRef(null);
9218
9349
  var handleModal = useCallback(function () {
9219
9350
  try {
9220
- if (mediaUrl && mediaType) {
9221
- createMediaModal({
9222
- src: mediaUrl,
9223
- mediaType: mediaType,
9224
- minHeight: '240px',
9225
- closeText: closeText
9226
- });
9227
- }
9228
-
9351
+ createMediaModal({
9352
+ src: showImage && mediaUrl ? mediaUrl : '',
9353
+ mediaType: mediaType ? mediaType : 'img',
9354
+ minHeight: '240px',
9355
+ closeText: closeText
9356
+ });
9229
9357
  return Promise.resolve();
9230
9358
  } catch (e) {
9231
9359
  return Promise.reject(e);
9232
9360
  }
9233
- }, [closeText, createMediaModal, mediaType, mediaUrl]);
9361
+ }, [closeText, createMediaModal, mediaType, mediaUrl, showImage]);
9234
9362
  useEffect(function () {
9235
9363
  setShowImage(false);
9236
9364
  setRetryCount(0);
@@ -9352,18 +9480,18 @@ var useCopyToClipboard = function useCopyToClipboard() {
9352
9480
  };
9353
9481
  };
9354
9482
 
9355
- var _templateObject$Y, _templateObject2$T, _templateObject3$L, _templateObject4$F, _templateObject5$B, _templateObject6$v, _templateObject7$t, _templateObject8$r, _templateObject9$l, _templateObject10$g, _templateObject11$c;
9483
+ var _templateObject$Y, _templateObject2$T, _templateObject3$M, _templateObject4$G, _templateObject5$B, _templateObject6$v, _templateObject7$t, _templateObject8$q, _templateObject9$l, _templateObject10$h, _templateObject11$c;
9356
9484
  var CopyToClipboard = styled.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) {
9357
9485
  var theme = _ref.theme;
9358
9486
  return theme && css(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n transition: ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
9359
9487
  });
9360
- var CellContainer = styled.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) {
9488
+ var CellContainer = styled.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) {
9361
9489
  return p.theme.fontFamily.data;
9362
9490
  }, CopyToClipboard, function (_ref2) {
9363
9491
  var theme = _ref2.theme,
9364
9492
  cellStyle = _ref2.cellStyle,
9365
9493
  alignment = _ref2.alignment;
9366
- return cellStyle === 'firstColumn' ? css(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle]) : css(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle][alignment]);
9494
+ return cellStyle === 'firstColumn' ? css(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle]) : css(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle][alignment]);
9367
9495
  }, function (_ref3) {
9368
9496
  var hasCopyButton = _ref3.hasCopyButton;
9369
9497
  return hasCopyButton && css(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
@@ -9371,11 +9499,11 @@ var CellContainer = styled.div(_templateObject3$L || (_templateObject3$L = _tagg
9371
9499
  var hideDivider = _ref4.hideDivider;
9372
9500
  return !hideDivider && 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 "])));
9373
9501
  });
9374
- var UnitText = styled.span(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
9502
+ var UnitText = styled.span(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
9375
9503
  var theme = _ref5.theme;
9376
9504
  return css(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
9377
9505
  });
9378
- var StatusBlip = styled.div(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-right: 8px;\n ", "\n"])), function (_ref6) {
9506
+ var StatusBlip = styled.div(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-right: 8px;\n ", "\n"])), function (_ref6) {
9379
9507
  var _ref6$status = _ref6.status,
9380
9508
  status = _ref6$status === void 0 ? 'neutral' : _ref6$status,
9381
9509
  colors = _ref6.theme.colors;
@@ -9500,16 +9628,16 @@ var TypeTableRow = function TypeTableRow(_ref2) {
9500
9628
  }));
9501
9629
  };
9502
9630
 
9503
- var _templateObject$_, _templateObject2$V, _templateObject3$M, _templateObject4$G;
9631
+ var _templateObject$_, _templateObject2$V, _templateObject3$N, _templateObject4$H;
9504
9632
  var HeaderTitle = styled.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) {
9505
9633
  var ascending = _ref.ascending;
9506
9634
  return ascending && 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 "])));
9507
9635
  }, function (_ref2) {
9508
9636
  var isSortActive = _ref2.isSortActive;
9509
- return isSortActive && css(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n &:not(hover) {\n ", " {\n display: inline-flex;\n }\n }\n "])), IconWrapper);
9637
+ return isSortActive && css(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n &:not(hover) {\n ", " {\n display: inline-flex;\n }\n }\n "])), IconWrapper);
9510
9638
  }, function (_ref3) {
9511
9639
  var sortable = _ref3.sortable;
9512
- return sortable && 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);
9640
+ return sortable && 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);
9513
9641
  });
9514
9642
 
9515
9643
  var TableHeaderTitle = function TableHeaderTitle(_ref4) {
@@ -9539,18 +9667,18 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
9539
9667
  }), header);
9540
9668
  };
9541
9669
 
9542
- 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;
9670
+ 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;
9543
9671
  var HeaderRow = styled.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
9544
9672
  var HeaderItem = styled.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) {
9545
9673
  return p.theme.fontFamily.ui;
9546
9674
  }, function (_ref) {
9547
9675
  var hasCopyButton = _ref.hasCopyButton;
9548
- return hasCopyButton && css(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
9676
+ return hasCopyButton && css(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
9549
9677
  }, function (_ref2) {
9550
9678
  var theme = _ref2.theme,
9551
9679
  alignment = _ref2.alignment,
9552
9680
  headerStyle = _ref2.headerStyle;
9553
- return alignment ? css(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle][alignment]) : css(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle]['left']);
9681
+ return alignment ? css(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle][alignment]) : css(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle]['left']);
9554
9682
  }, function (p) {
9555
9683
  return p.fixedWidth && css(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n width: ", "px;\n "])), p.fixedWidth);
9556
9684
  }, function (_ref3) {
@@ -9559,16 +9687,16 @@ var HeaderItem = styled.div(_templateObject2$W || (_templateObject2$W = _taggedT
9559
9687
  }, function (_ref4) {
9560
9688
  var headerStyle = _ref4.headerStyle,
9561
9689
  isSortActive = _ref4.isSortActive;
9562
- return headerStyle === 'subHeader' && 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%');
9690
+ return headerStyle === 'subHeader' && 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%');
9563
9691
  });
9564
9692
  var TitleItems = styled.div(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n ", ";\n"])), function (_ref5) {
9565
9693
  var alignment = _ref5.alignment;
9566
- return alignment && css(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
9694
+ return alignment && css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
9567
9695
  });
9568
9696
  var GroupTitle = styled.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"])));
9569
9697
  var Title$4 = styled.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"])));
9570
9698
  var EmptyTitle = styled.div(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n height: 20px;\n"])));
9571
- var MiddleLine = styled.div(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n height: 1px;\n background: hsl(0, 0%, 93%);\n flex: 1;\n ", ";\n"])), function (_ref6) {
9699
+ var MiddleLine = styled.div(_templateObject14$6 || (_templateObject14$6 = _taggedTemplateLiteralLoose(["\n height: 1px;\n background: hsl(0, 0%, 93%);\n flex: 1;\n ", ";\n"])), function (_ref6) {
9572
9700
  var isLastOfGroup = _ref6.isLastOfGroup;
9573
9701
  return isLastOfGroup && css(_templateObject15$4 || (_templateObject15$4 = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n "])));
9574
9702
  });
@@ -9701,11 +9829,11 @@ var TypeTableHeader = function TypeTableHeader(_ref7) {
9701
9829
  }));
9702
9830
  };
9703
9831
 
9704
- var _templateObject$10, _templateObject2$X, _templateObject3$O, _templateObject4$I, _templateObject5$D;
9832
+ var _templateObject$10, _templateObject2$X, _templateObject3$P, _templateObject4$J, _templateObject5$D;
9705
9833
  var Container$G = styled.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose([""])));
9706
9834
  var TableContainer = styled.div(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n display: table;\n width: 100%;\n position: relative;\n"])));
9707
- var LoadingText$1 = styled.div(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n color: hsla(195, 10%, 52%, 0.72);\n"])));
9708
- var LoadingBox$1 = styled.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) {
9835
+ var LoadingText$1 = styled.div(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n color: hsla(195, 10%, 52%, 0.72);\n"])));
9836
+ var LoadingBox$1 = styled.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) {
9709
9837
  var theme = _ref.theme;
9710
9838
  return theme.colors["pureBase"];
9711
9839
  }, LoadingText$1);
@@ -9799,22 +9927,22 @@ var TypeTable = function TypeTable(_ref3) {
9799
9927
 
9800
9928
  var _excluded$y = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
9801
9929
 
9802
- var _templateObject$11, _templateObject2$Y, _templateObject3$P, _templateObject4$J, _templateObject5$E, _templateObject6$x, _templateObject7$v, _templateObject8$t, _templateObject9$n, _templateObject10$i;
9930
+ var _templateObject$11, _templateObject2$Y, _templateObject3$Q, _templateObject4$K, _templateObject5$E, _templateObject6$x, _templateObject7$v, _templateObject8$s, _templateObject9$n, _templateObject10$j;
9803
9931
  var Container$H = styled.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
9804
9932
  var theme = _ref.theme;
9805
9933
  return css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
9806
9934
  });
9807
- var StyledButton$4 = styled(Button)(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9808
- var StyledLoadingButton = styled(ButtonWithLoading)(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9935
+ var StyledButton$4 = styled(Button)(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9936
+ var StyledLoadingButton = styled(ButtonWithLoading)(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9809
9937
  var StyledLink = styled(Link)(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n color: inherit;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n"])));
9810
9938
  var EditContainer = styled.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);
9811
9939
  var StyledIconButton$1 = styled(IconButton$2)(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose([""])));
9812
- var TextContainer$2 = styled.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) {
9940
+ var TextContainer$2 = styled.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) {
9813
9941
  var alignment = _ref2.alignment;
9814
9942
  return alignment === 'center' && css(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
9815
9943
  }, function (_ref3) {
9816
9944
  var alignment = _ref3.alignment;
9817
- return alignment === 'right' && css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
9945
+ return alignment === 'right' && css(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
9818
9946
  }, StyledIconButton$1, StyledIconButton$1);
9819
9947
 
9820
9948
  var EditCell = function EditCell(_ref4) {
@@ -10267,14 +10395,14 @@ var PTZProvider = function PTZProvider(_ref) {
10267
10395
  }, children);
10268
10396
  };
10269
10397
 
10270
- var _templateObject$12, _templateObject2$Z, _templateObject3$Q, _templateObject4$K, _templateObject5$F;
10398
+ var _templateObject$12, _templateObject2$Z, _templateObject3$R, _templateObject4$L, _templateObject5$F;
10271
10399
  var Active = styled.g(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
10272
10400
  var active = _ref.active;
10273
10401
  return active && css(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10274
10402
  });
10275
- var Hover = styled.g(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10403
+ var Hover = styled.g(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10276
10404
  var hover = _ref2.hover;
10277
- return hover && css(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10405
+ return hover && css(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10278
10406
  });
10279
10407
  var Container$I = styled.g(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n"])));
10280
10408
 
@@ -10349,14 +10477,14 @@ var Up = function Up() {
10349
10477
  })));
10350
10478
  };
10351
10479
 
10352
- var _templateObject$13, _templateObject2$_, _templateObject3$R, _templateObject4$L, _templateObject5$G, _templateObject6$y;
10480
+ var _templateObject$13, _templateObject2$_, _templateObject3$S, _templateObject4$M, _templateObject5$G, _templateObject6$y;
10353
10481
  var Active$1 = styled.g(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
10354
10482
  var active = _ref.active;
10355
10483
  return active && css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10356
10484
  });
10357
- var Hover$1 = styled.g(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10485
+ var Hover$1 = styled.g(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10358
10486
  var hover = _ref2.hover;
10359
- return hover && css(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10487
+ return hover && css(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10360
10488
  });
10361
10489
  var Container$J = styled.g(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n"])));
10362
10490
  var Arrow = styled.g(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n\n"])));
@@ -10433,14 +10561,14 @@ var Down = function Down() {
10433
10561
  })));
10434
10562
  };
10435
10563
 
10436
- var _templateObject$14, _templateObject2$$, _templateObject3$S, _templateObject4$M, _templateObject5$H;
10564
+ var _templateObject$14, _templateObject2$$, _templateObject3$T, _templateObject4$N, _templateObject5$H;
10437
10565
  var Active$2 = styled.g(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
10438
10566
  var active = _ref.active;
10439
10567
  return active && css(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10440
10568
  });
10441
- var Hover$2 = styled.g(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10569
+ var Hover$2 = styled.g(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10442
10570
  var hover = _ref2.hover;
10443
- return hover && css(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10571
+ return hover && css(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10444
10572
  });
10445
10573
  var Container$K = styled.g(_templateObject5$H || (_templateObject5$H = _taggedTemplateLiteralLoose(["\n"])));
10446
10574
 
@@ -10517,14 +10645,14 @@ var Left = function Left() {
10517
10645
  })));
10518
10646
  };
10519
10647
 
10520
- var _templateObject$15, _templateObject2$10, _templateObject3$T, _templateObject4$N, _templateObject5$I;
10648
+ var _templateObject$15, _templateObject2$10, _templateObject3$U, _templateObject4$O, _templateObject5$I;
10521
10649
  var Active$3 = styled.g(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
10522
10650
  var active = _ref.active;
10523
10651
  return active && css(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10524
10652
  });
10525
- var Hover$3 = styled.g(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10653
+ var Hover$3 = styled.g(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10526
10654
  var hover = _ref2.hover;
10527
- return hover && css(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10655
+ return hover && css(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10528
10656
  });
10529
10657
  var Container$L = styled.g(_templateObject5$I || (_templateObject5$I = _taggedTemplateLiteralLoose(["\n"])));
10530
10658
 
@@ -11414,14 +11542,14 @@ var ZoomBase = function ZoomBase(_ref) {
11414
11542
  })), children));
11415
11543
  };
11416
11544
 
11417
- var _templateObject$16, _templateObject2$11, _templateObject3$U, _templateObject4$O, _templateObject5$J;
11545
+ var _templateObject$16, _templateObject2$11, _templateObject3$V, _templateObject4$P, _templateObject5$J;
11418
11546
  var Active$4 = styled.g(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11419
11547
  var active = _ref.active;
11420
11548
  return active && css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11421
11549
  });
11422
- var Hover$4 = styled.g(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11550
+ var Hover$4 = styled.g(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11423
11551
  var hover = _ref2.hover;
11424
- return hover && css(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11552
+ return hover && css(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11425
11553
  });
11426
11554
  var Container$M = styled.g(_templateObject5$J || (_templateObject5$J = _taggedTemplateLiteralLoose(["\n"])));
11427
11555
 
@@ -11491,14 +11619,14 @@ var Up$1 = function Up() {
11491
11619
  })));
11492
11620
  };
11493
11621
 
11494
- var _templateObject$17, _templateObject2$12, _templateObject3$V, _templateObject4$P, _templateObject5$K;
11622
+ var _templateObject$17, _templateObject2$12, _templateObject3$W, _templateObject4$Q, _templateObject5$K;
11495
11623
  var Active$5 = styled.g(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11496
11624
  var active = _ref.active;
11497
11625
  return active && css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11498
11626
  });
11499
- var Hover$5 = styled.g(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11627
+ var Hover$5 = styled.g(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11500
11628
  var hover = _ref2.hover;
11501
- return hover && css(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11629
+ return hover && css(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11502
11630
  });
11503
11631
  var Container$N = styled.g(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n"])));
11504
11632
 
@@ -11579,21 +11707,21 @@ var Controls = function Controls(_ref) {
11579
11707
 
11580
11708
  var _excluded$z = ["isEmptyWithIcon", "status", "noticeIcon", "hasNotice", "noticeMessage", "noticeTitle", "emptyIcon"];
11581
11709
 
11582
- var _templateObject$19, _templateObject2$13, _templateObject3$W, _templateObject4$Q, _templateObject5$L, _templateObject6$z, _templateObject7$w, _templateObject8$u, _templateObject9$o;
11710
+ var _templateObject$19, _templateObject2$13, _templateObject3$X, _templateObject4$R, _templateObject5$L, _templateObject6$z, _templateObject7$w, _templateObject8$t, _templateObject9$o;
11583
11711
  var Container$P = styled.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);
11584
11712
  var EmptyWithIcon = styled.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) {
11585
11713
  var hasPadding = _ref.hasPadding;
11586
11714
  return hasPadding && "\n padding-bottom: 43px\n ";
11587
11715
  }, IconWrapper);
11588
- var Notice = styled.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) {
11716
+ var Notice = styled.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) {
11589
11717
  var theme = _ref2.theme,
11590
11718
  color = _ref2.color;
11591
- return color && css(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n "])), theme.colors.feedback[color], theme.colors.icons.inverse);
11719
+ return color && css(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n "])), theme.colors.feedback[color], theme.colors.icons.inverse);
11592
11720
  });
11593
11721
  var NoticeMessage = styled.div(_templateObject5$L || (_templateObject5$L = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 10px;\n"])), EllipsisStyles);
11594
11722
  var NoticeTitle = styled.div(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 12px;\n"])), EllipsisStyles);
11595
11723
  var NoticeIcon = styled.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);
11596
- var NoticeTextGroup = styled.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n"])));
11724
+ var NoticeTextGroup = styled.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n"])));
11597
11725
  var StatusLine = styled.div(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 3px;\n width: 100%;\n"])), function (_ref3) {
11598
11726
  var theme = _ref3.theme,
11599
11727
  color = _ref3.color;
@@ -11630,14 +11758,14 @@ var MediaStream = function MediaStream(_ref4) {
11630
11758
  }));
11631
11759
  };
11632
11760
 
11633
- var _templateObject$1a, _templateObject2$14, _templateObject3$X, _templateObject4$R, _templateObject5$M, _templateObject6$A, _templateObject7$x, _templateObject8$v, _templateObject9$p;
11761
+ var _templateObject$1a, _templateObject2$14, _templateObject3$Y, _templateObject4$S, _templateObject5$M, _templateObject6$A, _templateObject7$x, _templateObject8$u, _templateObject9$p;
11634
11762
  var Container$Q = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 60px;\n"])));
11635
11763
  var LeftData = styled.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) {
11636
11764
  var theme = _ref.theme,
11637
11765
  hasRightData = _ref.hasRightData;
11638
- return hasRightData && css(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n border-right: ", " 1px solid;\n width: 195px;\n "])), theme.colors.divider);
11766
+ return hasRightData && css(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n border-right: ", " 1px solid;\n width: 195px;\n "])), theme.colors.divider);
11639
11767
  }, IconWrapper);
11640
- var RightData = styled.div(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose(["\n padding: 0 12px 0 16px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
11768
+ var RightData = styled.div(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["\n padding: 0 12px 0 16px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
11641
11769
  var DeviceDataGroup = styled.div(_templateObject5$M || (_templateObject5$M = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n justify-content: center;\n"])));
11642
11770
  var LeftTitle = styled.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) {
11643
11771
  var hasRightData = _ref2.hasRightData;
@@ -11653,7 +11781,7 @@ var LeftSubTitle = styled.div(_templateObject7$x || (_templateObject7$x = _tagge
11653
11781
  var hasRightData = _ref5.hasRightData;
11654
11782
  return hasRightData ? "max-width: 140px;" : "max-width: 250px;";
11655
11783
  });
11656
- var Title$5 = styled.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) {
11784
+ var Title$5 = styled.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) {
11657
11785
  var hasMarginBottom = _ref6.hasMarginBottom;
11658
11786
  return hasMarginBottom && "margin-bottom: 6px;";
11659
11787
  });
@@ -11726,10 +11854,10 @@ var CameraPanels = function CameraPanels(_ref) {
11726
11854
 
11727
11855
  var _excluded$B = ["icon", "size", "weight", "label", "linkTo"];
11728
11856
 
11729
- var _templateObject$1d, _templateObject2$15, _templateObject3$Y, _templateObject4$S;
11857
+ var _templateObject$1d, _templateObject2$15, _templateObject3$Z, _templateObject4$T;
11730
11858
  var TextContainer$3 = styled.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
11731
11859
  var StyledLink$1 = styled(Link)(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n"])));
11732
- var TagWrapper = styled.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) {
11860
+ var TagWrapper = styled.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) {
11733
11861
  var theme = _ref.theme;
11734
11862
  return theme.fontFamily.ui;
11735
11863
  }, function (_ref2) {
@@ -11742,7 +11870,7 @@ var TagWrapper = styled.div(_templateObject3$Y || (_templateObject3$Y = _taggedT
11742
11870
  var theme = _ref4.theme,
11743
11871
  hoverColor = _ref4.hoverColor,
11744
11872
  enableHover = _ref4.enableHover;
11745
- return enableHover && 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]);
11873
+ return enableHover && 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]);
11746
11874
  });
11747
11875
 
11748
11876
  var Tag = function Tag(_ref5) {
@@ -11822,14 +11950,14 @@ var DebouncedSearcher = function DebouncedSearcher(_ref) {
11822
11950
 
11823
11951
  var _excluded$D = ["design", "size", "position", "text"];
11824
11952
 
11825
- var _templateObject$1f, _templateObject2$16, _templateObject3$Z, _templateObject4$T, _templateObject5$N, _templateObject6$B;
11953
+ var _templateObject$1f, _templateObject2$16, _templateObject3$_, _templateObject4$U, _templateObject5$N, _templateObject6$B;
11826
11954
  var Container$R = styled.div(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose([""])));
11827
11955
  var Title$6 = styled.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) {
11828
11956
  var theme = _ref.theme;
11829
11957
  return theme.fontFamily.ui;
11830
11958
  });
11831
- var ButtonsWrapper$1 = styled.div(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
11832
- var LeftButtons = styled.div(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["\n button {\n margin: 0 10px 10px 0;\n }\n"])));
11959
+ var ButtonsWrapper$1 = styled.div(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
11960
+ var LeftButtons = styled.div(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["\n button {\n margin: 0 10px 10px 0;\n }\n"])));
11833
11961
  var RightButtons = styled.div(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
11834
11962
  var SelectedResults = styled.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) {
11835
11963
  var theme = _ref2.theme;
@@ -12096,11 +12224,11 @@ function useBreakpoints() {
12096
12224
  return breakpoints;
12097
12225
  }
12098
12226
 
12099
- var _templateObject$1g, _templateObject2$17, _templateObject3$_, _templateObject4$U, _templateObject5$O;
12227
+ var _templateObject$1g, _templateObject2$17, _templateObject3$$, _templateObject4$V, _templateObject5$O;
12100
12228
  var Container$S = styled.div(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose([""])));
12101
12229
  var Title$7 = styled.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"])));
12102
- var MessageBox$1 = styled.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"])));
12103
- var StyledButton$5 = styled(Button)(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["\n margin-left: 10px;\n"])));
12230
+ var MessageBox$1 = styled.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"])));
12231
+ var StyledButton$5 = styled(Button)(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["\n margin-left: 10px;\n"])));
12104
12232
  var ButtonsGroup$1 = styled.div(_templateObject5$O || (_templateObject5$O = _taggedTemplateLiteralLoose(["\n text-align: right;\n"])));
12105
12233
 
12106
12234
  var ConfirmationModal = function ConfirmationModal(_ref) {
@@ -12143,18 +12271,18 @@ var ConfirmationModal = function ConfirmationModal(_ref) {
12143
12271
  }, rightButtonText)));
12144
12272
  };
12145
12273
 
12146
- var _templateObject$1h, _templateObject2$18, _templateObject3$$, _templateObject4$V, _templateObject5$P, _templateObject6$C;
12274
+ var _templateObject$1h, _templateObject2$18, _templateObject3$10, _templateObject4$W, _templateObject5$P, _templateObject6$C;
12147
12275
  var MOBILE_CLOSE_HEIGHT = 50;
12148
12276
  var MOBILE_NAVBAR_HEIGHT = 68;
12149
12277
  var Layout = styled.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n height: 100%;\n"])));
12150
12278
  var MobileLayout = styled.div(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose([""])));
12151
- var Content = styled.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) {
12279
+ var Content = styled.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) {
12152
12280
  var _ref$padBottom = _ref.padBottom,
12153
12281
  padBottom = _ref$padBottom === void 0 ? true : _ref$padBottom;
12154
12282
  return padBottom ? '70px 90px' : '70px 90px 0';
12155
12283
  }, function (_ref2) {
12156
12284
  var maxWidth = _ref2.maxWidth;
12157
- return maxWidth && css(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["\n & > div {\n max-width: ", ";\n }\n "])), maxWidth);
12285
+ return maxWidth && css(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["\n & > div {\n max-width: ", ";\n }\n "])), maxWidth);
12158
12286
  });
12159
12287
  var MainContainer = styled.div(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n flex-direction: column;\n"])));
12160
12288
  var ContentArea = styled.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) {
@@ -12171,15 +12299,15 @@ var ContentArea = styled.div(_templateObject6$C || (_templateObject6$C = _tagged
12171
12299
  return paddingOverride ? paddingOverride : '70px 90px';
12172
12300
  });
12173
12301
 
12174
- 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;
12302
+ 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;
12175
12303
  var ContextTitle = styled.div(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose(["\n opacity: 0;\n\n ", "\n\n ", "\n"])), function (_ref) {
12176
12304
  var theme = _ref.theme;
12177
12305
  return css(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
12178
12306
  }, function (_ref2) {
12179
12307
  var compact = _ref2.compact;
12180
- return compact && css(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
12308
+ return compact && css(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
12181
12309
  });
12182
- var ContextIcon$1 = styled.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) {
12310
+ var ContextIcon$1 = styled.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) {
12183
12311
  var theme = _ref3.theme;
12184
12312
  return 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);
12185
12313
  });
@@ -12187,9 +12315,9 @@ var ContextIndicator = styled.div(_templateObject6$D || (_templateObject6$D = _t
12187
12315
  var theme = _ref4.theme;
12188
12316
  return css(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose(["\n transition: opacity 0 ", ";\n "])), theme.animation.easing.primary.easeInOut);
12189
12317
  });
12190
- var ContextActionBaseCSS$1 = 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"])));
12318
+ var ContextActionBaseCSS$1 = 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"])));
12191
12319
  var StyledAnchor = styled.a(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n display: flex;\n text-decoration: none;\n"])));
12192
- var ExternalIconWrapper = styled.div(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
12320
+ var ExternalIconWrapper = styled.div(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
12193
12321
  var ContextWrapper = styled.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) {
12194
12322
  var theme = _ref5.theme;
12195
12323
  return theme && css(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
@@ -12203,7 +12331,7 @@ var ContextWrapper = styled.div(_templateObject11$e || (_templateObject11$e = _t
12203
12331
  var theme = _ref8.theme;
12204
12332
  return theme.colors.icons['inverse'];
12205
12333
  });
12206
- var ContextActionA = styled(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) {
12334
+ var ContextActionA = styled(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) {
12207
12335
  var theme = _ref9.theme;
12208
12336
  return theme && css(_templateObject15$5 || (_templateObject15$5 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
12209
12337
  }, function (_ref10) {
@@ -12433,23 +12561,23 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
12433
12561
  };
12434
12562
  };
12435
12563
 
12436
- 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;
12564
+ 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;
12437
12565
  var Submenu = styled.ul(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
12438
12566
  var SubmenuHeader = styled.div(_templateObject2$1a || (_templateObject2$1a = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
12439
- var SubmenuItemTitle = styled.span(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose(["\n display: block;\n ", ";\n\n"])), function (_ref) {
12567
+ var SubmenuItemTitle = styled.span(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n display: block;\n ", ";\n\n"])), function (_ref) {
12440
12568
  var theme = _ref.theme;
12441
- return theme && css(_templateObject4$X || (_templateObject4$X = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", "\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subheader);
12569
+ return theme && css(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", "\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subheader);
12442
12570
  });
12443
12571
  var SubmenuItemLink = styled(Link)(_templateObject5$R || (_templateObject5$R = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n"])), resetButtonStyles);
12444
12572
  var ExternalIconWrapper$1 = styled.div(_templateObject6$E || (_templateObject6$E = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
12445
12573
  var SubmenuItemAnchor = styled.a(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
12446
- var SubmenuItem = styled.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) {
12574
+ var SubmenuItem = styled.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) {
12447
12575
  var colors = _ref2.theme.colors;
12448
12576
  return colors.divider;
12449
12577
  }, SubmenuItemLink, SubmenuItemAnchor, function (_ref3) {
12450
12578
  var theme = _ref3.theme,
12451
12579
  isActive = _ref3.isActive;
12452
- return theme && 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 && css(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n &, &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem.active));
12580
+ return theme && 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 && css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n &, &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem.active));
12453
12581
  });
12454
12582
  var SubmenuContainer = styled.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) {
12455
12583
  var theme = _ref4.theme;
@@ -12465,7 +12593,7 @@ var ContextContainer = styled.div(_templateObject13$9 || (_templateObject13$9 =
12465
12593
  var open = _ref7.open,
12466
12594
  maxHeight = _ref7.maxHeight,
12467
12595
  theme = _ref7.theme;
12468
- return open && 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);
12596
+ return open && 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);
12469
12597
  }, function (_ref8) {
12470
12598
  var loading = _ref8.loading;
12471
12599
  return loading === 'true' && css(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n ", "{\n max-height: none !important;\n opacity: 1;\n }\n "])), SubmenuContainer);
@@ -12580,19 +12708,19 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
12580
12708
  return output;
12581
12709
  };
12582
12710
 
12583
- 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;
12711
+ 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;
12584
12712
  var Logo = styled(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"])));
12585
12713
  var LogoMark = styled.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"])));
12586
- var LogoType = styled.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"])));
12587
- var SVGObject = styled.object(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose([""])));
12714
+ var LogoType = styled.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"])));
12715
+ var SVGObject = styled.object(_templateObject4$Z || (_templateObject4$Z = _taggedTemplateLiteralLoose([""])));
12588
12716
  var SVGObjectText = styled.object(_templateObject5$S || (_templateObject5$S = _taggedTemplateLiteralLoose(["\n max-width: 180px;\n"])));
12589
12717
  var NavigationContainer = styled.div(_templateObject6$F || (_templateObject6$F = _taggedTemplateLiteralLoose([""])));
12590
12718
  var MenuFooter = styled.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) {
12591
12719
  var theme = _ref.theme;
12592
- return theme && css(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n ", "\n "])), theme.styles.global.mainMenu.footerBackground);
12720
+ return theme && css(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n ", "\n "])), theme.styles.global.mainMenu.footerBackground);
12593
12721
  });
12594
12722
  var FooterItemContainer = styled.div(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
12595
- var PushContainer = styled.div(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref2) {
12723
+ var PushContainer = styled.div(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref2) {
12596
12724
  var theme = _ref2.theme,
12597
12725
  isPinned = _ref2.isPinned;
12598
12726
  return theme && css(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? theme.dimensions.global.mainMenu.width.open : theme.dimensions.global.mainMenu.width.closed);
@@ -12601,7 +12729,7 @@ var Container$T = styled.div(_templateObject12$c || (_templateObject12$c = _tagg
12601
12729
  var theme = _ref3.theme,
12602
12730
  open = _ref3.open,
12603
12731
  desktopSize = _ref3.desktopSize;
12604
- return theme && 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' ? "" : 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);
12732
+ return theme && 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' ? "" : 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);
12605
12733
  });
12606
12734
  var ContainerInner = styled.div(_templateObject15$7 || (_templateObject15$7 = _taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"])), function (_ref4) {
12607
12735
  var theme = _ref4.theme;
@@ -12720,22 +12848,22 @@ var MainMenu = function MainMenu(_ref5) {
12720
12848
  })) : null))), document.body));
12721
12849
  };
12722
12850
 
12723
- var _templateObject$1l, _templateObject2$1c, _templateObject3$13, _templateObject4$Z, _templateObject5$T, _templateObject6$G, _templateObject7$B, _templateObject8$z, _templateObject9$t, _templateObject10$m, _templateObject11$h;
12851
+ var _templateObject$1l, _templateObject2$1c, _templateObject3$14, _templateObject4$_, _templateObject5$T, _templateObject6$G, _templateObject7$B, _templateObject8$y, _templateObject9$t, _templateObject10$n, _templateObject11$h;
12724
12852
  var MetaConatiner = styled.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"])));
12725
12853
  var LabelTitle = styled.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) {
12726
12854
  var theme = _ref.theme;
12727
12855
  return theme.fontFamily.ui;
12728
12856
  });
12729
- var LabelContent = styled.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"])));
12730
- var LabelNotes = styled.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) {
12857
+ var LabelContent = styled.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"])));
12858
+ var LabelNotes = styled.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) {
12731
12859
  var theme = _ref2.theme;
12732
12860
  return theme && css(_templateObject5$T || (_templateObject5$T = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.data);
12733
12861
  });
12734
12862
  var TitleContainer = styled.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"])));
12735
12863
  var Container$U = styled.div(_templateObject7$B || (_templateObject7$B = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
12736
- var TitleBox = styled.div(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
12864
+ var TitleBox = styled.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
12737
12865
  var IconBox = styled.div(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n padding: 1px 5px 0 0;\n"])));
12738
- var CopyTextBox = styled.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) {
12866
+ var CopyTextBox = styled.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) {
12739
12867
  var theme = _ref3.theme;
12740
12868
  return theme.fontFamily.data;
12741
12869
  });
@@ -12809,13 +12937,13 @@ var UserDrawerMeta = function UserDrawerMeta(_ref4) {
12809
12937
  }, notes) : null)));
12810
12938
  };
12811
12939
 
12812
- 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;
12940
+ 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;
12813
12941
  var DrawerTop = styled.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose([""])));
12814
12942
  var DrawerBottom = styled.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
12815
12943
  var theme = _ref.theme;
12816
- return 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);
12944
+ return 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);
12817
12945
  });
12818
- var DrawerHeader = styled.h2(_templateObject4$_ || (_templateObject4$_ = _taggedTemplateLiteralLoose(["\n ", ";\n padding: 0;\n margin: 0 0 5px;\n"])), function (_ref2) {
12946
+ var DrawerHeader = styled.h2(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n ", ";\n padding: 0;\n margin: 0 0 5px;\n"])), function (_ref2) {
12819
12947
  var theme = _ref2.theme;
12820
12948
  return theme.typography.global.mainMenu.subheader;
12821
12949
  });
@@ -12827,14 +12955,14 @@ var UserOptions = styled.div(_templateObject7$C || (_templateObject7$C = _tagged
12827
12955
  var colors = _ref4.theme.colors;
12828
12956
  return colors.divider;
12829
12957
  });
12830
- var Logout = styled.div(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
12958
+ var Logout = styled.div(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
12831
12959
  var LinkMenu = styled.ul(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
12832
- var LinkMenuItem = styled.li(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
12960
+ var LinkMenuItem = styled.li(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
12833
12961
  var IconWrapper$4 = styled.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"])));
12834
12962
  var IconWrapperFooter = styled.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"])));
12835
12963
  var LinkMenuItemA = styled(Link)(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n\n ", ";\n\n ", ";\n"])), resetButtonStyles, function (_ref5) {
12836
12964
  var theme = _ref5.theme;
12837
- return 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);
12965
+ return 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);
12838
12966
  }, function (_ref6) {
12839
12967
  var theme = _ref6.theme,
12840
12968
  isActive = _ref6.isActive;
@@ -12964,11 +13092,11 @@ var UserMenu = function UserMenu(_ref16) {
12964
13092
  }, title)) : null));
12965
13093
  };
12966
13094
 
12967
- var _templateObject$1n, _templateObject2$1e, _templateObject3$15, _templateObject4$$, _templateObject5$V, _templateObject6$I, _templateObject7$D, _templateObject8$B;
13095
+ var _templateObject$1n, _templateObject2$1e, _templateObject3$16, _templateObject4$10, _templateObject5$V, _templateObject6$I, _templateObject7$D, _templateObject8$A;
12968
13096
  var Container$V = styled.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"])));
12969
13097
  var ImgWrapper = styled.div(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n overflow: hidden;\n height: 40px;\n width: 40px;\n flex-shrink: 0;\n"])));
12970
- var EmptyImg = styled.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n background-color: hsl(210, 22%, 91%);\n width: 100%;\n height: 100%;\n"])));
12971
- var Image$2 = styled.div(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background-image: url(", ");\n background-position: center center;\n background-size: cover;\n background-repeat: no-repeat; \n display: ", ";\n"])), function (p) {
13098
+ var EmptyImg = styled.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n background-color: hsl(210, 22%, 91%);\n width: 100%;\n height: 100%;\n"])));
13099
+ var Image$2 = styled.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) {
12972
13100
  return p.image;
12973
13101
  }, function (p) {
12974
13102
  return p.image ? 'block' : 'none';
@@ -12976,7 +13104,7 @@ var Image$2 = styled.div(_templateObject4$$ || (_templateObject4$$ = _taggedTemp
12976
13104
  var InfoContainer = styled.div(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
12977
13105
  var Title$8 = styled.div(_templateObject6$I || (_templateObject6$I = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n font-weight: 500;\n color: hsl(0, 0%, 34%);\n"])));
12978
13106
  var Message = styled.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"])));
12979
- var TimeMsg = styled.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"])));
13107
+ var TimeMsg = styled.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"])));
12980
13108
 
12981
13109
  var NotificationItem = function NotificationItem(_ref) {
12982
13110
  var imgUrl = _ref.imgUrl,
@@ -12988,13 +13116,13 @@ var NotificationItem = function NotificationItem(_ref) {
12988
13116
  }) : 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)));
12989
13117
  };
12990
13118
 
12991
- var _templateObject$1o, _templateObject2$1f, _templateObject3$16;
13119
+ var _templateObject$1o, _templateObject2$1f, _templateObject3$17;
12992
13120
  var Container$W = styled.div(_templateObject$1o || (_templateObject$1o = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
12993
13121
  var StatusContainer = styled.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) {
12994
13122
  var theme = _ref.theme;
12995
13123
  return theme.colors.divider;
12996
13124
  });
12997
- var NotificationWrapper = styled.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n"])), function (_ref2) {
13125
+ var NotificationWrapper = styled.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n"])), function (_ref2) {
12998
13126
  var colors = _ref2.theme.colors;
12999
13127
  return colors.divider;
13000
13128
  });
@@ -13024,14 +13152,14 @@ var NotificationsHistory = function NotificationsHistory(_ref3) {
13024
13152
  return React__default.createElement(Container$W, null, unread && React__default.createElement(Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
13025
13153
  };
13026
13154
 
13027
- 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;
13155
+ 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;
13028
13156
  var Container$X = styled.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) {
13029
13157
  var theme = _ref.theme,
13030
13158
  colors = _ref.theme.colors;
13031
13159
  return colors && 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);
13032
13160
  });
13033
- var SearchBar = styled.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"])));
13034
- var IconWrapper$5 = styled.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"])));
13161
+ var SearchBar = styled.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"])));
13162
+ var IconWrapper$5 = styled.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"])));
13035
13163
  var SearchInput = styled.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) {
13036
13164
  var theme = _ref2.theme;
13037
13165
  return theme.fontFamily.data;
@@ -13047,13 +13175,13 @@ var DrawerToggle = styled.button.attrs({
13047
13175
  type: 'button'
13048
13176
  })(_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) {
13049
13177
  var theme = _ref5.theme;
13050
- return 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);
13178
+ return 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);
13051
13179
  }, function (_ref6) {
13052
13180
  var isActive = _ref6.isActive,
13053
13181
  theme = _ref6.theme;
13054
13182
  return isActive && css(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: ", ";\n }\n "])), theme.colors.menu.active);
13055
13183
  });
13056
- var DrawerPortalWrapper = styled.div(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose([""])));
13184
+ var DrawerPortalWrapper = styled.div(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose([""])));
13057
13185
  var Drawer = styled.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) {
13058
13186
  var theme = _ref7.theme;
13059
13187
  return theme.fontFamily.ui;
@@ -13073,7 +13201,7 @@ var Drawer = styled.div(_templateObject11$j || (_templateObject11$j = _taggedTem
13073
13201
  var isOpen = _ref12.isOpen;
13074
13202
  return isOpen && css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
13075
13203
  });
13076
- var NotificationsContainer = styled.div(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
13204
+ var NotificationsContainer = styled.div(_templateObject14$b || (_templateObject14$b = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
13077
13205
 
13078
13206
  var TopBar = function TopBar(_ref13) {
13079
13207
  var _ref13$hasNotificatio = _ref13.hasNotifications,
@@ -13227,11 +13355,11 @@ var TabList = function TabList(_ref) {
13227
13355
 
13228
13356
  var _excluded$E = ["children", "tabFor", "onClick"];
13229
13357
 
13230
- var _templateObject$1r, _templateObject2$1h, _templateObject3$18;
13358
+ var _templateObject$1r, _templateObject2$1h, _templateObject3$19;
13231
13359
  var TabComponent = styled.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
13232
13360
  var TabLabel = styled.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) {
13233
13361
  var theme = _ref.theme;
13234
- return css(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
13362
+ return css(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
13235
13363
  }, function (_ref2) {
13236
13364
  var active = _ref2.active;
13237
13365
  return active ? '600' : '500';
@@ -13282,15 +13410,15 @@ var TabContent = function TabContent(_ref) {
13282
13410
 
13283
13411
  var _excluded$G = ["tabFor", "icon", "closeId", "counter", "status"];
13284
13412
 
13285
- var _templateObject$1t, _templateObject2$1i, _templateObject3$19, _templateObject4$11;
13413
+ var _templateObject$1t, _templateObject2$1i, _templateObject3$1a, _templateObject4$12;
13286
13414
  var Container$Z = styled.button(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
13287
13415
  var LinkTab = styled.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) {
13288
13416
  var theme = _ref.theme;
13289
- return 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);
13417
+ return 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);
13290
13418
  }, function (_ref2) {
13291
13419
  var isActive = _ref2.isActive,
13292
13420
  theme = _ref2.theme;
13293
- return isActive && 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);
13421
+ return isActive && 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);
13294
13422
  });
13295
13423
 
13296
13424
  var MobileTab = function MobileTab(_ref3) {
@@ -13324,12 +13452,12 @@ var MobileTab = function MobileTab(_ref3) {
13324
13452
 
13325
13453
  var _excluded$H = ["icon", "title", "subtitle", "tabFor"];
13326
13454
 
13327
- var _templateObject$1u, _templateObject2$1j, _templateObject3$1a, _templateObject4$12, _templateObject5$X, _templateObject6$K;
13455
+ var _templateObject$1u, _templateObject2$1j, _templateObject3$1b, _templateObject4$13, _templateObject5$X, _templateObject6$K;
13328
13456
  var Container$_ = styled.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) {
13329
13457
  var active = _ref.active;
13330
- return active ? css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid hsl(196, 100%, 40%);\n "]))) : css(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
13458
+ return active ? css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid hsl(196, 100%, 40%);\n "]))) : css(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
13331
13459
  }, IconWrapper);
13332
- var Title$9 = styled.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) {
13460
+ var Title$9 = styled.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) {
13333
13461
  var theme = _ref2.theme;
13334
13462
  return theme.fontFamily.ui;
13335
13463
  }, function (_ref3) {
@@ -13414,13 +13542,13 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
13414
13542
 
13415
13543
  var _excluded$I = ["closeId", "closeText"];
13416
13544
 
13417
- var _templateObject$1w, _templateObject2$1l, _templateObject3$1b, _templateObject4$13;
13545
+ var _templateObject$1w, _templateObject2$1l, _templateObject3$1c, _templateObject4$14;
13418
13546
  var StyledButton$6 = styled.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) {
13419
13547
  var theme = _ref.theme;
13420
13548
  return 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);
13421
13549
  }, MOBILE_CLOSE_HEIGHT);
13422
- var IconContainer$2 = styled.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"])));
13423
- var TextWrapper = styled.div(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
13550
+ var IconContainer$2 = styled.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"])));
13551
+ var TextWrapper = styled.div(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
13424
13552
 
13425
13553
  var CloseButton$1 = function CloseButton(_ref2) {
13426
13554
  var closeId = _ref2.closeId,
@@ -13456,11 +13584,11 @@ var MobileNavbarContent = function MobileNavbarContent(_ref) {
13456
13584
  return selected === closeId ? null : React__default.createElement(Container$10, null, React__default.createElement(ContentWrapper, null, children));
13457
13585
  };
13458
13586
 
13459
- var _templateObject$1y, _templateObject2$1n, _templateObject3$1c;
13587
+ var _templateObject$1y, _templateObject2$1n, _templateObject3$1d;
13460
13588
  var Container$11 = styled.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose([""])));
13461
13589
  var ItemWrapper = styled.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n ", ";\n"])), function (_ref) {
13462
13590
  var theme = _ref.theme;
13463
- return css(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n border-bottom: 1px solid ", "\n "])), theme.colors.divider);
13591
+ return css(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n border-bottom: 1px solid ", "\n "])), theme.colors.divider);
13464
13592
  });
13465
13593
 
13466
13594
  var MobileMenu = function MobileMenu(_ref2) {
@@ -13531,10 +13659,10 @@ var MobileMenu = function MobileMenu(_ref2) {
13531
13659
  })));
13532
13660
  };
13533
13661
 
13534
- var _templateObject$1z, _templateObject2$1o, _templateObject3$1d;
13662
+ var _templateObject$1z, _templateObject2$1o, _templateObject3$1e;
13535
13663
  var Logo$1 = styled(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);
13536
13664
  var LogoMark$1 = styled.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n"])));
13537
- var SVGObject$1 = styled.object(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose([""])));
13665
+ var SVGObject$1 = styled.object(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose([""])));
13538
13666
 
13539
13667
  var MobileLogoLink = function MobileLogoLink(_ref) {
13540
13668
  var _ref$home = _ref.home,
@@ -13729,15 +13857,15 @@ var GlobalUI = function GlobalUI(_ref) {
13729
13857
 
13730
13858
  var _excluded$K = ["children"];
13731
13859
 
13732
- var _templateObject$1C, _templateObject2$1q, _templateObject3$1e, _templateObject4$14, _templateObject5$Y, _templateObject6$L, _templateObject7$F, _templateObject8$D, _templateObject9$w;
13860
+ var _templateObject$1C, _templateObject2$1q, _templateObject3$1f, _templateObject4$15, _templateObject5$Y, _templateObject6$L, _templateObject7$F, _templateObject8$C, _templateObject9$w;
13733
13861
  var Container$14 = styled.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"])));
13734
13862
  var LogoContainer = styled.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"])));
13735
- var LogoTopText = styled.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"])));
13736
- var LogoBottomText = styled.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"])));
13863
+ var LogoTopText = styled.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"])));
13864
+ var LogoBottomText = styled.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"])));
13737
13865
  var SidebarBox = styled.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"])));
13738
13866
  var SidebarHeading = styled.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"])));
13739
13867
  var SidebarLinkHeading = styled.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"])));
13740
- var BackLink = styled(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"])));
13868
+ var BackLink = styled(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"])));
13741
13869
  var SLink = styled(Link)(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 30px;\n top: 15px;\n /* width: 80px; */\n /* height: 30px; */\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n color: hsl(0, 0%, 55%);\n border-radius: 3px;\n background-color: hsl(206, 70%, 96%);\n text-decoration: none;\n padding: 7px 20px;\n"])));
13742
13870
  var SidebarLink = function SidebarLink(_ref) {
13743
13871
  var title = _ref.title,