scorer-ui-kit 2.0.4 → 2.0.6

package/dist/index.modern.js

@@ -1498,6 +1498,9 @@ var custom = {
       highlightLine: {
         stroke: 'hsla(205deg, 45%, 90%, 90%);'
       },
+      highlightLineBorder: {
+        stroke: 'hsla(204.8,53.4%,46.3%,100%);'
+      },
       grabHandle: {
         fill: 'hsla(205deg, 45%, 90%, 100%)',
         stroke: 'hsla(205deg, 45%, 100%, 100%)'
@@ -1543,6 +1546,9 @@ var custom = {
       highlightLine: {
         stroke: 'hsla(120deg, 45%, 90%, 90%);'
       },
+      highlightLineBorder: {
+        stroke: 'hsla(120deg, 81%, 70%, 90%);'
+      },
       grabHandle: {
         fill: 'hsla(120deg, 45%, 90%, 100%)',
         stroke: 'hsla(120deg, 45%, 100%, 100%)'
@@ -1588,6 +1594,9 @@ var custom = {
       highlightLine: {
         stroke: 'hsla(0, 45%, 90%, 90%);'
       },
+      highlightLineBorder: {
+        stroke: 'hsla(0deg, 86%, 70%, 100%);'
+      },
       grabHandle: {
         fill: 'hsla(0, 45%, 90%, 100%)',
         stroke: 'hsla(0, 45%, 100%, 100%)'
@@ -3672,6 +3681,22 @@ function CheckMark(props) {
   }));
 }
 
+function SvgNoImage() {
+  return createElement("svg", {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: '55',
+    height: '60',
+    fill: 'none',
+    viewBox: '5 80 300 174'
+  }, createElement("path", {
+    fill: '#F0F0F0',
+    d: 'M0 0H320V240H0z'
+  }), createElement("path", {
+    fill: '#656565',
+    d: 'M113.8 112.087V130h-1.212c-.192 0-.355-.033-.488-.1a1.246 1.246 0 01-.375-.338l-10.362-13.5a16.889 16.889 0 01.05 1.175V130h-2.126v-17.913h1.251c.108 0 .2.009.275.025.075.009.141.03.2.063a.589.589 0 01.175.125c.058.05.12.117.187.2l10.363 13.487-.05-.625a13.596 13.596 0 01-.013-.587v-12.688h2.125zm21.129 8.963c0 1.342-.212 2.575-.637 3.7a8.463 8.463 0 01-1.8 2.887 8.102 8.102 0 01-2.8 1.888c-1.084.442-2.284.663-3.6.663-1.317 0-2.517-.221-3.6-.663a8.119 8.119 0 01-2.788-1.888 8.463 8.463 0 01-1.8-2.887c-.425-1.125-.637-2.358-.637-3.7s.212-2.571.637-3.688c.425-1.125 1.025-2.091 1.8-2.9a8.052 8.052 0 012.788-1.9c1.083-.45 2.283-.675 3.6-.675 1.316 0 2.516.225 3.6.675a8.035 8.035 0 012.8 1.9c.775.809 1.375 1.775 1.8 2.9.425 1.117.637 2.346.637 3.688zm-2.487 0c0-1.1-.15-2.088-.45-2.963-.3-.875-.725-1.612-1.275-2.212a5.504 5.504 0 00-2-1.4c-.784-.325-1.659-.488-2.625-.488-.959 0-1.829.163-2.613.488a5.618 5.618 0 00-2.012 1.4c-.55.6-.975 1.337-1.275 2.212-.3.875-.45 1.863-.45 2.963s.15 2.087.45 2.962c.3.867.725 1.605 1.275 2.213a5.687 5.687 0 002.012 1.387c.784.317 1.654.475 2.613.475.966 0 1.841-.158 2.625-.475a5.57 5.57 0 002-1.387c.55-.608.975-1.346 1.275-2.213.3-.875.45-1.862.45-2.962zM147.22 130h-2.425v-17.913h2.425V130zm23.22-17.913V130h-2.125v-13.163c0-.175.004-.362.012-.562l.05-.613-6.15 11.2c-.192.375-.483.563-.875.563h-.35c-.392 0-.683-.188-.875-.563l-6.275-11.25c.05.442.075.85.075 1.225V130h-2.125v-17.913h1.788c.216 0 .383.021.5.063.116.042.229.158.337.35l6.188 11.025c.1.2.195.408.287.625.1.217.192.437.275.662.083-.225.171-.445.263-.662.091-.225.191-.438.3-.638l6.075-11.012c.1-.192.208-.308.325-.35a1.66 1.66 0 01.512-.063h1.788zm14.092 11.263l-2.812-7.288a14.972 14.972 0 01-.263-.75c-.091-.291-.179-.6-.262-.925a13.51 13.51 0 01-.538 1.688l-2.812 7.275h6.687zm5.05 6.65h-1.875c-.216 0-.391-.054-.525-.163a1 1 0 01-.3-.412l-1.675-4.325h-8.037l-1.675 4.325a.878.878 0 01-.288.4.794.794 0 01-.525.175h-1.875l7.163-17.913h2.45L189.582 130zm16.443-8.613v6.875c-.9.65-1.862 1.138-2.887 1.463-1.017.317-2.134.475-3.35.475-1.442 0-2.742-.221-3.9-.663-1.159-.45-2.15-1.075-2.975-1.875a8.282 8.282 0 01-1.888-2.9c-.442-1.125-.662-2.362-.662-3.712 0-1.367.212-2.613.637-3.738.433-1.125 1.046-2.087 1.838-2.887.791-.808 1.754-1.433 2.887-1.875 1.133-.442 2.4-.663 3.8-.663.708 0 1.367.055 1.975.163.608.1 1.171.25 1.688.45.516.192.995.429 1.437.712a8.5 8.5 0 011.238.938l-.688 1.1a.739.739 0 01-.425.325c-.167.042-.354 0-.562-.125-.2-.117-.43-.258-.688-.425a5.555 5.555 0 00-.95-.475 7.037 7.037 0 00-1.312-.4c-.5-.108-1.096-.163-1.788-.163-1.008 0-1.921.167-2.737.5a5.683 5.683 0 00-2.088 1.413c-.575.608-1.017 1.35-1.325 2.225-.308.867-.462 1.842-.462 2.925 0 1.125.158 2.133.475 3.025.325.883.783 1.637 1.375 2.262a5.955 5.955 0 002.175 1.413c.85.325 1.804.487 2.862.487.833 0 1.571-.091 2.213-.275a9.829 9.829 0 001.9-.787v-3.938h-2.788a.549.549 0 01-.387-.137.459.459 0 01-.138-.338v-1.375h5.5zm14.762 6.638l-.013 1.975h-11.037v-17.913h11.037v1.975h-8.612v5.95h6.975v1.9h-6.975v6.113h8.625z'
+  }));
+}
+
 var _templateObject$e, _templateObject2$d, _templateObject3$b, _templateObject4$a, _templateObject5$8, _templateObject6$6, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$3, _templateObject12$1, _templateObject13$1;
 var CheckboxState;
 
@@ -4067,7 +4092,12 @@ var uniqueID = function uniqueID() {
   return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, '');
 };
 
-var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback"];
+var isNotNumber = function isNotNumber(value) {
+  var intValue = parseInt(value);
+  return intValue !== intValue;
+};
+
+var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
 
 var _templateObject$i, _templateObject2$h, _templateObject3$f, _templateObject4$e, _templateObject5$c, _templateObject6$a, _templateObject7$a, _templateObject8$9, _templateObject9$9, _templateObject10$9, _templateObject11$5, _templateObject12$3;
 var ThumbDiameter = 16;
@@ -4166,7 +4196,7 @@ var getMarkAlignment = function getMarkAlignment(value, min, max) {
   return 'center';
 };
 
-var renderMarks = function renderMarks(markList, min, max, listTag) {
+var renderMarks = function renderMarks(markList, min, max, listTag, allMarkCentered) {
   var listOptions = [];
   var marksElements = markList.map(function (_ref11, index) {
     var value = _ref11.value,
@@ -4182,7 +4212,7 @@ var renderMarks = function renderMarks(markList, min, max, listTag) {
       leftValue: left
     }), React__default.createElement(MarkLabel, {
       leftValue: left,
-      alignment: getMarkAlignment(value, min, max)
+      alignment: allMarkCentered ? 'center' : getMarkAlignment(value, min, max)
     }, label));
   });
   return React__default.createElement(Fragment, null, marksElements, React__default.createElement("datalist", {
@@ -4207,6 +4237,8 @@ var SliderInput = function SliderInput(_ref12) {
       inputCallback = _ref12$inputCallback === void 0 ? function () {} : _ref12$inputCallback,
       _ref12$onChangeCallba = _ref12.onChangeCallback,
       onChangeCallback = _ref12$onChangeCallba === void 0 ? function () {} : _ref12$onChangeCallba,
+      _ref12$allMarkCentere = _ref12.allMarkCentered,
+      allMarkCentered = _ref12$allMarkCentere === void 0 ? false : _ref12$allMarkCentere,
       props = _objectWithoutPropertiesLoose(_ref12, _excluded$9);
 
   var maxValid = getValidMax(max, min);
@@ -4280,7 +4312,7 @@ var SliderInput = function SliderInput(_ref12) {
   }, [defaultValue, maxValid, minValid]);
   return React__default.createElement(SliderWrapper, {
     disabled: disabled
-  }, React__default.createElement(Rail, null), React__default.createElement(ThumbWrapper, null, marks && renderMarks(marks, minValid, maxValid, "sliderList-" + minValid + "-" + maxValid), isGhostActive && onlyMarkSelect ? React__default.createElement(GhostThumb, {
+  }, React__default.createElement(Rail, null), React__default.createElement(ThumbWrapper, null, marks && renderMarks(marks, minValid, maxValid, "sliderList-" + minValid + "-" + maxValid, allMarkCentered), isGhostActive && onlyMarkSelect ? React__default.createElement(GhostThumb, {
     "data-value": selectedValue,
     leftValue: ghostThumbValue,
     "data-percentage": ghostThumbValue,
@@ -4415,13 +4447,16 @@ var DurationSlider = function DurationSlider(_ref3) {
   })));
 };
 
-var _excluded$c = ["defaultValue", "inputCallback", "updateThumbColor", "updateTitle"];
+var _excluded$c = ["defaultValue", "inputCallback", "updateThumbColor", "updateTitle", "showValue", "allMarkCentered"];
 
 var _templateObject$l, _templateObject2$k, _templateObject3$i;
 var Container$b = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose([""])));
-var Headers$1 = styled.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  color: hsl(207, 5%, 57%);\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 20px;\n  padding: 0 6px;\n"])));
-var ValueTitle$1 = styled(Label)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
+var Headers$1 = styled.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  color: hsl(207, 5%, 57%);\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 20px;\n  ", ";\n"])), function (_ref) {
+  var allMarkCentered = _ref.allMarkCentered;
+  return allMarkCentered ? "padding: 0;" : "padding: 0 6px;";
+});
+var ValueTitle$1 = styled(Label)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n"])), function (_ref2) {
+  var theme = _ref2.theme;
   return theme.fontFamily.data;
 });
 
@@ -4449,13 +4484,15 @@ var getTitleLevel = function getTitleLevel(value) {
   return 'Safe Level';
 };
 
-var PercentageSlider = function PercentageSlider(_ref2) {
-  var _ref2$defaultValue = _ref2.defaultValue,
-      defaultValue = _ref2$defaultValue === void 0 ? 0 : _ref2$defaultValue,
-      inputCallback = _ref2.inputCallback,
-      updateThumbColor = _ref2.updateThumbColor,
-      updateTitle = _ref2.updateTitle,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+var PercentageSlider = function PercentageSlider(_ref3) {
+  var _ref3$defaultValue = _ref3.defaultValue,
+      defaultValue = _ref3$defaultValue === void 0 ? 0 : _ref3$defaultValue,
+      inputCallback = _ref3.inputCallback,
+      updateThumbColor = _ref3.updateThumbColor,
+      updateTitle = _ref3.updateTitle,
+      showValue = _ref3.showValue,
+      allMarkCentered = _ref3.allMarkCentered,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded$c);
 
   var _useState = useState(defaultValue),
       selectedValue = _useState[0],
@@ -4468,10 +4505,12 @@ var PercentageSlider = function PercentageSlider(_ref2) {
 
     setSelectedValue(value);
   }, [inputCallback]);
-  return React__default.createElement(Container$b, null, React__default.createElement(Headers$1, null, React__default.createElement(Label, {
+  return React__default.createElement(Container$b, null, React__default.createElement(Headers$1, {
+    allMarkCentered: allMarkCentered
+  }, React__default.createElement(Label, {
     htmlFor: 'percentage-slider',
     labelText: updateTitle ? updateTitle(selectedValue) : getTitleLevel(selectedValue)
-  }), React__default.createElement(ValueTitle$1, {
+  }), showValue && React__default.createElement(ValueTitle$1, {
     htmlFor: 'percentage-slider',
     labelText: selectedValue + "%"
   })), React__default.createElement(SliderInput, Object.assign({}, props, {
@@ -4479,8 +4518,10 @@ var PercentageSlider = function PercentageSlider(_ref2) {
     max: 100,
     min: 0,
     defaultValue: defaultValue,
+    showValue: showValue,
     onChangeCallback: handleSelectedValue,
-    thumbColor: updateThumbColor ? updateThumbColor(selectedValue) : getThumbColor(selectedValue)
+    thumbColor: updateThumbColor ? updateThumbColor(selectedValue) : getThumbColor(selectedValue),
+    allMarkCentered: allMarkCentered
   })));
 };
 
@@ -4611,6 +4652,17 @@ var DropArea = function DropArea(_ref3) {
 
     setInDropZone(false);
   }, [dropCallback]);
+  var handleWindowDragAndDrop = useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+  useEffect(function () {
+    window.addEventListener("dragover", handleWindowDragAndDrop);
+    window.addEventListener("drop", handleWindowDragAndDrop);
+    return function () {
+      window.removeEventListener('dragover', handleWindowDragAndDrop);
+      window.removeEventListener('drop', handleWindowDragAndDrop);
+    };
+  }, [handleWindowDragAndDrop]);
   return React__default.createElement(Container$c, Object.assign({}, {
     height: height
   }, props), React__default.createElement(DragAndDrop, Object.assign({}, {
@@ -5499,13 +5551,10 @@ var Container$g = styled.div(_templateObject$r || (_templateObject$r = _taggedTe
   return theme.fontFamily.ui;
 });
 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"])));
-var InputButtonWrapper = styled.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n  z-index: 99;\n  margin-top: 20px;\n"])));
-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  position: relative;\n  ", ";\n"])), function (_ref2) {
+var InputButtonWrapper = styled.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n  z-index: 99;\n  margin-top: 20px;\n  display: flex;\n  gap: 20px;\n"])));
+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) {
   var hasFiles = _ref2.hasFiles;
   return hasFiles ? '26px 0 20px 0' : '65px 0 42px 0';
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.styles.filters.dropdownContainer.background;
 });
 var Title = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  color: hsl(208, 8%, 38%);\n  font-size: 20px;\n"])));
 var Description = styled.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 2.14;\n  text-align: center;\n  color: hsl(207, 5%, 57%);\n  margin-top: 10px;\n  max-width: 386px;\n"])));
@@ -5560,27 +5609,33 @@ var getUpdateFiles = function getUpdateFiles(newFiles, files, allowedFileTypes)
   return result;
 };
 
-var AreaUploadManager = function AreaUploadManager(_ref4) {
-  var _ref4$title = _ref4.title,
-      title = _ref4$title === void 0 ? 'Select Files' : _ref4$title,
-      description = _ref4.description,
-      fileIcons = _ref4.fileIcons,
-      _ref4$selectFilesText = _ref4.selectFilesText,
-      selectFilesText = _ref4$selectFilesText === void 0 ? 'Select Files' : _ref4$selectFilesText,
-      _ref4$addMoreFilesTex = _ref4.addMoreFilesText,
-      addMoreFilesText = _ref4$addMoreFilesTex === void 0 ? 'Add More Files' : _ref4$addMoreFilesTex,
-      allowedFileTypes = _ref4.allowedFileTypes,
-      customComponent = _ref4.customComponent,
-      _ref4$onChangeCallbac = _ref4.onChangeCallback,
-      onChangeCallback = _ref4$onChangeCallbac === void 0 ? function () {} : _ref4$onChangeCallbac;
+var AreaUploadManager = function AreaUploadManager(_ref3) {
+  var _ref3$title = _ref3.title,
+      title = _ref3$title === void 0 ? 'Select Files' : _ref3$title,
+      description = _ref3.description,
+      fileIcons = _ref3.fileIcons,
+      _ref3$selectFilesText = _ref3.selectFilesText,
+      selectFilesText = _ref3$selectFilesText === void 0 ? 'Select Files' : _ref3$selectFilesText,
+      _ref3$addMoreFilesTex = _ref3.addMoreFilesText,
+      addMoreFilesText = _ref3$addMoreFilesTex === void 0 ? 'Add More Files' : _ref3$addMoreFilesTex,
+      _ref3$clearFilesText = _ref3.clearFilesText,
+      clearFilesText = _ref3$clearFilesText === void 0 ? 'Clear Files' : _ref3$clearFilesText,
+      _ref3$beginUploadText = _ref3.beginUploadText,
+      beginUploadText = _ref3$beginUploadText === void 0 ? 'Begin Upload' : _ref3$beginUploadText,
+      allowedFileTypes = _ref3.allowedFileTypes,
+      customComponent = _ref3.customComponent,
+      _ref3$onChangeCallbac = _ref3.onChangeCallback,
+      onChangeCallback = _ref3$onChangeCallbac === void 0 ? function () {} : _ref3$onChangeCallbac,
+      _ref3$clearFilesCallb = _ref3.clearFilesCallback,
+      clearFilesCallback = _ref3$clearFilesCallb === void 0 ? function () {} : _ref3$clearFilesCallb,
+      _ref3$beginUploadCall = _ref3.beginUploadCallback,
+      beginUploadCallback = _ref3$beginUploadCall === void 0 ? function () {} : _ref3$beginUploadCall;
 
   var _useState = useState(null),
       files = _useState[0],
       setFiles = _useState[1];
 
   var handleFiles = useCallback(function (newFiles) {
-    console.log('files received', newFiles);
-
     if (newFiles === null) {
       return;
     }
@@ -5592,6 +5647,10 @@ var AreaUploadManager = function AreaUploadManager(_ref4) {
     setFiles(goodFiles);
     onChangeCallback(goodFiles, rejectedFiles);
   }, [files, allowedFileTypes, onChangeCallback]);
+  var clearFiles = useCallback(function () {
+    setFiles(null);
+    clearFilesCallback();
+  }, [clearFilesCallback]);
   return React__default.createElement(Container$g, null, React__default.createElement(FilesUploadGroup, {
     hasFiles: files !== null
   }, React__default.createElement(StyledDropArea, {
@@ -5603,8 +5662,17 @@ var AreaUploadManager = function AreaUploadManager(_ref4) {
     text: files !== null ? addMoreFilesText : selectFilesText,
     inputCallback: handleFiles,
     multiple: true,
-    buttonDesign: files !== null ? 'secondary' : 'primary'
-  }))));
+    buttonDesign: files !== null ? 'secondary' : 'primary',
+    accept: allowedFileTypes === null || allowedFileTypes === void 0 ? void 0 : allowedFileTypes.join(', ')
+  }), files !== null && React__default.createElement(Fragment, null, React__default.createElement(Button, {
+    size: 'small',
+    onClick: beginUploadCallback,
+    design: 'primary'
+  }, beginUploadText), React__default.createElement(Button, {
+    size: 'small',
+    onClick: clearFiles,
+    design: 'secondary'
+  }, clearFilesText)))));
 };
 
 var _excluded$i = ["children", "spacing"];
@@ -5626,7 +5694,7 @@ var Form = function Form(_ref2) {
   }, props), children);
 };
 
-var _templateObject$t, _templateObject2$s, _templateObject3$o, _templateObject4$k, _templateObject5$i, _templateObject6$f, _templateObject7$e, _templateObject8$d, _templateObject9$d, _templateObject10$b, _templateObject11$7;
+var _templateObject$t, _templateObject2$s, _templateObject3$o, _templateObject4$k, _templateObject5$i, _templateObject6$f, _templateObject7$e, _templateObject8$d, _templateObject9$d, _templateObject10$b;
 var Container$h = styled.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (_ref) {
   var hide = _ref.hide;
   return hide && css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n    display: none;\n  "])));
@@ -5646,41 +5714,117 @@ var Label$1 = styled.label(_templateObject3$o || (_templateObject3$o = _taggedTe
 });
 var Item = styled.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  padding: 12px;\n  display: flex;\n  justify-content: left;\n"])));
 var IconWrap = styled.div(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  flex: 0 0 40px;\n  padding-top: 2px;\n"])));
-var Input$1 = styled.input(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", ";\n\n  width: 100%;\n  border: none;\n  border: transparent 1px solid;\n  outline: none;\n  flex: 1;\n  justify-content: space-between;\n  border-radius: 3px;\n\n  &:focus, &:hover {\n    border-color: blue;\n  }\n\n  ", "\n"])), function (_ref6) {
+var Input$1 = styled.input(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", ";\n\n  width: 100%;\n  border: ", ";\n  outline: none;\n  flex: 1;\n  justify-content: space-between;\n  border-radius: 3px;\n\n  &:focus, &:hover {\n    border-color: ", ";\n  }\n"])), function (_ref6) {
   var theme = _ref6.theme;
-  return css(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    background-color: ", ";\n  "])), theme.fontFamily.data, theme.styles.form.input["default"].normal.backgroundColor);
+  return css(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.data);
 }, function (_ref7) {
   var theme = _ref7.theme;
   return theme.typography.filters.value;
 }, function (_ref8) {
-  var readOnly = _ref8.readOnly;
-  return readOnly && css(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n    border-color: transparent;\n  "])));
-});
-var TimeColon = styled.div(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n  flex: 0 0 20px;\n"])));
-var InputWrap = styled.div(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 1;\n  box-sizing: border-box;\n  border-radius: 3px;\n\n  &:focus-within {\n\n    background: ", ";\n    box-shadow: 0px 0px 0px 5px ", ";\n\n    ", " {\n      border-color: ", ";\n    }\n\n    ", "{\n      color: ", ";\n      text-align: center;\n    }\n  }\n"])), function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.colors.menu.passive;
+  var isTimeInput = _ref8.isTimeInput;
+  return isTimeInput ? function (_ref9) {
+    var isTimeRangeValid = _ref9.isTimeRangeValid;
+    return isTimeRangeValid ? 'hsl(0 14% 90%) 1px solid' : 'rgb(255,0,0) 1px solid';
+  } : 'transparent 1px solid';
 }, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.colors.menu.passive;
-}, Input$1, function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.colors.divider;
-}, TimeColon, function (_ref12) {
+  var isTimeInput = _ref10.isTimeInput;
+  return isTimeInput ? function (_ref11) {
+    var isTimeRangeValid = _ref11.isTimeRangeValid;
+    return isTimeRangeValid ? 'hsl(0 14% 90%) 1px solid' : 'rgb(255,0,0) 1px solid';
+  } : 'transparent 1px solid';
+});
+var TimeColon = styled.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  flex: 0 0 20px;\n  text-align: center;\n"])));
+var InputWrap = styled.div(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 1;\n  box-sizing: border-box;\n  border-radius: 3px;\n\n  &:focus-within {\n\n    background: ", ";\n    box-shadow: 0px 0px 0px 5px ", ";\n\n    ", "{\n      color: ", ";\n      text-align: center;\n    }\n  }\n"])), function (_ref12) {
   var theme = _ref12.theme;
+  return theme.colors.menu.passive;
+}, function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.colors.menu.passive;
+}, TimeColon, function (_ref14) {
+  var theme = _ref14.theme;
   return theme.colors.pureTop;
 });
 
-var DateTimeBlock = function DateTimeBlock(_ref13) {
-  var _ref13$allowAfterMidn = _ref13.allowAfterMidnight,
-      allowAfterMidnight = _ref13$allowAfterMidn === void 0 ? false : _ref13$allowAfterMidn,
-      title = _ref13.title,
-      hasDate = _ref13.hasDate,
-      hasTime = _ref13.hasTime,
-      _ref13$date = _ref13.date,
-      date = _ref13$date === void 0 ? new Date() : _ref13$date,
-      _ref13$setDateCallbac = _ref13.setDateCallback,
-      setDateCallback = _ref13$setDateCallbac === void 0 ? function () {} : _ref13$setDateCallbac;
+var DateTimeBlock = function DateTimeBlock(_ref15) {
+  var _ref15$allowAfterMidn = _ref15.allowAfterMidnight,
+      allowAfterMidnight = _ref15$allowAfterMidn === void 0 ? false : _ref15$allowAfterMidn,
+      title = _ref15.title,
+      hasDate = _ref15.hasDate,
+      hasTime = _ref15.hasTime,
+      _ref15$isTimeRangeVal = _ref15.isTimeRangeValid,
+      isTimeRangeValid = _ref15$isTimeRangeVal === void 0 ? true : _ref15$isTimeRangeVal,
+      _ref15$date = _ref15.date,
+      date = _ref15$date === void 0 ? new Date() : _ref15$date,
+      _ref15$setDateCallbac = _ref15.setDateCallback,
+      setDateCallback = _ref15$setDateCallbac === void 0 ? function () {} : _ref15$setDateCallbac;
+
+  var validHourMin = function validHourMin(textHour, textMin, hasDate, allowAfterMidnight) {
+    var intHour = Number(textHour.slice(-2));
+    var intMin = Number(textMin.slice(-2));
+    var newHour = intHour > 24 ? Number(textHour.slice(-1)) : intHour;
+    var newMin = intMin > 60 ? Number(textMin.slice(-1)) : intMin;
+
+    if (newHour >= 24 && newMin !== -1 && allowAfterMidnight) {
+      return {
+        newHour: 24,
+        newMin: 0
+      };
+    }
+
+    if (newHour === 0 && newMin === 0 && allowAfterMidnight && !hasDate) {
+      return {
+        newHour: 0,
+        newMin: 1
+      };
+    }
+
+    if (newHour === 23 && newMin === 60 && !allowAfterMidnight) {
+      return {
+        newHour: 23,
+        newMin: 59
+      };
+    }
+
+    if (newHour >= 24 && !allowAfterMidnight) {
+      return {
+        newHour: 23,
+        newMin: newMin
+      };
+    }
+
+    if (newMin === 60) {
+      return {
+        newHour: newHour + 1,
+        newMin: 0
+      };
+    }
+
+    if (newHour > 0 && newMin === -1) {
+      return {
+        newHour: newHour - 1,
+        newMin: 59
+      };
+    }
+
+    if (newHour === 0 && newMin === -1) {
+      return {
+        newHour: newHour,
+        newMin: 0
+      };
+    }
+
+    if (newHour === -1) {
+      return {
+        newHour: 0,
+        newMin: newMin
+      };
+    }
+
+    return {
+      newHour: newHour,
+      newMin: newMin
+    };
+  };
 
   var _useState = useState(format(date, "mm")),
       displayHours = _useState[0],
@@ -5690,24 +5834,42 @@ var DateTimeBlock = function DateTimeBlock(_ref13) {
       displayMinutes = _useState2[0],
       setDisplayMinutes = _useState2[1];
 
-  var setDateHours = useCallback(function (_ref14) {
-    var value = _ref14.target.value;
+  var setDateHours = useCallback(function (_ref16) {
+    var value = _ref16.target.value;
+
+    if (isNotNumber(value)) {
+      return;
+    }
+
+    var _validHourMin = validHourMin(value, displayMinutes, hasDate, allowAfterMidnight),
+        newHour = _validHourMin.newHour,
+        newMin = _validHourMin.newMin;
+
     setDateCallback(min([endOfDay(date), set(date, {
-      hours: Number(value),
-      minutes: Number(displayMinutes),
+      hours: newHour,
+      minutes: newMin,
       seconds: 0,
       milliseconds: 0
     })]));
-  }, [date, displayMinutes, setDateCallback]);
-  var setDateMinutes = useCallback(function (_ref15) {
-    var value = _ref15.target.value;
+  }, [allowAfterMidnight, date, displayMinutes, hasDate, setDateCallback]);
+  var setDateMinutes = useCallback(function (_ref17) {
+    var value = _ref17.target.value;
+
+    if (isNotNumber(value)) {
+      return;
+    }
+
+    var _validHourMin2 = validHourMin(displayHours, value, hasDate, allowAfterMidnight),
+        newHour = _validHourMin2.newHour,
+        newMin = _validHourMin2.newMin;
+
     setDateCallback(min([endOfDay(date), set(date, {
-      hours: displayHours === '24' ? 23 : Number(displayHours),
-      minutes: Number(value) % 60,
+      hours: newHour,
+      minutes: newMin,
       seconds: 0,
       milliseconds: 0
     })]));
-  }, [date, displayHours, setDateCallback]);
+  }, [allowAfterMidnight, date, displayHours, hasDate, setDateCallback]);
   useEffect(function () {
     if (allowAfterMidnight && isEqual(date, endOfDay(date))) {
       setDisplayHours('24');
@@ -5724,33 +5886,45 @@ var DateTimeBlock = function DateTimeBlock(_ref13) {
     color: 'dimmed',
     size: 14,
     weight: 'light'
-  })), React__default.createElement(InputWrap, null, React__default.createElement(Input$1, {
+  })), React__default.createElement(InputWrap, null, React__default.createElement(Input$1, Object.assign({
     type: 'text',
     readOnly: true,
     value: format(date, "yyyy/MM/dd")
-  }))), hasTime && React__default.createElement(Item, null, React__default.createElement(IconWrap, null, React__default.createElement(Icon, {
+  }, {
+    isTimeRangeValid: isTimeRangeValid
+  })))), hasTime && React__default.createElement(Item, null, React__default.createElement(IconWrap, null, React__default.createElement(Icon, {
     icon: 'Time',
     color: 'dimmed',
     size: 14,
     weight: 'light'
-  })), React__default.createElement(InputWrap, null, React__default.createElement(Input$1, {
+  })), React__default.createElement(InputWrap, null, React__default.createElement(Input$1, Object.assign({
     name: 'hours',
     type: 'number',
-    min: '0',
+    min: '-1',
     max: allowAfterMidnight ? 24 : 23,
     value: displayHours,
     onChange: setDateHours
-  }), React__default.createElement(TimeColon, null, ":"), React__default.createElement(Input$1, {
+  }, {
+    isTimeRangeValid: isTimeRangeValid
+  }, {
+    autoComplete: 'off',
+    isTimeInput: true
+  })), React__default.createElement(TimeColon, null, ":"), React__default.createElement(Input$1, Object.assign({
     name: 'minutes',
     type: 'number',
-    min: '0',
-    max: '59',
+    min: '-1',
+    max: '60',
     value: displayMinutes,
     onChange: setDateMinutes
-  }))));
+  }, {
+    isTimeRangeValid: isTimeRangeValid
+  }, {
+    autoComplete: 'off',
+    isTimeInput: true
+  })))));
 };
 
-var _templateObject$u, _templateObject2$t, _templateObject3$p, _templateObject4$l, _templateObject5$j, _templateObject6$g, _templateObject7$f, _templateObject8$e, _templateObject9$e, _templateObject10$c, _templateObject11$8, _templateObject12$5, _templateObject13$4, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
+var _templateObject$u, _templateObject2$t, _templateObject3$p, _templateObject4$l, _templateObject5$j, _templateObject6$g, _templateObject7$f, _templateObject8$e, _templateObject9$e, _templateObject10$c, _templateObject11$7, _templateObject12$5, _templateObject13$4, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
 
 var initializeInterval = function initializeInterval(day) {
   return {
@@ -5793,7 +5967,7 @@ var CurrentMonth = styled.div(_templateObject10$c || (_templateObject10$c = _tag
   var theme = _ref7.theme;
   return theme.typography.filters.datepicker.focusedYear;
 });
-var IconWrap$1 = styled.div(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose([""])));
+var IconWrap$1 = styled.div(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose([""])));
 var PaginateMonth = styled.button(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  flex: 0 0 90px;\n\n  border: none;\n  background: transparent;\n  outline: none;\n\n  ", ";\n\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n\n  &:hover {\n    background: transparent;\n    ", ";\n\n    ", "{\n      [stroke]{\n        stroke: ", ";\n      }\n    }\n  }\n\n"])), function (_ref8) {
   var theme = _ref8.theme;
   return theme.typography.filters.datepicker.monthLink["default"];
@@ -5915,6 +6089,11 @@ var DatePicker = function DatePicker(_ref27) {
       setWeeksOfMonth = _useState4[1];
 
   var isInitialMount = useRef(true);
+
+  var _useState5 = useState(true),
+      isTimeRangeValid = _useState5[0],
+      setIsTimeRangeValid = _useState5[1];
+
   var dayGuide = lang === 'ja' ? jpDayGuide : enDayGuide;
   useEffect(function () {
     if (isInitialMount.current) {
@@ -5967,44 +6146,59 @@ var DatePicker = function DatePicker(_ref27) {
       }
     }
   }, [dateMode, selectedRange, targetedDate]);
-  var updateStartDate = useCallback(function (start) {
+  useEffect(function () {
     var _ref28 = selectedRange ? selectedRange : TODAY_INTERVAL,
+        start = _ref28.start,
         end = _ref28.end;
 
-    if (isAfter(add(start, {
+    if (timeMode === 'interval' && isAfter(add(start, {
       minutes: 1
-    }), end)) return;
+    }), end)) {
+      if (isEqual(end, endOfDay(start)) && end.getSeconds() > 0) {
+        setIsTimeRangeValid(true);
+      } else {
+        setIsTimeRangeValid(false);
+      }
+    } else {
+      setIsTimeRangeValid(true);
+    }
+  }, [selectedRange, timeMode]);
+  var updateStartDate = useCallback(function (start) {
+    var _ref29 = selectedRange ? selectedRange : TODAY_INTERVAL,
+        end = _ref29.end;
+
     setSelectedRange({
       start: start,
       end: end
     });
   }, [selectedRange]);
   var updateEndDate = useCallback(function (end) {
-    var _ref29 = selectedRange ? selectedRange : TODAY_INTERVAL,
-        start = _ref29.start;
+    var _ref30 = selectedRange ? selectedRange : TODAY_INTERVAL,
+        start = _ref30.start;
 
-    if (isAfter(add(start, {
-      minutes: 1
-    }), end)) return;
     setSelectedRange({
       start: start,
       end: end
     });
   }, [selectedRange]);
-  return React__default.createElement(Container$i, null, React__default.createElement(DateTimeArea, null, React__default.createElement(DateTimeBlock, {
+  return React__default.createElement(Container$i, null, React__default.createElement(DateTimeArea, null, React__default.createElement(DateTimeBlock, Object.assign({}, {
+    isTimeRangeValid: isTimeRangeValid
+  }, {
     title: dateTimeTextUpper,
     hasDate: true,
     hasTime: timeMode !== 'off',
     date: selectedRange ? selectedRange.start : TODAY_INTERVAL.start,
     setDateCallback: updateStartDate
-  }), React__default.createElement(DateTimeBlock, {
+  })), React__default.createElement(DateTimeBlock, Object.assign({}, {
+    isTimeRangeValid: isTimeRangeValid
+  }, {
     title: dateTimeTextLower,
     hasDate: dateMode === 'interval',
     hasTime: timeMode === 'interval',
     date: selectedRange ? selectedRange.end : TODAY_INTERVAL.end,
     allowAfterMidnight: true,
     setDateCallback: updateEndDate
-  }), React__default.createElement(TimeZoneOption, null, React__default.createElement(TimeZoneLabel, null, timeZoneTitle), React__default.createElement(TimeZoneValue, null, timeZoneValueTitle))), React__default.createElement(CalendarArea, null, React__default.createElement(CalendarHeader, null, React__default.createElement(PaginateMonth, {
+  })), React__default.createElement(TimeZoneOption, null, React__default.createElement(TimeZoneLabel, null, timeZoneTitle), React__default.createElement(TimeZoneValue, null, timeZoneValueTitle))), React__default.createElement(CalendarArea, null, React__default.createElement(CalendarHeader, null, React__default.createElement(PaginateMonth, {
     type: 'button',
     onClick: function onClick() {
       return setFocusedMonth(addMonths(focusedMonth, -1));
@@ -6067,7 +6261,6 @@ var cellState = function cellState(day, interval, _hoverDate) {
     isInsideInterval = isWithinInterval(day, interval);
   } catch (error) {
     isInsideInterval = false;
-    console.log('wrong interval in datepicker', error);
   }
 
   if (isInsideInterval || isSameDay(interval.start, day)) {
@@ -6457,31 +6650,26 @@ var LoadingBox = function LoadingBox(_ref2) {
 
 var _excluded$o = ["buttonIcon", "buttonText", "list", "selected", "disabled", "isLoading", "loadingText", "optionType", "hasOptionsFilter", "searchPlaceholder", "maxDisplayedItems", "searchResultText", "emptyResultText", "onSelect"];
 
-var _templateObject$B, _templateObject2$A, _templateObject3$v, _templateObject4$q, _templateObject5$n, _templateObject6$k, _templateObject7$j, _templateObject8$h, _templateObject9$g;
+var _templateObject$B, _templateObject2$A, _templateObject3$v, _templateObject4$q, _templateObject5$n, _templateObject6$k, _templateObject7$j, _templateObject8$h, _templateObject9$g, _templateObject10$e;
 var Container$o = styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  position: relative;\n"])));
-var TopLine$1 = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  ", ";\n  height: 4px;\n  border-radius: 3px 3px 0 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n"])), function (_ref) {
+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) {
   var theme = _ref.theme;
   return theme.styles.filters.dropdownContainer.topBorder;
 });
-var InnerBox = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  border-bottom-left-radius: 3px;\n  border-bottom-right-radius: 3px;\n  padding-top: 5px;\n  ", ";\n"])), function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.styles.filters.dropdownContainer.background;
-});
+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"])));
 var StyledFilterOption = styled(FilterOption)(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  letter-spacing: 0.2px;\n"])));
-var OptionList = styled.div(_templateObject5$n || (_templateObject5$n = _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);
-var ResultsContainer = styled.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n  border-top: ", " 1px solid;\n  padding-bottom: 8px;\n"])), function (_ref3) {
+var OptionList = styled.div(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n  max-height: ", ";\n  min-height: 40px;\n  position: relative;\n  overflow-y: auto;\n  margin-right: 2px;\n\n  ", " {\n    height: 35px;\n    padding-left: 10px;\n  }\n"])), function (_ref2) {
+  var moreItem = _ref2.moreItem;
+  return moreItem ? '168px' : '175px';
+}, StyledFilterOption);
+var ResultsContainer = styled.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n  border-top: 1px solid hsl(0, 0%, 91%);\n  padding-bottom: 8px;\n"])));
+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 (_ref3) {
   var theme = _ref3.theme;
-  return theme.colors.divider;
-});
-var ResultCounter = styled.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  opacity: 0.75;\n  font-family: ", ";\n  color: hsl(0, 0%, 55%);\n  font-size: 12px;\n  font-style: italic;\n  font-weight: 300;\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  padding-left: 9px;\n  height: 30px;\n  margin-bottom: 6px;\n  border-bottom: ", " 1px solid;\n"])), function (_ref4) {
-  var theme = _ref4.theme;
   return theme.fontFamily.data;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.colors.divider;
 });
 var SearchWrapper = styled.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  height: 41px;\n  display: flex;\n  align-items: center;\n"])));
 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"])));
+var Gradient = styled.div(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 1px;\n  height: 15px;\n  background-image: linear-gradient(to bottom, transparent, #e5e5e5);\n  width: 99%;\n  left: 50%;\n  transform: translateX(-50%);\n  pointer-events: none;\n"])));
 
 var isValueSelected = function isValueSelected(item, selected) {
   var isItemSelected = false;
@@ -6607,29 +6795,29 @@ var getResultText = function getResultText(template, visible, total) {
   return newMessage.replace('[VISIBLE]', "" + visible);
 };
 
-var FilterDropdown = function FilterDropdown(_ref6) {
-  var buttonIcon = _ref6.buttonIcon,
-      buttonText = _ref6.buttonText,
-      list = _ref6.list,
-      _ref6$selected = _ref6.selected,
-      selected = _ref6$selected === void 0 ? null : _ref6$selected,
-      _ref6$disabled = _ref6.disabled,
-      disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
-      _ref6$isLoading = _ref6.isLoading,
-      isLoading = _ref6$isLoading === void 0 ? false : _ref6$isLoading,
-      loadingText = _ref6.loadingText,
-      _ref6$optionType = _ref6.optionType,
-      optionType = _ref6$optionType === void 0 ? 'text' : _ref6$optionType,
-      hasOptionsFilter = _ref6.hasOptionsFilter,
-      searchPlaceholder = _ref6.searchPlaceholder,
-      _ref6$maxDisplayedIte = _ref6.maxDisplayedItems,
-      maxDisplayedItems = _ref6$maxDisplayedIte === void 0 ? 5 : _ref6$maxDisplayedIte,
-      _ref6$searchResultTex = _ref6.searchResultText,
-      searchResultText = _ref6$searchResultTex === void 0 ? 'Showing [VISIBLE] of [TOTAL]' : _ref6$searchResultTex,
-      emptyResultText = _ref6.emptyResultText,
-      _ref6$onSelect = _ref6.onSelect,
-      onSelect = _ref6$onSelect === void 0 ? function () {} : _ref6$onSelect,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded$o);
+var FilterDropdown = function FilterDropdown(_ref4) {
+  var buttonIcon = _ref4.buttonIcon,
+      buttonText = _ref4.buttonText,
+      list = _ref4.list,
+      _ref4$selected = _ref4.selected,
+      selected = _ref4$selected === void 0 ? null : _ref4$selected,
+      _ref4$disabled = _ref4.disabled,
+      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
+      _ref4$isLoading = _ref4.isLoading,
+      isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
+      loadingText = _ref4.loadingText,
+      _ref4$optionType = _ref4.optionType,
+      optionType = _ref4$optionType === void 0 ? 'text' : _ref4$optionType,
+      hasOptionsFilter = _ref4.hasOptionsFilter,
+      searchPlaceholder = _ref4.searchPlaceholder,
+      _ref4$maxDisplayedIte = _ref4.maxDisplayedItems,
+      maxDisplayedItems = _ref4$maxDisplayedIte === void 0 ? 5 : _ref4$maxDisplayedIte,
+      _ref4$searchResultTex = _ref4.searchResultText,
+      searchResultText = _ref4$searchResultTex === void 0 ? 'Showing [VISIBLE] of [TOTAL]' : _ref4$searchResultTex,
+      emptyResultText = _ref4.emptyResultText,
+      _ref4$onSelect = _ref4.onSelect,
+      onSelect = _ref4$onSelect === void 0 ? function () {} : _ref4$onSelect,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded$o);
 
   var _useState = useState(selectedOrderList(list, maxDisplayedItems, selected)),
       visibleList = _useState[0],
@@ -6694,7 +6882,9 @@ var FilterDropdown = function FilterDropdown(_ref6) {
     noBackground: true
   })), isLoading || !list ? React__default.createElement(LoadingBox, Object.assign({}, {
     loadingText: loadingText
-  })) : React__default.createElement(ResultsContainer, null, hasOptionsFilter && React__default.createElement(ResultCounter, null, getResultText(searchResultText, visibleList.length, list.length)), React__default.createElement(OptionList, null, visibleList.length > 0 ? visibleList.map(function (item, index) {
+  })) : React__default.createElement(ResultsContainer, null, hasOptionsFilter && React__default.createElement(ResultCounter, null, getResultText(searchResultText, visibleList.length, list.length)), React__default.createElement(OptionList, {
+    moreItem: list.length > 5
+  }, visibleList.length > 0 ? visibleList.map(function (item, index) {
     var value = item.value;
     var text = item.text;
     return React__default.createElement(StyledFilterOption, Object.assign({
@@ -6708,7 +6898,7 @@ var FilterDropdown = function FilterDropdown(_ref6) {
       optionType: optionType,
       value: value
     }));
-  }) : React__default.createElement(EmptyResultText, null, emptyResultText))))));
+  }) : React__default.createElement(EmptyResultText, null, emptyResultText)), list.length > 5 && React__default.createElement(Gradient, null)))));
 };
 
 var _excluded$p = ["buttonText", "disabled", "list", "isLoading", "loadingText", "isSortAscending", "selected", "descendingText", "ascendingText", "onSelect"];
@@ -6816,12 +7006,216 @@ var SortDropdown = function SortDropdown(_ref7) {
   }))))));
 };
 
+var _templateObject$D, _templateObject2$C, _templateObject3$x, _templateObject4$s, _templateObject5$p, _templateObject6$m, _templateObject7$l, _templateObject8$j, _templateObject9$i, _templateObject10$f, _templateObject11$8, _templateObject12$6, _templateObject13$5, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$2, _templateObject23$1;
+var Container$q = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  position: relative;\n"])));
+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"])));
+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) {
+  var theme = _ref.theme;
+  return css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n    ", ";\n    transition: background ", " ", ";\n  "])), theme.styles.global.mainMenu.iconBackground["default"], theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
+});
+var ContextActionButton = styled.button(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "{\n    cursor: pointer;\n  }\n  &:hover {\n    div > svg > g {\n      stroke: hsl(0, 0%, 100%);\n    }\n  }\n  &:hover ", "{\n    ", ";\n    }\n  }\n  ", "\n  ", "\n"])), ContextActionBaseCSS, ContextIcon, ContextIcon, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.styles.global.mainMenu.iconBackground.hover;
+}, function (_ref3) {
+  var isActive = _ref3.isActive;
+  return isActive && css(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n    ", " {\n      ", ";\n    }\n    &:hover ", "{\n      background-color: hsl(205, 100%, 72%);\n      cursor: pointer;\n    }\n  "])), ContextIcon, function (_ref4) {
+    var theme = _ref4.theme;
+    return theme.styles.global.mainMenu.iconBackground.hover;
+  }, ContextIcon);
+}, function (_ref5) {
+  var isInnerContextButton = _ref5.isInnerContextButton;
+  return isInnerContextButton && css(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n    margin-right: 5px;\n  "])));
+});
+var ContentBox$1 = styled.div(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n  z-index: 100;\n  min-width: ", "px;\n  position: absolute;\n  ", ";\n"])), function (_ref6) {
+  var minWidth = _ref6.minWidth;
+  return minWidth;
+}, function (_ref7) {
+  var openState = _ref7.openState,
+      disabled = _ref7.disabled;
+  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$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      left: 0;\n      transform: translateY(calc(100% + 5px ));\n    "]))), openState.position === 'bottom-left' && css(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      right: 0;\n      transform: translateY(calc(100% + 5px ));\n    "]))), openState.position === 'top-left' && css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n      top: 0;\n      right: 0;\n      transform: translateY(calc( -100% - 5px ));\n    "]))), openState.position === 'top-right' && css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n      top: 0;\n      left: 0;\n      transform: translateY(calc( -100% - 5px ));\n    "]))));
+});
+var ButtonWrapper$1 = styled.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n"])));
+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) {
+  var theme = _ref8.theme;
+  return theme.styles.filters.dropdownContainer.topBorder;
+});
+var InnerBox$2 = styled.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n  border-bottom-left-radius: 3px;\n  border-bottom-right-radius: 3px;\n  box-shadow: 0 4px 9px 0 hsla(204, 22%, 67%, 0.07);\n  border: solid 1px hsl(207,16%,86%);\n  border-top: none;\n  background-color: hsl(200, 23%, 97%);\n"])));
+var LayoutGroup = styled.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  padding: 4px 8px 4px 10px;\n  width: auto;\n"])));
+var PaginationGroup = styled.div(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  border-top: ", " 1px solid;\n  padding: 4px 8px 4px 10px;\n  align-items: center;\n  justify-content: space-between;\n  width: auto;\n"])), function (_ref9) {
+  var colors = _ref9.theme.colors;
+  return colors.divider;
+});
+var IconWrapper$3 = styled.div(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var LayoutText = styled.p(_templateObject20$2 || (_templateObject20$2 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: 14px;\n  color: #8f8f8f;\n"])), function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.fontFamily.ui;
+});
+var PaginationText = styled.p(_templateObject21$2 || (_templateObject21$2 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: 14px;\n  color: #8f8f8f;\n"])), function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.fontFamily.ui;
+});
+var PageSizeContainer = styled.div(_templateObject22$2 || (_templateObject22$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var SelectFieldContainer = styled.div(_templateObject23$1 || (_templateObject23$1 = _taggedTemplateLiteralLoose(["\n  select{\n    background-color: #fff;\n  }\n"])));
+
+var getDropPosition$1 = function getDropPosition(buttonRect, minWidth, minHeight) {
+  var position = 'bottom-right';
+  var openLeft = buttonRect.left + minWidth > window.innerWidth;
+  var openTop = buttonRect.bottom + minHeight > window.innerHeight;
+  var spaceTop = buttonRect.bottom > minHeight;
+
+  if (openLeft && openTop && spaceTop) {
+    position = 'top-left';
+  } else if (openTop && !openLeft && spaceTop) {
+    position = 'top-right';
+  } else if (!openTop && openLeft) {
+    position = 'bottom-left';
+  }
+
+  return position;
+};
+
+var FilterLayout = function FilterLayout(_ref12) {
+  var _ref12$disabled = _ref12.disabled,
+      disabled = _ref12$disabled === void 0 ? false : _ref12$disabled,
+      _ref12$onToggleOpenCa = _ref12.onToggleOpenCallback,
+      onToggleOpenCallback = _ref12$onToggleOpenCa === void 0 ? function () {} : _ref12$onToggleOpenCa,
+      _ref12$onCloseCallbac = _ref12.onCloseCallback,
+      onCloseCallback = _ref12$onCloseCallbac === void 0 ? function () {} : _ref12$onCloseCallbac,
+      _ref12$pageSizeOption = _ref12.pageSizeOptions,
+      pageSizeOptions = _ref12$pageSizeOption === void 0 ? [10, 20, 30, 50, 100] : _ref12$pageSizeOption,
+      _ref12$onPageSizeChan = _ref12.onPageSizeChange,
+      onPageSizeChange = _ref12$onPageSizeChan === void 0 ? function () {} : _ref12$onPageSizeChan,
+      _ref12$defaultPageSiz = _ref12.defaultPageSize,
+      defaultPageSize = _ref12$defaultPageSiz === void 0 ? 10 : _ref12$defaultPageSiz,
+      _ref12$getLayout = _ref12.getLayout,
+      getLayout = _ref12$getLayout === void 0 ? function () {} : _ref12$getLayout,
+      _ref12$layoutText = _ref12.layoutText,
+      layoutText = _ref12$layoutText === void 0 ? 'Layout' : _ref12$layoutText,
+      _ref12$pageSizeText = _ref12.pageSizeText,
+      pageSizeText = _ref12$pageSizeText === void 0 ? 'Items Per Page' : _ref12$pageSizeText,
+      contentArray = _ref12.contentArray,
+      _ref12$minWidth = _ref12.minWidth,
+      minWidth = _ref12$minWidth === void 0 ? 250 : _ref12$minWidth,
+      _ref12$minHeight = _ref12.minHeight,
+      minHeight = _ref12$minHeight === void 0 ? 90 : _ref12$minHeight,
+      _ref12$hasPageSetting = _ref12.hasPageSettings,
+      hasPageSettings = _ref12$hasPageSetting === void 0 ? true : _ref12$hasPageSetting;
+
+  var _useState = useState({
+    isOpen: false,
+    position: 'bottom-right'
+  }),
+      openState = _useState[0],
+      setOpenState = _useState[1];
+
+  var buttonWrapperRef = useRef(null);
+  var mainRef = useRef(null);
+
+  var _useState2 = useState('grid'),
+      isGridLayout = _useState2[0],
+      setIsGridLayout = _useState2[1];
+
+  var _useState3 = useState(defaultPageSize),
+      pageSize = _useState3[0],
+      setPageSize = _useState3[1];
+
+  var handleClose = useCallback(function () {
+    if (openState.isOpen) {
+      onCloseCallback();
+    }
+
+    setOpenState(function (prev) {
+      var isOpen = false;
+      return _extends({}, prev, {
+        isOpen: isOpen
+      });
+    });
+  }, [onCloseCallback, openState.isOpen]);
+  useClickOutside(mainRef, handleClose);
+  var handleToggleOpen = useCallback(function (minWidth, minHeight) {
+    if (!buttonWrapperRef.current) {
+      return;
+    }
+
+    var buttonRect = buttonWrapperRef.current.getBoundingClientRect();
+
+    if (!buttonRect) {
+      return;
+    }
+
+    var position = getDropPosition$1(buttonRect, minWidth, minHeight);
+    onToggleOpenCallback(openState.isOpen);
+    setOpenState(function (prev) {
+      var isOpen = !prev.isOpen;
+      return _extends({}, prev, {
+        isOpen: isOpen,
+        position: position
+      });
+    });
+  }, [onToggleOpenCallback, openState.isOpen]);
+  var switchLayout = useCallback(function (layout) {
+    setIsGridLayout(layout);
+    getLayout(layout);
+  }, [getLayout]);
+  var handlePageSizeChange = useCallback(function (size) {
+    onPageSizeChange(Number(size));
+  }, [onPageSizeChange]);
+  useEffect(function () {
+    setPageSize(defaultPageSize);
+  }, [defaultPageSize]);
+  var internal = React__default.createElement(React__default.Fragment, null, React__default.createElement(ContextIcon, null, React__default.createElement(Icon, {
+    icon: 'ViewSettings',
+    color: openState.isOpen ? 'inverse' : 'dimmed',
+    size: 16
+  })));
+  return React__default.createElement(Container$q, {
+    ref: mainRef
+  }, React__default.createElement(ButtonWrapper$1, {
+    ref: buttonWrapperRef
+  }, React__default.createElement(ContextActionButton, {
+    isActive: openState.isOpen,
+    isInnerContextButton: false,
+    onClick: function onClick() {
+      return handleToggleOpen(minWidth, minHeight);
+    }
+  }, internal)), React__default.createElement(ContentBox$1, Object.assign({}, {
+    openState: openState,
+    disabled: disabled,
+    minWidth: minWidth
+  }), React__default.createElement(TopLine$3, null), React__default.createElement(InnerBox$2, null, React__default.createElement(LayoutGroup, null, React__default.createElement(LayoutText, null, layoutText), React__default.createElement(IconWrapper$3, null, contentArray.map(function (item, index) {
+    return React__default.createElement(ContextActionButton, {
+      key: index,
+      isInnerContextButton: index !== contentArray.length - 1,
+      isActive: isGridLayout === item.id,
+      onClick: function onClick() {
+        return switchLayout(item.id);
+      }
+    }, React__default.createElement(ContextIcon, {
+      title: item.tooltipText
+    }, React__default.createElement(Icon, {
+      icon: item.icon,
+      color: isGridLayout === item.id ? 'inverse' : 'dimmed',
+      size: 16
+    })));
+  }))), hasPageSettings && React__default.createElement(PaginationGroup, null, React__default.createElement(PaginationText, null, pageSizeText), pageSizeOptions && React__default.createElement(PageSizeContainer, null, React__default.createElement(SelectFieldContainer, null, React__default.createElement(SelectField, {
+    changeCallback: handlePageSizeChange,
+    defaultValue: pageSize,
+    isCompact: true,
+    value: pageSize
+  }, pageSizeOptions.map(function (size, index) {
+    return React__default.createElement("option", {
+      key: index,
+      value: size
+    }, size);
+  }))))))));
+};
+
 var _excluded$q = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "onCloseCallback", "onUpdateCallback", "onToggleCallback"];
 
-var _templateObject$D;
+var _templateObject$E;
 var MIN_WIDTH = 470;
 var MIN_HEIGHT = 360;
-var Container$q = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose([""])));
+var Container$r = styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose([""])));
 
 var DropdownDatePicker = function DropdownDatePicker(_ref) {
   var buttonIcon = _ref.buttonIcon,
@@ -6889,7 +7283,7 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
       canReset = false;
     };
   }, [selected]);
-  return React__default.createElement(Container$q, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({}, {
+  return React__default.createElement(Container$r, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({}, {
     buttonIcon: buttonIcon,
     buttonText: buttonText,
     disabled: disabled
@@ -6915,17 +7309,17 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
 
 var _excluded$r = ["hasShowMore", "searchFilters", "datePickerFilters", "dropdownFilters", "showMoreText", "showLessText"];
 
-var _templateObject$E, _templateObject2$C, _templateObject3$x, _templateObject4$s, _templateObject5$p, _templateObject6$m, _templateObject7$l, _templateObject8$j;
-var fadeInAnimation = keyframes(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  0% {\n    width: 50%;\n    opacity: .5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    width: 100%;\n  }\n"])));
-var SearchInputWrapper = styled.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  flex: 1 1 200px;\n  max-width: 320px;\n"])));
-var CloseSearchInputWrapper = styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
+var _templateObject$F, _templateObject2$D, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$k;
+var fadeInAnimation = keyframes(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  0% {\n    width: 50%;\n    opacity: .5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    width: 100%;\n  }\n"])));
+var SearchInputWrapper = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  flex: 1 1 200px;\n  max-width: 320px;\n"])));
+var CloseSearchInputWrapper = styled.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme && css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n    animation: ", " ", " ", ";\n  "])), fadeInAnimation, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
+  return theme && css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n    animation: ", " ", " ", ";\n  "])), fadeInAnimation, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
 });
-var StyledFilterButton = styled(FilterButton)(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose([""])));
-var StyledDropdown = styled(FilterDropdown)(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose([""])));
-var StyledDropdownDatePicker = styled(DropdownDatePicker)(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose([""])));
-var Container$r = styled.div(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  ", ", ", ", ", ", ", " {\n    margin: 0 3px 10px 3px;\n  }\n"])), SearchInputWrapper, StyledDropdown, StyledFilterButton, StyledDropdownDatePicker);
+var StyledFilterButton = styled(FilterButton)(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose([""])));
+var StyledDropdown = styled(FilterDropdown)(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose([""])));
+var StyledDropdownDatePicker = styled(DropdownDatePicker)(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose([""])));
+var Container$s = styled.div(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  ", ", ", ", ", ", ", " {\n    margin: 0 3px 10px 3px;\n  }\n"])), SearchInputWrapper, StyledDropdown, StyledFilterButton, StyledDropdownDatePicker);
 
 var renderDropdowns = function renderDropdowns(dropdownFilters, showMoreDropdowns, hasShowMore) {
   return dropdownFilters.map(function (dropdown) {
@@ -7031,7 +7425,7 @@ var FilterInputs = function FilterInputs(_ref2) {
       setVisibleSearchInputs(_newVisible);
     }
   }, [visibleSearchInputs]);
-  return React__default.createElement(Container$r, Object.assign({}, {
+  return React__default.createElement(Container$s, Object.assign({}, {
     props: props
   }), renderSearchInputs(searchFilters, visibleSearchInputs, handleVisibleSearch), renderDatePickers(datePickerFilters), renderDropdowns(dropdownFilters, showMoreDropdowns, hasShowMore), (!hasShowMore || !showMoreDropdowns) && renderAddSearchButtons(searchFilters, visibleSearchInputs, handleVisibleSearch), hasShowMore && React__default.createElement(FilterButton, {
     icon: 'FilterEllipsis',
@@ -7041,26 +7435,36 @@ var FilterInputs = function FilterInputs(_ref2) {
 
 var _excluded$s = ["labelLists", "totalResults", "resultTextTemplate", "clearText", "resultsDateFormat", "onRemoveFilter", "onClearAll"];
 
-var _templateObject$F, _templateObject2$D, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$k;
-var Container$s = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  min-height: 22px;\n"])));
-var ResultsTextWrapper = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: hsl(207, 5%, 57%);\n"])), function (_ref) {
+var _templateObject$G, _templateObject2$E, _templateObject3$z, _templateObject4$u, _templateObject5$r, _templateObject6$o, _templateObject7$n, _templateObject8$l;
+var Container$t = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  min-height: 22px;\n"])));
+var ResultsTextWrapper = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: hsl(207, 5%, 57%);\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
 });
-var FilterLabel = styled.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  height: 18px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 11px 0 8px;\n  margin-left: 3px;\n  color: hsl(207, 5%, 57%);\n\n  ", ";\n\n  ", " {\n    display: flex;\n    align-items: center;\n  }\n  border-right: 1px solid hsla(0, 0%, 13%, 0.16);\n"])), function (_ref2) {
+var FilterLabel = styled.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  height: 18px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 11px 0 8px;\n  margin-left: 3px;\n  color: hsl(207, 5%, 57%);\n\n  ", ";\n\n  ", " {\n    display: flex;\n    align-items: center;\n  }\n  border-right: 1px solid hsla(0, 0%, 13%, 0.16);\n"])), function (_ref2) {
   var theme = _ref2.theme;
-  return theme && css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.data);
+  return theme && css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.data);
 }, IconWrapper);
-var FilterLabelText = styled.div(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  max-width: 300px;\n"])), function (_ref3) {
+var FilterLabelText = styled.div(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  max-width: 300px;\n"])), function (_ref3) {
   var hasIcon = _ref3.hasIcon;
   return hasIcon ? '0 15px 0 9px' : '0 15px 0 0';
 });
-var ClearTextButton = styled.button(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: ", ";\n  color: hsl(216, 4%, 77%);\n  margin-left: 11px;\n  font-size: 12px;\n"])), resetButtonStyles, function (_ref4) {
+var ClearTextButton = styled.button(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: ", ";\n  color: hsl(216, 4%, 77%);\n  margin-left: 11px;\n  font-size: 12px;\n"])), resetButtonStyles, function (_ref4) {
   var theme = _ref4.theme;
   return theme.fontFamily.data;
 });
-var RemoveButton = styled.button(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), resetButtonStyles);
-var FilterLabelsGroup = styled.div(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  margin-left: 10px;\n"])));
+var RemoveButton = styled.button(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), resetButtonStyles);
+var FilterLabelsGroup = styled.div(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  margin-left: 10px;\n"])));
+
+var validWithMidnight = function validWithMidnight(endDate, resultsDateFormat) {
+  if (endDate.getHours() === 23 && endDate.getSeconds() > 0) {
+    return format(add(startOfDay(endDate), {
+      days: 1
+    }), resultsDateFormat);
+  }
+
+  return format(endDate, resultsDateFormat);
+};
 
 var validateDateFormat = function validateDateFormat(resultsDateFormat) {
   var isFormatValid = false;
@@ -7091,13 +7495,13 @@ var renderLabel = function renderLabel(item, resultsDateFormat, icon, filterName
   } else if (filterName && item instanceof Date) {
     textLabel = isDateFormatValid ? filterName + ": " + format(item, resultsDateFormat) : filterName + ": " + item.toDateString();
   } else if (filterName && isDateInterval(item)) {
-    textLabel = isDateFormatValid ? filterName + ": " + format(item.start, resultsDateFormat) + " - " + format(item.end, resultsDateFormat) : filterName + ": " + item.start.toDateString() + " - " + item.end.toDateString();
+    textLabel = isDateFormatValid ? filterName + ": " + format(item.start, resultsDateFormat) + " - " + validWithMidnight(item.end, resultsDateFormat) : filterName + ": " + item.start.toDateString() + " - " + item.end.toDateString();
   } else if (!filterName && isFilterItem(item)) {
     textLabel = item.text;
   } else if (!filterName && item instanceof Date) {
     textLabel = isDateFormatValid ? format(item, resultsDateFormat) : item.toDateString();
   } else if (!filterName && isDateInterval(item)) {
-    textLabel = isDateFormatValid ? format(item.start, resultsDateFormat) + " - " + format(item.end, resultsDateFormat) : item.start.toDateString() + " - " + item.end.toDateString();
+    textLabel = isDateFormatValid ? format(item.start, resultsDateFormat) + " - " + validWithMidnight(item.end, resultsDateFormat) : item.start.toDateString() + " - " + item.end.toDateString();
   }
 
   return React__default.createElement(FilterLabelText, {
@@ -7120,7 +7524,7 @@ var FiltersResults = function FiltersResults(_ref5) {
       onClearAll = _ref5$onClearAll === void 0 ? function () {} : _ref5$onClearAll,
       props = _objectWithoutPropertiesLoose(_ref5, _excluded$s);
 
-  return React__default.createElement(Container$s, Object.assign({}, props), React__default.createElement(ResultsTextWrapper, null, renderResults(resultTextTemplate, totalResults)), React__default.createElement(FilterLabelsGroup, null, labelLists.map(function (_ref6, index) {
+  return React__default.createElement(Container$t, Object.assign({}, props), React__default.createElement(ResultsTextWrapper, null, renderResults(resultTextTemplate, totalResults)), React__default.createElement(FilterLabelsGroup, null, labelLists.map(function (_ref6, index) {
     var icon = _ref6.icon,
         item = _ref6.item,
         filterName = _ref6.filterName,
@@ -7150,13 +7554,13 @@ var FiltersResults = function FiltersResults(_ref5) {
 
 var _excluded$t = ["filtersTitle", "hasShowMore", "searchersConfig", "dropdownsConfig", "datePickersConfig", "showMoreText", "showLessText", "resultTextTemplate", "clearText", "totalResults", "singleFilter", "resultsDateFormat", "onChangeCallback"];
 
-var _templateObject$G, _templateObject2$E, _templateObject3$z;
-var Title$2 = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: hsl(207, 5%, 57%);\n  font-size: 12px;\n  font-weight: 700;\n  margin-bottom: 17px;\n"])), function (_ref) {
+var _templateObject$H, _templateObject2$F, _templateObject3$A;
+var Title$2 = styled.div(_templateObject$H || (_templateObject$H = _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) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
 });
-var StyledFilterResults = styled(FiltersResults)(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose([""])));
-var Container$t = styled.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  ", " {\n    margin-top: 29px;\n    min-height: 19px;\n  }\n"])), StyledFilterResults);
+var StyledFilterResults = styled(FiltersResults)(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose([""])));
+var Container$u = styled.div(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n  ", " {\n    margin-top: 29px;\n    min-height: 19px;\n  }\n"])), StyledFilterResults);
 
 var getDisableValue = function getDisableValue(filtersValues, singleFilter, filter) {
   var disabled = false;
@@ -7330,7 +7734,7 @@ var createLabelResults = function createLabelResults(searchersConfig, dropdownsC
       var newLabel = {
         filterId: foundPicker.id,
         item: foundPicker.selected,
-        icon: 'Date',
+        icon: datePicker.buttonIcon,
         filterName: datePicker.name,
         type: foundPicker.type
       };
@@ -7564,7 +7968,7 @@ var FilterBar = function FilterBar(_ref5) {
       mountConfig = false;
     };
   }, [dropdownsConfigRef.current]);
-  return React__default.createElement(Container$t, Object.assign({}, props), React__default.createElement(Title$2, null, filtersTitle), React__default.createElement(FilterInputs, Object.assign({}, {
+  return React__default.createElement(Container$u, Object.assign({}, props), React__default.createElement(Title$2, null, filtersTitle), React__default.createElement(FilterInputs, Object.assign({}, {
     hasShowMore: hasShowMore,
     showMoreText: showMoreText,
     showLessText: showLessText
@@ -7584,19 +7988,19 @@ var FilterBar = function FilterBar(_ref5) {
   })));
 };
 
-var _templateObject$H, _templateObject2$F, _templateObject3$A, _templateObject4$u, _templateObject5$r;
-var Container$u = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n"])));
-var StatusCounter = styled.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 14px;;\n  top: -12px;\n  border-radius: 50%;\n  height: 14px;\n  min-width: 14px;\n  padding: 2px;\n  font-size: 10px;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n  background-color: ", ";\n"])), function (_ref) {
+var _templateObject$I, _templateObject2$G, _templateObject3$B, _templateObject4$v, _templateObject5$s;
+var Container$v = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n"])));
+var StatusCounter = styled.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 14px;;\n  top: -12px;\n  border-radius: 4px;\n  height: 14px;\n  min-width: 14px;\n  padding: 2px;\n  font-size: 10px;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n  background-color: ", ";\n"])), function (_ref) {
   var animation = _ref.theme.animation;
-  return css(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n    transition: background-color ", " ", ";\n  "])), animation.speed.slow, animation.easing.primary.easeInOut);
+  return css(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n    transition: background-color ", " ", ";\n  "])), animation.speed.slow, animation.easing.primary.easeInOut);
 }, function (_ref2) {
   var theme = _ref2.theme,
       color = _ref2.color;
   return color ? theme.colors.status[color] : 'hsla(0, 0%, 91.8%, 0)';
 });
-var StatusDot = styled.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  position: absolute;\n  top: -4px;\n  right: -7px;\n  ", "\n  background-color: ", ";\n"])), function (_ref3) {
+var StatusDot = styled.div(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n  width: 10px;\n  height: 10px;\n  border: solid 2px hsl(0, 0%, 100%);\n  border-radius: 50%;\n  position: absolute;\n  top: -6px;\n  right: -9px;\n  ", "\n  background-color: ", ";\n"])), function (_ref3) {
   var animation = _ref3.theme.animation;
-  return css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n    transition: background-color ", " ", ";\n  "])), animation.speed.slow, animation.easing.primary.easeInOut);
+  return css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n    transition: background-color ", " ", ";\n  "])), animation.speed.slow, animation.easing.primary.easeInOut);
 }, function (_ref4) {
   var theme = _ref4.theme,
       color = _ref4.color;
@@ -7606,49 +8010,51 @@ var StatusDot = styled.div(_templateObject4$u || (_templateObject4$u = _taggedTe
 var StatusIcon = function StatusIcon(_ref5) {
   var icon = _ref5.icon,
       status = _ref5.status,
-      counter = _ref5.counter;
-  return React__default.createElement(Container$u, null, status && counter === undefined ? React__default.createElement(StatusDot, {
+      counter = _ref5.counter,
+      _ref5$maxCounter = _ref5.maxCounter,
+      maxCounter = _ref5$maxCounter === void 0 ? 999 : _ref5$maxCounter;
+  return React__default.createElement(Container$v, null, status && counter === undefined ? React__default.createElement(StatusDot, {
     color: status
   }) : counter === undefined ? null : React__default.createElement(StatusCounter, {
     color: status
-  }, counter), React__default.createElement(Icon, {
+  }, counter > maxCounter ? maxCounter + "+" : counter), React__default.createElement(Icon, {
     icon: icon,
     size: 18,
     color: 'dimmed'
   }));
 };
 
-var _templateObject$I, _templateObject2$G, _templateObject3$B, _templateObject4$v, _templateObject5$s, _templateObject6$o, _templateObject7$n, _templateObject8$l, _templateObject9$i, _templateObject10$e, _templateObject11$9, _templateObject12$6, _templateObject13$5, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2;
-var HandleTouchReactionKeyframes = keyframes(_templateObject$I || (_templateObject$I = _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"])));
-var HandleMouseReactionKeyframes = keyframes(_templateObject2$G || (_templateObject2$G = _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"])));
-var HandleBase = styled.svg(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n  touch-action: none;\n  user-select: none;\n  overflow: visible;\n  cursor: pointer;\n  fill: ", ";\n  appearance: none;\n"])), function (_ref) {
+var _templateObject$J, _templateObject2$H, _templateObject3$C, _templateObject4$w, _templateObject5$t, _templateObject6$p, _templateObject7$o, _templateObject8$m, _templateObject9$j, _templateObject10$g, _templateObject11$9, _templateObject12$7, _templateObject13$6, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3;
+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"])));
+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"])));
+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) {
   var theme = _ref.theme,
       styling = _ref.styling;
   return theme.custom.lines[styling].handleBase.fill;
 });
-var HandleRingLayer = styled.circle(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n  mask: url(#", ");\n"])), function (_ref2) {
+var HandleRingLayer = styled.circle(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n  mask: url(#", ");\n"])), function (_ref2) {
   var theme = _ref2.theme,
       styling = _ref2.styling;
   return theme.custom.lines[styling].handleRingLayer.stroke;
 }, function (props) {
   return props.maskID;
 });
-var HandleReactiveGroup = styled.g(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  opacity: 0.65;\n  cursor: pointer;\n  transform: scale(1);\n\n  ", "\n\n  ", "\n\n"])), function (props) {
-  return props.touchDragging && css(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n    animation: ", " 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n  "])), HandleTouchReactionKeyframes);
+var HandleReactiveGroup = styled.g(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  opacity: 0.65;\n  cursor: pointer;\n  transform: scale(1);\n\n  ", "\n\n  ", "\n\n"])), function (props) {
+  return props.touchDragging && css(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n    animation: ", " 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n  "])), HandleTouchReactionKeyframes);
 }, function (props) {
-  return props.mouseDragging && css(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n    animation: ", " 0.25s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n  "])), HandleMouseReactionKeyframes);
+  return props.mouseDragging && css(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n    animation: ", " 0.25s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n  "])), HandleMouseReactionKeyframes);
 });
-var HandleReactiveFill = styled.circle(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n  mix-blend-mode: multiply;\n  fill: ", ";\n  stroke: none;\n"])), function (_ref3) {
+var HandleReactiveFill = styled.circle(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n  mix-blend-mode: multiply;\n  fill: ", ";\n  stroke: none;\n"])), function (_ref3) {
   var theme = _ref3.theme,
       styling = _ref3.styling;
   return theme.custom.lines[styling].handleReactiveFill.fill;
 });
-var HandleReactiveRing = styled.circle(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n"])), function (_ref4) {
+var HandleReactiveRing = styled.circle(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme,
       styling = _ref4.styling;
   return theme.custom.lines[styling].handleReactiveRing.stroke;
 });
-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) {
+var HandleContrastLayer = styled.circle(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n  overflow: visible;\n  mix-blend-mode: multiply;\n  fill: none;\n  stroke: ", ";\n"])), function (_ref5) {
   var theme = _ref5.theme,
       styling = _ref5.styling;
   return theme.custom.lines[styling].handleContrastLayer.stroke;
@@ -7656,25 +8062,25 @@ var HandleContrastLayer = styled.circle(_templateObject10$e || (_templateObject1
 var HandleShadowLayer = styled.circle(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n    mix-blend-mode: multiply;\n    fill: url(#", ");\n"])), function (props) {
   return props.fillID;
 });
-var GrabHandleIndexGroup = styled.g(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  pointer-events: none;\n  ", ";\n\n"])), function (props) {
-  return props.showIndex && css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "])));
+var GrabHandleIndexGroup = styled.g(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  pointer-events: none;\n  ", ";\n\n"])), function (props) {
+  return props.showIndex && css(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "])));
 });
-var StopStart = styled.stop(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n  stop-color: ", ";\n"])), function (_ref6) {
+var StopStart = styled.stop(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n  stop-color: ", ";\n"])), function (_ref6) {
   var theme = _ref6.theme,
       styling = _ref6.styling;
   return theme.custom.lines[styling].stopStart.stopColor;
 });
-var StopEnd = styled.stop(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  stop-color: ", ";\n"])), function (_ref7) {
+var StopEnd = styled.stop(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose(["\n  stop-color: ", ";\n"])), function (_ref7) {
   var theme = _ref7.theme,
       styling = _ref7.styling;
   return theme.custom.lines[styling].stopEnd.stopColor;
 });
-var GrabHandleIndexText = styled.text(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  stroke: ", ";\n  text-align: center;\n\n  font-weight: bold;\n  transition: opacity 250ms ease;\n  pointer-events: none;\n\n\n"])), function (_ref8) {
+var GrabHandleIndexText = styled.text(_templateObject16$3 || (_templateObject16$3 = _taggedTemplateLiteralLoose(["\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  stroke: ", ";\n  text-align: center;\n\n  font-weight: bold;\n  transition: opacity 250ms ease;\n  pointer-events: none;\n\n\n"])), function (_ref8) {
   var theme = _ref8.theme,
       styling = _ref8.styling;
   return theme.custom.lines[styling].grabHandleText.stroke;
 });
-var IconGroup = styled.g(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n\n"])));
+var IconGroup = styled.g(_templateObject17$3 || (_templateObject17$3 = _taggedTemplateLiteralLoose(["\n\n"])));
 
 var HandleUnit = function HandleUnit(props) {
   var index = props.index,
@@ -7867,50 +8273,60 @@ var HandleUnit = function HandleUnit(props) {
   }, index + pointIndexOffset))));
 };
 
-var _templateObject$J, _templateObject2$H, _templateObject3$C, _templateObject4$w, _templateObject5$t, _templateObject6$p, _templateObject7$o, _templateObject8$m, _templateObject9$j, _templateObject10$f, _templateObject11$a, _templateObject12$7;
-var ContrastLine = styled.line(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  pointer-events: none;\n  stroke: ", ";\n  mix-blend-mode: multiply;\n"])), function (_ref) {
+var _templateObject$K, _templateObject2$I, _templateObject3$D, _templateObject4$x, _templateObject5$u, _templateObject6$q, _templateObject7$p, _templateObject8$n, _templateObject9$k, _templateObject10$h, _templateObject11$a, _templateObject12$8, _templateObject13$7, _templateObject14$5;
+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) {
   var theme = _ref.theme,
       styling = _ref.styling;
   return theme.custom.lines[styling].contrastLine.stroke;
+}, function (_ref2) {
+  var lineClickSensing = _ref2.lineClickSensing;
+  return lineClickSensing;
+}, function (_ref3) {
+  var showLineBorder = _ref3.showLineBorder;
+  return showLineBorder ? '0.35' : '0';
 });
-var HighlightLine = styled.line(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n  pointer-events: none;\n  stroke: ", ";\n"])), function (_ref2) {
-  var theme = _ref2.theme,
-      styling = _ref2.styling;
-  return theme.custom.lines[styling].highlightLine.stroke;
-});
-var GrabHandle = styled.circle(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n  fill: ", ";\n  stroke: ", ";\n  opacity: 1;\n  transition: opacity 250ms ease;\n  cursor: grab;\n\n  ", ";\n"])), function (_ref3) {
-  var theme = _ref3.theme,
-      styling = _ref3.styling;
-  return theme.custom.lines[styling].grabHandle.fill;
-}, function (_ref4) {
+var HighlightLine = styled.line(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n  pointer-events: none;\n  stroke: ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme,
       styling = _ref4.styling;
-  return theme.custom.lines[styling].grabHandle.stroke;
-}, function (props) {
-  return props.hide && css(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n    pointer-events: none;\n    opacity: 0;\n  "])));
+  return theme.custom.lines[styling].highlightLineBorder.stroke;
 });
-var GrabHandleIndexGroup$1 = styled.g(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  pointer-events: none;\n  ", ";\n\n"])), function (props) {
-  return props.showIndex && css(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "])));
-});
-var GrabHandleIndexText$1 = styled.text(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  text-align: center;\n  fill: ", ";\n  font-weight: bold;\n  transition: opacity 250ms ease;\n  pointer-events: none;\n"])), function (_ref5) {
+var GrabHandle = styled.circle(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n  fill: ", ";\n  stroke: ", ";\n  opacity: 1;\n  transition: opacity 250ms ease;\n  cursor: grab;\n\n  ", ";\n"])), function (_ref5) {
   var theme = _ref5.theme,
       styling = _ref5.styling;
-  return theme.custom.lines[styling].grabHandleText.stroke;
-});
-var LabelText$2 = styled.text(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  fill: ", ";\n  font-weight: bold;\n  transition: opacity 250ms ease;\n  pointer-events: none;\n"])), function (_ref6) {
+  return theme.custom.lines[styling].grabHandle.fill;
+}, function (_ref6) {
   var theme = _ref6.theme,
       styling = _ref6.styling;
-  return theme.custom.lines[styling].label.fill;
+  return theme.custom.lines[styling].grabHandle.stroke;
+}, function (props) {
+  return props.hide && css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n    pointer-events: none;\n    opacity: 0;\n  "])));
+});
+var GrabHandleIndexGroup$1 = styled.g(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  pointer-events: none;\n  ", ";\n\n"])), function (props) {
+  return props.showIndex && css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "])));
 });
-var GrabHandleContrast = styled(GrabHandle)(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n"])), function (_ref7) {
+var GrabHandleIndexText$1 = styled.text(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  text-align: center;\n  fill: ", ";\n  font-weight: bold;\n  transition: opacity 250ms ease;\n  pointer-events: none;\n"])), function (_ref7) {
   var theme = _ref7.theme,
       styling = _ref7.styling;
+  return theme.custom.lines[styling].grabHandleText.stroke;
+});
+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) {
+  var theme = _ref8.theme,
+      styling = _ref8.styling;
+  return theme.custom.lines[styling].label.fill;
+}, function (_ref9) {
+  var showLabelShadow = _ref9.showLabelShadow;
+  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  "])));
+});
+var GrabHandleContrast = styled(GrabHandle)(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n"])), function (_ref10) {
+  var theme = _ref10.theme,
+      styling = _ref10.styling;
   return theme.custom.lines[styling].grabHandleContrast.stroke;
 });
-var GrabHandleGroup = styled.g(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n\n  ", ", ", " {\n    transition: r 250ms ease;\n  }\n\n  ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
-  return props.showIndex && css(_templateObject11$a || (_templateObject11$a = _taggedTemplateLiteralLoose(["\n    ", ", ", " {\n      pointer-events: none;\n      r: ", ";\n    }\n  "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
+var GrabHandleGroup = styled.g(_templateObject11$a || (_templateObject11$a = _taggedTemplateLiteralLoose(["\n\n  ", ", ", " {\n    transition: r 250ms ease;\n  }\n\n  ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
+  return props.showIndex && css(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n    ", ", ", " {\n      pointer-events: none;\n      r: ", ";\n    }\n  "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
 });
-var DMCircle = styled.circle(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n  fill: hsla(203, 100%, 35%, 0.49);\n"])));
+var DMCircle = styled.circle(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n  fill: hsla(203, 100%, 35%, 0.49);\n  cursor: pointer;\n"])));
+var IconFormat = styled(Icon)(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n"])));
 
 var LineUnit = function LineUnit(props) {
   var x1 = props.x1,
@@ -7927,6 +8343,8 @@ var LineUnit = function LineUnit(props) {
       styling = _props$styling === void 0 ? 'primary' : _props$styling,
       _props$moveEndCB = props.moveEndCB,
       moveEndCB = _props$moveEndCB === void 0 ? function () {} : _props$moveEndCB,
+      _props$lineClickCallb = props.lineClickCallback,
+      lineClickCallback = _props$lineClickCallb === void 0 ? function () {} : _props$lineClickCallb,
       _props$showSmallDirec = props.showSmallDirectionMark,
       showSmallDirectionMark = _props$showSmallDirec === void 0 ? false : _props$showSmallDirec,
       _props$overrideShowMo = props.overrideShowMoveHandle,
@@ -7935,8 +8353,16 @@ var LineUnit = function LineUnit(props) {
       revealSetIndex = options.revealSetIndex,
       showMoveHandle = options.showMoveHandle,
       setIndexOffset = options.setIndexOffset,
-      showDirectionMark = options.showDirectionMark;
+      showDirectionMark = options.showDirectionMark,
+      _options$showLabelSha = options.showLabelShadow,
+      showLabelShadow = _options$showLabelSha === void 0 ? false : _options$showLabelSha;
+
+  var _useState = useState(),
+      showLineBorder = _useState[0],
+      setShowLineBorder = _useState[1];
+
   var hideGrabHandle = !showMoveHandle || !overrideShowMoveHandle;
+  var lineClickSensing = parseInt(props.lineClickSensingBorder);
 
   var grabTouchMove = function grabTouchMove(e) {
     for (var i = 0; i < e.touches.length; i++) {
@@ -8010,26 +8436,35 @@ var LineUnit = function LineUnit(props) {
   var getDirectionMarkLine = function getDirectionMarkLine() {
     var dmCoordinate = directionMarkCoordinate();
     return React__default.createElement("g", {
-      transform: "translate(" + dmCoordinate.x + "," + dmCoordinate.y + ") rotate(" + dmCoordinate.rotate + ") scale(" + unit * 1 + ")"
+      transform: "translate(" + dmCoordinate.x + "," + dmCoordinate.y + ") rotate(" + dmCoordinate.rotate + ") scale(" + unit * 1 + ")",
+      style: {
+        cursor: 'pointer'
+      }
     }, React__default.createElement("g", {
+      onClick: function onClick() {
+        return lineClickCallback(lineSetId);
+      },
       transform: 'translate(-3,-30) scale(0.8)'
     }, React__default.createElement(DMCircle, {
       r: 12,
       cx: 6,
       cy: 7
-    }), React__default.createElement(Icon, {
+    }), React__default.createElement(IconFormat, {
       color: 'inverse',
       icon: 'Up',
       size: 12,
       weight: 'heavy',
       forSvgUsage: true
     })), showSmallDirectionMark && React__default.createElement("g", {
+      onClick: function onClick() {
+        return lineClickCallback(lineSetId);
+      },
       transform: 'translate(5,25) rotate(-180) scale(0.8)'
     }, React__default.createElement(DMCircle, {
       r: 8,
       cx: 3.5,
       cy: 4.5
-    }), React__default.createElement(Icon, {
+    }), React__default.createElement(IconFormat, {
       color: 'inverse',
       icon: 'Up',
       size: 7,
@@ -8038,17 +8473,40 @@ var LineUnit = function LineUnit(props) {
     })), label && React__default.createElement("g", {
       transform: "translate(0," + (showSmallDirectionMark ? 45 : 30) + ") rotate(" + dmCoordinate.labelRotate + ")"
     }, React__default.createElement(LabelText$2, {
-      textAnchor: 'middle',
+      onClick: function onClick() {
+        return lineClickCallback(lineSetId);
+      },
+      textAnchor: showSmallDirectionMark ? dmCoordinate.labelRotate < 0 ? 'end' : 'start' : 'middle',
       dominantBaseline: 'middle',
       styling: styling,
       fontSize: 14 + "px",
       x: 0,
       y: 0,
-      showIndex: revealSetIndex || handleFinderActive
+      showIndex: revealSetIndex || handleFinderActive,
+      showLabelShadow: showLabelShadow
     }, label)));
   };
 
-  return React__default.createElement("g", null, React__default.createElement(ContrastLine, {
+  var getMouseOver = useCallback(function () {
+    if (props.hasClickSensingBorder) {
+      setShowLineBorder(true);
+    }
+  }, [props.hasClickSensingBorder]);
+  var getMouseOut = useCallback(function () {
+    if (props.hasClickSensingBorder) {
+      setShowLineBorder(false);
+    }
+  }, [props.hasClickSensingBorder]);
+  return React__default.createElement("g", null, React__default.createElement(ContrastLine, Object.assign({
+    onMouseOver: getMouseOver,
+    onMouseOut: getMouseOut
+  }, {
+    lineClickSensing: lineClickSensing,
+    showLineBorder: showLineBorder
+  }, {
+    onClick: function onClick() {
+      return lineClickCallback(lineSetId);
+    },
     styling: styling,
     strokeLinecap: 'round',
     x1: x1,
@@ -8056,7 +8514,7 @@ var LineUnit = function LineUnit(props) {
     x2: x2,
     y2: y2,
     strokeWidth: 4 * unit
-  }), React__default.createElement(HighlightLine, {
+  })), React__default.createElement(HighlightLine, {
     styling: styling,
     x1: x1,
     y1: y1,
@@ -8098,38 +8556,50 @@ var LineUnit = function LineUnit(props) {
     fontSize: unit * 14 + "px",
     x: midpoint.x - 16 * unit,
     y: midpoint.y - 15 * unit,
-    showIndex: revealSetIndex || handleFinderActive
+    showIndex: revealSetIndex || handleFinderActive,
+    showLabelShadow: showLabelShadow
   }, label));
 };
 
 var LineSetContext = createContext({});
 
-var _templateObject$K, _templateObject2$I;
-var Point = styled.circle(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  fill: ", ";\n"])), function (_ref) {
-  var theme = _ref.theme,
-      styling = _ref.styling;
+var _templateObject$L, _templateObject2$J, _templateObject3$E, _templateObject4$y;
+var FilledPolygon = styled.polygon(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  fill: ", ";\n  opacity: ", ";\n"])), function (_ref) {
+  var color = _ref.color;
+  return color;
+}, function (_ref2) {
+  var opacity = _ref2.opacity;
+  return opacity;
+});
+var Point = styled.circle(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n  fill: ", ";\n"])), function (_ref3) {
+  var theme = _ref3.theme,
+      styling = _ref3.styling;
   return theme.custom.lines[styling].point.fill;
 });
-var AreaLabelText = styled.text(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  fill: ", ";\n  font-weight: bold;\n  transition: opacity 250ms ease;\n  pointer-events: none;\n"])), function (_ref2) {
-  var theme = _ref2.theme,
-      styling = _ref2.styling;
+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) {
+  var theme = _ref4.theme,
+      styling = _ref4.styling;
   return theme.custom.lines[styling].label.fill;
+}, function (_ref5) {
+  var showAreaLabelShadow = _ref5.showAreaLabelShadow;
+  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  "])));
 });
 
-var AreaLabel = function AreaLabel(_ref3) {
+var AreaLabel = function AreaLabel(_ref6) {
   var _lineSetData$areaName;
 
-  var lineSetData = _ref3.lineSetData,
-      unit = _ref3.unit;
+  var lineSetData = _ref6.lineSetData,
+      unit = _ref6.unit,
+      showAreaLabelShadow = _ref6.showAreaLabelShadow;
   var pointsLength = lineSetData.points.length;
   if (pointsLength < 3) return null;
   var midpoint = {
     x: 0,
     y: 0
   };
-  lineSetData.points.map(function (_ref4) {
-    var x = _ref4.x,
-        y = _ref4.y;
+  lineSetData.points.map(function (_ref7) {
+    var x = _ref7.x,
+        y = _ref7.y;
     midpoint.x += x;
     midpoint.y += y;
     return null;
@@ -8143,24 +8613,30 @@ var AreaLabel = function AreaLabel(_ref3) {
     fontSize: unit * 14 + "px",
     styling: lineSetData.styling || 'primary',
     x: midpoint.x - 4 * Textlen * unit,
-    y: midpoint.y + 6 * unit
+    y: midpoint.y + 6 * unit,
+    showAreaLabelShadow: showAreaLabelShadow
   }, lineSetData.areaName);
 };
 
-var LineSet = function LineSet(_ref5) {
-  var getCTM = _ref5.getCTM,
-      boundaries = _ref5.boundaries,
-      unit = _ref5.unit,
-      size = _ref5.size,
-      lineSetId = _ref5.lineSetId,
-      options = _ref5.options,
-      onLineMoveEnd = _ref5.onLineMoveEnd;
+var LineSet = function LineSet(_ref8) {
+  var getCTM = _ref8.getCTM,
+      boundaries = _ref8.boundaries,
+      unit = _ref8.unit,
+      size = _ref8.size,
+      lineSetId = _ref8.lineSetId,
+      options = _ref8.options,
+      onLineMoveEnd = _ref8.onLineMoveEnd,
+      onLineClick = _ref8.onLineClick,
+      lineClickSensingBorder = _ref8.lineClickSensingBorder,
+      hasClickSensingBorder = _ref8.hasClickSensingBorder;
 
   var _useContext = useContext(LineSetContext),
       state = _useContext.state,
       dispatch = _useContext.dispatch;
 
   var lineSetData = state[lineSetId];
+  var _options$showLabelSha = options.showLabelShadow,
+      showLabelShadow = _options$showLabelSha === void 0 ? false : _options$showLabelSha;
 
   var _useState = useState([]),
       handleAngles = _useState[0],
@@ -8245,11 +8721,11 @@ var LineSet = function LineSet(_ref5) {
       y: (pointerPosition.y - screenCTM.f) / screenCTM.d - handleRadius
     };
     var newPoints = points.map(function (_handle, index) {
-      var _ref6 = handleRelation.current[index] || {},
-          _ref6$offsetX = _ref6.offsetX,
-          offsetX = _ref6$offsetX === void 0 ? 0 : _ref6$offsetX,
-          _ref6$offsetY = _ref6.offsetY,
-          offsetY = _ref6$offsetY === void 0 ? 0 : _ref6$offsetY;
+      var _ref9 = handleRelation.current[index] || {},
+          _ref9$offsetX = _ref9.offsetX,
+          offsetX = _ref9$offsetX === void 0 ? 0 : _ref9$offsetX,
+          _ref9$offsetY = _ref9.offsetY,
+          offsetY = _ref9$offsetY === void 0 ? 0 : _ref9$offsetY;
 
       return enforceBoundaries({
         x: Math.round(pointer.x - offsetX),
@@ -8287,9 +8763,9 @@ var LineSet = function LineSet(_ref5) {
       updateHandleAngles(lineSetData);
     }
   }, [lineSetData, updateHandleAngles, handleUsesAngles]);
-  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) {
-    var x = _ref7.x,
-        y = _ref7.y;
+  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) {
+    var x = _ref10.x,
+        y = _ref10.y;
     return React__default.createElement(HandleUnit, {
       key: index + lineSetId,
       lineSetId: lineSetId,
@@ -8309,9 +8785,9 @@ var LineSet = function LineSet(_ref5) {
       readOnlyHandle: lineSetData.readOnly
     });
   });
-  var points = options.showPoint && lineSetData.points.map(function (_ref8, index) {
-    var x = _ref8.x,
-        y = _ref8.y;
+  var points = options.showPoint && lineSetData.points.map(function (_ref11, index) {
+    var x = _ref11.x,
+        y = _ref11.y;
     return React__default.createElement(Point, {
       styling: lineSetData.styling || 'primary',
       key: index,
@@ -8320,9 +8796,9 @@ var LineSet = function LineSet(_ref5) {
       cy: y
     });
   });
-  var lines = lineSetData.points.map(function (_ref9, index) {
-    var x1 = _ref9.x,
-        y1 = _ref9.y;
+  var lines = lineSetData.points.map(function (_ref12, index) {
+    var x1 = _ref12.x,
+        y1 = _ref12.y;
     var points = lineSetData.points,
         name = lineSetData.name,
         _lineSetData$styling = lineSetData.styling,
@@ -8348,25 +8824,36 @@ var LineSet = function LineSet(_ref5) {
       unit: unit,
       label: name,
       styling: styling,
+      lineClickCallback: onLineClick,
       lineMoveCallback: lineDragUpdate,
       lineMoveStartCallback: lineDragStart,
       showSmallDirectionMark: lineSetData.showSmallDirectionMark,
-      overrideShowMoveHandle: lineSetData.showMoveHandle
+      overrideShowMoveHandle: lineSetData.showMoveHandle,
+      lineClickSensingBorder: lineClickSensingBorder,
+      hasClickSensingBorder: hasClickSensingBorder
     });
   });
-  return React__default.createElement("g", null, lines, handles, points, React__default.createElement(AreaLabel, {
+  var polygonPoints = lineSetData.points.map(function (point) {
+    return point.x + "," + point.y;
+  }).join(" ");
+  return React__default.createElement("g", null, React__default.createElement(FilledPolygon, {
+    points: polygonPoints,
+    color: lineSetData.areaFillColor ? lineSetData.areaFillColor : 'transparent',
+    opacity: lineSetData.areaTransparencyLevel ? lineSetData.areaTransparencyLevel / 100 : 0
+  }), lines, handles, points, React__default.createElement(AreaLabel, {
     lineSetData: lineSetData,
-    unit: unit
+    unit: unit,
+    showAreaLabelShadow: showLabelShadow
   }));
 };
 
-var _templateObject$L, _templateObject2$J, _templateObject3$D, _templateObject4$x, _templateObject5$u;
-var Container$v = styled.div(_templateObject$L || (_templateObject$L = _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"])));
-var LoadingOverlay = styled.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top:0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
-var Frame = styled.svg(_templateObject3$D || (_templateObject3$D = _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) {
-  return props.transculent && css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
+var _templateObject$M, _templateObject2$K, _templateObject3$F, _templateObject4$z, _templateObject5$v;
+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"])));
+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"])));
+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) {
+  return props.transculent && css(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
 });
-var Image$1 = styled.img(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  object-fit: contain;\n  width:  100%;\n  height: 100%;\n"])));
+var Image$1 = styled.img(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n  object-fit: contain;\n  width:  100%;\n  height: 100%;\n"])));
 
 var LineUI = function LineUI(_ref) {
   var src = _ref.src,
@@ -8374,12 +8861,20 @@ var LineUI = function LineUI(_ref) {
       onSizeChange = _ref$onSizeChange === void 0 ? function () {} : _ref$onSizeChange,
       _ref$onLineMoveEnd = _ref.onLineMoveEnd,
       onLineMoveEnd = _ref$onLineMoveEnd === void 0 ? function () {} : _ref$onLineMoveEnd,
+      _ref$onLineClick = _ref.onLineClick,
+      onLineClick = _ref$onLineClick === void 0 ? function () {} : _ref$onLineClick,
+      _ref$lineClickSensing = _ref.lineClickSensingBorder,
+      lineClickSensingBorder = _ref$lineClickSensing === void 0 ? '65' : _ref$lineClickSensing,
+      _ref$hasClickSensingB = _ref.hasClickSensingBorder,
+      hasClickSensingBorder = _ref$hasClickSensingB === void 0 ? true : _ref$hasClickSensingB,
       _ref$options = _ref.options;
   _ref$options = _ref$options === void 0 ? {} : _ref$options;
   var showHandleFinder = _ref$options.showHandleFinder,
       showSetIndex = _ref$options.showSetIndex,
       _ref$options$showPoin = _ref$options.showPointLabel,
       showPointLabel = _ref$options$showPoin === void 0 ? false : _ref$options$showPoin,
+      _ref$options$showLabe = _ref$options.showLabelShadow,
+      showLabelShadow = _ref$options$showLabe === void 0 ? false : _ref$options$showLabe,
       showPointHandle = _ref$options.showPointHandle,
       showMoveHandle = _ref$options.showMoveHandle,
       showGrabHandle = _ref$options.showGrabHandle,
@@ -8516,6 +9011,7 @@ var LineUI = function LineUI(_ref) {
     handleFinderActive: handleFinder,
     revealSetIndex: showSetIndex !== false && (showSetIndex || state.length > 1),
     showPointLabel: showPointLabel,
+    showLabelShadow: showLabelShadow,
     showPointHandle: showPointHandle || showPointHandle !== false && showGrabHandle !== false,
     showMoveHandle: showMoveHandle || showMoveHandle !== false && showGrabHandle !== false,
     setIndexOffset: setIndexOffset,
@@ -8523,7 +9019,7 @@ var LineUI = function LineUI(_ref) {
     showPoint: showPoint,
     showDirectionMark: showDirectionMark
   };
-  return React__default.createElement(Container$v, null, React__default.createElement(Image$1, {
+  return React__default.createElement(Container$w, null, React__default.createElement(Image$1, {
     ref: imgRef,
     onLoad: initScaleAndBounds,
     src: src,
@@ -8539,8 +9035,11 @@ var LineUI = function LineUI(_ref) {
     transculent: handleFinder
   }, state.map(function (lineSet, index) {
     return React__default.createElement(LineSet, {
+      hasClickSensingBorder: hasClickSensingBorder,
+      lineClickSensingBorder: lineClickSensingBorder,
       key: index,
       onLineMoveEnd: onLineMoveEnd,
+      onLineClick: onLineClick,
       lineSetId: index,
       lineData: lineSet,
       getCTM: calculateCTM,
@@ -8557,12 +9056,12 @@ var LineUI = function LineUI(_ref) {
 
 var _excluded$u = ["loop", "autoPlay", "controls", "muted"];
 
-var _templateObject$M, _templateObject2$K, _templateObject3$E, _templateObject4$y, _templateObject5$v;
-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"])));
-var Video = styled.video(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  width:  100%;\n  height: 100%;\n  border-radius: 3px;\n  background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
-var LoadingOverlay$1 = styled.div(_templateObject3$E || (_templateObject3$E = _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"])));
-var Frame$1 = styled.svg(_templateObject4$y || (_templateObject4$y = _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) {
-  return props.transcalent && css(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
+var _templateObject$N, _templateObject2$L, _templateObject3$G, _templateObject4$A, _templateObject5$w;
+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"])));
+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"])));
+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"])));
+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) {
+  return props.transcalent && css(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
 });
 
 var LineUIVideo = function LineUIVideo(_ref) {
@@ -8571,8 +9070,14 @@ var LineUIVideo = function LineUIVideo(_ref) {
       onSizeChange = _ref$onSizeChange === void 0 ? function () {} : _ref$onSizeChange,
       _ref$onLineMoveEnd = _ref.onLineMoveEnd,
       onLineMoveEnd = _ref$onLineMoveEnd === void 0 ? function () {} : _ref$onLineMoveEnd,
+      _ref$onLineClick = _ref.onLineClick,
+      onLineClick = _ref$onLineClick === void 0 ? function () {} : _ref$onLineClick,
       _ref$onLoaded = _ref.onLoaded,
       onLoaded = _ref$onLoaded === void 0 ? function () {} : _ref$onLoaded,
+      _ref$lineClickSensing = _ref.lineClickSensingBorder,
+      lineClickSensingBorder = _ref$lineClickSensing === void 0 ? '65' : _ref$lineClickSensing,
+      _ref$hasClickSensingB = _ref.hasClickSensingBorder,
+      hasClickSensingBorder = _ref$hasClickSensingB === void 0 ? true : _ref$hasClickSensingB,
       _ref$videoOptions = _ref.videoOptions,
       _ref$videoOptions$loo = _ref$videoOptions.loop,
       loop = _ref$videoOptions$loo === void 0 ? false : _ref$videoOptions$loo,
@@ -8591,6 +9096,7 @@ var LineUIVideo = function LineUIVideo(_ref) {
       _ref$options$showPoin = _ref$options.showPointLabel,
       showPointLabel = _ref$options$showPoin === void 0 ? false : _ref$options$showPoin,
       showPointHandle = _ref$options.showPointHandle,
+      showLabelShadow = _ref$options.showLabelShadow,
       showMoveHandle = _ref$options.showMoveHandle,
       showGrabHandle = _ref$options.showGrabHandle,
       _ref$options$setIndex = _ref$options.setIndexOffset,
@@ -8728,6 +9234,7 @@ var LineUIVideo = function LineUIVideo(_ref) {
     handleFinderActive: handleFinder,
     revealSetIndex: showSetIndex !== false && (showSetIndex || state.length > 1),
     showPointLabel: showPointLabel,
+    showLabelShadow: showLabelShadow,
     showPointHandle: showPointHandle || showPointHandle !== false && showGrabHandle !== false,
     showMoveHandle: showMoveHandle || showMoveHandle !== false && showGrabHandle !== false,
     setIndexOffset: setIndexOffset,
@@ -8735,7 +9242,7 @@ var LineUIVideo = function LineUIVideo(_ref) {
     showPoint: showPoint,
     showDirectionMark: showDirectionMark
   };
-  return React__default.createElement(Container$w, null, React__default.createElement(Video, Object.assign({
+  return React__default.createElement(Container$x, null, React__default.createElement(Video, Object.assign({
     ref: videoRef,
     controls: controls,
     muted: muted,
@@ -8760,7 +9267,10 @@ var LineUIVideo = function LineUIVideo(_ref) {
   }, state.map(function (lineSet, index) {
     return React__default.createElement(LineSet, {
       key: index,
+      hasClickSensingBorder: hasClickSensingBorder,
+      lineClickSensingBorder: lineClickSensingBorder,
       onLineMoveEnd: onLineMoveEnd,
+      onLineClick: onLineClick,
       lineSetId: index,
       lineData: lineSet,
       getCTM: calculateCTM,
@@ -8790,8 +9300,8 @@ function _catch(body, recover) {
 
 var _excluded$v = ["id", "enabled", "peerAddress", "maxConnectionAttempts", "rtcConfiguration", "setStatus", "setError", "autoPlay", "muted"];
 
-var _templateObject$N;
-var Video$1 = styled.video(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  /* width: 800px; */\n"])));
+var _templateObject$O;
+var Video$1 = styled.video(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  /* width: 800px; */\n"])));
 
 var WebRTCPlayer = function WebRTCPlayer(_ref) {
   var _ref$id = _ref.id,
@@ -9115,12 +9625,12 @@ function getPeerId(id) {
   return 'WRP_' + id + '_' + Math.floor(Math.random() * (9000 - 10) + 10).toString();
 }
 
-var _templateObject$O, _templateObject2$L, _templateObject3$F, _templateObject4$z, _templateObject5$w;
-var Container$x = styled.div(_templateObject$O || (_templateObject$O = _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"])));
-var Video$2 = styled(WebRTCPlayer)(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n  width:  100%;\n  height: 100%;\n  border-radius: 3px;\n  background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
-var LoadingOverlay$2 = 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"])));
-var Frame$2 = 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) {
-  return props.transcalent && css(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
+var _templateObject$P, _templateObject2$M, _templateObject3$H, _templateObject4$B, _templateObject5$x;
+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"])));
+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"])));
+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"])));
+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) {
+  return props.transcalent && css(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
 });
 
 var LineUI$1 = function LineUI(_ref) {
@@ -9129,8 +9639,14 @@ var LineUI$1 = function LineUI(_ref) {
       onSizeChange = _ref$onSizeChange === void 0 ? function () {} : _ref$onSizeChange,
       _ref$onLineMoveEnd = _ref.onLineMoveEnd,
       onLineMoveEnd = _ref$onLineMoveEnd === void 0 ? function () {} : _ref$onLineMoveEnd,
+      _ref$onLineClick = _ref.onLineClick,
+      onLineClick = _ref$onLineClick === void 0 ? function () {} : _ref$onLineClick,
       _ref$onLoaded = _ref.onLoaded,
       onLoaded = _ref$onLoaded === void 0 ? function () {} : _ref$onLoaded,
+      _ref$lineClickSensing = _ref.lineClickSensingBorder,
+      lineClickSensingBorder = _ref$lineClickSensing === void 0 ? '65' : _ref$lineClickSensing,
+      _ref$hasClickSensingB = _ref.hasClickSensingBorder,
+      hasClickSensingBorder = _ref$hasClickSensingB === void 0 ? true : _ref$hasClickSensingB,
       videoOptions = _ref.videoOptions,
       _ref$options = _ref.options;
   _ref$options = _ref$options === void 0 ? {} : _ref$options;
@@ -9138,6 +9654,8 @@ var LineUI$1 = function LineUI(_ref) {
       showSetIndex = _ref$options.showSetIndex,
       _ref$options$showPoin = _ref$options.showPointLabel,
       showPointLabel = _ref$options$showPoin === void 0 ? false : _ref$options$showPoin,
+      _ref$options$showLabe = _ref$options.showLabelShadow,
+      showLabelShadow = _ref$options$showLabe === void 0 ? false : _ref$options$showLabe,
       showPointHandle = _ref$options.showPointHandle,
       showMoveHandle = _ref$options.showMoveHandle,
       showGrabHandle = _ref$options.showGrabHandle,
@@ -9277,6 +9795,7 @@ var LineUI$1 = function LineUI(_ref) {
     handleFinderActive: handleFinder,
     revealSetIndex: showSetIndex !== false && (showSetIndex || state.length > 1),
     showPointLabel: showPointLabel,
+    showLabelShadow: showLabelShadow,
     showPointHandle: showPointHandle || showPointHandle !== false && showGrabHandle !== false,
     showMoveHandle: showMoveHandle || showMoveHandle !== false && showGrabHandle !== false,
     setIndexOffset: setIndexOffset,
@@ -9284,7 +9803,7 @@ var LineUI$1 = function LineUI(_ref) {
     showPoint: showPoint,
     showDirectionMark: showDirectionMark
   };
-  return React__default.createElement(Container$x, null, React__default.createElement(Video$2, Object.assign({
+  return React__default.createElement(Container$y, null, React__default.createElement(Video$2, Object.assign({
     onLoadedMetadata: onLoadedMetadata,
     peerAddress: ws,
     id: '1'
@@ -9305,7 +9824,10 @@ var LineUI$1 = function LineUI(_ref) {
   }, state.map(function (lineSet, index) {
     return React__default.createElement(LineSet, {
       key: index,
+      hasClickSensingBorder: hasClickSensingBorder,
+      lineClickSensingBorder: lineClickSensingBorder,
       onLineMoveEnd: onLineMoveEnd,
+      onLineClick: onLineClick,
       lineSetId: index,
       lineData: lineSet,
       getCTM: calculateCTM,
@@ -9422,6 +9944,32 @@ var LineReducer = (function (state, action) {
         return newState;
       }
 
+    case "UPDATE_FILL_COLOR":
+      {
+        var _update6;
+
+        var _set2 = _extends({}, state[action.index], {
+          areaFillColor: action.data.areaFillColor
+        });
+
+        return update(state, (_update6 = {}, _update6[action.index] = {
+          $set: _set2
+        }, _update6));
+      }
+
+    case "UPDATE_TRANSPARENCY_LEVEL":
+      {
+        var _update7;
+
+        var _set3 = _extends({}, state[action.index], {
+          areaTransparencyLevel: action.data.areaTransparencyLevel
+        });
+
+        return update(state, (_update7 = {}, _update7[action.index] = {
+          $set: _set3
+        }, _update7));
+      }
+
     default:
       console.error("Action " + action['type'] + " not registered.");
       return state;
@@ -9462,19 +10010,19 @@ var makeTitle = function makeTitle(parts, delimiter) {
   return title;
 };
 
-var _templateObject$P, _templateObject2$M, _templateObject3$G, _templateObject4$A, _templateObject5$x, _templateObject6$q, _templateObject7$p, _templateObject8$n;
-var Container$y = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var IconContainer$1 = styled.div(_templateObject2$M || (_templateObject2$M = _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"])));
-var Title$3 = styled.h1(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n  ", "\n  margin: 0 0 20px;\n"])), function (_ref) {
+var _templateObject$Q, _templateObject2$N, _templateObject3$I, _templateObject4$C, _templateObject5$y, _templateObject6$r, _templateObject7$q, _templateObject8$o;
+var Container$z = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+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"])));
+var Title$3 = styled.h1(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n  ", "\n  margin: 0 0 20px;\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.pageHeader.mainTitle);
+  return css(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.pageHeader.mainTitle);
 });
-var AreaTitleCss = css(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n  ", "\n  margin: 0;\n  position: absolute;\n  top: -18px;\n"])), function (_ref2) {
+var AreaTitleCss = css(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n  ", "\n  margin: 0;\n  position: absolute;\n  top: -18px;\n"])), function (_ref2) {
   var theme = _ref2.theme;
-  return css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  ", ";\n  "])), theme.fontFamily.ui, theme.typography.pageHeader.areaTitle);
+  return css(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  ", ";\n  "])), theme.fontFamily.ui, theme.typography.pageHeader.areaTitle);
 });
-var AreaTitle = styled.div(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n  ", "\n"])), AreaTitleCss);
-var AreaLinkTitle = styled(Link)(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n  ", "\n  &:hover {\n    text-decoration: underline;\n  }\n"])), AreaTitleCss);
+var AreaTitle = styled.div(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n  ", "\n"])), AreaTitleCss);
+var AreaLinkTitle = styled(Link)(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n  ", "\n  &:hover {\n    text-decoration: underline;\n  }\n"])), AreaTitleCss);
 
 var PageTitle = function PageTitle(_ref3) {
   var title = _ref3.title,
@@ -9486,7 +10034,7 @@ var PageTitle = function PageTitle(_ref3) {
       _ref3$hideAreaInDocTi = _ref3.hideAreaInDocTitle,
       hideAreaInDocTitle = _ref3$hideAreaInDocTi === void 0 ? false : _ref3$hideAreaInDocTi;
   useTitle(title, hideAreaInDocTitle ? undefined : areaTitle || '', undefined, updateDocTitle);
-  return React__default.createElement(Container$y, null, areaTitle && areaHref ? React__default.createElement(AreaLinkTitle, {
+  return React__default.createElement(Container$z, null, areaTitle && areaHref ? React__default.createElement(AreaLinkTitle, {
     to: areaHref
   }, areaTitle) : areaTitle && React__default.createElement(AreaTitle, null, areaTitle), React__default.createElement(Title$3, null, title), icon ? React__default.createElement(IconContainer$1, null, React__default.createElement(Icon, Object.assign({
     size: 24,
@@ -9496,19 +10044,19 @@ var PageTitle = function PageTitle(_ref3) {
   }))) : null);
 };
 
-var _templateObject$Q, _templateObject2$N;
-var Container$z = styled.p(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$R, _templateObject2$O;
+var Container$A = styled.p(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.pageHeader.introduction);
+  return css(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.pageHeader.introduction);
 });
 
 var IntroductionText = function IntroductionText(_ref2) {
   var children = _ref2.children;
-  return React__default.createElement(Container$z, null, children);
+  return React__default.createElement(Container$A, null, children);
 };
 
-var _templateObject$R;
-var Container$A = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose([""])));
+var _templateObject$S;
+var Container$B = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose([""])));
 
 var PageHeader = function PageHeader(_ref) {
   var title = _ref.title,
@@ -9519,7 +10067,7 @@ var PageHeader = function PageHeader(_ref) {
       _ref$updateDocTitle = _ref.updateDocTitle,
       updateDocTitle = _ref$updateDocTitle === void 0 ? true : _ref$updateDocTitle,
       hideAreaInDocTitle = _ref.hideAreaInDocTitle;
-  return React__default.createElement(Container$A, null, React__default.createElement(PageTitle, Object.assign({}, {
+  return React__default.createElement(Container$B, null, React__default.createElement(PageTitle, Object.assign({}, {
     title: title,
     icon: icon,
     areaHref: areaHref,
@@ -9529,22 +10077,56 @@ var PageHeader = function PageHeader(_ref) {
   })), introductionText ? React__default.createElement(IntroductionText, null, introductionText) : null);
 };
 
-var _templateObject$S;
-var Container$B = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var _templateObject$T;
+var Container$C = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 
 var MultilineContent = function MultilineContent(_ref) {
   var contentArray = _ref.contentArray;
-  return React__default.createElement(Container$B, null, contentArray.map(function (element, index) {
+  return React__default.createElement(Container$C, null, contentArray.map(function (element, index) {
     return React__default.createElement("div", {
       key: "element-" + index
     }, element);
   }));
 };
 
+var _path, _path2;
+
+function _extends$1() {
+  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+  return _extends$1.apply(this, arguments);
+}
+
+function SvgNoImageBig(props) {
+  return /*#__PURE__*/createElement("svg", _extends$1({
+    width: 610,
+    height: 446,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/createElement("path", {
+    fill: "#DDD",
+    d: "M0 0h609.91v446H0z"
+  })), _path2 || (_path2 = /*#__PURE__*/createElement("path", {
+    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",
+    fill: "#656565"
+  })));
+}
+
 var _excluded$x = ["loop", "autoPlay", "controls", "muted"];
 
-var _templateObject$T, _templateObject2$O, _templateObject3$H, _templateObject4$B, _templateObject5$y, _templateObject6$r, _templateObject7$q, _templateObject8$o;
-var MediaBoxWrapper = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  position: relative;\n  line-height: 0;\n  ", ";\n  ", ";\n"])), function (_ref) {
+var _templateObject$U, _templateObject2$P, _templateObject3$J, _templateObject4$D, _templateObject5$z, _templateObject6$s, _templateObject7$r, _templateObject8$p;
+var MediaBoxWrapper = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  position: relative;\n  line-height: 0;\n  ", ";\n  ", ";\n"])), function (_ref) {
   var minHeight = _ref.minHeight;
   return minHeight && "min-height: " + minHeight;
 }, function (_ref2) {
@@ -9552,18 +10134,18 @@ var MediaBoxWrapper = styled.div(_templateObject$T || (_templateObject$T = _tagg
   return minWidth && "min-width: " + minWidth;
 });
 var mediaStyle = "\n  max-width:  100%;\n  max-height: 100%;\n  border-radius: 3px;\n  background-color: hsla(0deg, 0%, 0%, 35%);\n";
-var LoadingOverlay$3 = styled.div(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top:0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
-var Video$3 = styled.video(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n  ", ";\n  outline: none;\n\n  ", ";\n"])), mediaStyle, function (_ref3) {
+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"])));
+var Video$3 = styled.video(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n  ", ";\n  outline: none;\n\n  ", ";\n"])), mediaStyle, function (_ref3) {
   var theme = _ref3.theme,
       isLoaded = _ref3.isLoaded,
       hasModalLimits = _ref3.hasModalLimits;
-  return css(_templateObject4$B || (_templateObject4$B = _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    "]))));
+  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$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n      max-height: calc(100vh - 100px);\n      max-width: calc(100vw - 100px);\n    "]))));
 });
-var StyledImage = styled.img(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", ";\n"])), mediaStyle, function (_ref4) {
+var StyledImage = styled.img(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", ";\n"])), mediaStyle, function (_ref4) {
   var theme = _ref4.theme,
       isLoaded = _ref4.isLoaded,
       hasModalLimits = _ref4.hasModalLimits;
-  return css(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n    transition: opacity ", " ", ";\n    opacity: ", ";\n\n    ", ";\n  "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "1" : "0", hasModalLimits && css(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n      max-height: calc(100vh - 100px);\n      max-width: calc(100vw - 100px);\n    "]))));
+  return css(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n    transition: opacity ", " ", ";\n    opacity: ", ";\n\n    ", ";\n  "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "1" : "0", hasModalLimits && css(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n      max-height: calc(100vh - 100px);\n      max-width: calc(100vw - 100px);\n    "]))));
 });
 
 var MediaBox = function MediaBox(_ref5) {
@@ -9633,7 +10215,6 @@ var MediaBox = function MediaBox(_ref5) {
     minWidth: minWidth,
     minHeight: minHeight
   }), mediaType === 'video' ? React__default.createElement(Video$3, Object.assign({}, {
-    src: src,
     loop: loop,
     autoPlay: autoPlay,
     controls: controls,
@@ -9641,30 +10222,28 @@ var MediaBox = function MediaBox(_ref5) {
     onError: onError,
     hasModalLimits: hasModalLimits
   }, videoValues, {
+    src: loadFailed ? '' : src,
     isLoaded: loaded && !loadFailed,
     preload: 'metadata',
     onCanPlayThrough: handleLoad
   })) : React__default.createElement(StyledImage, Object.assign({}, {
-    src: src,
     alt: alt,
     onError: onError,
     hasModalLimits: hasModalLimits
   }, {
+    src: loadFailed ? '' : src,
     onLoad: handleLoad,
     isLoaded: loaded && !loadFailed
   })), !loaded && React__default.createElement(LoadingOverlay$3, null, React__default.createElement(Spinner, {
     size: 'large',
     styling: 'primary'
-  })), loadFailed && React__default.createElement(LoadingOverlay$3, null, React__default.createElement(Icon, {
-    icon: 'MissingImage',
-    size: 48
-  })));
+  })), loadFailed && React__default.createElement(SvgNoImageBig, null));
 };
 
-var _templateObject$U, _templateObject2$P, _templateObject3$I, _templateObject4$C, _templateObject5$z, _templateObject6$s, _templateObject7$r;
-var Container$C = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: hsla(202, 33%, 95%, 0.51);\n  -webkit-backdrop-filter: blur(5px);\n  backdrop-filter: blur(5px);\n  z-index: 999;\n  ", "\n\n  font-family: ", ";\n  ", ";\n"])), function (_ref) {
+var _templateObject$V, _templateObject2$Q, _templateObject3$K, _templateObject4$E, _templateObject5$A, _templateObject6$t, _templateObject7$s;
+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  z-index: 999;\n  ", "\n\n  font-family: ", ";\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme && css(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose([""])));
+  return theme && css(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose([""])));
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.fontFamily.ui;
@@ -9672,19 +10251,19 @@ var Container$C = styled.div(_templateObject$U || (_templateObject$U = _taggedTe
   var theme = _ref3.theme;
   return theme.styles.modal.overlay;
 });
-var CloseIcon = styled(Icon)(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose([""])));
-var CloseButton = styled.button(_templateObject4$C || (_templateObject4$C = _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 (_ref4) {
+var CloseIcon = styled(Icon)(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose([""])));
+var CloseButton = styled.button(_templateObject4$E || (_templateObject4$E = _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 (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.icons.mono;
 }, IconWrapper, function (_ref5) {
   var _ref5$selected = _ref5.selected,
       selected = _ref5$selected === void 0 ? false : _ref5$selected;
-  return selected && css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid hsl(207, 80%, 64%);\n  "])));
+  return selected && css(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid hsl(207, 80%, 64%);\n  "])));
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme && css(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n      opacity: .8;\n      transition: transform ", " ", ";\n    "])), theme.animation.speed.normal, theme.animation.easing.primary.inOut);
+  return theme && css(_templateObject6$t || (_templateObject6$t = _taggedTemplateLiteralLoose(["\n      opacity: .8;\n      transition: transform ", " ", ";\n    "])), theme.animation.speed.normal, theme.animation.easing.primary.inOut);
 });
-var LightBox = styled.div(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin: 27px 0 0;\n  z-index: 9999;\n  width: ", ";\n  padding: ", ";\n  border-radius: 5px;\n  ", ";\n"])), function (_ref7) {
+var LightBox = styled.div(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin: 27px 0 0;\n  z-index: 9999;\n  width: ", ";\n  padding: ", ";\n  border-radius: 5px;\n  ", ";\n"])), function (_ref7) {
   var width = _ref7.width;
   return width ? width : "580px";
 }, function (_ref8) {
@@ -9729,7 +10308,7 @@ var Modal = function Modal(_ref10) {
 
     onDismiss();
   }, [onDismiss, dismissCallback]);
-  return isOpen ? ReactDom.createPortal(React__default.createElement(Container$C, null, React__default.createElement(LightBox, {
+  return isOpen ? ReactDom.createPortal(React__default.createElement(Container$D, null, React__default.createElement(LightBox, {
     ref: lightBoxRef,
     width: width,
     padding: padding
@@ -9844,9 +10423,8 @@ var useMediaModal = function useMediaModal() {
 
                 videoElement.onerror = reject;
               })).then(function () {});
-            }, function (error) {
+            }, function () {
               isValid = false;
-              console.log("[useMediaModal - isMediaUrlValid] Invalid preview url " + src + " - video load failed, modal will not be open", error);
             });
 
             if (_temp6 && _temp6.then) return _temp6.then(function () {});
@@ -9873,9 +10451,8 @@ var useMediaModal = function useMediaModal() {
 
               img.onerror = reject;
             })).then(function () {});
-          }, function (error) {
+          }, function () {
             isValid = false;
-            console.log("[useMediaModal - isMediaUrlValid] Invalid preview url " + src + " - image load failed, modal will not be open", error);
           });
 
           if (_temp9 && _temp9.then) return _temp9.then(function () {});
@@ -9945,38 +10522,34 @@ var useMediaModal = function useMediaModal() {
   };
 };
 
-var _templateObject$V, _templateObject2$Q, _templateObject3$J, _templateObject4$D, _templateObject5$A, _templateObject6$t, _templateObject7$s;
-var Container$D = styled.div(_templateObject$V || (_templateObject$V = _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) {
+var _templateObject$W, _templateObject2$R, _templateObject3$L, _templateObject4$F, _templateObject5$B, _templateObject6$u, _templateObject7$t;
+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) {
   var aspect = _ref.aspect;
-  return aspect === '16:9' && css(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n      padding-left: 56.25%;\n    "])));
+  return aspect === '16:9' && css(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n      padding-left: 56.25%;\n    "])));
 }, function (_ref2) {
   var theme = _ref2.theme;
-  return theme && css(_templateObject3$J || (_templateObject3$J = _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);
+  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);
 }, function (_ref3) {
-  var mediaUrl = _ref3.mediaUrl;
-  return mediaUrl && css(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
-}, function (_ref4) {
-  var theme = _ref4.theme,
-      hoverZoom = _ref4.hoverZoom;
-  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);
-});
-var Image$2 = styled.img(_templateObject6$t || (_templateObject6$t = _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: ", ";\n"])), function (_ref5) {
-  var showImage = _ref5.showImage;
-  return showImage === true ? 'block' : 'none';
-});
-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);
-
-var TableRowThumbnail = function TableRowThumbnail(_ref6) {
-  var _ref6$hoverZoom = _ref6.hoverZoom,
-      hoverZoom = _ref6$hoverZoom === void 0 ? true : _ref6$hoverZoom,
-      _ref6$image = _ref6.image,
-      image = _ref6$image === void 0 ? '' : _ref6$image,
-      mediaUrl = _ref6.mediaUrl,
-      mediaType = _ref6.mediaType,
-      _ref6$retryImageLoad = _ref6.retryImageLoad,
-      retryImageLoad = _ref6$retryImageLoad === void 0 ? false : _ref6$retryImageLoad,
-      _ref6$retryLimit = _ref6.retryLimit,
-      retryLimit = _ref6$retryLimit === void 0 ? 5 : _ref6$retryLimit;
+  var theme = _ref3.theme,
+      hoverZoom = _ref3.hoverZoom;
+  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);
+});
+var ImageWrapper = styled.img(_templateObject5$B || (_templateObject5$B = _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"])));
+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"])));
+var PlayableDrop = styled.div(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background-color: 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);
+
+var TableRowThumbnail = function TableRowThumbnail(_ref4) {
+  var _ref4$hoverZoom = _ref4.hoverZoom,
+      hoverZoom = _ref4$hoverZoom === void 0 ? true : _ref4$hoverZoom,
+      _ref4$image = _ref4.image,
+      image = _ref4$image === void 0 ? '' : _ref4$image,
+      mediaUrl = _ref4.mediaUrl,
+      mediaType = _ref4.mediaType,
+      _ref4$retryImageLoad = _ref4.retryImageLoad,
+      retryImageLoad = _ref4$retryImageLoad === void 0 ? false : _ref4$retryImageLoad,
+      _ref4$retryLimit = _ref4.retryLimit,
+      retryLimit = _ref4$retryLimit === void 0 ? 5 : _ref4$retryLimit,
+      closeText = _ref4.closeText;
 
   var _useState = useState(true),
       showImage = _useState[0],
@@ -9997,18 +10570,17 @@ var TableRowThumbnail = function TableRowThumbnail(_ref6) {
   var timeoutRef = useRef(null);
   var handleModal = useCallback(function () {
     try {
-      if (mediaUrl && mediaType) {
-        createMediaModal({
-          src: mediaUrl,
-          mediaType: mediaType
-        });
-      }
-
+      createMediaModal({
+        src: showImage && mediaUrl ? mediaUrl : '',
+        mediaType: mediaType ? mediaType : 'img',
+        minHeight: '240px',
+        closeText: closeText
+      });
       return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [createMediaModal, mediaType, mediaUrl]);
+  }, [closeText, createMediaModal, mediaType, mediaUrl, showImage]);
   useEffect(function () {
     setShowImage(false);
     setRetryCount(0);
@@ -10039,36 +10611,62 @@ var TableRowThumbnail = function TableRowThumbnail(_ref6) {
     timeoutRef.current = null;
     setShowImage(true);
   }, []);
-  return React__default.createElement(Container$D, Object.assign({}, {
+
+  var checkIfImageExists = function checkIfImageExists(url, imageExistsCallback) {
+    var img = new Image();
+    img.src = url;
+
+    if (img.complete) {
+      imageExistsCallback(true);
+    } else {
+      img.onload = function () {
+        imageExistsCallback(true);
+      };
+
+      img.onerror = function () {
+        imageExistsCallback(false);
+      };
+    }
+  };
+
+  useEffect(function () {
+    checkIfImageExists(image, function (exists) {
+      if (exists) {
+        setShowImage(true);
+      } else {
+        setShowImage(false);
+      }
+    });
+  }, [image]);
+  return React__default.createElement(Container$E, Object.assign({}, {
     hoverZoom: hoverZoom,
     mediaUrl: mediaUrl
   }, {
     aspect: '16:9',
     onClick: handleModal
-  }), React__default.createElement(Image$2, {
+  }), showImage ? React__default.createElement(ImageWrapper, {
     ref: imgRef,
     src: imgSrc,
     onError: retryImage,
-    onLoad: onLoad,
-    showImage: showImage
-  }), mediaUrl && mediaType === 'video' && React__default.createElement(PlayableDrop, null, React__default.createElement(Icon, {
+    onLoad: onLoad
+  }) : React__default.createElement(NoImageWrapper, null, React__default.createElement(SvgNoImage, null)), mediaUrl && mediaType === 'video' && React__default.createElement(PlayableDrop, null, React__default.createElement(Icon, {
     size: 12,
     icon: 'Play',
     color: 'inverse'
   })));
 };
 
-var _templateObject$W, _templateObject2$R;
-var Container$E = styled.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  height: 42px;\n  width: 4px;\n  border-radius: 3px;\n  display: block;\n\n  ", "\n\n"])), function (_ref) {
+var _templateObject$X, _templateObject2$S;
+var Container$F = styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  height: 42px;\n  width: 4px;\n  border-radius: 3px;\n  display: block;\n\n  ", "\n\n"])), function (_ref) {
   var status = _ref.status,
       colors = _ref.theme.colors;
-  return css(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n    background: ", ";\n    content:'", "';\n  "])), colors.status[status], status);
+  return css(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n    background: ", ";\n    content:'", "';\n  "])), colors.status[status], status);
 });
 
 var TypeTableDeviceStatus = function TypeTableDeviceStatus(_ref2) {
   var _ref2$status = _ref2.status,
       status = _ref2$status === void 0 ? 'neutral' : _ref2$status;
-  return React__default.createElement(Container$E, {
+  return React__default.createElement(Container$F, {
     status: status
   });
 };
@@ -10104,31 +10702,31 @@ var useCopyToClipboard = function useCopyToClipboard() {
   };
 };
 
-var _templateObject$X, _templateObject2$S, _templateObject3$K, _templateObject4$E, _templateObject5$B, _templateObject6$u, _templateObject7$t, _templateObject8$p, _templateObject9$k, _templateObject10$g, _templateObject11$b;
-var CopyToClipboard = styled.button(_templateObject$X || (_templateObject$X = _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) {
+var _templateObject$Y, _templateObject2$T, _templateObject3$M, _templateObject4$G, _templateObject5$C, _templateObject6$v, _templateObject7$u, _templateObject8$q, _templateObject9$l, _templateObject10$i, _templateObject11$b;
+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) {
   var theme = _ref.theme;
-  return theme && css(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n    transition: ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
+  return theme && css(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n    transition: ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
 });
-var CellContainer = styled.div(_templateObject3$K || (_templateObject3$K = _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) {
+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) {
   return p.theme.fontFamily.data;
 }, CopyToClipboard, function (_ref2) {
   var theme = _ref2.theme,
       cellStyle = _ref2.cellStyle,
       alignment = _ref2.alignment;
-  return cellStyle === 'firstColumn' ? css(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), theme.typography.table.columnData[cellStyle]) : css(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), theme.typography.table.columnData[cellStyle][alignment]);
+  return cellStyle === 'firstColumn' ? css(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), theme.typography.table.columnData[cellStyle]) : css(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), theme.typography.table.columnData[cellStyle][alignment]);
 }, function (_ref3) {
   var hasCopyButton = _ref3.hasCopyButton;
-  return hasCopyButton && css(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n    padding-right: 20px;\n  "])));
+  return hasCopyButton && css(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n    padding-right: 20px;\n  "])));
 }, function (_ref4) {
   var styles = _ref4.theme.styles,
       hideDivider = _ref4.hideDivider;
-  return !hideDivider && css(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n    &::after {\n      ", ";\n      content: '';\n      display: block;\n      height: 1px;\n      left: 0;\n      right: 0;\n      width: 100%;\n      bottom: 0px;\n      position: absolute;\n    }\n  "])), styles.tables.rows.divider);
+  return !hideDivider && css(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n    &::after {\n      ", ";\n      content: '';\n      display: block;\n      height: 1px;\n      left: 0;\n      right: 0;\n      width: 100%;\n      bottom: 0px;\n      position: absolute;\n    }\n  "])), styles.tables.rows.divider);
 });
-var UnitText = styled.span(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref5) {
+var UnitText = styled.span(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref5) {
   var theme = _ref5.theme;
-  return css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table.columnData['unit']);
+  return css(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table.columnData['unit']);
 });
-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) {
+var StatusBlip = styled.div(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  margin-right: 8px;\n  ", "\n"])), function (_ref6) {
   var _ref6$status = _ref6.status,
       status = _ref6$status === void 0 ? 'neutral' : _ref6$status,
       colors = _ref6.theme.colors;
@@ -10176,14 +10774,14 @@ var TypeTableCell = function TypeTableCell(_ref7) {
   })) : null);
 };
 
-var _templateObject$Y, _templateObject2$T;
-var RowContainer = styled.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n  display: table-row;\n  ", ";\n"])), function (_ref) {
+var _templateObject$Z, _templateObject2$U;
+var RowContainer = styled.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  display: table-row;\n  ", ";\n"])), function (_ref) {
   var isEmpty = _ref.isEmpty;
-  return isEmpty && css(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n    visibility: hidden;\n  "])));
+  return isEmpty && css(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n    visibility: hidden;\n  "])));
 });
 
 var TypeTableRow = function TypeTableRow(_ref2) {
-  var _rowData$header, _rowData$header2, _rowData$header3, _rowData$header4, _rowData$header5, _rowData$header6;
+  var _rowData$header, _rowData$header2, _rowData$header3, _rowData$header4, _rowData$header5;
 
   var _ref2$selectable = _ref2.selectable,
       selectable = _ref2$selectable === void 0 ? false : _ref2$selectable,
@@ -10193,7 +10791,8 @@ var TypeTableRow = function TypeTableRow(_ref2) {
       hasTypeIcon = _ref2.hasTypeIcon,
       rowData = _ref2.rowData,
       isLastRow = _ref2.isLastRow,
-      columnConfig = _ref2.columnConfig;
+      columnConfig = _ref2.columnConfig,
+      closeText = _ref2.closeText;
   var wrappedSelectCallback = useCallback(function (checked) {
     if (selectCallback) {
       selectCallback(checked, rowData.id);
@@ -10217,11 +10816,11 @@ var TypeTableRow = function TypeTableRow(_ref2) {
     image: (_rowData$header2 = rowData.header) === null || _rowData$header2 === void 0 ? void 0 : _rowData$header2.image,
     mediaUrl: (_rowData$header3 = rowData.header) === null || _rowData$header3 === void 0 ? void 0 : _rowData$header3.mediaUrl,
     mediaType: (_rowData$header4 = rowData.header) === null || _rowData$header4 === void 0 ? void 0 : _rowData$header4.mediaType,
-    retryImageLoad: (_rowData$header5 = rowData.header) === null || _rowData$header5 === void 0 ? void 0 : _rowData$header5.retryImageLoad
+    closeText: closeText
   })) : null, hasTypeIcon ? React__default.createElement(TypeTableCell, {
     hideDivider: true
   }, React__default.createElement(Icon, {
-    icon: ((_rowData$header6 = rowData.header) === null || _rowData$header6 === void 0 ? void 0 : _rowData$header6.icon) || '',
+    icon: ((_rowData$header5 = rowData.header) === null || _rowData$header5 === void 0 ? void 0 : _rowData$header5.icon) || '',
     color: 'dimmed',
     weight: 'regular',
     size: 16
@@ -10252,17 +10851,17 @@ var TypeTableRow = function TypeTableRow(_ref2) {
   }));
 };
 
-var _templateObject$Z, _templateObject2$U, _templateObject3$L, _templateObject4$F;
-var HeaderTitle = styled.div(_templateObject$Z || (_templateObject$Z = _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) {
+var _templateObject$_, _templateObject2$V, _templateObject3$N, _templateObject4$H;
+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) {
   var ascending = _ref.ascending;
-  return ascending && css(_templateObject2$U || (_templateObject2$U = _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    "])));
+  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    "])));
 }, function (_ref2) {
   var isSortActive = _ref2.isSortActive;
-  return isSortActive && css(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n    &:not(hover) {\n      ", " {\n        display: inline-flex;\n      }\n    }\n  "])), IconWrapper);
+  return isSortActive && css(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n    &:not(hover) {\n      ", " {\n        display: inline-flex;\n      }\n    }\n  "])), IconWrapper);
 }, function (_ref3) {
   var styles = _ref3.theme.styles,
       sortable = _ref3.sortable;
-  return sortable && css(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n\n    ", ";\n\n    &:hover {\n      cursor: pointer;\n      ", ";\n\n      ", " {\n        ", ";\n        display: inline-flex;\n      }\n    }\n  "])), styles.tables.header.sortable["default"], styles.tables.header.sortable.hover, IconWrapper, styles.tables.header.sortable.hover);
+  return sortable && css(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n\n    ", ";\n\n    &:hover {\n      cursor: pointer;\n      ", ";\n\n      ", " {\n        ", ";\n        display: inline-flex;\n      }\n    }\n  "])), styles.tables.header.sortable["default"], styles.tables.header.sortable.hover, IconWrapper, styles.tables.header.sortable.hover);
 });
 
 var TableHeaderTitle = function TableHeaderTitle(_ref4) {
@@ -10292,45 +10891,45 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
   }), header);
 };
 
-var _templateObject$_, _templateObject2$V, _templateObject3$M, _templateObject4$G, _templateObject5$C, _templateObject6$v, _templateObject7$u, _templateObject8$q, _templateObject9$l, _templateObject10$h, _templateObject11$c, _templateObject12$8, _templateObject13$6, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3;
-var HeaderRow = styled.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  display: table-row;\n  height: 50px;\n"])));
-var HeaderItem = styled.div(_templateObject2$V || (_templateObject2$V = _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) {
+var _templateObject$$, _templateObject2$W, _templateObject3$O, _templateObject4$I, _templateObject5$D, _templateObject6$w, _templateObject7$v, _templateObject8$r, _templateObject9$m, _templateObject10$j, _templateObject11$c, _templateObject12$9, _templateObject13$8, _templateObject14$6, _templateObject15$4, _templateObject16$4, _templateObject17$4;
+var HeaderRow = styled.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  display: table-row;\n  height: 50px;\n"])));
+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) {
   return p.theme.fontFamily.ui;
 }, function (_ref) {
   var hasCopyButton = _ref.hasCopyButton;
-  return hasCopyButton && css(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n    padding-right: 20px;\n  "])));
+  return hasCopyButton && css(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n    padding-right: 20px;\n  "])));
 }, function (_ref2) {
   var theme = _ref2.theme,
       alignment = _ref2.alignment,
       headerStyle = _ref2.headerStyle;
-  return alignment ? css(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table[headerStyle][alignment]) : css(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table[headerStyle]['left']);
+  return alignment ? css(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table[headerStyle][alignment]) : css(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table[headerStyle]['left']);
 }, function (p) {
-  return p.fixedWidth && css(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n    width: ", "px;\n  "])), p.fixedWidth);
+  return p.fixedWidth && css(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n    width: ", "px;\n  "])), p.fixedWidth);
 }, function (_ref3) {
   var minWidth = _ref3.minWidth;
-  return minWidth && css(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n    min-width:", "px;\n  "])), minWidth);
+  return minWidth && css(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n    min-width:", "px;\n  "])), minWidth);
 }, function (_ref4) {
   var styles = _ref4.theme.styles,
       headerStyle = _ref4.headerStyle,
       isSortActive = _ref4.isSortActive;
-  return headerStyle === 'subHeader' && css(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n  padding-bottom: 15px;\n\n  &::after {\n    ", ";\n    content: '';\n    display: block;\n    height: 1px;\n    left: ", ";\n    right: 0;\n    width: ", ";\n    bottom: 0px;\n    position: absolute;\n  }\n"])), styles.tables.header.divider, isSortActive ? '-15px' : '0', isSortActive ? 'calc(100% + 15px)' : '100%');
+  return headerStyle === 'subHeader' && css(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n  padding-bottom: 15px;\n\n  &::after {\n    ", ";\n    content: '';\n    display: block;\n    height: 1px;\n    left: ", ";\n    right: 0;\n    width: ", ";\n    bottom: 0px;\n    position: absolute;\n  }\n"])), styles.tables.header.divider, isSortActive ? '-15px' : '0', isSortActive ? 'calc(100% + 15px)' : '100%');
 });
-var TitleItems = styled.div(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  ", ";\n"])), function (_ref5) {
+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) {
   var alignment = _ref5.alignment;
-  return alignment && css(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", ";\n  "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
+  return alignment && css(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", ";\n  "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
 });
 var GroupTitle = styled.div(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-self: stretch;\n  margin-bottom: 4px;\n"])));
-var Title$4 = styled.div(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n  ", ";\n  padding-left: 2px;\n  padding-right: 8px;\n  white-space: nowrap;\n"])), function (_ref6) {
+var Title$4 = styled.div(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n  ", ";\n  padding-left: 2px;\n  padding-right: 8px;\n  white-space: nowrap;\n"])), function (_ref6) {
   var typography = _ref6.theme.typography;
-  return css(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), typography.tables.groupName);
+  return css(_templateObject13$8 || (_templateObject13$8 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), typography.tables.groupName);
 });
-var EmptyTitle = styled.div(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n  height: 20px;\n"])));
-var MiddleLine = styled.div(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  height: 1px;\n  flex: 1;\n  ", ";\n"])), function (_ref7) {
+var EmptyTitle = styled.div(_templateObject14$6 || (_templateObject14$6 = _taggedTemplateLiteralLoose(["\n  height: 20px;\n"])));
+var MiddleLine = styled.div(_templateObject15$4 || (_templateObject15$4 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  height: 1px;\n  flex: 1;\n  ", ";\n"])), function (_ref7) {
   var styles = _ref7.theme.styles;
-  return css(_templateObject16$3 || (_templateObject16$3 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), styles.tables.header.groupLine);
+  return css(_templateObject16$4 || (_templateObject16$4 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), styles.tables.header.groupLine);
 }, function (_ref8) {
   var isLastOfGroup = _ref8.isLastOfGroup;
-  return isLastOfGroup && css(_templateObject17$3 || (_templateObject17$3 = _taggedTemplateLiteralLoose(["\n    margin-right: 15px;\n  "])));
+  return isLastOfGroup && css(_templateObject17$4 || (_templateObject17$4 = _taggedTemplateLiteralLoose(["\n    margin-right: 15px;\n  "])));
 });
 
 var renderGroupHeader = function renderGroupHeader(columnConfig, index) {
@@ -10461,15 +11060,15 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
   }));
 };
 
-var _templateObject$$, _templateObject2$W, _templateObject3$N, _templateObject4$H, _templateObject5$D;
-var Container$F = styled.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose([""])));
-var TableContainer = styled.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n  display: table;\n  width: 100%;\n  position: relative;\n"])));
-var LoadingText$1 = styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n  color: hsla(195, 10%, 52%, 0.72);\n"])));
-var LoadingBox$1 = styled.div(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  background-color: ", ";\n  height: calc(100% - 50px);\n  width: 100%;\n  min-height: 100px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n\n  ", " {\n    margin-top: 10px;\n  }\n"])), function (_ref) {
+var _templateObject$10, _templateObject2$X, _templateObject3$P, _templateObject4$J, _templateObject5$E;
+var Container$G = styled.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose([""])));
+var TableContainer = styled.div(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n  display: table;\n  width: 100%;\n  position: relative;\n"])));
+var LoadingText$1 = styled.div(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n  color: hsla(195, 10%, 52%, 0.72);\n"])));
+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) {
   var theme = _ref.theme;
-  return theme.styles.tables.loadingOverlay;
+  return theme.colors["pureBase"];
 }, LoadingText$1);
-var EmptyTableBox = styled.div(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  padding: 20px;\n  width: 100%;\n  min-height: 100px;\n  text-align: center;\n  h3 {\n    font-weight: 500;\n    color: hsl(208, 8%, 38%);\n  }\n  color: hsl(207, 5%, 57%);\n"])));
+var EmptyTableBox = styled.div(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  padding: 20px;\n  width: 100%;\n  min-height: 100px;\n  text-align: center;\n  h3 {\n    font-weight: 500;\n    color: hsl(208, 8%, 38%);\n  }\n  color: hsl(207, 5%, 57%);\n"])));
 
 var isChecked = function isChecked(_ref2) {
   var _ref2$_checked = _ref2._checked,
@@ -10483,6 +11082,7 @@ var TypeTable = function TypeTable(_ref3) {
       selectable = _ref3.selectable,
       _ref3$rows = _ref3.rows,
       rows = _ref3$rows === void 0 ? [] : _ref3$rows,
+      closeText = _ref3.closeText,
       _ref3$hasStatus = _ref3.hasStatus,
       hasStatus = _ref3$hasStatus === void 0 ? false : _ref3$hasStatus,
       _ref3$hasThumbnail = _ref3.hasThumbnail,
@@ -10522,7 +11122,7 @@ var TypeTable = function TypeTable(_ref3) {
 
     setAllChecked(areAllChecked);
   }, [isEmptyTable, rows]);
-  return React__default.createElement(Container$F, null, React__default.createElement(TableContainer, null, React__default.createElement(TypeTableHeader, Object.assign({}, {
+  return React__default.createElement(Container$G, null, React__default.createElement(TableContainer, null, React__default.createElement(TypeTableHeader, Object.assign({}, {
     selectable: selectable,
     hasStatus: hasStatus,
     hasThumbnail: hasThumbnail,
@@ -10550,29 +11150,30 @@ var TypeTable = function TypeTable(_ref3) {
       columnConfig: columnConfig,
       hasStatus: hasStatus,
       hasThumbnail: hasThumbnail,
-      hasTypeIcon: hasTypeIcon
+      hasTypeIcon: hasTypeIcon,
+      closeText: closeText
     }));
   })));
 };
 
 var _excluded$y = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
 
-var _templateObject$10, _templateObject2$X, _templateObject3$O, _templateObject4$I, _templateObject5$E, _templateObject6$w, _templateObject7$v, _templateObject8$r, _templateObject9$m, _templateObject10$i;
-var Container$G = styled.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  ", "\n"])), function (_ref) {
+var _templateObject$11, _templateObject2$Y, _templateObject3$Q, _templateObject4$K, _templateObject5$F, _templateObject6$x, _templateObject7$w, _templateObject8$s, _templateObject9$n, _templateObject10$k;
+var Container$H = styled.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.ui);
-});
-var StyledButton$4 = styled(Button)(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
-var StyledLoadingButton = styled(ButtonWithLoading)(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
-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"])));
-var EditContainer = styled.div(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n  min-width: 320px;\n  background-color: hsl(0, 0%, 100%);\n  z-index: 99;\n  position: absolute;\n  bottom: -15px;\n  left: -11px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", " {\n    margin:0;\n    span {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-left: 5px;\n  }\n  ", " {\n    margin-left: 5px;\n  }\n"])), StyledLabel, StyledButton$4, StyledLoadingButton);
-var StyledIconButton$1 = styled(IconButton$2)(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose([""])));
-var TextContainer$2 = styled.div(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-right: 18px;\n\n  ", "\n\n  ", "\n\n  ", " {\n    opacity: 0;\n    position: absolute;\n    top: 7px;\n    right: 0;\n  };\n\n  &:hover {\n    ", " {\n      opacity: 1;\n    };\n  }\n"])), function (_ref2) {
+  return css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.ui);
+});
+var StyledButton$4 = styled(Button)(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
+var StyledLoadingButton = styled(ButtonWithLoading)(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
+var StyledLink = styled(Link)(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n  color: inherit;\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n"])));
+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);
+var StyledIconButton$1 = styled(IconButton$2)(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose([""])));
+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) {
   var alignment = _ref2.alignment;
-  return alignment === 'center' && css(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n    justify-content: center;\n  "])));
+  return alignment === 'center' && css(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n    justify-content: center;\n  "])));
 }, function (_ref3) {
   var alignment = _ref3.alignment;
-  return alignment === 'right' && css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n    justify-content: flex-end;\n"])));
+  return alignment === 'right' && css(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n    justify-content: flex-end;\n"])));
 }, StyledIconButton$1, StyledIconButton$1);
 
 var EditCell = function EditCell(_ref4) {
@@ -10653,7 +11254,7 @@ var EditCell = function EditCell(_ref4) {
   };
 
   useClickOutside(editContainerRef, onClickOutsideEdit);
-  return React__default.createElement(Container$G, null, isEditMode ? React__default.createElement(EditContainer, {
+  return React__default.createElement(Container$H, null, isEditMode ? React__default.createElement(EditContainer, {
     ref: editContainerRef
   }, React__default.createElement(SmallInput, Object.assign({}, props, {
     autoFocus: true,
@@ -11025,16 +11626,16 @@ var PTZProvider = function PTZProvider(_ref) {
   }, children);
 };
 
-var _templateObject$11, _templateObject2$Y, _templateObject3$P, _templateObject4$J, _templateObject5$F;
-var Active = styled.g(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
+var _templateObject$12, _templateObject2$Z, _templateObject3$R, _templateObject4$L, _templateObject5$G;
+var Active = styled.g(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
-  return active && css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return active && css(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Hover = styled.g(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
+var Hover = styled.g(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && css(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && css(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$H = styled.g(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n"])));
+var Container$I = styled.g(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n"])));
 
 var Up = function Up() {
   var _useState = useState(false),
@@ -11063,7 +11664,7 @@ var Up = function Up() {
   var hoverEnd = useCallback(function () {
     setHover(false);
   }, []);
-  return React__default.createElement(Container$H, {
+  return React__default.createElement(Container$I, {
     onMouseEnter: hoverStart,
     onMouseLeave: hoverEnd,
     onMouseDown: activeStart,
@@ -11107,17 +11708,17 @@ var Up = function Up() {
   })));
 };
 
-var _templateObject$12, _templateObject2$Z, _templateObject3$Q, _templateObject4$K, _templateObject5$G, _templateObject6$x;
-var Active$1 = styled.g(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
+var _templateObject$13, _templateObject2$_, _templateObject3$S, _templateObject4$M, _templateObject5$H, _templateObject6$y;
+var Active$1 = styled.g(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
-  return active && css(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return active && css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Hover$1 = styled.g(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
+var Hover$1 = styled.g(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && css(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && css(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$I = styled.g(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n"])));
-var Arrow = styled.g(_templateObject6$x || (_templateObject6$x = _taggedTemplateLiteralLoose(["\n\n"])));
+var Container$J = styled.g(_templateObject5$H || (_templateObject5$H = _taggedTemplateLiteralLoose(["\n"])));
+var Arrow = styled.g(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n\n"])));
 
 var Down = function Down() {
   var _useState = useState(false),
@@ -11146,7 +11747,7 @@ var Down = function Down() {
   var hoverEnd = useCallback(function () {
     setHover(false);
   }, []);
-  return React__default.createElement(Container$I, {
+  return React__default.createElement(Container$J, {
     onMouseEnter: hoverStart,
     onMouseLeave: hoverEnd,
     onMouseDown: activeStart,
@@ -11191,16 +11792,16 @@ var Down = function Down() {
   })));
 };
 
-var _templateObject$13, _templateObject2$_, _templateObject3$R, _templateObject4$L, _templateObject5$H;
-var Active$2 = styled.g(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
+var _templateObject$14, _templateObject2$$, _templateObject3$T, _templateObject4$N, _templateObject5$I;
+var Active$2 = styled.g(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
-  return active && css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return active && css(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Hover$2 = styled.g(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
+var Hover$2 = styled.g(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && css(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && css(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$J = styled.g(_templateObject5$H || (_templateObject5$H = _taggedTemplateLiteralLoose(["\n"])));
+var Container$K = styled.g(_templateObject5$I || (_templateObject5$I = _taggedTemplateLiteralLoose(["\n"])));
 
 var Left = function Left() {
   var _useState = useState(false),
@@ -11229,7 +11830,7 @@ var Left = function Left() {
   var hoverEnd = useCallback(function () {
     setHover(false);
   }, []);
-  return React__default.createElement(Container$J, {
+  return React__default.createElement(Container$K, {
     onMouseEnter: hoverStart,
     onMouseLeave: hoverEnd,
     onMouseDown: activeStart,
@@ -11275,16 +11876,16 @@ var Left = function Left() {
   })));
 };
 
-var _templateObject$14, _templateObject2$$, _templateObject3$S, _templateObject4$M, _templateObject5$I;
-var Active$3 = styled.g(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
+var _templateObject$15, _templateObject2$10, _templateObject3$U, _templateObject4$O, _templateObject5$J;
+var Active$3 = styled.g(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
-  return active && css(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return active && css(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Hover$3 = styled.g(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
+var Hover$3 = styled.g(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && css(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && css(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$K = styled.g(_templateObject5$I || (_templateObject5$I = _taggedTemplateLiteralLoose(["\n"])));
+var Container$L = styled.g(_templateObject5$J || (_templateObject5$J = _taggedTemplateLiteralLoose(["\n"])));
 
 var Right = function Right() {
   var _useState = useState(false),
@@ -11313,7 +11914,7 @@ var Right = function Right() {
   var hoverEnd = useCallback(function () {
     setHover(false);
   }, []);
-  return React__default.createElement(Container$K, {
+  return React__default.createElement(Container$L, {
     onMouseEnter: hoverStart,
     onMouseLeave: hoverEnd,
     onMouseDown: activeStart,
@@ -12172,16 +12773,16 @@ var ZoomBase = function ZoomBase(_ref) {
   })), children));
 };
 
-var _templateObject$15, _templateObject2$10, _templateObject3$T, _templateObject4$N, _templateObject5$J;
-var Active$4 = styled.g(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
+var _templateObject$16, _templateObject2$11, _templateObject3$V, _templateObject4$P, _templateObject5$K;
+var Active$4 = styled.g(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
-  return active && css(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return active && css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Hover$4 = styled.g(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
+var Hover$4 = styled.g(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && css(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && css(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$L = styled.g(_templateObject5$J || (_templateObject5$J = _taggedTemplateLiteralLoose(["\n"])));
+var Container$M = styled.g(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n"])));
 
 var Up$1 = function Up() {
   var _useState = useState(false),
@@ -12210,7 +12811,7 @@ var Up$1 = function Up() {
   var hoverEnd = useCallback(function () {
     setHover(false);
   }, []);
-  return React__default.createElement(Container$L, {
+  return React__default.createElement(Container$M, {
     onMouseEnter: hoverStart,
     onMouseLeave: hoverEnd,
     onMouseDown: activeStart,
@@ -12249,16 +12850,16 @@ var Up$1 = function Up() {
   })));
 };
 
-var _templateObject$16, _templateObject2$11, _templateObject3$U, _templateObject4$O, _templateObject5$K;
-var Active$5 = styled.g(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
+var _templateObject$17, _templateObject2$12, _templateObject3$W, _templateObject4$Q, _templateObject5$L;
+var Active$5 = styled.g(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
-  return active && css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return active && css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Hover$5 = styled.g(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
+var Hover$5 = styled.g(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && css(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && css(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$M = styled.g(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n"])));
+var Container$N = styled.g(_templateObject5$L || (_templateObject5$L = _taggedTemplateLiteralLoose(["\n"])));
 
 var Up$2 = function Up() {
   var _useState = useState(false),
@@ -12287,7 +12888,7 @@ var Up$2 = function Up() {
   var hoverEnd = useCallback(function () {
     setHover(false);
   }, []);
-  return React__default.createElement(Container$M, {
+  return React__default.createElement(Container$N, {
     onMouseEnter: hoverStart,
     onMouseLeave: hoverEnd,
     onMouseDown: activeStart,
@@ -12322,8 +12923,8 @@ var Up$2 = function Up() {
   })));
 };
 
-var _templateObject$17;
-var Container$N = styled.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  display: flex;\n  flex-direction: column;\n"])));
+var _templateObject$18;
+var Container$O = styled.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  display: flex;\n  flex-direction: column;\n"])));
 
 var Controls = function Controls(_ref) {
   var _ref$debug = _ref.debug,
@@ -12332,27 +12933,27 @@ var Controls = function Controls(_ref) {
   var _useContext = useContext(PTZContext),
       state = _useContext.state;
 
-  return React__default.createElement(Container$N, null, React__default.createElement(PTZControl, null, React__default.createElement(Up, null), React__default.createElement(Down, null), React__default.createElement(Left, null), React__default.createElement(Right, null)), React__default.createElement(ZoomBase, null, React__default.createElement(Up$2, null), React__default.createElement(Up$1, null)), debug && React__default.createElement("pre", null, JSON.stringify(state, null, 2)));
+  return React__default.createElement(Container$O, null, React__default.createElement(PTZControl, null, React__default.createElement(Up, null), React__default.createElement(Down, null), React__default.createElement(Left, null), React__default.createElement(Right, null)), React__default.createElement(ZoomBase, null, React__default.createElement(Up$2, null), React__default.createElement(Up$1, null)), debug && React__default.createElement("pre", null, JSON.stringify(state, null, 2)));
 };
 
 var _excluded$z = ["isEmptyWithIcon", "status", "noticeIcon", "hasNotice", "noticeMessage", "noticeTitle", "emptyIcon"];
 
-var _templateObject$18, _templateObject2$12, _templateObject3$V, _templateObject4$P, _templateObject5$L, _templateObject6$y, _templateObject7$w, _templateObject8$s, _templateObject9$n;
-var Container$O = styled.div(_templateObject$18 || (_templateObject$18 = _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);
-var EmptyWithIcon = styled.div(_templateObject2$12 || (_templateObject2$12 = _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) {
+var _templateObject$19, _templateObject2$13, _templateObject3$X, _templateObject4$R, _templateObject5$M, _templateObject6$z, _templateObject7$x, _templateObject8$t, _templateObject9$o;
+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);
+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) {
   var hasPadding = _ref.hasPadding;
   return hasPadding && "\n    padding-bottom: 43px\n  ";
 }, IconWrapper);
-var Notice = styled.div(_templateObject3$V || (_templateObject3$V = _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) {
+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) {
   var theme = _ref2.theme,
       color = _ref2.color;
-  return color && css(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    color: ", ";\n  "])), theme.colors.feedback[color], theme.colors.icons.inverse);
+  return color && css(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    color: ", ";\n  "])), theme.colors.feedback[color], theme.colors.icons.inverse);
 });
-var NoticeMessage = styled.div(_templateObject5$L || (_templateObject5$L = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 245px;\n  font-size: 10px;\n"])), EllipsisStyles);
-var NoticeTitle = styled.div(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 245px;\n  font-size: 12px;\n"])), EllipsisStyles);
-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);
-var NoticeTextGroup = styled.div(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-left: 14px;\n"])));
-var StatusLine = styled.div(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  height: 3px;\n  width: 100%;\n"])), function (_ref3) {
+var NoticeMessage = styled.div(_templateObject5$M || (_templateObject5$M = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 245px;\n  font-size: 10px;\n"])), EllipsisStyles);
+var NoticeTitle = styled.div(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 245px;\n  font-size: 12px;\n"])), EllipsisStyles);
+var NoticeIcon = styled.div(_templateObject7$x || (_templateObject7$x = _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);
+var NoticeTextGroup = styled.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-left: 14px;\n"])));
+var StatusLine = styled.div(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  height: 3px;\n  width: 100%;\n"])), function (_ref3) {
   var theme = _ref3.theme,
       color = _ref3.color;
   return color && theme.colors.feedback[color];
@@ -12371,7 +12972,7 @@ var MediaStream = function MediaStream(_ref4) {
       emptyIcon = _ref4.emptyIcon,
       props = _objectWithoutPropertiesLoose(_ref4, _excluded$z);
 
-  return React__default.createElement(Container$O, null, isEmptyWithIcon ? React__default.createElement(EmptyWithIcon, {
+  return React__default.createElement(Container$P, null, isEmptyWithIcon ? React__default.createElement(EmptyWithIcon, {
     hasPadding: hasNotice
   }, React__default.createElement(Icon, {
     icon: emptyIcon ? emptyIcon : 'PasswordHide',
@@ -12388,34 +12989,34 @@ var MediaStream = function MediaStream(_ref4) {
   }));
 };
 
-var _templateObject$19, _templateObject2$13, _templateObject3$W, _templateObject4$Q, _templateObject5$M, _templateObject6$z, _templateObject7$x, _templateObject8$t, _templateObject9$o;
-var Container$P = styled.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 60px;\n"])));
-var LeftData = styled.div(_templateObject2$13 || (_templateObject2$13 = _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) {
+var _templateObject$1a, _templateObject2$14, _templateObject3$Y, _templateObject4$S, _templateObject5$N, _templateObject6$A, _templateObject7$y, _templateObject8$u, _templateObject9$p;
+var Container$Q = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 60px;\n"])));
+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) {
   var theme = _ref.theme,
       hasRightData = _ref.hasRightData;
-  return hasRightData && css(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n    border-right: ", " 1px solid;\n    width: 195px;\n  "])), theme.colors.divider);
+  return hasRightData && css(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n    border-right: ", " 1px solid;\n    width: 195px;\n  "])), theme.colors.divider);
 }, IconWrapper);
-var RightData = styled.div(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["\n  padding: 0 12px 0 16px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-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"])));
-var LeftTitle = styled.div(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", "};\n  ", ";\n\n  color: hsla(195, 10%, 52%, 0.72);\n  font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
+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"])));
+var DeviceDataGroup = styled.div(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-left: 14px;\n  justify-content: center;\n"])));
+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) {
   var hasRightData = _ref2.hasRightData;
   return hasRightData ? "max-margin: 140px;" : "max-margin: 250px;";
 }, function (_ref3) {
   var hasMarginBottom = _ref3.hasMarginBottom;
   return hasMarginBottom && "margin-bottom: 1px;";
 });
-var LeftSubTitle = styled.div(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  ", ";\n  ", "\n\n  color: hsl(208, 8%, 38%);\n  font-size: 16px;\n"])), function (_ref4) {
+var LeftSubTitle = styled.div(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  ", ";\n  ", "\n\n  color: hsl(208, 8%, 38%);\n  font-size: 16px;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.fontFamily.data;
 }, EllipsisStyles, function (_ref5) {
   var hasRightData = _ref5.hasRightData;
   return hasRightData ? "max-width: 140px;" : "max-width: 250px;";
 });
-var Title$5 = styled.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 80px;\n  color: hsla(195, 10%, 52%, 0.72);\n  font-size: 10px;\n  ", ";\n"])), EllipsisStyles, function (_ref6) {
+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) {
   var hasMarginBottom = _ref6.hasMarginBottom;
   return hasMarginBottom && "margin-bottom: 6px;";
 });
-var SubTitle = styled.div(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 80px;\n  color: hsl(195, 10%, 52%);\n  font-size: 12px;\n"])), EllipsisStyles);
+var SubTitle = styled.div(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 80px;\n  color: hsl(195, 10%, 52%);\n  font-size: 12px;\n"])), EllipsisStyles);
 
 var PanelMetaData = function PanelMetaData(_ref7) {
   var _ref7$deviceIcon = _ref7.deviceIcon,
@@ -12429,7 +13030,7 @@ var PanelMetaData = function PanelMetaData(_ref7) {
   var hasRightData = useMemo(function () {
     return !!rightTitle || !!rightSubTitle;
   }, [rightSubTitle, rightTitle]);
-  return React__default.createElement(Container$P, null, React__default.createElement(LeftData, Object.assign({}, {
+  return React__default.createElement(Container$Q, null, React__default.createElement(LeftData, Object.assign({}, {
     hasRightData: hasRightData
   }), !hideIcon && React__default.createElement(Icon, {
     icon: deviceIcon,
@@ -12448,8 +13049,8 @@ var PanelMetaData = function PanelMetaData(_ref7) {
 
 var _excluded$A = ["streamProps", "panelMetaData", "customBottom", "panelOnClick"];
 
-var _templateObject$1a;
-var CameraPanelWrapper = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n  width: 300px;\n  height: 230px;\n  border-radius: 3px;\n  box-shadow: 0 2px 10px 0 hsla(211, 42%, 86%, 0.41);\n  background-color: ", ";\n  }\n\n  ", ";\n"])), function (_ref) {
+var _templateObject$1b;
+var CameraPanelWrapper = styled.div(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose(["\n  width: 300px;\n  height: 230px;\n  border-radius: 3px;\n  box-shadow: 0 2px 10px 0 hsla(211, 42%, 86%, 0.41);\n  background-color: ", ";\n  }\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.styles.global.background.backgroundImage;
 }, function (_ref2) {
@@ -12470,8 +13071,8 @@ var NewComponent = function NewComponent(_ref3) {
   }, props), React__default.createElement(MediaStream, Object.assign({}, streamProps)), customBottom ? customBottom : panelMetaData && React__default.createElement(PanelMetaData, Object.assign({}, panelMetaData)));
 };
 
-var _templateObject$1b;
-var CameraGrid = styled.div(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(auto-fill, 300px);\n  gap: 20px 20px;\n"])));
+var _templateObject$1c;
+var CameraGrid = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(auto-fill, 300px);\n  gap: 20px 20px;\n"])));
 
 var CameraPanels = function CameraPanels(_ref) {
   var panels = _ref.panels;
@@ -12484,10 +13085,10 @@ var CameraPanels = function CameraPanels(_ref) {
 
 var _excluded$B = ["icon", "size", "weight", "label", "linkTo"];
 
-var _templateObject$1c, _templateObject2$14, _templateObject3$X, _templateObject4$R;
-var TextContainer$3 = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n  user-select: none;\n"])));
-var StyledLink$1 = styled(Link)(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n"])));
-var TagWrapper = styled.div(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: 500;\n  color: hsl(200, 3%, 39%);\n  padding: 4px 10px;\n  border: solid 1px hsl(120, 1%, 85%);\n  display: inline-flex;\n  align-items: center;\n  border-radius: 3px;\n  height: 26px;\n\n  ", " {\n    [stroke]{\n      ", ";\n    }\n    margin-right: 8px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  ", ";\n"])), function (_ref) {
+var _templateObject$1d, _templateObject2$15, _templateObject3$Z, _templateObject4$T;
+var TextContainer$3 = styled.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n  user-select: none;\n"])));
+var StyledLink$1 = styled(Link)(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n"])));
+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) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
 }, function (_ref2) {
@@ -12500,7 +13101,7 @@ var TagWrapper = styled.div(_templateObject3$X || (_templateObject3$X = _taggedT
   var theme = _ref4.theme,
       hoverColor = _ref4.hoverColor,
       enableHover = _ref4.enableHover;
-  return enableHover && css(_templateObject4$R || (_templateObject4$R = _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]);
+  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]);
 });
 
 var Tag = function Tag(_ref5) {
@@ -12532,8 +13133,8 @@ var Tag = function Tag(_ref5) {
   }, renderTag()) : renderTag();
 };
 
-var _templateObject$1d;
-var TagListWrapper = styled.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  ", " {\n    margin-right: 10px;\n    margin-bottom: 6px;\n    flex-shrink: 0;\n  }\n  flex-wrap: wrap;\n"])), TagWrapper);
+var _templateObject$1e;
+var TagListWrapper = styled.div(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  ", " {\n    margin-right: 10px;\n    margin-bottom: 6px;\n    flex-shrink: 0;\n  }\n  flex-wrap: wrap;\n"])), TagWrapper);
 
 var TagList = function TagList(_ref) {
   var tagsConfig = _ref.tagsConfig;
@@ -12580,16 +13181,16 @@ var DebouncedSearcher = function DebouncedSearcher(_ref) {
 
 var _excluded$D = ["design", "size", "position", "text"];
 
-var _templateObject$1e, _templateObject2$15, _templateObject3$Y, _templateObject4$S, _templateObject5$N, _templateObject6$A;
-var Container$Q = styled.div(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose([""])));
-var Title$6 = styled.div(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: hsl(207, 5%, 57%);\n  font-size: 12px;\n  font-weight: 700;\n  margin-bottom: 17px;\n"])), function (_ref) {
+var _templateObject$1f, _templateObject2$16, _templateObject3$_, _templateObject4$U, _templateObject5$O, _templateObject6$B;
+var Container$R = styled.div(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose([""])));
+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) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
 });
-var ButtonsWrapper$1 = styled.div(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n"])));
-var LeftButtons = styled.div(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["\n  button {\n    margin: 0 10px 10px 0;\n  }\n"])));
-var RightButtons = styled.div(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
-var SelectedResults = styled.div(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  margin-top: 29px;\n  min-height: 19px;\n  color: hsl(207, 5%, 57%);\n  font-size: 12px;\n"])), function (_ref2) {
+var ButtonsWrapper$1 = styled.div(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var LeftButtons = styled.div(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["\n  button {\n    margin: 0 10px 10px 0;\n  }\n"])));
+var RightButtons = styled.div(_templateObject5$O || (_templateObject5$O = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
+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) {
   var theme = _ref2.theme;
   return theme.fontFamily.ui;
 });
@@ -12614,7 +13215,7 @@ var ActionsBar = function ActionsBar(_ref3) {
       totalAvailable = _ref3$totalAvailable === void 0 ? 0 : _ref3$totalAvailable,
       _ref3$finishCallback = _ref3.finishCallback,
       finishCallback = _ref3$finishCallback === void 0 ? function () {} : _ref3$finishCallback;
-  return React__default.createElement(Container$Q, null, React__default.createElement(Title$6, null, title), React__default.createElement(ButtonsWrapper$1, null, React__default.createElement(LeftButtons, null, actionButtons.map(function (_ref4, index) {
+  return React__default.createElement(Container$R, null, React__default.createElement(Title$6, null, title), React__default.createElement(ButtonsWrapper$1, null, React__default.createElement(LeftButtons, null, actionButtons.map(function (_ref4, index) {
     var design = _ref4.design,
         size = _ref4.size,
         position = _ref4.position,
@@ -12854,18 +13455,18 @@ function useBreakpoints() {
   return breakpoints;
 }
 
-var _templateObject$1f, _templateObject2$16, _templateObject3$Z, _templateObject4$T, _templateObject5$O;
-var Container$R = styled.div(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose([""])));
-var Title$7 = styled.div(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
+var _templateObject$1g, _templateObject2$17, _templateObject3$$, _templateObject4$V, _templateObject5$P;
+var Container$S = styled.div(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose([""])));
+var Title$7 = styled.div(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
   var typography = _ref.theme.typography;
   return typography.modal.title;
 });
-var MessageBox$1 = styled.div(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n  ", ";\n  margin: 28px 0;\n"])), function (_ref2) {
+var MessageBox$1 = styled.div(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n  ", ";\n  margin: 28px 0;\n"])), function (_ref2) {
   var typography = _ref2.theme.typography;
   return typography.modal.basicContent;
 });
-var StyledButton$5 = styled(Button)(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n"])));
-var ButtonsGroup$1 = styled.div(_templateObject5$O || (_templateObject5$O = _taggedTemplateLiteralLoose(["\n  text-align: right;\n"])));
+var StyledButton$5 = styled(Button)(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n"])));
+var ButtonsGroup$1 = styled.div(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n  text-align: right;\n"])));
 
 var ConfirmationModal = function ConfirmationModal(_ref3) {
   var _ref3$title = _ref3.title,
@@ -12898,7 +13499,7 @@ var ConfirmationModal = function ConfirmationModal(_ref3) {
     setModalOpen(false);
   };
 
-  return React__default.createElement(Container$R, null, React__default.createElement(Title$7, null, title), React__default.createElement(MessageBox$1, null, message), React__default.createElement(ButtonsGroup$1, null, React__default.createElement(StyledButton$5, {
+  return React__default.createElement(Container$S, null, React__default.createElement(Title$7, null, title), React__default.createElement(MessageBox$1, null, message), React__default.createElement(ButtonsGroup$1, null, React__default.createElement(StyledButton$5, {
     design: leftButtonDesign,
     onClick: handlePrimaryBtn
   }, leftButtonText), React__default.createElement(StyledButton$5, {
@@ -12907,21 +13508,21 @@ var ConfirmationModal = function ConfirmationModal(_ref3) {
   }, rightButtonText)));
 };
 
-var _templateObject$1g, _templateObject2$17, _templateObject3$_, _templateObject4$U, _templateObject5$P, _templateObject6$B;
+var _templateObject$1h, _templateObject2$18, _templateObject3$10, _templateObject4$W, _templateObject5$Q, _templateObject6$C;
 var MOBILE_CLOSE_HEIGHT = 50;
 var MOBILE_NAVBAR_HEIGHT = 68;
-var Layout = styled.div(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n"])));
-var MobileLayout = styled.div(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose([""])));
-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) {
+var Layout = styled.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n"])));
+var MobileLayout = styled.div(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose([""])));
+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) {
   var _ref$padBottom = _ref.padBottom,
       padBottom = _ref$padBottom === void 0 ? true : _ref$padBottom;
   return padBottom ? '70px 90px' : '70px 90px 0';
 }, function (_ref2) {
   var maxWidth = _ref2.maxWidth;
-  return maxWidth && css(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["\n      & > div {\n        max-width: ", ";\n      }\n    "])), maxWidth);
+  return maxWidth && css(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["\n      & > div {\n        max-width: ", ";\n      }\n    "])), maxWidth);
 });
-var MainContainer = styled.div(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n"])));
-var ContentArea = styled.div(_templateObject6$B || (_templateObject6$B = _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) {
+var MainContainer = styled.div(_templateObject5$Q || (_templateObject5$Q = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n"])));
+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) {
   var paddingOverride = _ref3.paddingOverride;
   return paddingOverride ? paddingOverride : '40px 20px';
 }, deviceMediaQuery.medium, function (_ref4) {
@@ -12935,45 +13536,45 @@ var ContentArea = styled.div(_templateObject6$B || (_templateObject6$B = _tagged
   return paddingOverride ? paddingOverride : '70px 90px';
 });
 
-var _templateObject$1h, _templateObject2$18, _templateObject3$$, _templateObject4$V, _templateObject5$Q, _templateObject6$C, _templateObject7$y, _templateObject8$u, _templateObject9$p, _templateObject10$j, _templateObject11$d, _templateObject12$9, _templateObject13$7, _templateObject14$5, _templateObject15$4, _templateObject16$4, _templateObject17$4, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2;
-var ContextTitle = styled.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var _templateObject$1i, _templateObject2$19, _templateObject3$11, _templateObject4$X, _templateObject5$R, _templateObject6$D, _templateObject7$z, _templateObject8$v, _templateObject9$q, _templateObject10$l, _templateObject11$d, _templateObject12$a, _templateObject13$9, _templateObject14$7, _templateObject15$5, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3, _templateObject20$3, _templateObject21$3;
+var ContextTitle = styled.div(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose(["\n    transition: opacity ", " ", ";\n  "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
+  return css(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n    transition: opacity ", " ", ";\n  "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
 }, function (_ref2) {
   var compact = _ref2.compact;
-  return compact && css(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n    font-size:14px;\n  "])));
+  return compact && css(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose(["\n    font-size:14px;\n  "])));
 });
-var ContextIcon = styled.div(_templateObject4$V || (_templateObject4$V = _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) {
+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) {
   var theme = _ref3.theme;
-  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);
+  return css(_templateObject5$R || (_templateObject5$R = _taggedTemplateLiteralLoose(["\n    ", ";\n    transition: background ", " ", ";\n  "])), theme.styles.global.mainMenu.iconBackground["default"], theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
 });
-var ContextIndicator = styled.div(_templateObject6$C || (_templateObject6$C = _taggedTemplateLiteralLoose(["\n  width: 12px;\n  height: 12px;\n  flex: 0 0 14px;\n  margin: 0 20px 0 auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    display: block;\n    height: 12px;\n    width: 12px;\n  }\n\n  opacity: 0;\n\n  ", "\n\n"])), function (_ref4) {
+var ContextIndicator = styled.div(_templateObject6$D || (_templateObject6$D = _taggedTemplateLiteralLoose(["\n  width: 12px;\n  height: 12px;\n  flex: 0 0 14px;\n  margin: 0 20px 0 auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    display: block;\n    height: 12px;\n    width: 12px;\n  }\n\n  opacity: 0;\n\n  ", "\n\n"])), function (_ref4) {
   var theme = _ref4.theme;
-  return css(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose(["\n    transition: opacity 0 ", ";\n  "])), theme.animation.easing.primary.easeInOut);
+  return css(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose(["\n    transition: opacity 0 ", ";\n  "])), theme.animation.easing.primary.easeInOut);
 });
-var ContextActionBaseCSS = css(_templateObject8$u || (_templateObject8$u = _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"])));
-var StyledAnchor = styled.a(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  text-decoration: none;\n"])));
-var ExternalIconWrapper = styled.div(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
-var ContextWrapper = styled.div(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n\n  &:hover ", "{\n    opacity: 1;\n    ", ";\n    ", "{\n      [stroke]{\n        stroke: ", ";\n      }\n    }\n  }\n"])), ContextActionBaseCSS, function (_ref5) {
+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"])));
+var StyledAnchor = styled.a(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n  display: flex;\n  text-decoration: none;\n"])));
+var ExternalIconWrapper = styled.div(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
+var ContextWrapper = styled.div(_templateObject11$d || (_templateObject11$d = _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) {
   var theme = _ref5.theme;
-  return theme && css(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
+  return theme && css(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
 }, function (_ref6) {
   var $menuOpen = _ref6.$menuOpen;
-  return $menuOpen && css(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n  ", "{\n    opacity: 1;\n  }\n"])), ContextTitle);
-}, ContextIcon, function (_ref7) {
+  return $menuOpen && css(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n  ", "{\n    opacity: 1;\n  }\n"])), ContextTitle);
+}, ContextIcon$1, function (_ref7) {
   var theme = _ref7.theme;
   return theme.styles.global.mainMenu.iconBackground.hover;
 }, IconWrapper, function (_ref8) {
   var theme = _ref8.theme;
   return theme.colors.icons['inverse'];
 });
-var ContextActionA = styled(Link)(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n\n  &:hover ", "{\n    opacity: 1;\n    ", ";\n    ", "{\n      [stroke]{\n        stroke: ", ";\n      }\n    }\n  }\n\n  ", "\n"])), ContextActionBaseCSS, function (_ref9) {
+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) {
   var theme = _ref9.theme;
-  return theme && css(_templateObject15$4 || (_templateObject15$4 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
+  return theme && css(_templateObject15$5 || (_templateObject15$5 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
 }, function (_ref10) {
   var $menuOpen = _ref10.$menuOpen;
-  return $menuOpen && css(_templateObject16$4 || (_templateObject16$4 = _taggedTemplateLiteralLoose(["\n    ", "{\n      opacity: 1;\n    }\n  "])), ContextTitle);
-}, ContextIcon, function (_ref11) {
+  return $menuOpen && css(_templateObject16$5 || (_templateObject16$5 = _taggedTemplateLiteralLoose(["\n    ", "{\n      opacity: 1;\n    }\n  "])), ContextTitle);
+}, ContextIcon$1, function (_ref11) {
   var theme = _ref11.theme;
   return theme.styles.global.mainMenu.iconBackground.hover;
 }, IconWrapper, function (_ref12) {
@@ -12981,19 +13582,19 @@ var ContextActionA = styled(Link)(_templateObject14$5 || (_templateObject14$5 =
   return theme.colors.icons['inverse'];
 }, function (_ref13) {
   var $isActive = _ref13.$isActive;
-  return $isActive && css(_templateObject17$4 || (_templateObject17$4 = _taggedTemplateLiteralLoose(["\n    ", ",\n    &:hover ", "{\n      ", ";\n    }\n  "])), ContextIcon, ContextIcon, function (_ref14) {
+  return $isActive && css(_templateObject17$5 || (_templateObject17$5 = _taggedTemplateLiteralLoose(["\n    ", ",\n    &:hover ", "{\n      ", ";\n    }\n  "])), ContextIcon$1, ContextIcon$1, function (_ref14) {
     var theme = _ref14.theme;
     return theme.styles.global.mainMenu.iconBackground.active;
   });
 });
-var ContextActionButton = styled.button(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  ", "\n\n  &:hover ", "{\n    opacity: 1;\n    ", ";\n    ", "{\n      [stroke]{\n        stroke: ", ";\n      }\n    }\n  }\n\n  ", "\n"])), ContextActionBaseCSS, function (_ref15) {
+var ContextActionButton$1 = styled.button(_templateObject18$3 || (_templateObject18$3 = _taggedTemplateLiteralLoose(["\n  ", "\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 (_ref15) {
   var theme = _ref15.theme;
-  return theme && css(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
+  return theme && css(_templateObject19$3 || (_templateObject19$3 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
 }, function (_ref16) {
   var menuOpen = _ref16.menuOpen,
       theme = _ref16.theme;
-  return menuOpen && css(_templateObject20$2 || (_templateObject20$2 = _taggedTemplateLiteralLoose(["\n    ", "{\n      opacity: 1;\n    }\n\n    ", "{\n      opacity: 1;\n      transition: opacity ", " ", " ", ";\n    }\n  "])), ContextTitle, ContextIndicator, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.animation.speed.fast);
-}, ContextIcon, function (_ref17) {
+  return menuOpen && css(_templateObject20$3 || (_templateObject20$3 = _taggedTemplateLiteralLoose(["\n    ", "{\n      opacity: 1;\n    }\n\n    ", "{\n      opacity: 1;\n      transition: opacity ", " ", " ", ";\n    }\n  "])), ContextTitle, ContextIndicator, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.animation.speed.fast);
+}, ContextIcon$1, function (_ref17) {
   var theme = _ref17.theme;
   return theme.styles.global.mainMenu.iconBackground.hover;
 }, IconWrapper, function (_ref18) {
@@ -13001,7 +13602,7 @@ var ContextActionButton = styled.button(_templateObject18$2 || (_templateObject1
   return theme.colors.icons['inverse'];
 }, function (_ref19) {
   var isActive = _ref19.isActive;
-  return isActive && css(_templateObject21$2 || (_templateObject21$2 = _taggedTemplateLiteralLoose(["\n    ", ",\n    &:hover ", "{\n      ", ";\n    }\n  "])), ContextIcon, ContextIcon, function (_ref20) {
+  return isActive && css(_templateObject21$3 || (_templateObject21$3 = _taggedTemplateLiteralLoose(["\n    ", ",\n    &:hover ", "{\n      ", ";\n    }\n  "])), ContextIcon$1, ContextIcon$1, function (_ref20) {
     var theme = _ref20.theme;
     return theme.styles.global.mainMenu.iconBackground.active;
   });
@@ -13021,7 +13622,7 @@ var ContextItem = function ContextItem(_ref21) {
       isActive = _ref21.isActive,
       isExternalLink = _ref21.isExternalLink,
       onClickCallback = _ref21.onClickCallback;
-  var internal = React__default.createElement(React__default.Fragment, null, React__default.createElement(ContextIcon, Object.assign({}, {
+  var internal = React__default.createElement(React__default.Fragment, null, React__default.createElement(ContextIcon$1, Object.assign({}, {
     compact: compact
   }), React__default.createElement(Icon, {
     icon: icon,
@@ -13035,7 +13636,7 @@ var ContextItem = function ContextItem(_ref21) {
   })) : null);
 
   if (hasSubmenu) {
-    return React__default.createElement(ContextActionButton, {
+    return React__default.createElement(ContextActionButton$1, {
       menuOpen: menuOpen,
       isActive: isActive,
       onClick: function onClick() {
@@ -13197,42 +13798,42 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
   };
 };
 
-var _templateObject$1i, _templateObject2$19, _templateObject3$10, _templateObject4$W, _templateObject5$R, _templateObject6$D, _templateObject7$z, _templateObject8$v, _templateObject9$q, _templateObject10$k, _templateObject11$e, _templateObject12$a, _templateObject13$8, _templateObject14$6, _templateObject15$5;
-var Submenu = styled.ul(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n  margin-left: 40px;\n  padding: 0;\n\n"])));
-var SubmenuHeader = styled.div(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 40px;\n  margin-left: 40px;\n"])));
-var SubmenuItemTitle = styled.span(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n  display: block;\n  ", ";\n\n"])), function (_ref) {
+var _templateObject$1j, _templateObject2$1a, _templateObject3$12, _templateObject4$Y, _templateObject5$S, _templateObject6$E, _templateObject7$A, _templateObject8$w, _templateObject9$r, _templateObject10$m, _templateObject11$e, _templateObject12$b, _templateObject13$a, _templateObject14$8, _templateObject15$6;
+var Submenu = styled.ul(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n  margin-left: 40px;\n  padding: 0;\n\n"])));
+var SubmenuHeader = styled.div(_templateObject2$1a || (_templateObject2$1a = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 40px;\n  margin-left: 40px;\n"])));
+var SubmenuItemTitle = styled.span(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n  display: block;\n  ", ";\n\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme && css(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", "\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subheader);
+  return theme && css(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", "\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subheader);
 });
-var SubmenuItemLink = styled(Link)(_templateObject5$R || (_templateObject5$R = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n"])), resetButtonStyles);
-var ExternalIconWrapper$1 = styled.div(_templateObject6$D || (_templateObject6$D = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
-var SubmenuItemAnchor = styled.a(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  align-items: center;\n"])), resetButtonStyles);
-var SubmenuItem = styled.li(_templateObject8$v || (_templateObject8$v = _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) {
+var SubmenuItemLink = styled(Link)(_templateObject5$S || (_templateObject5$S = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n"])), resetButtonStyles);
+var ExternalIconWrapper$1 = styled.div(_templateObject6$E || (_templateObject6$E = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
+var SubmenuItemAnchor = styled.a(_templateObject7$A || (_templateObject7$A = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  align-items: center;\n"])), resetButtonStyles);
+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) {
   var colors = _ref2.theme.colors;
   return colors.divider;
 }, SubmenuItemLink, SubmenuItemAnchor, function (_ref3) {
   var theme = _ref3.theme,
       isActive = _ref3.isActive;
-  return theme && css(_templateObject9$q || (_templateObject9$q = _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));
+  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$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n        &, &:hover {\n          ", ";\n        }\n      "])), theme.typography.global.mainMenu.subItem.active));
 });
 var SubmenuContainer = styled.div(_templateObject11$e || (_templateObject11$e = _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) {
   var theme = _ref4.theme;
-  return theme && css(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n    transition:\n      max-height ", " ", ",\n      opacity ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
+  return theme && css(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n    transition:\n      max-height ", " ", ",\n      opacity ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
 }, function (_ref5) {
   var colors = _ref5.theme.colors;
   return colors.divider;
 });
-var ContextContainer = styled.div(_templateObject13$8 || (_templateObject13$8 = _taggedTemplateLiteralLoose(["\n  min-height: ", ";\n  width: inherit;\n\n  ", "{\n    max-height: 0;\n    opacity: 0;\n  }\n  ", ";\n\n  ", ";\n\n"])), function (_ref6) {
+var ContextContainer = styled.div(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n  min-height: ", ";\n  width: inherit;\n\n  ", "{\n    max-height: 0;\n    opacity: 0;\n  }\n  ", ";\n\n  ", ";\n\n"])), function (_ref6) {
   var minHeight = _ref6.minHeight;
   return minHeight ? minHeight + "px" : "70px";
 }, SubmenuContainer, function (_ref7) {
   var open = _ref7.open,
       maxHeight = _ref7.maxHeight,
       theme = _ref7.theme;
-  return open && css(_templateObject14$6 || (_templateObject14$6 = _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);
+  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);
 }, function (_ref8) {
   var loading = _ref8.loading;
-  return loading === 'true' && css(_templateObject15$5 || (_templateObject15$5 = _taggedTemplateLiteralLoose(["\n    ", "{\n      max-height: none !important;\n      opacity: 1;\n    }\n  "])), SubmenuContainer);
+  return loading === 'true' && css(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n    ", "{\n      max-height: none !important;\n      opacity: 1;\n    }\n  "])), SubmenuContainer);
 });
 
 var NavigationItem = function NavigationItem(_ref9) {
@@ -13344,30 +13945,30 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
   return output;
 };
 
-var _templateObject$1j, _templateObject2$1a, _templateObject3$11, _templateObject4$X, _templateObject5$S, _templateObject6$E, _templateObject7$A, _templateObject8$w, _templateObject9$r, _templateObject10$l, _templateObject11$f, _templateObject12$b, _templateObject13$9, _templateObject14$7, _templateObject15$6;
-var Logo = styled(Link)(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteralLoose(["\n  height: 50px;\n  margin: 0 20px 55px 15px;\n  display: flex;\n\n  object {\n    pointer-events: none;\n  }\n"])));
-var LogoMark = styled.div(_templateObject2$1a || (_templateObject2$1a = _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"])));
-var LogoType = styled.div(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  flex: 1;\n  height: 50px;\n  display: flex;\n  justify-content: left;\n  align-items: center;\n"])));
-var SVGObject = styled.object(_templateObject4$X || (_templateObject4$X = _taggedTemplateLiteralLoose([""])));
-var SVGObjectText = styled.object(_templateObject5$S || (_templateObject5$S = _taggedTemplateLiteralLoose(["\n  max-width: 180px;\n"])));
-var NavigationContainer = styled.div(_templateObject6$E || (_templateObject6$E = _taggedTemplateLiteralLoose([""])));
-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) {
+var _templateObject$1k, _templateObject2$1b, _templateObject3$13, _templateObject4$Z, _templateObject5$T, _templateObject6$F, _templateObject7$B, _templateObject8$x, _templateObject9$s, _templateObject10$n, _templateObject11$f, _templateObject12$c, _templateObject13$b, _templateObject14$9, _templateObject15$7;
+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"])));
+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"])));
+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"])));
+var SVGObject = styled.object(_templateObject4$Z || (_templateObject4$Z = _taggedTemplateLiteralLoose([""])));
+var SVGObjectText = styled.object(_templateObject5$T || (_templateObject5$T = _taggedTemplateLiteralLoose(["\n  max-width: 180px;\n"])));
+var NavigationContainer = styled.div(_templateObject6$F || (_templateObject6$F = _taggedTemplateLiteralLoose([""])));
+var MenuFooter = styled.div(_templateObject7$B || (_templateObject7$B = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  justify-content: flex-end;\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme && css(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), theme.styles.global.mainMenu.footerBackground);
+  return theme && css(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), theme.styles.global.mainMenu.footerBackground);
 });
-var FooterItemContainer = styled.div(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n  min-height: 70px;\n"])));
-var PushContainer = styled.div(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 100%;\n  ", ";\n"])), function (_ref2) {
+var FooterItemContainer = styled.div(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n  min-height: 70px;\n"])));
+var PushContainer = styled.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 100%;\n  ", ";\n"])), function (_ref2) {
   var theme = _ref2.theme,
       isPinned = _ref2.isPinned;
   return theme && css(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n    width: ", ";\n  "])), isPinned ? theme.dimensions.global.mainMenu.width.open : theme.dimensions.global.mainMenu.width.closed);
 });
-var Container$S = styled.div(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n  z-index: 99;\n  position: fixed;\n  top: 0;\n  left: 0;\n  ", "\n\n  box-sizing: border-box;\n  height: 100%;\n  padding: 20px 0 0 0;\n  overflow: hidden;\n"])), function (_ref3) {
+var Container$T = styled.div(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n  z-index: 99;\n  position: fixed;\n  top: 0;\n  left: 0;\n  ", "\n\n  box-sizing: border-box;\n  height: 100%;\n  padding: 20px 0 0 0;\n  overflow: hidden;\n"])), function (_ref3) {
   var theme = _ref3.theme,
       open = _ref3.open,
       desktopSize = _ref3.desktopSize;
-  return theme && css(_templateObject13$9 || (_templateObject13$9 = _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$7 || (_templateObject14$7 = _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);
+  return theme && css(_templateObject13$b || (_templateObject13$b = _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);
 });
-var ContainerInner = styled.div(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])), function (_ref4) {
+var ContainerInner = styled.div(_templateObject15$7 || (_templateObject15$7 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.dimensions.global.mainMenu.width.open;
 });
@@ -13387,7 +13988,8 @@ var MainMenu = function MainMenu(_ref5) {
       defaultMenuOpen = _ref5$defaultMenuOpen === void 0 ? true : _ref5$defaultMenuOpen,
       _ref5$canAlwaysPin = _ref5.canAlwaysPin,
       canAlwaysPin = _ref5$canAlwaysPin === void 0 ? false : _ref5$canAlwaysPin,
-      onMenuToggle = _ref5.onMenuToggle;
+      _ref5$onMenuToggle = _ref5.onMenuToggle,
+      onMenuToggle = _ref5$onMenuToggle === void 0 ? function () {} : _ref5$onMenuToggle;
 
   var _useMenu = useMenu(defaultMenuOpen, canAlwaysPin),
       menuState = _useMenu.menuState,
@@ -13411,29 +14013,20 @@ var MainMenu = function MainMenu(_ref5) {
     }
 
     setMenuOpen();
-
-    if (onMenuToggle) {
-      onMenuToggle(true);
-    }
-  }, [onMenuToggle, setMenuOpen]);
+  }, [setMenuOpen]);
   var autoMenuClose = useCallback(function () {
     setMenuClose();
-
-    if (onMenuToggle) {
-      onMenuToggle(false);
-    }
-  }, [onMenuToggle, setMenuClose]);
+  }, [setMenuClose]);
   var toggleMenuPin = useCallback(function (e) {
     if (e.pointerType === 'touch') {
       return;
     }
 
     togglePinned();
-
-    if (onMenuToggle) {
-      onMenuToggle(true);
-    }
-  }, [onMenuToggle, togglePinned]);
+  }, [togglePinned]);
+  useEffect(function () {
+    onMenuToggle(menuState.isMenuOpen);
+  }, [menuState.isMenuOpen, onMenuToggle]);
   var setFocusedContextCb = useCallback(function (contextKey) {
     if (contextKey === -1) {
       return;
@@ -13450,7 +14043,7 @@ var MainMenu = function MainMenu(_ref5) {
   }, [checkedInItems, content]);
   return React__default.createElement(PushContainer, {
     isPinned: menuState.isMenuPinned
-  }, ReactDom.createPortal(React__default.createElement(Container$S, {
+  }, ReactDom.createPortal(React__default.createElement(Container$T, {
     open: menuState.isMenuOpen,
     desktopSize: menuState.desktopSize,
     onPointerEnter: menuState.isMenuPinned ? function () {} : autoMenuOpen,
@@ -13497,20 +14090,109 @@ var MainMenu = function MainMenu(_ref5) {
   })) : null))), document.body));
 };
 
-var _templateObject$1k, _templateObject2$1b, _templateObject3$12, _templateObject4$Y;
-var Container$T = styled.div(_templateObject$1k || (_templateObject$1k = _taggedTemplateLiteralLoose(["\n  padding: 16px 10px 14px 23px;\n  display: flex;\n  flex-direction: row;\n  border-top: 1px solid ", ";\n  align-items: center;\n  cursor: pointer;\n  svg {\n    margin-top: 7px;\n  }\n"])), function (_ref) {
+var _templateObject$1l, _templateObject2$1c, _templateObject3$14, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$C, _templateObject8$y, _templateObject9$t, _templateObject10$o, _templateObject11$g;
+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"])));
+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) {
+  var theme = _ref.theme;
+  return theme.fontFamily.ui;
+});
+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"])));
+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) {
+  var theme = _ref2.theme;
+  return theme && css(_templateObject5$U || (_templateObject5$U = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.data);
+});
+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"])));
+var Container$U = styled.div(_templateObject7$C || (_templateObject7$C = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n"])));
+var TitleBox = styled.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var IconBox = styled.div(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n  padding: 1px 5px 0 0;\n  opacity: 0;\n  ", ":hover & {\n    opacity: 1;\n    cursor: pointer;\n  }\n"])), Container$U);
+var CopyTextBox = styled.pre(_templateObject10$o || (_templateObject10$o = _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) {
+  var theme = _ref3.theme;
+  return theme.fontFamily.data;
+});
+var CopyBox = styled.div(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n"])));
+
+var UserDrawerMeta = function UserDrawerMeta(_ref4) {
+  var item = _ref4.item,
+      onUserDrawerMetaClick = _ref4.onUserDrawerMetaClick,
+      copySuccessMessage = _ref4.copySuccessMessage,
+      includeCopyTitle = _ref4.includeCopyTitle;
+  var icon = item.icon,
+      title = item.title,
+      subTitle = item.subTitle,
+      notes = item.notes,
+      hasCopyIcon = item.hasCopyIcon;
+
+  var _useCopyToClipboard = useCopyToClipboard(),
+      copyToClipboard = _useCopyToClipboard.copyToClipboard;
+
+  var _useState = useState(false),
+      showCopyText = _useState[0],
+      setShowCopyText = _useState[1];
+
+  var _useState2 = useState('dimmed'),
+      onHoverColorValue = _useState2[0],
+      setOnHoverColorValue = _useState2[1];
+
+  var onClickCopyText = useCallback(function (title, subTitle, notes) {
+    var copyText;
+
+    if (includeCopyTitle) {
+      copyText = (title ? title : '') + '\n' + (subTitle ? subTitle : '') + '\n' + (notes ? notes : '');
+    } else {
+      copyText = (subTitle ? subTitle : '') + '\n' + (notes ? notes : '');
+    }
+
+    copyToClipboard(copyText);
+    setShowCopyText(true);
+    setTimeout(function () {
+      setShowCopyText(false);
+    }, 1500);
+  }, [includeCopyTitle, copyToClipboard]);
+  var onHoverMetaInfo = useCallback(function () {
+    setOnHoverColorValue('mono');
+  }, []);
+  var onLeaveMeatInfo = useCallback(function () {
+    setOnHoverColorValue('dimmed');
+  }, []);
+  return React__default.createElement(Fragment, null, title !== '' && React__default.createElement(Container$U, {
+    onClick: onUserDrawerMetaClick
+  }, React__default.createElement(MetaConatiner, null, React__default.createElement(TitleBox, null, React__default.createElement(TitleContainer, null, React__default.createElement(Icon, {
+    icon: icon,
+    size: 10,
+    color: 'dimmed'
+  }), React__default.createElement(LabelTitle, {
+    title: title
+  }, title)), React__default.createElement(CopyBox, null, showCopyText && React__default.createElement(CopyTextBox, null, copySuccessMessage !== '' ? copySuccessMessage : 'Copied!'), hasCopyIcon ? React__default.createElement(IconBox, {
+    onClick: function onClick() {
+      return onClickCopyText(title, subTitle, notes);
+    },
+    onMouseEnter: onHoverMetaInfo,
+    onMouseLeave: onLeaveMeatInfo
+  }, React__default.createElement(Icon, {
+    icon: 'Copy',
+    size: 12,
+    color: onHoverColorValue
+  })) : null)), subTitle !== '' ? React__default.createElement(LabelContent, {
+    title: subTitle
+  }, subTitle) : null, notes !== '' ? React__default.createElement(LabelNotes, {
+    title: notes
+  }, notes) : null)));
+};
+
+var _templateObject$1m, _templateObject2$1d, _templateObject3$15, _templateObject4$$;
+var Container$V = styled.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose(["\n  padding: 16px 10px 14px 23px;\n  display: flex;\n  flex-direction: row;\n  border-top: 1px solid ", ";\n  align-items: center;\n  cursor: pointer;\n  svg {\n    margin-top: 7px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.divider;
 });
-var ColumnContainer = styled.div(_templateObject2$1b || (_templateObject2$1b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  padding-left: 14px;\n  align-items: flex-start;\n"])));
-var Title$8 = styled.div(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n  opacity: 0.76;\n  font-family: ", ";\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.34px;\n  color: ", ";\n"])), function (_ref2) {
+var ColumnContainer = styled.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  padding-left: 14px;\n  align-items: flex-start;\n"])));
+var Title$8 = styled.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n  opacity: 0.76;\n  font-family: ", ";\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.34px;\n  color: ", ";\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.fontFamily.ui;
 }, function (_ref3) {
   var theme = _ref3.theme;
   return theme.typography.global.mainMenu.subheader.color;
 });
-var SubTitle$1 = styled.div(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: ", ";\n  padding-top: 2px;\n  opacity: 0.5;\n"])), function (_ref4) {
+var SubTitle$1 = styled.div(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: ", ";\n  padding-top: 2px;\n  opacity: 0.5;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.fontFamily.ui;
 }, function (_ref5) {
@@ -13525,7 +14207,7 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref6) {
       subTitle = _ref6.subTitle,
       _ref6$onClickCallback = _ref6.onClickCallback,
       onClickCallback = _ref6$onClickCallback === void 0 ? function () {} : _ref6$onClickCallback;
-  return React__default.createElement(Container$T, {
+  return React__default.createElement(Container$V, {
     onClick: onClickCallback
   }, React__default.createElement(Icon, {
     icon: icon,
@@ -13534,72 +14216,101 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref6) {
   }), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
 };
 
-var _templateObject$1l, _templateObject2$1c, _templateObject3$13, _templateObject4$Z, _templateObject5$T, _templateObject6$F, _templateObject7$B, _templateObject8$x, _templateObject9$s, _templateObject10$m, _templateObject11$g, _templateObject12$c, _templateObject13$a, _templateObject14$8;
-var DrawerTop = styled.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose([""])));
-var DrawerBottom = styled.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
+var _templateObject$1n, _templateObject2$1e, _templateObject3$16, _templateObject4$10, _templateObject5$V, _templateObject6$H, _templateObject7$D, _templateObject8$z, _templateObject9$u, _templateObject10$p, _templateObject11$h, _templateObject12$d, _templateObject13$c, _templateObject14$a, _templateObject15$8, _templateObject16$6, _templateObject17$6, _templateObject18$4, _templateObject19$4;
+var DrawerTop = styled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose([""])));
+var DrawerBottom = styled.div(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(_templateObject3$13 || (_templateObject3$13 = _taggedTemplateLiteralLoose(["\n    width: 100%;\n    position: fixed;\n    bottom: 0;\n\n    @media ", " {\n      position: static;\n      bottom: 0;\n    }\n  "])), theme.deviceMediaQuery.large);
+  return css(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n    width: 100%;\n    position: fixed;\n    bottom: 50px;\n\n    @media ", " {\n      position: static;\n      bottom: 0;\n    }\n  "])), theme.deviceMediaQuery.medium);
 });
-var DrawerHeader = styled.h2(_templateObject4$Z || (_templateObject4$Z = _taggedTemplateLiteralLoose(["\n  ", ";\n  padding: 0;\n  margin: 0 0 5px;\n"])), function (_ref2) {
+var DrawerHeader = styled.h2(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n  ", ";\n  padding: 0;\n  margin: 0 0 5px;\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.typography.global.mainMenu.subheader;
 });
-var CurrentUser = styled.div(_templateObject5$T || (_templateObject5$T = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 15px;\n\n  ", ";\n"])), function (_ref3) {
+var CurrentUser = styled.div(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 15px;\n\n  ", ";\n"])), function (_ref3) {
   var theme = _ref3.theme;
-  return css(_templateObject6$F || (_templateObject6$F = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n    ", ";\n  "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.typography.global.mainMenu.identity);
+  return css(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n    ", ";\n  "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.typography.global.mainMenu.identity);
 });
-var UserOptions = styled.div(_templateObject7$B || (_templateObject7$B = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 10px 20px;\n  ", ";\n\n"])), function (_ref4) {
+var UserOptions = styled.div(_templateObject7$D || (_templateObject7$D = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 10px 20px;\n  ", ";\n\n"])), function (_ref4) {
   var theme = _ref4.theme;
-  return css(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n  "])), theme.styles.global.mainMenu.lines.backgroundColor);
+  return css(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n  "])), theme.styles.global.mainMenu.lines.backgroundColor);
 });
-var Logout = styled.div(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n    padding: 0 20px;\n"])));
-var LinkMenu = styled.ul(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 12px 0 0 0;\n  list-style: none;\n"])));
-var LinkMenuItem = styled.li(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n  padding: 10px 0;\n"])));
-var LinkMenuItemA = styled(Link)(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n  width: 100%;\n\n  ", ";\n\n  ", ";\n"])), resetButtonStyles, function (_ref5) {
+var Logout = styled.div(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n    padding: 0 20px;\n"])));
+var LinkMenu = styled.ul(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 12px 0 0 0;\n  list-style: none;\n"])));
+var LinkMenuItem = styled.li(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n  padding: 10px 0;\n"])));
+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"])));
+var LinkMenuItemA = styled(Link)(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n  width: 100%;\n\n  ", ";\n\n  ", ";\n"])), resetButtonStyles, function (_ref5) {
   var theme = _ref5.theme;
-  return css(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n    ", ";\n\n    &:hover {\n      ", ";\n    }\n  "])), theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover);
+  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);
 }, function (_ref6) {
   var theme = _ref6.theme,
       isActive = _ref6.isActive;
-  return isActive && css(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      ", ";\n    }\n  "])), theme.typography.global.mainMenu.subItem.active);
-});
-
-var UserMenu = function UserMenu(_ref7) {
-  var _ref7$hasLanguage = _ref7.hasLanguage,
-      hasLanguage = _ref7$hasLanguage === void 0 ? false : _ref7$hasLanguage,
-      _ref7$selectedLanguag = _ref7.selectedLanguageText,
-      selectedLanguageText = _ref7$selectedLanguag === void 0 ? '' : _ref7$selectedLanguag,
-      _ref7$hasLogout = _ref7.hasLogout,
-      hasLogout = _ref7$hasLogout === void 0 ? true : _ref7$hasLogout,
-      _ref7$logoutLink = _ref7.logoutLink,
-      logoutLink = _ref7$logoutLink === void 0 ? '/logout' : _ref7$logoutLink,
-      _ref7$logoutText = _ref7.logoutText,
-      logoutText = _ref7$logoutText === void 0 ? 'Logout' : _ref7$logoutText,
-      _ref7$hasCurrentUser = _ref7.hasCurrentUser,
-      hasCurrentUser = _ref7$hasCurrentUser === void 0 ? true : _ref7$hasCurrentUser,
-      _ref7$currentUserText = _ref7.currentUserText,
-      currentUserText = _ref7$currentUserText === void 0 ? 'Current User' : _ref7$currentUserText,
-      _ref7$accountOptionTe = _ref7.accountOptionText,
-      accountOptionText = _ref7$accountOptionTe === void 0 ? "Account Options" : _ref7$accountOptionTe,
-      _ref7$userSubmenu = _ref7.userSubmenu,
-      userSubmenu = _ref7$userSubmenu === void 0 ? [] : _ref7$userSubmenu,
-      userDrawerBespoke = _ref7.userDrawerBespoke,
-      loggedInUser = _ref7.loggedInUser,
-      _ref7$hasSwitchTheme = _ref7.hasSwitchTheme,
-      hasSwitchTheme = _ref7$hasSwitchTheme === void 0 ? false : _ref7$hasSwitchTheme,
-      _ref7$isLightMode = _ref7.isLightMode,
-      isLightMode = _ref7$isLightMode === void 0 ? true : _ref7$isLightMode,
-      _ref7$switchThemeText = _ref7.switchThemeText,
-      switchThemeText = _ref7$switchThemeText === void 0 ? 'SWITCH THEME' : _ref7$switchThemeText,
-      _ref7$selectedThemeTe = _ref7.selectedThemeText,
-      selectedThemeText = _ref7$selectedThemeTe === void 0 ? '' : _ref7$selectedThemeTe,
-      _ref7$onLogout = _ref7.onLogout,
-      onLogout = _ref7$onLogout === void 0 ? function () {} : _ref7$onLogout,
-      _ref7$onLanguageToggl = _ref7.onLanguageToggle,
-      onLanguageToggle = _ref7$onLanguageToggl === void 0 ? function () {} : _ref7$onLanguageToggl,
-      closeOnClick = _ref7.closeOnClick,
-      _ref7$onThemeToggle = _ref7.onThemeToggle,
-      onThemeToggle = _ref7$onThemeToggle === void 0 ? function () {} : _ref7$onThemeToggle;
+  return isActive && css(_templateObject15$8 || (_templateObject15$8 = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      ", ";\n    }\n  "])), theme.typography.global.mainMenu.subItem.active);
+});
+var FooterMeta = styled.div(_templateObject16$6 || (_templateObject16$6 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  border-top: ", " 1px solid;\n  margin-top: auto;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  font-size: 10px;\n  font-weight: 400;\n  color: rgba(87, 87, 87, 0.5);\n  padding: 10px;\n  padding-left:  ", ";\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.fontFamily.ui;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.styles.global.mainMenu.lines.backgroundColor;
+}, function (_ref9) {
+  var icon = _ref9.icon;
+  return icon !== '' ? '31px;' : '21px;';
+});
+var NavigationContainer$1 = styled.div(_templateObject17$6 || (_templateObject17$6 = _taggedTemplateLiteralLoose(["\n  max-height: 300px;\n  overflow: scroll;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_ref10) {
+  var theme = _ref10.theme;
+  return css(_templateObject18$4 || (_templateObject18$4 = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n  "])), theme.colors.divider);
+});
+var FooterText = styled.div(_templateObject19$4 || (_templateObject19$4 = _taggedTemplateLiteralLoose(["\n  white-space: break-spaces;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 136px;\n  max-width: ", ";\n  color: #585858a5;\n"])), function (_ref11) {
+  var icon = _ref11.icon;
+  return icon !== '' ? '136px;' : '164px;';
+});
+
+var UserMenu = function UserMenu(_ref12) {
+  var _ref12$hasLanguage = _ref12.hasLanguage,
+      hasLanguage = _ref12$hasLanguage === void 0 ? false : _ref12$hasLanguage,
+      _ref12$selectedLangua = _ref12.selectedLanguageText,
+      selectedLanguageText = _ref12$selectedLangua === void 0 ? '' : _ref12$selectedLangua,
+      _ref12$hasLogout = _ref12.hasLogout,
+      hasLogout = _ref12$hasLogout === void 0 ? true : _ref12$hasLogout,
+      _ref12$logoutLink = _ref12.logoutLink,
+      logoutLink = _ref12$logoutLink === void 0 ? '/logout' : _ref12$logoutLink,
+      _ref12$logoutText = _ref12.logoutText,
+      logoutText = _ref12$logoutText === void 0 ? 'Logout' : _ref12$logoutText,
+      _ref12$hasCurrentUser = _ref12.hasCurrentUser,
+      hasCurrentUser = _ref12$hasCurrentUser === void 0 ? true : _ref12$hasCurrentUser,
+      _ref12$currentUserTex = _ref12.currentUserText,
+      currentUserText = _ref12$currentUserTex === void 0 ? 'Current User' : _ref12$currentUserTex,
+      _ref12$accountOptionT = _ref12.accountOptionText,
+      accountOptionText = _ref12$accountOptionT === void 0 ? "Account Options" : _ref12$accountOptionT,
+      _ref12$userSubmenu = _ref12.userSubmenu,
+      userSubmenu = _ref12$userSubmenu === void 0 ? [] : _ref12$userSubmenu,
+      userDrawerBespoke = _ref12.userDrawerBespoke,
+      loggedInUser = _ref12.loggedInUser,
+      _ref12$hasSwitchTheme = _ref12.hasSwitchTheme,
+      hasSwitchTheme = _ref12$hasSwitchTheme === void 0 ? false : _ref12$hasSwitchTheme,
+      _ref12$isLightMode = _ref12.isLightMode,
+      isLightMode = _ref12$isLightMode === void 0 ? true : _ref12$isLightMode,
+      _ref12$switchThemeTex = _ref12.switchThemeText,
+      switchThemeText = _ref12$switchThemeTex === void 0 ? 'SWITCH THEME' : _ref12$switchThemeTex,
+      _ref12$selectedThemeT = _ref12.selectedThemeText,
+      selectedThemeText = _ref12$selectedThemeT === void 0 ? '' : _ref12$selectedThemeT,
+      _ref12$onLogout = _ref12.onLogout,
+      onLogout = _ref12$onLogout === void 0 ? function () {} : _ref12$onLogout,
+      _ref12$onLanguageTogg = _ref12.onLanguageToggle,
+      onLanguageToggle = _ref12$onLanguageTogg === void 0 ? function () {} : _ref12$onLanguageTogg,
+      closeOnClick = _ref12.closeOnClick,
+      _ref12$onThemeToggle = _ref12.onThemeToggle,
+      onThemeToggle = _ref12$onThemeToggle === void 0 ? function () {} : _ref12$onThemeToggle,
+      userDrawerFooter = _ref12.userDrawerFooter,
+      copySuccessMessage = _ref12.copySuccessMessage,
+      includeCopyTitle = _ref12.includeCopyTitle,
+      _ref12$onUserDrawerMe = _ref12.onUserDrawerMetaClick,
+      onUserDrawerMetaClick = _ref12$onUserDrawerMe === void 0 ? function () {} : _ref12$onUserDrawerMe,
+      userDrawerMeta = _ref12.userDrawerMeta,
+      hasUserDrawerMeta = _ref12.hasUserDrawerMeta,
+      hasUserDrawerFooter = _ref12.hasUserDrawerFooter;
+  var icon = userDrawerFooter.icon,
+      title = userDrawerFooter.title;
   var logoutHandler = useCallback(function (e) {
     try {
       e.preventDefault();
@@ -13619,9 +14330,18 @@ var UserMenu = function UserMenu(_ref7) {
       closeOnClick();
     }
   }, [closeOnClick]);
-  return React__default.createElement(Fragment, null, React__default.createElement(DrawerTop, null, hasCurrentUser ? React__default.createElement(CurrentUser, null, React__default.createElement(DrawerHeader, null, currentUserText), loggedInUser) : null, userSubmenu.length > 0 ? React__default.createElement(UserOptions, null, React__default.createElement(DrawerHeader, null, accountOptionText), React__default.createElement(LinkMenu, null, userSubmenu.map(function (_ref8, index) {
-    var text = _ref8.text,
-        href = _ref8.href;
+  return React__default.createElement(Fragment, null, React__default.createElement(DrawerTop, null, hasCurrentUser ? React__default.createElement(CurrentUser, null, React__default.createElement(DrawerHeader, null, currentUserText), loggedInUser) : null, hasUserDrawerMeta ? React__default.createElement(NavigationContainer$1, null, userDrawerMeta === null || userDrawerMeta === void 0 ? void 0 : userDrawerMeta.map(function (item, key) {
+    return React__default.createElement(UserDrawerMeta, Object.assign({
+      onUserDrawerMetaClick: onUserDrawerMetaClick,
+      key: key
+    }, {
+      item: item,
+      includeCopyTitle: includeCopyTitle,
+      copySuccessMessage: copySuccessMessage
+    }));
+  })) : null, userSubmenu.length > 0 ? React__default.createElement(UserOptions, null, React__default.createElement(DrawerHeader, null, accountOptionText), React__default.createElement(LinkMenu, null, userSubmenu.map(function (_ref13, index) {
+    var text = _ref13.text,
+        href = _ref13.href;
     return React__default.createElement(LinkMenuItem, {
       key: index
     }, React__default.createElement(LinkMenuItemA, {
@@ -13641,40 +14361,49 @@ var UserMenu = function UserMenu(_ref7) {
     title: "LANGUAGE / \u8A00\u8A9E",
     subTitle: selectedLanguageText,
     onClickCallback: onLanguageToggle
-  })));
+  }), hasUserDrawerFooter ? React__default.createElement(FooterMeta, {
+    title: title,
+    icon: icon
+  }, icon ? React__default.createElement(IconWrapperFooter, null, React__default.createElement(Icon, {
+    icon: icon,
+    size: 14,
+    color: 'dimmed'
+  })) : null, React__default.createElement(FooterText, {
+    icon: icon
+  }, title)) : null));
 };
 
-var _templateObject$1m, _templateObject2$1d, _templateObject3$14, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$C, _templateObject8$y;
-var Container$U = styled.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 18px 20px 12px 20px;\n  height: 122px;\n"])));
-var ImgWrapper = styled.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n  border-radius: 5px;\n  overflow: hidden;\n  height: 40px;\n  width: 40px;\n  flex-shrink: 0;\n"])));
-var EmptyImg = styled.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n  background-color: hsl(210, 22%, 91%);\n  width: 100%;\n  height: 100%;\n"])));
-var Image$3 = styled.div(_templateObject4$_ || (_templateObject4$_ = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-image: url(", ");\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat; \n  display: ", ";\n"])), function (p) {
+var _templateObject$1o, _templateObject2$1f, _templateObject3$17, _templateObject4$11, _templateObject5$W, _templateObject6$I, _templateObject7$E, _templateObject8$A;
+var Container$W = styled.div(_templateObject$1o || (_templateObject$1o = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 18px 20px 12px 20px;\n  height: 122px;\n"])));
+var ImgWrapper = styled.div(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n  border-radius: 5px;\n  overflow: hidden;\n  height: 40px;\n  width: 40px;\n  flex-shrink: 0;\n"])));
+var EmptyImg = styled.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n  background-color: hsl(210, 22%, 91%);\n  width: 100%;\n  height: 100%;\n"])));
+var Image$2 = styled.div(_templateObject4$11 || (_templateObject4$11 = _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) {
   return p.image;
 }, function (p) {
   return p.image ? 'block' : 'none';
 });
-var InfoContainer = styled.div(_templateObject5$U || (_templateObject5$U = _taggedTemplateLiteralLoose(["\n  margin-left: 20px;\n"])));
-var Title$9 = styled.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  font-weight: 500;\n  color: hsl(0, 0%, 34%);\n"])));
-var Message = styled.div(_templateObject7$C || (_templateObject7$C = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  font-weight: 500;\n  overflow: hidden;\n  color: hsl(0, 0%, 34%);\n  margin: 4px 0;\n  height: 30px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: inline-block;\n  vertical-align: middle;\n"])));
-var TimeMsg = styled.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  font-weight: 500;\n  color: hsl(0, 0%, 67%);\n  margin-top: 15px;\n"])));
+var InfoContainer = styled.div(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n  margin-left: 20px;\n"])));
+var Title$9 = styled.div(_templateObject6$I || (_templateObject6$I = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  font-weight: 500;\n  color: hsl(0, 0%, 34%);\n"])));
+var Message = styled.div(_templateObject7$E || (_templateObject7$E = _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"])));
+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"])));
 
 var NotificationItem = function NotificationItem(_ref) {
   var imgUrl = _ref.imgUrl,
       title = _ref.title,
       message = _ref.message,
       time = _ref.time;
-  return React__default.createElement(Container$U, null, React__default.createElement(ImgWrapper, null, imgUrl ? React__default.createElement(Image$3, {
+  return React__default.createElement(Container$W, null, React__default.createElement(ImgWrapper, null, imgUrl ? React__default.createElement(Image$2, {
     image: imgUrl
   }) : React__default.createElement(EmptyImg, null)), React__default.createElement(InfoContainer, null, React__default.createElement(Title$9, null, title), React__default.createElement(Message, null, message), React__default.createElement(TimeMsg, null, time)));
 };
 
-var _templateObject$1n, _templateObject2$1e, _templateObject3$15;
-var Container$V = styled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var StatusContainer = styled.h2(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n    text-transform: uppercase;\n    padding: 10px 0 10px 20px;\n    font-size: 14px;\n    font-weight: 500;\n    color: hsl(0, 0%, 34%);\n    border-bottom: ", " 1px solid;\n    margin: 0;\n"])), function (_ref) {
+var _templateObject$1p, _templateObject2$1g, _templateObject3$18;
+var Container$X = styled.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var StatusContainer = styled.h2(_templateObject2$1g || (_templateObject2$1g = _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) {
   var theme = _ref.theme;
   return theme.colors.divider;
 });
-var NotificationWrapper = styled.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n  border-bottom: ", " 1px solid;\n"])), function (_ref2) {
+var NotificationWrapper = styled.div(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n  border-bottom: ", " 1px solid;\n"])), function (_ref2) {
   var colors = _ref2.theme.colors;
   return colors.divider;
 });
@@ -13698,21 +14427,21 @@ var NotificationsHistory = function NotificationsHistory(_ref3) {
       unreadNotificationsText = _ref3$unreadNotificat === void 0 ? 'Read' : _ref3$unreadNotificat;
 
   if (read.length === 0 && unread.length === 0) {
-    return React__default.createElement(Container$V, null, React__default.createElement(StatusContainer, null, noNotificationsText));
+    return React__default.createElement(Container$X, null, React__default.createElement(StatusContainer, null, noNotificationsText));
   }
 
-  return React__default.createElement(Container$V, 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')));
+  return React__default.createElement(Container$X, 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')));
 };
 
-var _templateObject$1o, _templateObject2$1f, _templateObject3$16, _templateObject4$$, _templateObject5$V, _templateObject6$H, _templateObject7$D, _templateObject8$z, _templateObject9$t, _templateObject10$n, _templateObject11$h, _templateObject12$d, _templateObject13$b, _templateObject14$9;
-var Container$W = styled.div(_templateObject$1o || (_templateObject$1o = _taggedTemplateLiteralLoose(["\n  z-index: 9;\n  position: sticky;\n  top: 0;\n  align-self: flex-start;\n  height: 65px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"])), function (_ref) {
+var _templateObject$1q, _templateObject2$1h, _templateObject3$19, _templateObject4$12, _templateObject5$X, _templateObject6$J, _templateObject7$F, _templateObject8$B, _templateObject9$v, _templateObject10$q, _templateObject11$i, _templateObject12$e, _templateObject13$d, _templateObject14$b;
+var Container$Y = styled.div(_templateObject$1q || (_templateObject$1q = _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) {
   var theme = _ref.theme,
       colors = _ref.theme.colors;
-  return colors && css(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n    // box-shadow: 5px 7px 10px 0 hsla(205, 16%, 77%, 0.1);\n    background-color:", ";\n  "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.styles.global.mainMenu.background.backgroundColor);
+  return colors && css(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n    // box-shadow: 5px 7px 10px 0 hsla(205, 16%, 77%, 0.1);\n    background-color:", ";\n  "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.styles.global.mainMenu.background.backgroundColor);
 });
-var SearchBar = styled.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n  margin-left: 25px;\n  flex: 0 1 500px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var IconWrapper$3 = styled.div(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n  flex: 0 40px;\n  width: 5px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  > div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])));
-var SearchInput = styled.input(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: ", ";\n  flex: 1;\n  height: 35px;\n  line-height: 35px;\n  border: none;\n  outline: none;\n  background: transparent;\n\n  ", ";\n\n  &::placeholder {\n    font-style: italic;\n    ", ";\n  }\n"])), removeAutoFillStyle, function (_ref2) {
+var SearchBar = styled.div(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n  margin-left: 25px;\n  flex: 0 1 500px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+var IconWrapper$4 = styled.div(_templateObject4$12 || (_templateObject4$12 = _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"])));
+var SearchInput = styled.input(_templateObject5$X || (_templateObject5$X = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: ", ";\n  flex: 1;\n  height: 35px;\n  line-height: 35px;\n  border: none;\n  outline: none;\n  background: transparent;\n\n  ", ";\n\n  &::placeholder {\n    font-style: italic;\n    ", ";\n  }\n"])), removeAutoFillStyle, function (_ref2) {
   var theme = _ref2.theme;
   return theme.fontFamily.data;
 }, function (_ref3) {
@@ -13722,19 +14451,19 @@ var SearchInput = styled.input(_templateObject5$V || (_templateObject5$V = _tagg
   var typography = _ref4.theme.typography;
   return typography.global.topBar.search.placeholder;
 });
-var ButtonArea = styled.div(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n  height: inherit;\n  padding-right: 10px;\n  display: flex;\n"])));
+var ButtonArea = styled.div(_templateObject6$J || (_templateObject6$J = _taggedTemplateLiteralLoose(["\n  height: inherit;\n  padding-right: 10px;\n  display: flex;\n"])));
 var DrawerToggle = styled.button.attrs({
   type: 'button'
-})(_templateObject7$D || (_templateObject7$D = _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) {
+})(_templateObject7$F || (_templateObject7$F = _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) {
   var theme = _ref5.theme;
-  return css(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid transparent;\n    /*", ";*/\n\n    &:hover {\n      border-bottom-color: ", ";\n    }\n\n    transition: border ", " ", ";\n  "])), theme.colors.menu.indicator, theme.colors.menu.hover, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
+  return css(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid transparent;\n    /*", ";*/\n\n    &:hover {\n      border-bottom-color: ", ";\n    }\n\n    transition: border ", " ", ";\n  "])), theme.colors.menu.indicator, theme.colors.menu.hover, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
 }, function (_ref6) {
   var isActive = _ref6.isActive,
       theme = _ref6.theme;
-  return isActive && css(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      border-bottom-color: ", ";\n    }\n  "])), theme.colors.menu.active);
+  return isActive && css(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      border-bottom-color: ", ";\n    }\n  "])), theme.colors.menu.active);
 });
-var DrawerPortalWrapper = styled.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose([""])));
-var Drawer = styled.div(_templateObject11$h || (_templateObject11$h = _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) {
+var DrawerPortalWrapper = styled.div(_templateObject10$q || (_templateObject10$q = _taggedTemplateLiteralLoose([""])));
+var Drawer = styled.div(_templateObject11$i || (_templateObject11$i = _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) {
   var theme = _ref7.theme;
   return theme.fontFamily.ui;
 }, function (_ref8) {
@@ -13748,12 +14477,12 @@ var Drawer = styled.div(_templateObject11$h || (_templateObject11$h = _taggedTem
   return baseWidth ? baseWidth : "200px";
 }, function (_ref11) {
   var theme = _ref11.theme;
-  return css(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n    transition:\n      opacity ", " ", ",\n      right ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
+  return css(_templateObject12$e || (_templateObject12$e = _taggedTemplateLiteralLoose(["\n    transition:\n      opacity ", " ", ",\n      right ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
 }, function (_ref12) {
   var isOpen = _ref12.isOpen;
-  return isOpen && css(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n    right: 0;\n    opacity: 1;\n    visibility: visible;\n  "])));
+  return isOpen && css(_templateObject13$d || (_templateObject13$d = _taggedTemplateLiteralLoose(["\n    right: 0;\n    opacity: 1;\n    visibility: visible;\n  "])));
 });
-var NotificationsContainer = styled.div(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n    overflow-y: scroll;\n    margin-right: -17px;\n"])));
+var NotificationsContainer = styled.div(_templateObject14$b || (_templateObject14$b = _taggedTemplateLiteralLoose(["\n    overflow-y: scroll;\n    margin-right: -17px;\n"])));
 
 var TopBar = function TopBar(_ref13) {
   var _ref13$hasNotificatio = _ref13.hasNotifications,
@@ -13797,7 +14526,15 @@ var TopBar = function TopBar(_ref13) {
       _ref13$onLanguageTogg = _ref13.onLanguageToggle,
       onLanguageToggle = _ref13$onLanguageTogg === void 0 ? function () {} : _ref13$onLanguageTogg,
       _ref13$onThemeToggle = _ref13.onThemeToggle,
-      onThemeToggle = _ref13$onThemeToggle === void 0 ? function () {} : _ref13$onThemeToggle;
+      onThemeToggle = _ref13$onThemeToggle === void 0 ? function () {} : _ref13$onThemeToggle,
+      userDrawerFooter = _ref13.userDrawerFooter,
+      userDrawerMeta = _ref13.userDrawerMeta,
+      _ref13$onUserDrawerMe = _ref13.onUserDrawerMetaClick,
+      onUserDrawerMetaClick = _ref13$onUserDrawerMe === void 0 ? function () {} : _ref13$onUserDrawerMe,
+      hasUserDrawerMeta = _ref13.hasUserDrawerMeta,
+      copySuccessMessage = _ref13.copySuccessMessage,
+      includeCopyTitle = _ref13.includeCopyTitle,
+      hasUserDrawerFooter = _ref13.hasUserDrawerFooter;
 
   var _useState = useState(null),
       openDrawer = _useState[0],
@@ -13813,7 +14550,7 @@ var TopBar = function TopBar(_ref13) {
     });
   };
 
-  return React__default.createElement(Container$W, null, hasSearch ? React__default.createElement(SearchBar, null, React__default.createElement(IconWrapper$3, null, React__default.createElement(Icon, {
+  return React__default.createElement(Container$Y, null, hasSearch ? React__default.createElement(SearchBar, null, React__default.createElement(IconWrapper$4, null, React__default.createElement(Icon, {
     icon: 'Search',
     size: 18,
     color: 'dimmed'
@@ -13862,7 +14599,14 @@ var TopBar = function TopBar(_ref13) {
     isLightMode: isLightMode,
     switchThemeText: switchThemeText,
     selectedThemeText: selectedThemeText,
-    onThemeToggle: onThemeToggle
+    onThemeToggle: onThemeToggle,
+    onUserDrawerMetaClick: onUserDrawerMetaClick,
+    userDrawerFooter: userDrawerFooter,
+    userDrawerMeta: userDrawerMeta,
+    hasUserDrawerMeta: hasUserDrawerMeta,
+    copySuccessMessage: copySuccessMessage,
+    includeCopyTitle: includeCopyTitle,
+    hasUserDrawerFooter: hasUserDrawerFooter
   }))), hasNotifications ? React__default.createElement(Drawer, {
     isOpen: openDrawer === 'notifications',
     baseWidth: '300px'
@@ -13892,8 +14636,8 @@ var Tabs = function Tabs(_ref) {
   }, children);
 };
 
-var _templateObject$1p;
-var TabListWrapper = styled.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n"])));
+var _templateObject$1r;
+var TabListWrapper = styled.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n"])));
 
 var TabList = function TabList(_ref) {
   var children = _ref.children,
@@ -13910,11 +14654,11 @@ var TabList = function TabList(_ref) {
 
 var _excluded$E = ["children", "tabFor", "onClick"];
 
-var _templateObject$1q, _templateObject2$1g, _templateObject3$17;
-var TabComponent = styled.div(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteralLoose(["\n  margin-right: 39px;\n  display: flex;\n  align-items: center;\n  line-height: 20px;\n"])));
-var TabLabel = styled.label(_templateObject2$1g || (_templateObject2$1g = _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) {
+var _templateObject$1s, _templateObject2$1i, _templateObject3$1a;
+var TabComponent = styled.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose(["\n  margin-right: 39px;\n  display: flex;\n  align-items: center;\n  line-height: 20px;\n"])));
+var TabLabel = styled.label(_templateObject2$1i || (_templateObject2$1i = _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) {
   var theme = _ref.theme;
-  return css(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.ui);
+  return css(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.ui);
 }, function (_ref2) {
   var active = _ref2.active;
   return active ? '600' : '500';
@@ -13949,8 +14693,8 @@ var Tab = function Tab(_ref5) {
 
 var _excluded$F = ["children", "tabId"];
 
-var _templateObject$1r;
-var Container$X = styled.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose(["\n"])));
+var _templateObject$1t;
+var Container$Z = styled.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n"])));
 
 var TabContent = function TabContent(_ref) {
   var children = _ref.children,
@@ -13960,20 +14704,20 @@ var TabContent = function TabContent(_ref) {
   var _useContext = useContext(TabContext),
       selected = _useContext.selected;
 
-  return selected === tabId ? React__default.createElement(Container$X, Object.assign({}, props), children) : null;
+  return selected === tabId ? React__default.createElement(Container$Z, Object.assign({}, props), children) : null;
 };
 
 var _excluded$G = ["tabFor", "icon", "closeId", "counter", "status"];
 
-var _templateObject$1s, _templateObject2$1h, _templateObject3$18, _templateObject4$10;
-var Container$Y = styled.button(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose(["\n  ", "\n  flex-basis: auto;\n  flex-grow: 1;\n"])), resetButtonStyles);
-var LinkTab = styled.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n\n  ", ";\n\n  ", "\n"])), function (_ref) {
+var _templateObject$1u, _templateObject2$1j, _templateObject3$1b, _templateObject4$13;
+var Container$_ = styled.button(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose(["\n  ", "\n  flex-basis: auto;\n  flex-grow: 1;\n"])), resetButtonStyles);
+var LinkTab = styled.div(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n\n  ", ";\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(_templateObject3$18 || (_templateObject3$18 = _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);
+  return css(_templateObject3$1b || (_templateObject3$1b = _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);
 }, function (_ref2) {
   var isActive = _ref2.isActive,
       theme = _ref2.theme;
-  return isActive && css(_templateObject4$10 || (_templateObject4$10 = _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);
+  return isActive && css(_templateObject4$13 || (_templateObject4$13 = _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);
 });
 
 var MobileTab = function MobileTab(_ref3) {
@@ -13992,7 +14736,7 @@ var MobileTab = function MobileTab(_ref3) {
     var newValue = selected === tabId ? closeId : tabId;
     setSelected(newValue);
   }, [closeId, selected, setSelected]);
-  return React__default.createElement(Container$Y, Object.assign({}, props, {
+  return React__default.createElement(Container$_, Object.assign({}, props, {
     onClick: function onClick() {
       return onChangeTab(tabFor);
     }
@@ -14007,23 +14751,23 @@ var MobileTab = function MobileTab(_ref3) {
 
 var _excluded$H = ["icon", "title", "subtitle", "tabFor"];
 
-var _templateObject$1t, _templateObject2$1i, _templateObject3$19, _templateObject4$11, _templateObject5$W, _templateObject6$I;
-var Container$Z = styled.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: 22px;\n  padding-bottom: 7px;\n  height: 60px;\n  cursor: pointer;\n\n  ", ";\n  ", " {\n    margin-left: 2px;\n    flex-shrink: 0;\n  }\n"])), function (_ref) {
+var _templateObject$1v, _templateObject2$1k, _templateObject3$1c, _templateObject4$14, _templateObject5$Y, _templateObject6$K;
+var Container$$ = styled.div(_templateObject$1v || (_templateObject$1v = _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) {
   var active = _ref.active;
-  return active ? css(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid hsl(196, 100%, 40%);\n    "]))) : css(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid transparent;\n  "])));
+  return active ? css(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid hsl(196, 100%, 40%);\n    "]))) : css(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid transparent;\n  "])));
 }, IconWrapper);
-var Title$a = styled.div(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-family: ", ";\n  letter-spacing: 0.09px;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 5px;\n  flex-shrink: 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])), function (_ref2) {
+var Title$a = styled.div(_templateObject4$14 || (_templateObject4$14 = _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) {
   var theme = _ref2.theme;
   return theme.fontFamily.ui;
 }, function (_ref3) {
   var active = _ref3.active;
   return active ? 'hsl(196, 100%, 40%)' : 'hsl(0, 0%, 46%)';
 });
-var SubTitle$2 = styled.div(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  font-family: ", ";\n  font-style: italic;\n  color: hsla(195, 10%, 52%, 0.72);\n  flex-shrink: 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])), function (_ref4) {
+var SubTitle$2 = styled.div(_templateObject5$Y || (_templateObject5$Y = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  font-family: ", ";\n  font-style: italic;\n  color: hsla(195, 10%, 52%, 0.72);\n  flex-shrink: 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.fontFamily.data;
 });
-var TextGroup$1 = styled.div(_templateObject6$I || (_templateObject6$I = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  margin-right: 20px;\n"])));
+var TextGroup$1 = styled.div(_templateObject6$K || (_templateObject6$K = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  margin-right: 20px;\n"])));
 
 var TabWithIcon = function TabWithIcon(_ref5) {
   var icon = _ref5.icon,
@@ -14040,7 +14784,7 @@ var TabWithIcon = function TabWithIcon(_ref5) {
     setSelected(tabId);
   }, [setSelected]);
   var active = selected === tabFor;
-  return React__default.createElement(Container$Z, Object.assign({}, {
+  return React__default.createElement(Container$$, Object.assign({}, {
     active: active
   }, props, {
     onClick: function onClick() {
@@ -14057,9 +14801,9 @@ var TabWithIcon = function TabWithIcon(_ref5) {
   }), title), subtitle && React__default.createElement(SubTitle$2, null, subtitle)));
 };
 
-var _templateObject$1u, _templateObject2$1j;
-var Container$_ = styled.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose([""])));
-var TabListWrapper$1 = styled.div(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n  padding-top: 10px;\n  padding-left: ", ";\n  box-shadow: 0 -5px 5px 0 hsla(0, 0%, 0%, 0.01);\n  border-bottom: 1px solid hsl(0, 0%, 89%);\n  overflow-y: auto;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none;  /* Internet Explorer 10+ */\n    &::-webkit-scrollbar { /* WebKit */\n    width: 0;\n    height: 0;\n  }\n"])), function (_ref) {
+var _templateObject$1w, _templateObject2$1l;
+var Container$10 = styled.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose([""])));
+var TabListWrapper$1 = styled.div(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n  padding-top: 10px;\n  padding-left: ", ";\n  box-shadow: 0 -5px 5px 0 hsla(0, 0%, 0%, 0.01);\n  border-bottom: 1px solid hsl(0, 0%, 89%);\n  overflow-y: auto;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none;  /* Internet Explorer 10+ */\n    &::-webkit-scrollbar { /* WebKit */\n    width: 0;\n    height: 0;\n  }\n"])), function (_ref) {
   var paddingLeft = _ref.paddingLeft;
   return paddingLeft ? paddingLeft : '87px';
 });
@@ -14068,7 +14812,7 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
   var defaultTabId = _ref2.defaultTabId,
       tabList = _ref2.tabList,
       paddingLeft = _ref2.paddingLeft;
-  return React__default.createElement(Container$_, null, React__default.createElement(Tabs, null, React__default.createElement(TabListWrapper$1, Object.assign({}, {
+  return React__default.createElement(Container$10, null, React__default.createElement(Tabs, null, React__default.createElement(TabListWrapper$1, Object.assign({}, {
     paddingLeft: paddingLeft
   }), React__default.createElement(TabList, Object.assign({}, {
     defaultTabId: defaultTabId
@@ -14097,13 +14841,13 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
 
 var _excluded$I = ["closeId", "closeText"];
 
-var _templateObject$1v, _templateObject2$1k, _templateObject3$1a, _templateObject4$12;
-var StyledButton$6 = styled.button(_templateObject$1v || (_templateObject$1v = _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) {
+var _templateObject$1x, _templateObject2$1m, _templateObject3$1d, _templateObject4$15;
+var StyledButton$6 = styled.button(_templateObject$1x || (_templateObject$1x = _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) {
   var theme = _ref.theme;
-  return css(_templateObject2$1k || (_templateObject2$1k = _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);
+  return css(_templateObject2$1m || (_templateObject2$1m = _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);
 }, MOBILE_CLOSE_HEIGHT);
-var IconContainer$2 = styled.div(_templateObject3$1a || (_templateObject3$1a = _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"])));
-var TextWrapper = styled.div(_templateObject4$12 || (_templateObject4$12 = _taggedTemplateLiteralLoose(["\n  text-transform: uppercase;\n"])));
+var IconContainer$2 = styled.div(_templateObject3$1d || (_templateObject3$1d = _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"])));
+var TextWrapper = styled.div(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose(["\n  text-transform: uppercase;\n"])));
 
 var CloseButton$1 = function CloseButton(_ref2) {
   var closeId = _ref2.closeId,
@@ -14125,9 +14869,9 @@ var CloseButton$1 = function CloseButton(_ref2) {
   })), React__default.createElement(TextWrapper, null, closeText));
 };
 
-var _templateObject$1w, _templateObject2$1l;
-var Container$$ = styled.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n  position: relative;\n  min-height: calc(100vh - ", "px);\n  width: 100%;\n  overflow-y: scroll;\n"])), MOBILE_NAVBAR_HEIGHT + MOBILE_CLOSE_HEIGHT);
-var ContentWrapper = styled.div(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n"])));
+var _templateObject$1y, _templateObject2$1n;
+var Container$11 = styled.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose(["\n  position: relative;\n  min-height: calc(100vh - ", "px);\n  width: 100%;\n  overflow-y: scroll;\n"])), MOBILE_NAVBAR_HEIGHT + MOBILE_CLOSE_HEIGHT);
+var ContentWrapper = styled.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n"])));
 
 var MobileNavbarContent = function MobileNavbarContent(_ref) {
   var closeId = _ref.closeId,
@@ -14136,14 +14880,14 @@ var MobileNavbarContent = function MobileNavbarContent(_ref) {
   var _useContext = useContext(TabContext),
       selected = _useContext.selected;
 
-  return selected === closeId ? null : React__default.createElement(Container$$, null, React__default.createElement(ContentWrapper, null, children));
+  return selected === closeId ? null : React__default.createElement(Container$11, null, React__default.createElement(ContentWrapper, null, children));
 };
 
-var _templateObject$1x, _templateObject2$1m, _templateObject3$1b;
-var Container$10 = styled.div(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose([""])));
-var ItemWrapper = styled.div(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n  padding: 14px 0;\n  ", ";\n"])), function (_ref) {
+var _templateObject$1z, _templateObject2$1o, _templateObject3$1e;
+var Container$12 = styled.div(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose([""])));
+var ItemWrapper = styled.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n  padding: 14px 0;\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", "\n  "])), theme.colors.divider);
+  return css(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", "\n  "])), theme.colors.divider);
 });
 
 var MobileMenu = function MobileMenu(_ref2) {
@@ -14186,7 +14930,7 @@ var MobileMenu = function MobileMenu(_ref2) {
   var handleCloseMenu = useCallback(function () {
     setSelected(closeId);
   }, [closeId, setSelected]);
-  return React__default.createElement(Container$10, null, content.items.map(function (item, key) {
+  return React__default.createElement(Container$12, null, content.items.map(function (item, key) {
     return React__default.createElement(ItemWrapper, {
       key: key,
       "data-key": key
@@ -14214,10 +14958,10 @@ var MobileMenu = function MobileMenu(_ref2) {
   })));
 };
 
-var _templateObject$1y, _templateObject2$1n, _templateObject3$1c;
-var Logo$1 = styled(Link)(_templateObject$1y || (_templateObject$1y = _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);
-var LogoMark$1 = styled.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n  margin-right: 15px;\n"])));
-var SVGObject$1 = styled.object(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose([""])));
+var _templateObject$1A, _templateObject2$1p, _templateObject3$1f;
+var Logo$1 = styled(Link)(_templateObject$1A || (_templateObject$1A = _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);
+var LogoMark$1 = styled.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n  margin-right: 15px;\n"])));
+var SVGObject$1 = styled.object(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose([""])));
 
 var MobileLogoLink = function MobileLogoLink(_ref) {
   var _ref$home = _ref.home,
@@ -14239,8 +14983,10 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
   }) : React__default.createElement(SvgLogoMark, null)));
 };
 
-var _templateObject$1z;
-var Container$11 = styled.div(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n"])), function (_ref) {
+var _excluded$J = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
+
+var _templateObject$1B;
+var Container$13 = styled.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.styles.global.mainMenu.background;
 });
@@ -14255,7 +15001,8 @@ var MobileUserMenu = function MobileUserMenu(_ref2) {
       userDrawerBespoke = _ref2.userDrawerBespoke,
       loggedInUser = _ref2.loggedInUser,
       onLogout = _ref2.onLogout,
-      onLanguageToggle = _ref2.onLanguageToggle;
+      onLanguageToggle = _ref2.onLanguageToggle,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$J);
 
   var _useContext = useContext(TabContext),
       setSelected = _useContext.setSelected;
@@ -14263,7 +15010,7 @@ var MobileUserMenu = function MobileUserMenu(_ref2) {
   var handleCloseMenu = useCallback(function () {
     setSelected(closeId);
   }, [closeId, setSelected]);
-  return React__default.createElement(Container$11, null, React__default.createElement(UserMenu, Object.assign({}, {
+  return React__default.createElement(Container$13, null, React__default.createElement(UserMenu, Object.assign({}, _extends({
     hasLanguage: hasLanguage,
     hasLogout: hasLogout,
     logoutLink: logoutLink,
@@ -14273,22 +15020,24 @@ var MobileUserMenu = function MobileUserMenu(_ref2) {
     loggedInUser: loggedInUser,
     onLogout: onLogout,
     onLanguageToggle: onLanguageToggle
-  }, {
+  }, props), {
     closeOnClick: handleCloseMenu
   })));
 };
 
-var _templateObject$1A, _templateObject2$1o;
+var _excluded$K = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
+
+var _templateObject$1C, _templateObject2$1q;
 var CLOSE_ID = 'closeMenu';
 var NOTI_TAB = 'notifications';
 var USER_TAB = 'user';
 var MENU_TAB = 'menu';
 var CUSTOM_TAB = 'custom';
-var Container$12 = styled.nav(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  position: sticky;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 99;\n"])), function (_ref) {
+var Container$14 = styled.nav(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  position: sticky;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 99;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.styles.global.mainMenu.background.backgroundColor;
 });
-var HeaderContainer = styled.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  height: ", "px;\n  border-bottom: ", " 1px solid;\n\n  ", " {\n    flex-basis: 0;\n    flex-grow: 3;\n  }\n"])), MOBILE_NAVBAR_HEIGHT, function (_ref2) {
+var HeaderContainer = styled.div(_templateObject2$1q || (_templateObject2$1q = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  height: ", "px;\n  border-bottom: ", " 1px solid;\n\n  ", " {\n    flex-basis: 0;\n    flex-grow: 3;\n  }\n"])), MOBILE_NAVBAR_HEIGHT, function (_ref2) {
   var theme = _ref2.theme;
   return theme.colors.divider;
 }, TabListWrapper);
@@ -14312,8 +15061,10 @@ var MobileNavbar = function MobileNavbar(_ref3) {
       notificationsHistory = _ref3.notificationsHistory,
       customDrawer = _ref3.customDrawer,
       onLogout = _ref3.onLogout,
-      onLanguageToggle = _ref3.onLanguageToggle;
-  return React__default.createElement(Container$12, null, React__default.createElement(Tabs, null, React__default.createElement(HeaderContainer, null, React__default.createElement(MobileLogoLink, Object.assign({}, {
+      onLanguageToggle = _ref3.onLanguageToggle,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded$K);
+
+  return React__default.createElement(Container$14, null, React__default.createElement(Tabs, null, React__default.createElement(HeaderContainer, null, React__default.createElement(MobileLogoLink, Object.assign({}, {
     home: home,
     logoMark: logoMark
   }, {
@@ -14343,7 +15094,7 @@ var MobileNavbar = function MobileNavbar(_ref3) {
     tabId: NOTI_TAB
   }, notificationsHistory && hasNotifications ? React__default.createElement(NotificationsHistory, Object.assign({}, notificationsHistory)) : null), React__default.createElement(TabContent, {
     tabId: USER_TAB
-  }, React__default.createElement(MobileUserMenu, Object.assign({}, {
+  }, React__default.createElement(MobileUserMenu, Object.assign({}, _extends({
     hasLanguage: hasLanguage,
     hasLogout: hasLogout,
     logoutLink: logoutLink,
@@ -14353,7 +15104,7 @@ var MobileNavbar = function MobileNavbar(_ref3) {
     loggedInUser: loggedInUser,
     onLogout: onLogout,
     onLanguageToggle: onLanguageToggle
-  }, {
+  }, props), {
     closeId: CLOSE_ID
   }))), React__default.createElement(TabContent, {
     tabId: MENU_TAB
@@ -14370,7 +15121,7 @@ var MobileNavbar = function MobileNavbar(_ref3) {
   })))));
 };
 
-var _excluded$J = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "children", "onMenuToggle"];
+var _excluded$L = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "children", "onMenuToggle"];
 
 var GlobalUI = function GlobalUI(_ref) {
   var content = _ref.content,
@@ -14385,7 +15136,7 @@ var GlobalUI = function GlobalUI(_ref) {
       maxWidth = _ref.maxWidth,
       children = _ref.children,
       onMenuToggle = _ref.onMenuToggle,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
 
   var _useBreakpoints = useBreakpoints(),
       isLarge = _useBreakpoints.isLarge;
@@ -14398,33 +15149,32 @@ var GlobalUI = function GlobalUI(_ref) {
     logoText: logoText,
     supportUrl: supportUrl,
     defaultMenuOpen: defaultMenuOpen,
-    canAlwaysPin: canAlwaysPin
+    canAlwaysPin: canAlwaysPin,
+    onMenuToggle: onMenuToggle
   })), React__default.createElement(MainContainer, null, React__default.createElement(TopBar, Object.assign({}, _extends({}, props))), React__default.createElement(ContentArea, Object.assign({}, {
     maxWidth: maxWidth,
-    paddingOverride: paddingOverride,
-    onMenuToggle: onMenuToggle
+    paddingOverride: paddingOverride
   }), children))) : React__default.createElement(MobileLayout, null, React__default.createElement(MobileNavbar, Object.assign({}, _extends({
     content: content,
     home: home,
     logoMark: logoMark,
     supportUrl: supportUrl,
-    defaultMenuOpen: defaultMenuOpen,
-    onMenuToggle: onMenuToggle
+    defaultMenuOpen: defaultMenuOpen
   }, props))), React__default.createElement(ContentArea, null, children));
 };
 
-var _excluded$K = ["children"];
+var _excluded$M = ["children"];
 
-var _templateObject$1B, _templateObject2$1p, _templateObject3$1d, _templateObject4$13, _templateObject5$X, _templateObject6$J, _templateObject7$E, _templateObject8$A, _templateObject9$u;
-var Container$13 = styled.div(_templateObject$1B || (_templateObject$1B = _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"])));
-var LogoContainer = styled.div(_templateObject2$1p || (_templateObject2$1p = _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"])));
-var LogoTopText = styled.div(_templateObject3$1d || (_templateObject3$1d = _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"])));
-var LogoBottomText = styled.div(_templateObject4$13 || (_templateObject4$13 = _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"])));
-var SidebarBox = styled.div(_templateObject5$X || (_templateObject5$X = _taggedTemplateLiteralLoose(["\n  position: relative;\n  border-bottom: 1px solid hsla(0, 0%, 84%, 50%);\n  padding: 22px 20px 21px 20px;\n"])));
-var SidebarHeading = styled.div(_templateObject6$J || (_templateObject6$J = _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"])));
-var SidebarLinkHeading = styled.div(_templateObject7$E || (_templateObject7$E = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.35px;\n  color: hsl(0, 0%, 50%);\n"])));
-var BackLink = styled(Link)(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.35px;\n  color: hsl(0, 0%, 50%);\n"])));
-var SLink = styled(Link)(_templateObject9$u || (_templateObject9$u = _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"])));
+var _templateObject$1D, _templateObject2$1r, _templateObject3$1g, _templateObject4$16, _templateObject5$Z, _templateObject6$L, _templateObject7$G, _templateObject8$C, _templateObject9$w;
+var Container$15 = styled.div(_templateObject$1D || (_templateObject$1D = _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"])));
+var LogoContainer = styled.div(_templateObject2$1r || (_templateObject2$1r = _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"])));
+var LogoTopText = styled.div(_templateObject3$1g || (_templateObject3$1g = _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"])));
+var LogoBottomText = styled.div(_templateObject4$16 || (_templateObject4$16 = _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"])));
+var SidebarBox = styled.div(_templateObject5$Z || (_templateObject5$Z = _taggedTemplateLiteralLoose(["\n  position: relative;\n  border-bottom: 1px solid hsla(0, 0%, 84%, 50%);\n  padding: 22px 20px 21px 20px;\n"])));
+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"])));
+var SidebarLinkHeading = styled.div(_templateObject7$G || (_templateObject7$G = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.35px;\n  color: hsl(0, 0%, 50%);\n"])));
+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"])));
+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"])));
 var SidebarLink = function SidebarLink(_ref) {
   var title = _ref.title,
       to = _ref.to;
@@ -14440,10 +15190,10 @@ var Logo$2 = function Logo(_ref2) {
 
 var Sidebar = function Sidebar(_ref3) {
   var children = _ref3.children,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded$K);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded$M);
 
-  return React__default.createElement(Container$13, Object.assign({}, props), children);
+  return React__default.createElement(Container$15, Object.assign({}, props), children);
 };
 
-export { ActionButtons, ActionsBar, AlertBar, AlertWrapper, AreaUploadManager, AvatarUploader, BackLink, BasicSearchInput, Button, ButtonWithIcon, ButtonWithLoading, CameraPanelWrapper, CameraPanels, Checkbox, ConfirmationModal, Content, Controls, CropTool, DatePicker, DebouncedSearcher, DropArea, DurationSlider, EditCell, FilterBar, FilterButton, FilterDropdown, FilterDropdownContainer, FilterInputs, FiltersResults, Form, GlobalUI, Icon, IconButton$2 as IconButton, Input, InputFileButton, IntroductionText, Label, Layout, LineReducer, LineSetContext, LineUI, LineUI$1 as LineUIRTC, LineUIVideo, Logo$2 as Logo, MainContainer, MainMenu, MediaBox, ModalContext, ModalProvider, MultilineContent, Notification, NotificationProvider, PTZContext, PTZProvider, reducer as PTZReducer, PageHeader, PageTitle, PasswordField, PercentageSlider, RadioButton, SelectField, SelectWrapper, Sidebar, SidebarBox, SidebarHeading, SidebarLink, SidebarLinkHeading, SliderInput, SmallInput, SortDropdown, Spinner, StatusIcon, Switch, Tab, TabContent, TabContext, TabList, TabWithIcon, TableHeaderTitle, TableRowThumbnail, Tabs, TabsWithIconBar, Tag, TagList, TagListWrapper, TextArea, TextAreaField, TextField, TopBar, TypeTable, WebRTCPlayer as WebRTCClient, dark as darkTheme, isDateInterval, isFilterItem, light as lightTheme, resetButtonStyles, themeFallbackHelper, useClickOutside, useCopyToClipboard, useInterval, useMediaModal, useModal, useNotification, usePTZ, usePoll, useTitle, useTo };
+export { ActionButtons, ActionsBar, AlertBar, AlertWrapper, AreaUploadManager, AvatarUploader, BackLink, BasicSearchInput, Button, ButtonWithIcon, ButtonWithLoading, CameraPanelWrapper, CameraPanels, Checkbox, ConfirmationModal, Content, Controls, CropTool, DatePicker, DebouncedSearcher, DropArea, DurationSlider, EditCell, FilterBar, FilterButton, FilterDropdown, FilterDropdownContainer, FilterInputs, FilterLayout, FiltersResults, Form, GlobalUI, Icon, IconButton$2 as IconButton, Input, InputFileButton, IntroductionText, Label, Layout, LineReducer, LineSetContext, LineUI, LineUI$1 as LineUIRTC, LineUIVideo, Logo$2 as Logo, MainContainer, MainMenu, MediaBox, ModalContext, ModalProvider, MultilineContent, Notification, NotificationProvider, PTZContext, PTZProvider, reducer as PTZReducer, PageHeader, PageTitle, PasswordField, PercentageSlider, RadioButton, SelectField, SelectWrapper, Sidebar, SidebarBox, SidebarHeading, SidebarLink, SidebarLinkHeading, SliderInput, SmallInput, SortDropdown, Spinner, StatusIcon, Switch, Tab, TabContent, TabContext, TabList, TabWithIcon, TableHeaderTitle, TableRowThumbnail, Tabs, TabsWithIconBar, Tag, TagList, TagListWrapper, TextArea, TextAreaField, TextField, TopBar, TypeTable, WebRTCPlayer as WebRTCClient, dark as darkTheme, isDateInterval, isFilterItem, light as lightTheme, resetButtonStyles, themeFallbackHelper, useClickOutside, useCopyToClipboard, useInterval, useMediaModal, useModal, useNotification, usePTZ, usePoll, useTitle, useTo };
 //# sourceMappingURL=index.modern.js.map