scorer-ui-kit 2.0.4 → 2.0.6

package/dist/index.js

@@ -1501,6 +1501,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%)'
@@ -1546,6 +1549,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%)'
@@ -1591,6 +1597,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%)'
@@ -3675,6 +3684,22 @@ function CheckMark(props) {
   }));
 }
 
+function SvgNoImage() {
+  return React.createElement("svg", {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: '55',
+    height: '60',
+    fill: 'none',
+    viewBox: '5 80 300 174'
+  }, React.createElement("path", {
+    fill: '#F0F0F0',
+    d: 'M0 0H320V240H0z'
+  }), React.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;
 
@@ -4070,7 +4095,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;
@@ -4169,7 +4199,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,
@@ -4185,7 +4215,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(React.Fragment, null, marksElements, React__default.createElement("datalist", {
@@ -4210,6 +4240,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);
@@ -4283,7 +4315,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,
@@ -4418,13 +4450,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__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose([""])));
-var Headers$1 = styled__default.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  color: hsl(207, 5%, 57%);\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 20px;\n  padding: 0 6px;\n"])));
-var ValueTitle$1 = styled__default(Label)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
+var Headers$1 = styled__default.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  color: hsl(207, 5%, 57%);\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 20px;\n  ", ";\n"])), function (_ref) {
+  var allMarkCentered = _ref.allMarkCentered;
+  return allMarkCentered ? "padding: 0;" : "padding: 0 6px;";
+});
+var ValueTitle$1 = styled__default(Label)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n"])), function (_ref2) {
+  var theme = _ref2.theme;
   return theme.fontFamily.data;
 });
 
@@ -4452,13 +4487,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 = React.useState(defaultValue),
       selectedValue = _useState[0],
@@ -4471,10 +4508,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, {
@@ -4482,8 +4521,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
   })));
 };
 
@@ -4614,6 +4655,17 @@ var DropArea = function DropArea(_ref3) {
 
     setInDropZone(false);
   }, [dropCallback]);
+  var handleWindowDragAndDrop = React.useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+  React.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({}, {
@@ -5502,13 +5554,10 @@ var Container$g = styled__default.div(_templateObject$r || (_templateObject$r =
   return theme.fontFamily.ui;
 });
 var StyledDropArea = styled__default(DropArea)(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n"])));
-var InputButtonWrapper = styled__default.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n  z-index: 99;\n  margin-top: 20px;\n"])));
-var FilesUploadGroup = styled__default.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  border-radius: 5px;\n  position: relative;\n  ", ";\n"])), function (_ref2) {
+var InputButtonWrapper = styled__default.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n  z-index: 99;\n  margin-top: 20px;\n  display: flex;\n  gap: 20px;\n"])));
+var FilesUploadGroup = styled__default.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  border-radius: 5px;\n  background-color: hsl(204, 15%, 94%);\n  position: relative;\n"])), function (_ref2) {
   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__default.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  color: hsl(208, 8%, 38%);\n  font-size: 20px;\n"])));
 var Description = styled__default.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 2.14;\n  text-align: center;\n  color: hsl(207, 5%, 57%);\n  margin-top: 10px;\n  max-width: 386px;\n"])));
@@ -5563,27 +5612,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 = React.useState(null),
       files = _useState[0],
       setFiles = _useState[1];
 
   var handleFiles = React.useCallback(function (newFiles) {
-    console.log('files received', newFiles);
-
     if (newFiles === null) {
       return;
     }
@@ -5595,6 +5650,10 @@ var AreaUploadManager = function AreaUploadManager(_ref4) {
     setFiles(goodFiles);
     onChangeCallback(goodFiles, rejectedFiles);
   }, [files, allowedFileTypes, onChangeCallback]);
+  var clearFiles = React.useCallback(function () {
+    setFiles(null);
+    clearFilesCallback();
+  }, [clearFilesCallback]);
   return React__default.createElement(Container$g, null, React__default.createElement(FilesUploadGroup, {
     hasFiles: files !== null
   }, React__default.createElement(StyledDropArea, {
@@ -5606,8 +5665,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(React.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"];
@@ -5629,7 +5697,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__default.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (_ref) {
   var hide = _ref.hide;
   return hide && styled.css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n    display: none;\n  "])));
@@ -5649,41 +5717,117 @@ var Label$1 = styled__default.label(_templateObject3$o || (_templateObject3$o =
 });
 var Item = styled__default.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  padding: 12px;\n  display: flex;\n  justify-content: left;\n"])));
 var IconWrap = styled__default.div(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  flex: 0 0 40px;\n  padding-top: 2px;\n"])));
-var Input$1 = styled__default.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__default.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 styled.css(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    background-color: ", ";\n  "])), theme.fontFamily.data, theme.styles.form.input["default"].normal.backgroundColor);
+  return styled.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 && styled.css(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n    border-color: transparent;\n  "])));
-});
-var TimeColon = styled__default.div(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n  flex: 0 0 20px;\n"])));
-var InputWrap = styled__default.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__default.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  flex: 0 0 20px;\n  text-align: center;\n"])));
+var InputWrap = styled__default.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 = React.useState(dateFns.format(date, "mm")),
       displayHours = _useState[0],
@@ -5693,24 +5837,42 @@ var DateTimeBlock = function DateTimeBlock(_ref13) {
       displayMinutes = _useState2[0],
       setDisplayMinutes = _useState2[1];
 
-  var setDateHours = React.useCallback(function (_ref14) {
-    var value = _ref14.target.value;
+  var setDateHours = React.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(dateFns.min([dateFns.endOfDay(date), dateFns.set(date, {
-      hours: Number(value),
-      minutes: Number(displayMinutes),
+      hours: newHour,
+      minutes: newMin,
       seconds: 0,
       milliseconds: 0
     })]));
-  }, [date, displayMinutes, setDateCallback]);
-  var setDateMinutes = React.useCallback(function (_ref15) {
-    var value = _ref15.target.value;
+  }, [allowAfterMidnight, date, displayMinutes, hasDate, setDateCallback]);
+  var setDateMinutes = React.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(dateFns.min([dateFns.endOfDay(date), dateFns.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]);
   React.useEffect(function () {
     if (allowAfterMidnight && dateFns.isEqual(date, dateFns.endOfDay(date))) {
       setDisplayHours('24');
@@ -5727,33 +5889,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: dateFns.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 {
@@ -5796,7 +5970,7 @@ var CurrentMonth = styled__default.div(_templateObject10$c || (_templateObject10
   var theme = _ref7.theme;
   return theme.typography.filters.datepicker.focusedYear;
 });
-var IconWrap$1 = styled__default.div(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose([""])));
+var IconWrap$1 = styled__default.div(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose([""])));
 var PaginateMonth = styled__default.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"];
@@ -5918,6 +6092,11 @@ var DatePicker = function DatePicker(_ref27) {
       setWeeksOfMonth = _useState4[1];
 
   var isInitialMount = React.useRef(true);
+
+  var _useState5 = React.useState(true),
+      isTimeRangeValid = _useState5[0],
+      setIsTimeRangeValid = _useState5[1];
+
   var dayGuide = lang === 'ja' ? jpDayGuide : enDayGuide;
   React.useEffect(function () {
     if (isInitialMount.current) {
@@ -5970,44 +6149,59 @@ var DatePicker = function DatePicker(_ref27) {
       }
     }
   }, [dateMode, selectedRange, targetedDate]);
-  var updateStartDate = React.useCallback(function (start) {
+  React.useEffect(function () {
     var _ref28 = selectedRange ? selectedRange : TODAY_INTERVAL,
+        start = _ref28.start,
         end = _ref28.end;
 
-    if (dateFns.isAfter(dateFns.add(start, {
+    if (timeMode === 'interval' && dateFns.isAfter(dateFns.add(start, {
       minutes: 1
-    }), end)) return;
+    }), end)) {
+      if (dateFns.isEqual(end, dateFns.endOfDay(start)) && end.getSeconds() > 0) {
+        setIsTimeRangeValid(true);
+      } else {
+        setIsTimeRangeValid(false);
+      }
+    } else {
+      setIsTimeRangeValid(true);
+    }
+  }, [selectedRange, timeMode]);
+  var updateStartDate = React.useCallback(function (start) {
+    var _ref29 = selectedRange ? selectedRange : TODAY_INTERVAL,
+        end = _ref29.end;
+
     setSelectedRange({
       start: start,
       end: end
     });
   }, [selectedRange]);
   var updateEndDate = React.useCallback(function (end) {
-    var _ref29 = selectedRange ? selectedRange : TODAY_INTERVAL,
-        start = _ref29.start;
+    var _ref30 = selectedRange ? selectedRange : TODAY_INTERVAL,
+        start = _ref30.start;
 
-    if (dateFns.isAfter(dateFns.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(dateFns.addMonths(focusedMonth, -1));
@@ -6070,7 +6264,6 @@ var cellState = function cellState(day, interval, _hoverDate) {
     isInsideInterval = dateFns.isWithinInterval(day, interval);
   } catch (error) {
     isInsideInterval = false;
-    console.log('wrong interval in datepicker', error);
   }
 
   if (isInsideInterval || dateFns.isSameDay(interval.start, day)) {
@@ -6460,31 +6653,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__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  position: relative;\n"])));
-var TopLine$1 = styled__default.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__default.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  ", ";\n  height: 3px;\n  border-top-left-radius: 3px;\n  border-top-right-radius: 3px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.styles.filters.dropdownContainer.topBorder;
 });
-var InnerBox = styled__default.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__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  border-bottom-left-radius: 3px;\n  border-bottom-right-radius: 3px;\n  box-shadow: 0 4px 9px 0 hsla(204, 22%, 67%, 0.07);\n  border-right: solid 1px hsl(207, 16%, 86%);\n  border-bottom: solid 1px hsl(207, 16%, 86%);\n  border-left: solid 1px hsl(207, 16%, 86%);\n  background-color: hsl(200, 23%, 97%);\n"])));
 var StyledFilterOption = styled__default(FilterOption)(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  letter-spacing: 0.2px;\n"])));
-var OptionList = styled__default.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__default.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n  border-top: ", " 1px solid;\n  padding-bottom: 8px;\n"])), function (_ref3) {
+var OptionList = styled__default.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__default.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n  border-top: 1px solid hsl(0, 0%, 91%);\n  padding-bottom: 8px;\n"])));
+var ResultCounter = styled__default.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  opacity: 0.75;\n  font-family: ", ";\n  color: hsl(0, 0%, 55%);\n  font-size: 12px;\n  font-style: italic;\n  font-weight: 300;\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  padding-left: 9px;\n  height: 30px;\n  margin-bottom: 6px;\n  border-bottom: 1px solid hsl(0, 0%, 91%);\n"])), function (_ref3) {
   var theme = _ref3.theme;
-  return theme.colors.divider;
-});
-var ResultCounter = styled__default.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  opacity: 0.75;\n  font-family: ", ";\n  color: hsl(0, 0%, 55%);\n  font-size: 12px;\n  font-style: italic;\n  font-weight: 300;\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  padding-left: 9px;\n  height: 30px;\n  margin-bottom: 6px;\n  border-bottom: ", " 1px solid;\n"])), function (_ref4) {
-  var theme = _ref4.theme;
   return theme.fontFamily.data;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.colors.divider;
 });
 var SearchWrapper = styled__default.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  height: 41px;\n  display: flex;\n  align-items: center;\n"])));
 var EmptyResultText = styled__default.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  display: block;\n  color: hsl(0, 0%, 56%);\n  margin-left: 12px;\n  user-select: none;\n  pointer-events: none;\n  height: 35px;\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n"])));
+var Gradient = styled__default.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;
@@ -6610,29 +6798,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 = React.useState(selectedOrderList(list, maxDisplayedItems, selected)),
       visibleList = _useState[0],
@@ -6697,7 +6885,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({
@@ -6711,7 +6901,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"];
@@ -6819,12 +7009,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__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  position: relative;\n"])));
+var ContextActionBaseCSS = styled.css(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  -webkit-tap-highlight-color: transparent;\n  border: none;\n  background: none;\n  display: flex;\n  justify-content:left;\n  align-items:center;\n  flex-wrap: wrap;\n  cursor: pointer;\n  outline: none;\n  text-decoration: none;\n  padding: 0;\n"])));
+var ContextIcon = styled__default.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  ", ";\n  width: 30px;\n  height: 30px;\n  border-radius: 3px;\n  display:flex;\n  justify-content:center;\n  align-items:center;\n  svg {\n    display: block;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return styled.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__default.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 && styled.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 && styled.css(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n    margin-right: 5px;\n  "])));
+});
+var ContentBox$1 = styled__default.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 && styled.css(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n    display: ", ";\n    display: ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && styled.css(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      left: 0;\n      transform: translateY(calc(100% + 5px ));\n    "]))), openState.position === 'bottom-left' && styled.css(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      right: 0;\n      transform: translateY(calc(100% + 5px ));\n    "]))), openState.position === 'top-left' && styled.css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n      top: 0;\n      right: 0;\n      transform: translateY(calc( -100% - 5px ));\n    "]))), openState.position === 'top-right' && styled.css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n      top: 0;\n      left: 0;\n      transform: translateY(calc( -100% - 5px ));\n    "]))));
+});
+var ButtonWrapper$1 = styled__default.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n"])));
+var TopLine$3 = styled__default.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n  height: 3px;\n  border-top-left-radius: 3px;\n  border-top-right-radius: 3px;\n"])), function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.styles.filters.dropdownContainer.topBorder;
+});
+var InnerBox$2 = styled__default.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__default.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__default.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__default.div(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var LayoutText = styled__default.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__default.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__default.div(_templateObject22$2 || (_templateObject22$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var SelectFieldContainer = styled__default.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 = React.useState({
+    isOpen: false,
+    position: 'bottom-right'
+  }),
+      openState = _useState[0],
+      setOpenState = _useState[1];
+
+  var buttonWrapperRef = React.useRef(null);
+  var mainRef = React.useRef(null);
+
+  var _useState2 = React.useState('grid'),
+      isGridLayout = _useState2[0],
+      setIsGridLayout = _useState2[1];
+
+  var _useState3 = React.useState(defaultPageSize),
+      pageSize = _useState3[0],
+      setPageSize = _useState3[1];
+
+  var handleClose = React.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 = React.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 = React.useCallback(function (layout) {
+    setIsGridLayout(layout);
+    getLayout(layout);
+  }, [getLayout]);
+  var handlePageSizeChange = React.useCallback(function (size) {
+    onPageSizeChange(Number(size));
+  }, [onPageSizeChange]);
+  React.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__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose([""])));
+var Container$r = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose([""])));
 
 var DropdownDatePicker = function DropdownDatePicker(_ref) {
   var buttonIcon = _ref.buttonIcon,
@@ -6892,7 +7286,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
@@ -6918,17 +7312,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 = styled.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__default.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  flex: 1 1 200px;\n  max-width: 320px;\n"])));
-var CloseSearchInputWrapper = styled__default.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 = styled.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__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  flex: 1 1 200px;\n  max-width: 320px;\n"])));
+var CloseSearchInputWrapper = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme && styled.css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n    animation: ", " ", " ", ";\n  "])), fadeInAnimation, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
+  return theme && styled.css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n    animation: ", " ", " ", ";\n  "])), fadeInAnimation, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
 });
-var StyledFilterButton = styled__default(FilterButton)(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose([""])));
-var StyledDropdown = styled__default(FilterDropdown)(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose([""])));
-var StyledDropdownDatePicker = styled__default(DropdownDatePicker)(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose([""])));
-var Container$r = styled__default.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__default(FilterButton)(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose([""])));
+var StyledDropdown = styled__default(FilterDropdown)(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose([""])));
+var StyledDropdownDatePicker = styled__default(DropdownDatePicker)(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose([""])));
+var Container$s = styled__default.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) {
@@ -7034,7 +7428,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',
@@ -7044,26 +7438,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__default.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__default.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__default.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__default.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__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  height: 18px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 11px 0 8px;\n  margin-left: 3px;\n  color: hsl(207, 5%, 57%);\n\n  ", ";\n\n  ", " {\n    display: flex;\n    align-items: center;\n  }\n  border-right: 1px solid hsla(0, 0%, 13%, 0.16);\n"])), function (_ref2) {
+var FilterLabel = styled__default.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 && styled.css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.data);
+  return theme && styled.css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.data);
 }, IconWrapper);
-var FilterLabelText = styled__default.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__default.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__default.button(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: ", ";\n  color: hsl(216, 4%, 77%);\n  margin-left: 11px;\n  font-size: 12px;\n"])), resetButtonStyles, function (_ref4) {
+var ClearTextButton = styled__default.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__default.button(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), resetButtonStyles);
-var FilterLabelsGroup = styled__default.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__default.button(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), resetButtonStyles);
+var FilterLabelsGroup = styled__default.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 dateFns.format(dateFns.add(dateFns.startOfDay(endDate), {
+      days: 1
+    }), resultsDateFormat);
+  }
+
+  return dateFns.format(endDate, resultsDateFormat);
+};
 
 var validateDateFormat = function validateDateFormat(resultsDateFormat) {
   var isFormatValid = false;
@@ -7094,13 +7498,13 @@ var renderLabel = function renderLabel(item, resultsDateFormat, icon, filterName
   } else if (filterName && item instanceof Date) {
     textLabel = isDateFormatValid ? filterName + ": " + dateFns.format(item, resultsDateFormat) : filterName + ": " + item.toDateString();
   } else if (filterName && isDateInterval(item)) {
-    textLabel = isDateFormatValid ? filterName + ": " + dateFns.format(item.start, resultsDateFormat) + " - " + dateFns.format(item.end, resultsDateFormat) : filterName + ": " + item.start.toDateString() + " - " + item.end.toDateString();
+    textLabel = isDateFormatValid ? filterName + ": " + dateFns.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 ? dateFns.format(item, resultsDateFormat) : item.toDateString();
   } else if (!filterName && isDateInterval(item)) {
-    textLabel = isDateFormatValid ? dateFns.format(item.start, resultsDateFormat) + " - " + dateFns.format(item.end, resultsDateFormat) : item.start.toDateString() + " - " + item.end.toDateString();
+    textLabel = isDateFormatValid ? dateFns.format(item.start, resultsDateFormat) + " - " + validWithMidnight(item.end, resultsDateFormat) : item.start.toDateString() + " - " + item.end.toDateString();
   }
 
   return React__default.createElement(FilterLabelText, {
@@ -7123,7 +7527,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,
@@ -7153,13 +7557,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__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: hsl(207, 5%, 57%);\n  font-size: 12px;\n  font-weight: 700;\n  margin-bottom: 17px;\n"])), function (_ref) {
+var _templateObject$H, _templateObject2$F, _templateObject3$A;
+var Title$2 = styled__default.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__default(FiltersResults)(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose([""])));
-var Container$t = styled__default.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  ", " {\n    margin-top: 29px;\n    min-height: 19px;\n  }\n"])), StyledFilterResults);
+var StyledFilterResults = styled__default(FiltersResults)(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose([""])));
+var Container$u = styled__default.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;
@@ -7333,7 +7737,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
       };
@@ -7567,7 +7971,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
@@ -7587,19 +7991,19 @@ var FilterBar = function FilterBar(_ref5) {
   })));
 };
 
-var _templateObject$H, _templateObject2$F, _templateObject3$A, _templateObject4$u, _templateObject5$r;
-var Container$u = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n"])));
-var StatusCounter = styled__default.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__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n"])));
+var StatusCounter = styled__default.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 styled.css(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n    transition: background-color ", " ", ";\n  "])), animation.speed.slow, animation.easing.primary.easeInOut);
+  return styled.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__default.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  position: absolute;\n  top: -4px;\n  right: -7px;\n  ", "\n  background-color: ", ";\n"])), function (_ref3) {
+var StatusDot = styled__default.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 styled.css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n    transition: background-color ", " ", ";\n  "])), animation.speed.slow, animation.easing.primary.easeInOut);
+  return styled.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;
@@ -7609,49 +8013,51 @@ var StatusDot = styled__default.div(_templateObject4$u || (_templateObject4$u =
 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 = styled.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 = styled.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__default.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 = styled.keyframes(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n 0% {\n    transform: scale(1);\n }\n\n 75% {\n    transform: scale(3);\n }\n\n 100% {\n   transform: scale(1.75);\n }\n"])));
+var HandleMouseReactionKeyframes = styled.keyframes(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n 0% {\n    transform: scale(1);\n }\n\n 75% {\n    transform: scale(0);\n }\n\n 100% {\n   transform: scale(0.5);\n }\n"])));
+var HandleBase = styled__default.svg(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n  touch-action: none;\n  user-select: none;\n  overflow: visible;\n  cursor: pointer;\n  fill: ", ";\n  appearance: none;\n"])), function (_ref) {
   var theme = _ref.theme,
       styling = _ref.styling;
   return theme.custom.lines[styling].handleBase.fill;
 });
-var HandleRingLayer = styled__default.circle(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n  mask: url(#", ");\n"])), function (_ref2) {
+var HandleRingLayer = styled__default.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__default.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 && styled.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__default.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 && styled.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 && styled.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 && styled.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__default.circle(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n  mix-blend-mode: multiply;\n  fill: ", ";\n  stroke: none;\n"])), function (_ref3) {
+var HandleReactiveFill = styled__default.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__default.circle(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n"])), function (_ref4) {
+var HandleReactiveRing = styled__default.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__default.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__default.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;
@@ -7659,25 +8065,25 @@ var HandleContrastLayer = styled__default.circle(_templateObject10$e || (_templa
 var HandleShadowLayer = styled__default.circle(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n    mix-blend-mode: multiply;\n    fill: url(#", ");\n"])), function (props) {
   return props.fillID;
 });
-var GrabHandleIndexGroup = styled__default.g(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  pointer-events: none;\n  ", ";\n\n"])), function (props) {
-  return props.showIndex && styled.css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "])));
+var GrabHandleIndexGroup = styled__default.g(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  pointer-events: none;\n  ", ";\n\n"])), function (props) {
+  return props.showIndex && styled.css(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "])));
 });
-var StopStart = styled__default.stop(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n  stop-color: ", ";\n"])), function (_ref6) {
+var StopStart = styled__default.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__default.stop(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  stop-color: ", ";\n"])), function (_ref7) {
+var StopEnd = styled__default.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__default.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__default.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__default.g(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n\n"])));
+var IconGroup = styled__default.g(_templateObject17$3 || (_templateObject17$3 = _taggedTemplateLiteralLoose(["\n\n"])));
 
 var HandleUnit = function HandleUnit(props) {
   var index = props.index,
@@ -7870,50 +8276,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__default.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__default.line(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  stroke: ", ";\n  mix-blend-mode: multiply;\n  stroke-width: ", "px;\n  stroke-opacity: ", ";\n  cursor: pointer;\n"])), function (_ref) {
   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__default.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__default.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__default.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 && styled.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__default.g(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  pointer-events: none;\n  ", ";\n\n"])), function (props) {
-  return props.showIndex && styled.css(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "])));
-});
-var GrabHandleIndexText$1 = styled__default.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__default.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__default.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 && styled.css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n    pointer-events: none;\n    opacity: 0;\n  "])));
+});
+var GrabHandleIndexGroup$1 = styled__default.g(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  pointer-events: none;\n  ", ";\n\n"])), function (props) {
+  return props.showIndex && styled.css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "])));
 });
-var GrabHandleContrast = styled__default(GrabHandle)(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n"])), function (_ref7) {
+var GrabHandleIndexText$1 = styled__default.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__default.text(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  fill: ", ";\n  font-weight: bold;\n  transition: opacity 250ms ease;\n  cursor: pointer;\n  ", "\n"])), function (_ref8) {
+  var theme = _ref8.theme,
+      styling = _ref8.styling;
+  return theme.custom.lines[styling].label.fill;
+}, function (_ref9) {
+  var showLabelShadow = _ref9.showLabelShadow;
+  return showLabelShadow && styled.css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n    text-shadow:\n      -1px -1px 0 #000,\n      1px -1px 0 #000,\n      -1px 1px 0 #000,\n      1px 1px 0 #000;\n  "])));
+});
+var GrabHandleContrast = styled__default(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__default.g(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n\n  ", ", ", " {\n    transition: r 250ms ease;\n  }\n\n  ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
-  return props.showIndex && styled.css(_templateObject11$a || (_templateObject11$a = _taggedTemplateLiteralLoose(["\n    ", ", ", " {\n      pointer-events: none;\n      r: ", ";\n    }\n  "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
+var GrabHandleGroup = styled__default.g(_templateObject11$a || (_templateObject11$a = _taggedTemplateLiteralLoose(["\n\n  ", ", ", " {\n    transition: r 250ms ease;\n  }\n\n  ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
+  return props.showIndex && styled.css(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n    ", ", ", " {\n      pointer-events: none;\n      r: ", ";\n    }\n  "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
 });
-var DMCircle = styled__default.circle(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n  fill: hsla(203, 100%, 35%, 0.49);\n"])));
+var DMCircle = styled__default.circle(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n  fill: hsla(203, 100%, 35%, 0.49);\n  cursor: pointer;\n"])));
+var IconFormat = styled__default(Icon)(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n"])));
 
 var LineUnit = function LineUnit(props) {
   var x1 = props.x1,
@@ -7930,6 +8346,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,
@@ -7938,8 +8356,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 = React.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++) {
@@ -8013,26 +8439,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,
@@ -8041,17 +8476,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 = React.useCallback(function () {
+    if (props.hasClickSensingBorder) {
+      setShowLineBorder(true);
+    }
+  }, [props.hasClickSensingBorder]);
+  var getMouseOut = React.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,
@@ -8059,7 +8517,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,
@@ -8101,38 +8559,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 = React.createContext({});
 
-var _templateObject$K, _templateObject2$I;
-var Point = styled__default.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__default.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__default.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__default.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__default.text(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  fill: ", ";\n  font-weight: bold;\n  transition: opacity 250ms ease;\n  pointer-events: none;\n  ", "\n"])), function (_ref4) {
+  var theme = _ref4.theme,
+      styling = _ref4.styling;
   return theme.custom.lines[styling].label.fill;
+}, function (_ref5) {
+  var showAreaLabelShadow = _ref5.showAreaLabelShadow;
+  return showAreaLabelShadow && styled.css(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n    text-shadow:\n      -1px -1px 0 #000,\n      1px -1px 0 #000,\n      -1px 1px 0 #000,\n      1px 1px 0 #000;\n  "])));
 });
 
-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;
@@ -8146,24 +8616,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 = React.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 = React.useState([]),
       handleAngles = _useState[0],
@@ -8248,11 +8724,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),
@@ -8290,9 +8766,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,
@@ -8312,9 +8788,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,
@@ -8323,9 +8799,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,
@@ -8351,25 +8827,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__default.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__default.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__default.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 && styled.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__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  position: relative;\n  line-height: 0;\n  user-select: none;\n  touch-action: none;\n  /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n  /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n  /* border-radius:3px; */\n\n  width: auto;\n  /* transform: translateY(-70%); */\n\n"])));
+var LoadingOverlay = styled__default.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top:0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
+var Frame = styled__default.svg(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n  touch-action: none;\n  user-select: none;\n  margin: 0;\n\n  overflow: visible;\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n  transition: background 250ms ease;\n  background: hsla(0deg, 0%, 0%, 0%);\n\n  ", "\n\n"])), function (props) {
+  return props.transculent && styled.css(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
 });
-var Image$1 = styled__default.img(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  object-fit: contain;\n  width:  100%;\n  height: 100%;\n"])));
+var Image$1 = styled__default.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,
@@ -8377,12 +8864,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,
@@ -8519,6 +9014,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,
@@ -8526,7 +9022,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,
@@ -8542,8 +9038,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,
@@ -8560,12 +9059,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__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  position: relative;\n  line-height: 0;\n  user-select: none;\n  touch-action: none;\n  /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n  /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n  /* border-radius:3px; */\n\n  width: auto;\n  /* transform: translateY(-70%); */\n"])));
-var Video = styled__default.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__default.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__default.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 && styled.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__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  position: relative;\n  line-height: 0;\n  user-select: none;\n  touch-action: none;\n  /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n  /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n  /* border-radius:3px; */\n\n  width: auto;\n  /* transform: translateY(-70%); */\n"])));
+var Video = styled__default.video(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n  width:  100%;\n  height: 100%;\n  border-radius: 3px;\n  background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
+var LoadingOverlay$1 = styled__default.div(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top:0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
+var Frame$1 = styled__default.svg(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n  touch-action: none;\n  user-select: none;\n  margin: 0;\n\n  overflow: visible;\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n  transition: background 250ms ease;\n  background: hsla(0deg, 0%, 0%, 0%);\n\n  ", "\n\n"])), function (props) {
+  return props.transcalent && styled.css(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
 });
 
 var LineUIVideo = function LineUIVideo(_ref) {
@@ -8574,8 +9073,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,
@@ -8594,6 +9099,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,
@@ -8731,6 +9237,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,
@@ -8738,7 +9245,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,
@@ -8763,7 +9270,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,
@@ -8793,8 +9303,8 @@ function _catch(body, recover) {
 
 var _excluded$v = ["id", "enabled", "peerAddress", "maxConnectionAttempts", "rtcConfiguration", "setStatus", "setError", "autoPlay", "muted"];
 
-var _templateObject$N;
-var Video$1 = styled__default.video(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  /* width: 800px; */\n"])));
+var _templateObject$O;
+var Video$1 = styled__default.video(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  /* width: 800px; */\n"])));
 
 var WebRTCPlayer = function WebRTCPlayer(_ref) {
   var _ref$id = _ref.id,
@@ -9118,12 +9628,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__default.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__default(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__default.div(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top:0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
-var Frame$2 = styled__default.svg(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n  touch-action: none;\n  user-select: none;\n  margin: 0;\n\n  overflow: visible;\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n  transition: background 250ms ease;\n  background: hsla(0deg, 0%, 0%, 0%);\n\n  ", "\n\n"])), function (props) {
-  return props.transcalent && styled.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__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  position: relative;\n  line-height: 0;\n  user-select: none;\n  touch-action: none;\n  /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n  /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n  /* border-radius:3px; */\n\n  width: auto;\n  /* transform: translateY(-70%); */\n"])));
+var Video$2 = styled__default(WebRTCPlayer)(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n  width:  100%;\n  height: 100%;\n  border-radius: 3px;\n  background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
+var LoadingOverlay$2 = styled__default.div(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top:0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
+var Frame$2 = styled__default.svg(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n  touch-action: none;\n  user-select: none;\n  margin: 0;\n\n  overflow: visible;\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n  transition: background 250ms ease;\n  background: hsla(0deg, 0%, 0%, 0%);\n\n  ", "\n\n"])), function (props) {
+  return props.transcalent && styled.css(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
 });
 
 var LineUI$1 = function LineUI(_ref) {
@@ -9132,8 +9642,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;
@@ -9141,6 +9657,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,
@@ -9280,6 +9798,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,
@@ -9287,7 +9806,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'
@@ -9308,7 +9827,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,
@@ -9425,6 +9947,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;
@@ -9465,19 +10013,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__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var IconContainer$1 = styled__default.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__default.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__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var IconContainer$1 = styled__default.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -45px;\n  bottom: 0;\n  height: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    display: block;\n  }\n"])));
+var Title$3 = styled__default.h1(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n  ", "\n  margin: 0 0 20px;\n"])), function (_ref) {
   var theme = _ref.theme;
-  return styled.css(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.pageHeader.mainTitle);
+  return styled.css(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.pageHeader.mainTitle);
 });
-var AreaTitleCss = styled.css(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n  ", "\n  margin: 0;\n  position: absolute;\n  top: -18px;\n"])), function (_ref2) {
+var AreaTitleCss = styled.css(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n  ", "\n  margin: 0;\n  position: absolute;\n  top: -18px;\n"])), function (_ref2) {
   var theme = _ref2.theme;
-  return styled.css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  ", ";\n  "])), theme.fontFamily.ui, theme.typography.pageHeader.areaTitle);
+  return styled.css(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  ", ";\n  "])), theme.fontFamily.ui, theme.typography.pageHeader.areaTitle);
 });
-var AreaTitle = styled__default.div(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n  ", "\n"])), AreaTitleCss);
-var AreaLinkTitle = styled__default(reactRouterDom.Link)(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n  ", "\n  &:hover {\n    text-decoration: underline;\n  }\n"])), AreaTitleCss);
+var AreaTitle = styled__default.div(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n  ", "\n"])), AreaTitleCss);
+var AreaLinkTitle = styled__default(reactRouterDom.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,
@@ -9489,7 +10037,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,
@@ -9499,19 +10047,19 @@ var PageTitle = function PageTitle(_ref3) {
   }))) : null);
 };
 
-var _templateObject$Q, _templateObject2$N;
-var Container$z = styled__default.p(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$R, _templateObject2$O;
+var Container$A = styled__default.p(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return styled.css(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.pageHeader.introduction);
+  return styled.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__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose([""])));
+var _templateObject$S;
+var Container$B = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose([""])));
 
 var PageHeader = function PageHeader(_ref) {
   var title = _ref.title,
@@ -9522,7 +10070,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,
@@ -9532,22 +10080,56 @@ var PageHeader = function PageHeader(_ref) {
   })), introductionText ? React__default.createElement(IntroductionText, null, introductionText) : null);
 };
 
-var _templateObject$S;
-var Container$B = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var _templateObject$T;
+var Container$C = styled__default.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__*/React.createElement("svg", _extends$1({
+    width: 610,
+    height: 446,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "#DDD",
+    d: "M0 0h609.91v446H0z"
+  })), _path2 || (_path2 = /*#__PURE__*/React.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__default.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__default.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) {
@@ -9555,18 +10137,18 @@ var MediaBoxWrapper = styled__default.div(_templateObject$T || (_templateObject$
   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__default.div(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top:0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
-var Video$3 = styled__default.video(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n  ", ";\n  outline: none;\n\n  ", ";\n"])), mediaStyle, function (_ref3) {
+var LoadingOverlay$3 = styled__default.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top:0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
+var Video$3 = styled__default.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 styled.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 && styled.css(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n      max-height: calc(100vh - 100px);\n      max-width: calc(100vw - 100px);\n    "]))));
+  return styled.css(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n    transition: opacity ", " ", ";\n    opacity: ", ";\n\n    ", ";\n  "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "1" : "0", hasModalLimits && styled.css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n      max-height: calc(100vh - 100px);\n      max-width: calc(100vw - 100px);\n    "]))));
 });
-var StyledImage = styled__default.img(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", ";\n"])), mediaStyle, function (_ref4) {
+var StyledImage = styled__default.img(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", ";\n"])), mediaStyle, function (_ref4) {
   var theme = _ref4.theme,
       isLoaded = _ref4.isLoaded,
       hasModalLimits = _ref4.hasModalLimits;
-  return styled.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 && styled.css(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n      max-height: calc(100vh - 100px);\n      max-width: calc(100vw - 100px);\n    "]))));
+  return styled.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 && styled.css(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n      max-height: calc(100vh - 100px);\n      max-width: calc(100vw - 100px);\n    "]))));
 });
 
 var MediaBox = function MediaBox(_ref5) {
@@ -9636,7 +10218,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,
@@ -9644,30 +10225,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__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: hsla(202, 33%, 95%, 0.51);\n  -webkit-backdrop-filter: blur(5px);\n  backdrop-filter: blur(5px);\n  z-index: 999;\n  ", "\n\n  font-family: ", ";\n  ", ";\n"])), function (_ref) {
+var _templateObject$V, _templateObject2$Q, _templateObject3$K, _templateObject4$E, _templateObject5$A, _templateObject6$t, _templateObject7$s;
+var Container$D = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: hsla(202, 33%, 95%, 0.51);\n  -webkit-backdrop-filter: blur(5px);\n  backdrop-filter: blur(5px);\n  z-index: 999;\n  ", "\n\n  font-family: ", ";\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme && styled.css(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose([""])));
+  return theme && styled.css(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose([""])));
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.fontFamily.ui;
@@ -9675,19 +10254,19 @@ var Container$C = styled__default.div(_templateObject$U || (_templateObject$U =
   var theme = _ref3.theme;
   return theme.styles.modal.overlay;
 });
-var CloseIcon = styled__default(Icon)(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose([""])));
-var CloseButton = styled__default.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__default(Icon)(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose([""])));
+var CloseButton = styled__default.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 && styled.css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid hsl(207, 80%, 64%);\n  "])));
+  return selected && styled.css(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid hsl(207, 80%, 64%);\n  "])));
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme && styled.css(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n      opacity: .8;\n      transition: transform ", " ", ";\n    "])), theme.animation.speed.normal, theme.animation.easing.primary.inOut);
+  return theme && styled.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__default.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__default.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) {
@@ -9732,7 +10311,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
@@ -9847,9 +10426,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 () {});
@@ -9876,9 +10454,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 () {});
@@ -9948,38 +10525,34 @@ var useMediaModal = function useMediaModal() {
   };
 };
 
-var _templateObject$V, _templateObject2$Q, _templateObject3$J, _templateObject4$D, _templateObject5$A, _templateObject6$t, _templateObject7$s;
-var Container$D = styled__default.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__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: inherit;\n  background: grey;\n  border-radius: 3px;\n  overflow: hidden;\n  width: 55px;\n  height: auto;\n  opacity: 0.65;\n  margin-right: 10px;\n\n  &::after {\n    content: '';\n    display: block;\n    padding-bottom: 75%;\n    ", "\n  }\n\n  ", "\n\n  &:hover {\n      cursor: pointer;\n\n    ", "\n  }\n\n"])), function (_ref) {
   var aspect = _ref.aspect;
-  return aspect === '16:9' && styled.css(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n      padding-left: 56.25%;\n    "])));
+  return aspect === '16:9' && styled.css(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n      padding-left: 56.25%;\n    "])));
 }, function (_ref2) {
   var theme = _ref2.theme;
-  return theme && styled.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 && styled.css(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n    transition:\n      opacity ", " ", ",\n      transform ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
 }, function (_ref3) {
-  var mediaUrl = _ref3.mediaUrl;
-  return mediaUrl && styled.css(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
-}, function (_ref4) {
-  var theme = _ref4.theme,
-      hoverZoom = _ref4.hoverZoom;
-  return theme && hoverZoom && styled.css(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n      transform: scale(1.5);\n      opacity: 1;\n      transition: transform ", " ", ";\n    "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut);
-});
-var Image$2 = styled__default.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__default.div(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background-color: hsla(0, 0%, 0%, .5);\n  height: 24px;\n  width: 24px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", " {\n    display: flex;\n    svg {\n      padding-left: 2px;\n      path {\n        stroke: hsla(0, 0%, 100%, 1.000);\n      }\n    }\n  };\n"])), IconWrapper);
-
-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 && styled.css(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n      transform: scale(1.5);\n      opacity: 1;\n      transition: transform ", " ", ";\n    "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut);
+});
+var ImageWrapper = styled__default.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__default.div(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  height: 41px;\n  width: 55px;\n  object-fit: cover;\n  display: block;\n"])));
+var PlayableDrop = styled__default.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 = React.useState(true),
       showImage = _useState[0],
@@ -10000,18 +10573,17 @@ var TableRowThumbnail = function TableRowThumbnail(_ref6) {
   var timeoutRef = React.useRef(null);
   var handleModal = React.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]);
   React.useEffect(function () {
     setShowImage(false);
     setRetryCount(0);
@@ -10042,36 +10614,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);
+      };
+    }
+  };
+
+  React.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__default.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__default.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 styled.css(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n    background: ", ";\n    content:'", "';\n  "])), colors.status[status], status);
+  return styled.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
   });
 };
@@ -10107,31 +10705,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__default.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__default.button(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n\n  cursor: pointer;\n  opacity: 0;\n\n  position: absolute;\n  right: 0;\n  top: 14px;\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: none;\n  outline: none;\n\n  ", "\n\n  svg {\n    display: block;\n  }\n\n  &:hover {\n    opacity: 1 !important;\n  }\n\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme && styled.css(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n    transition: ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
+  return theme && styled.css(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n    transition: ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
 });
-var CellContainer = styled__default.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__default.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n  display: table-cell;\n  height: 50px;\n  vertical-align: middle;\n  position: relative;\n  line-height: 30px;\n  font-family: ", ";\n\n  &:hover ", "{\n    opacity: 0.5;\n  }\n\n  &, a {\n    ", "\n  }\n\n  a:hover {\n    text-decoration: underline;\n  }\n\n  ", ";\n\n  ", "\n"])), function (p) {
   return p.theme.fontFamily.data;
 }, CopyToClipboard, function (_ref2) {
   var theme = _ref2.theme,
       cellStyle = _ref2.cellStyle,
       alignment = _ref2.alignment;
-  return cellStyle === 'firstColumn' ? styled.css(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), theme.typography.table.columnData[cellStyle]) : styled.css(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), theme.typography.table.columnData[cellStyle][alignment]);
+  return cellStyle === 'firstColumn' ? styled.css(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), theme.typography.table.columnData[cellStyle]) : styled.css(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), theme.typography.table.columnData[cellStyle][alignment]);
 }, function (_ref3) {
   var hasCopyButton = _ref3.hasCopyButton;
-  return hasCopyButton && styled.css(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n    padding-right: 20px;\n  "])));
+  return hasCopyButton && styled.css(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n    padding-right: 20px;\n  "])));
 }, function (_ref4) {
   var styles = _ref4.theme.styles,
       hideDivider = _ref4.hideDivider;
-  return !hideDivider && styled.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 && styled.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__default.span(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref5) {
+var UnitText = styled__default.span(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref5) {
   var theme = _ref5.theme;
-  return styled.css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table.columnData['unit']);
+  return styled.css(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table.columnData['unit']);
 });
-var StatusBlip = styled__default.div(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  margin-right: 8px;\n  ", "\n"])), function (_ref6) {
+var StatusBlip = styled__default.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;
@@ -10179,14 +10777,14 @@ var TypeTableCell = function TypeTableCell(_ref7) {
   })) : null);
 };
 
-var _templateObject$Y, _templateObject2$T;
-var RowContainer = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n  display: table-row;\n  ", ";\n"])), function (_ref) {
+var _templateObject$Z, _templateObject2$U;
+var RowContainer = styled__default.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  display: table-row;\n  ", ";\n"])), function (_ref) {
   var isEmpty = _ref.isEmpty;
-  return isEmpty && styled.css(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n    visibility: hidden;\n  "])));
+  return isEmpty && styled.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,
@@ -10196,7 +10794,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 = React.useCallback(function (checked) {
     if (selectCallback) {
       selectCallback(checked, rowData.id);
@@ -10220,11 +10819,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
@@ -10255,17 +10854,17 @@ var TypeTableRow = function TypeTableRow(_ref2) {
   }));
 };
 
-var _templateObject$Z, _templateObject2$U, _templateObject3$L, _templateObject4$F;
-var HeaderTitle = styled__default.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__default.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  border-bottom-right-radius: 3px;\n  border-top-right-radius: 3px;\n  display: inline-flex;\n  justify-content: center;\n  align-content: center;\n  position: relative;\n  padding: 0 2px;\n  user-select: none;\n  z-index: 99;\n\n  ", " {\n    position: absolute;\n    top: 0px;\n    left: -15px;\n    display: none;\n    border-bottom-left-radius: 3px;\n    border-top-left-radius: 3px;\n    padding: 3px 1px;\n\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), IconWrapper, function (_ref) {
   var ascending = _ref.ascending;
-  return ascending && styled.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 && styled.css(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n      transform: rotate(180deg);\n      border-bottom-right-radius: 3px;\n      border-top-right-radius: 3px;\n      border-bottom-left-radius: 0;\n      border-top-left-radius: 0;\n      top: 0;\n    "])));
 }, function (_ref2) {
   var isSortActive = _ref2.isSortActive;
-  return isSortActive && styled.css(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n    &:not(hover) {\n      ", " {\n        display: inline-flex;\n      }\n    }\n  "])), IconWrapper);
+  return isSortActive && styled.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 && styled.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 && styled.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) {
@@ -10295,45 +10894,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__default.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  display: table-row;\n  height: 50px;\n"])));
-var HeaderItem = styled__default.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__default.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  display: table-row;\n  height: 50px;\n"])));
+var HeaderItem = styled__default.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n  display: table-cell;\n  height: inherit;\n  vertical-align:top;\n  line-height: 20px;\n  position: relative;\n  font-family: ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (p) {
   return p.theme.fontFamily.ui;
 }, function (_ref) {
   var hasCopyButton = _ref.hasCopyButton;
-  return hasCopyButton && styled.css(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n    padding-right: 20px;\n  "])));
+  return hasCopyButton && styled.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 ? styled.css(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table[headerStyle][alignment]) : styled.css(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table[headerStyle]['left']);
+  return alignment ? styled.css(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table[headerStyle][alignment]) : styled.css(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table[headerStyle]['left']);
 }, function (p) {
-  return p.fixedWidth && styled.css(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n    width: ", "px;\n  "])), p.fixedWidth);
+  return p.fixedWidth && styled.css(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n    width: ", "px;\n  "])), p.fixedWidth);
 }, function (_ref3) {
   var minWidth = _ref3.minWidth;
-  return minWidth && styled.css(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n    min-width:", "px;\n  "])), minWidth);
+  return minWidth && styled.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' && styled.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' && styled.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__default.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__default.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 && styled.css(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", ";\n  "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
+  return alignment && styled.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__default.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__default.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__default.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 styled.css(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), typography.tables.groupName);
+  return styled.css(_templateObject13$8 || (_templateObject13$8 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), typography.tables.groupName);
 });
-var EmptyTitle = styled__default.div(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n  height: 20px;\n"])));
-var MiddleLine = styled__default.div(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  height: 1px;\n  flex: 1;\n  ", ";\n"])), function (_ref7) {
+var EmptyTitle = styled__default.div(_templateObject14$6 || (_templateObject14$6 = _taggedTemplateLiteralLoose(["\n  height: 20px;\n"])));
+var MiddleLine = styled__default.div(_templateObject15$4 || (_templateObject15$4 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  height: 1px;\n  flex: 1;\n  ", ";\n"])), function (_ref7) {
   var styles = _ref7.theme.styles;
-  return styled.css(_templateObject16$3 || (_templateObject16$3 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), styles.tables.header.groupLine);
+  return styled.css(_templateObject16$4 || (_templateObject16$4 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), styles.tables.header.groupLine);
 }, function (_ref8) {
   var isLastOfGroup = _ref8.isLastOfGroup;
-  return isLastOfGroup && styled.css(_templateObject17$3 || (_templateObject17$3 = _taggedTemplateLiteralLoose(["\n    margin-right: 15px;\n  "])));
+  return isLastOfGroup && styled.css(_templateObject17$4 || (_templateObject17$4 = _taggedTemplateLiteralLoose(["\n    margin-right: 15px;\n  "])));
 });
 
 var renderGroupHeader = function renderGroupHeader(columnConfig, index) {
@@ -10464,15 +11063,15 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
   }));
 };
 
-var _templateObject$$, _templateObject2$W, _templateObject3$N, _templateObject4$H, _templateObject5$D;
-var Container$F = styled__default.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose([""])));
-var TableContainer = styled__default.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n  display: table;\n  width: 100%;\n  position: relative;\n"])));
-var LoadingText$1 = styled__default.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n  color: hsla(195, 10%, 52%, 0.72);\n"])));
-var LoadingBox$1 = styled__default.div(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  background-color: ", ";\n  height: calc(100% - 50px);\n  width: 100%;\n  min-height: 100px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n\n  ", " {\n    margin-top: 10px;\n  }\n"])), function (_ref) {
+var _templateObject$10, _templateObject2$X, _templateObject3$P, _templateObject4$J, _templateObject5$E;
+var Container$G = styled__default.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose([""])));
+var TableContainer = styled__default.div(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n  display: table;\n  width: 100%;\n  position: relative;\n"])));
+var LoadingText$1 = styled__default.div(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n  color: hsla(195, 10%, 52%, 0.72);\n"])));
+var LoadingBox$1 = styled__default.div(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  background-color: ", ";\n  height: calc(100% - 50px);\n  opacity: 85%;\n  width: 100%;\n  min-height: 100px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n\n  ", " {\n    margin-top: 10px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme.styles.tables.loadingOverlay;
+  return theme.colors["pureBase"];
 }, LoadingText$1);
-var EmptyTableBox = styled__default.div(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  padding: 20px;\n  width: 100%;\n  min-height: 100px;\n  text-align: center;\n  h3 {\n    font-weight: 500;\n    color: hsl(208, 8%, 38%);\n  }\n  color: hsl(207, 5%, 57%);\n"])));
+var EmptyTableBox = styled__default.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,
@@ -10486,6 +11085,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,
@@ -10525,7 +11125,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,
@@ -10553,29 +11153,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__default.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__default.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return styled.css(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.ui);
-});
-var StyledButton$4 = styled__default(Button)(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
-var StyledLoadingButton = styled__default(ButtonWithLoading)(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
-var StyledLink = styled__default(reactRouterDom.Link)(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n  color: inherit;\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n"])));
-var EditContainer = styled__default.div(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n  min-width: 320px;\n  background-color: hsl(0, 0%, 100%);\n  z-index: 99;\n  position: absolute;\n  bottom: -15px;\n  left: -11px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", " {\n    margin:0;\n    span {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-left: 5px;\n  }\n  ", " {\n    margin-left: 5px;\n  }\n"])), StyledLabel, StyledButton$4, StyledLoadingButton);
-var StyledIconButton$1 = styled__default(IconButton$2)(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose([""])));
-var TextContainer$2 = styled__default.div(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-right: 18px;\n\n  ", "\n\n  ", "\n\n  ", " {\n    opacity: 0;\n    position: absolute;\n    top: 7px;\n    right: 0;\n  };\n\n  &:hover {\n    ", " {\n      opacity: 1;\n    };\n  }\n"])), function (_ref2) {
+  return styled.css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.ui);
+});
+var StyledButton$4 = styled__default(Button)(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
+var StyledLoadingButton = styled__default(ButtonWithLoading)(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
+var StyledLink = styled__default(reactRouterDom.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__default.div(_templateObject6$x || (_templateObject6$x = _taggedTemplateLiteralLoose(["\n  min-width: 320px;\n  background-color: hsl(0, 0%, 100%);\n  z-index: 99;\n  position: absolute;\n  bottom: -15px;\n  left: -11px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", " {\n    margin:0;\n    span {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-left: 5px;\n  }\n  ", " {\n    margin-left: 5px;\n  }\n"])), StyledLabel, StyledButton$4, StyledLoadingButton);
+var StyledIconButton$1 = styled__default(IconButton$2)(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose([""])));
+var TextContainer$2 = styled__default.div(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-right: 18px;\n\n  ", "\n\n  ", "\n\n  ", " {\n    opacity: 0;\n    position: absolute;\n    top: 7px;\n    right: 0;\n  };\n\n  &:hover {\n    ", " {\n      opacity: 1;\n    };\n  }\n"])), function (_ref2) {
   var alignment = _ref2.alignment;
-  return alignment === 'center' && styled.css(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n    justify-content: center;\n  "])));
+  return alignment === 'center' && styled.css(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n    justify-content: center;\n  "])));
 }, function (_ref3) {
   var alignment = _ref3.alignment;
-  return alignment === 'right' && styled.css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n    justify-content: flex-end;\n"])));
+  return alignment === 'right' && styled.css(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n    justify-content: flex-end;\n"])));
 }, StyledIconButton$1, StyledIconButton$1);
 
 var EditCell = function EditCell(_ref4) {
@@ -10656,7 +11257,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,
@@ -11028,16 +11629,16 @@ var PTZProvider = function PTZProvider(_ref) {
   }, children);
 };
 
-var _templateObject$11, _templateObject2$Y, _templateObject3$P, _templateObject4$J, _templateObject5$F;
-var Active = styled__default.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__default.g(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
-  return active && styled.css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return active && styled.css(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Hover = styled__default.g(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
+var Hover = styled__default.g(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && styled.css(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && styled.css(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$H = styled__default.g(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n"])));
+var Container$I = styled__default.g(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n"])));
 
 var Up = function Up() {
   var _useState = React.useState(false),
@@ -11066,7 +11667,7 @@ var Up = function Up() {
   var hoverEnd = React.useCallback(function () {
     setHover(false);
   }, []);
-  return React__default.createElement(Container$H, {
+  return React__default.createElement(Container$I, {
     onMouseEnter: hoverStart,
     onMouseLeave: hoverEnd,
     onMouseDown: activeStart,
@@ -11110,17 +11711,17 @@ var Up = function Up() {
   })));
 };
 
-var _templateObject$12, _templateObject2$Z, _templateObject3$Q, _templateObject4$K, _templateObject5$G, _templateObject6$x;
-var Active$1 = styled__default.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__default.g(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
-  return active && styled.css(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return active && styled.css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Hover$1 = styled__default.g(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
+var Hover$1 = styled__default.g(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && styled.css(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && styled.css(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$I = styled__default.g(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n"])));
-var Arrow = styled__default.g(_templateObject6$x || (_templateObject6$x = _taggedTemplateLiteralLoose(["\n\n"])));
+var Container$J = styled__default.g(_templateObject5$H || (_templateObject5$H = _taggedTemplateLiteralLoose(["\n"])));
+var Arrow = styled__default.g(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n\n"])));
 
 var Down = function Down() {
   var _useState = React.useState(false),
@@ -11149,7 +11750,7 @@ var Down = function Down() {
   var hoverEnd = React.useCallback(function () {
     setHover(false);
   }, []);
-  return React__default.createElement(Container$I, {
+  return React__default.createElement(Container$J, {
     onMouseEnter: hoverStart,
     onMouseLeave: hoverEnd,
     onMouseDown: activeStart,
@@ -11194,16 +11795,16 @@ var Down = function Down() {
   })));
 };
 
-var _templateObject$13, _templateObject2$_, _templateObject3$R, _templateObject4$L, _templateObject5$H;
-var Active$2 = styled__default.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__default.g(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
-  return active && styled.css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return active && styled.css(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Hover$2 = styled__default.g(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
+var Hover$2 = styled__default.g(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && styled.css(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && styled.css(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$J = styled__default.g(_templateObject5$H || (_templateObject5$H = _taggedTemplateLiteralLoose(["\n"])));
+var Container$K = styled__default.g(_templateObject5$I || (_templateObject5$I = _taggedTemplateLiteralLoose(["\n"])));
 
 var Left = function Left() {
   var _useState = React.useState(false),
@@ -11232,7 +11833,7 @@ var Left = function Left() {
   var hoverEnd = React.useCallback(function () {
     setHover(false);
   }, []);
-  return React__default.createElement(Container$J, {
+  return React__default.createElement(Container$K, {
     onMouseEnter: hoverStart,
     onMouseLeave: hoverEnd,
     onMouseDown: activeStart,
@@ -11278,16 +11879,16 @@ var Left = function Left() {
   })));
 };
 
-var _templateObject$14, _templateObject2$$, _templateObject3$S, _templateObject4$M, _templateObject5$I;
-var Active$3 = styled__default.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__default.g(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
-  return active && styled.css(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return active && styled.css(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Hover$3 = styled__default.g(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
+var Hover$3 = styled__default.g(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && styled.css(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && styled.css(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$K = styled__default.g(_templateObject5$I || (_templateObject5$I = _taggedTemplateLiteralLoose(["\n"])));
+var Container$L = styled__default.g(_templateObject5$J || (_templateObject5$J = _taggedTemplateLiteralLoose(["\n"])));
 
 var Right = function Right() {
   var _useState = React.useState(false),
@@ -11316,7 +11917,7 @@ var Right = function Right() {
   var hoverEnd = React.useCallback(function () {
     setHover(false);
   }, []);
-  return React__default.createElement(Container$K, {
+  return React__default.createElement(Container$L, {
     onMouseEnter: hoverStart,
     onMouseLeave: hoverEnd,
     onMouseDown: activeStart,
@@ -12175,16 +12776,16 @@ var ZoomBase = function ZoomBase(_ref) {
   })), children));
 };
 
-var _templateObject$15, _templateObject2$10, _templateObject3$T, _templateObject4$N, _templateObject5$J;
-var Active$4 = styled__default.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__default.g(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
-  return active && styled.css(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return active && styled.css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Hover$4 = styled__default.g(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
+var Hover$4 = styled__default.g(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && styled.css(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && styled.css(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$L = styled__default.g(_templateObject5$J || (_templateObject5$J = _taggedTemplateLiteralLoose(["\n"])));
+var Container$M = styled__default.g(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n"])));
 
 var Up$1 = function Up() {
   var _useState = React.useState(false),
@@ -12213,7 +12814,7 @@ var Up$1 = function Up() {
   var hoverEnd = React.useCallback(function () {
     setHover(false);
   }, []);
-  return React__default.createElement(Container$L, {
+  return React__default.createElement(Container$M, {
     onMouseEnter: hoverStart,
     onMouseLeave: hoverEnd,
     onMouseDown: activeStart,
@@ -12252,16 +12853,16 @@ var Up$1 = function Up() {
   })));
 };
 
-var _templateObject$16, _templateObject2$11, _templateObject3$U, _templateObject4$O, _templateObject5$K;
-var Active$5 = styled__default.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__default.g(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
-  return active && styled.css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return active && styled.css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Hover$5 = styled__default.g(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
+var Hover$5 = styled__default.g(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && styled.css(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && styled.css(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$M = styled__default.g(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n"])));
+var Container$N = styled__default.g(_templateObject5$L || (_templateObject5$L = _taggedTemplateLiteralLoose(["\n"])));
 
 var Up$2 = function Up() {
   var _useState = React.useState(false),
@@ -12290,7 +12891,7 @@ var Up$2 = function Up() {
   var hoverEnd = React.useCallback(function () {
     setHover(false);
   }, []);
-  return React__default.createElement(Container$M, {
+  return React__default.createElement(Container$N, {
     onMouseEnter: hoverStart,
     onMouseLeave: hoverEnd,
     onMouseDown: activeStart,
@@ -12325,8 +12926,8 @@ var Up$2 = function Up() {
   })));
 };
 
-var _templateObject$17;
-var Container$N = styled__default.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__default.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,
@@ -12335,27 +12936,27 @@ var Controls = function Controls(_ref) {
   var _useContext = React.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__default.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__default.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__default.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 170px;\n  border-radius: 3px;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  position: relative;\n\n  ", " {\n    height: 100%;\n    width: 100%;\n    text-align: center;\n    img, video {\n      border-radius: 3px;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      height: 100%;\n      width: 100%;\n      object-fit: cover;\n    }\n"])), MediaBoxWrapper);
+var EmptyWithIcon = styled__default.div(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  ", "\n;\n\n  ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"])), function (_ref) {
   var hasPadding = _ref.hasPadding;
   return hasPadding && "\n    padding-bottom: 43px\n  ";
 }, IconWrapper);
-var Notice = styled__default.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__default.div(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n  ", ";\n  opacity: 0.85;\n  height: 46px;\n  width: 300px;\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  display: flex;\n  align-items: center;\n  padding: 10px;\n"])), function (_ref2) {
   var theme = _ref2.theme,
       color = _ref2.color;
-  return color && styled.css(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    color: ", ";\n  "])), theme.colors.feedback[color], theme.colors.icons.inverse);
+  return color && styled.css(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    color: ", ";\n  "])), theme.colors.feedback[color], theme.colors.icons.inverse);
 });
-var NoticeMessage = styled__default.div(_templateObject5$L || (_templateObject5$L = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 245px;\n  font-size: 10px;\n"])), EllipsisStyles);
-var NoticeTitle = styled__default.div(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 245px;\n  font-size: 12px;\n"])), EllipsisStyles);
-var NoticeIcon = styled__default.div(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n  height: 20px;\n  width: 20px;\n  margin-left: 2px;\n\n  ", " {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n"])), IconWrapper);
-var NoticeTextGroup = styled__default.div(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-left: 14px;\n"])));
-var StatusLine = styled__default.div(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  height: 3px;\n  width: 100%;\n"])), function (_ref3) {
+var NoticeMessage = styled__default.div(_templateObject5$M || (_templateObject5$M = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 245px;\n  font-size: 10px;\n"])), EllipsisStyles);
+var NoticeTitle = styled__default.div(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 245px;\n  font-size: 12px;\n"])), EllipsisStyles);
+var NoticeIcon = styled__default.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__default.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-left: 14px;\n"])));
+var StatusLine = styled__default.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];
@@ -12374,7 +12975,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',
@@ -12391,34 +12992,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__default.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 60px;\n"])));
-var LeftData = styled__default.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__default.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 60px;\n"])));
+var LeftData = styled__default.div(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  padding: 0 12px 0 12px;\n  display: flex;\n\n  ", " {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n"])), function (_ref) {
   var theme = _ref.theme,
       hasRightData = _ref.hasRightData;
-  return hasRightData && styled.css(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n    border-right: ", " 1px solid;\n    width: 195px;\n  "])), theme.colors.divider);
+  return hasRightData && styled.css(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n    border-right: ", " 1px solid;\n    width: 195px;\n  "])), theme.colors.divider);
 }, IconWrapper);
-var RightData = styled__default.div(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["\n  padding: 0 12px 0 16px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-var DeviceDataGroup = styled__default.div(_templateObject5$M || (_templateObject5$M = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-left: 14px;\n  justify-content: center;\n"])));
-var LeftTitle = styled__default.div(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", "};\n  ", ";\n\n  color: hsla(195, 10%, 52%, 0.72);\n  font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
+var RightData = styled__default.div(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["\n  padding: 0 12px 0 16px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
+var DeviceDataGroup = styled__default.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__default.div(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", "};\n  ", ";\n\n  color: hsla(195, 10%, 52%, 0.72);\n  font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
   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__default.div(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  ", ";\n  ", "\n\n  color: hsl(208, 8%, 38%);\n  font-size: 16px;\n"])), function (_ref4) {
+var LeftSubTitle = styled__default.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__default.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 80px;\n  color: hsla(195, 10%, 52%, 0.72);\n  font-size: 10px;\n  ", ";\n"])), EllipsisStyles, function (_ref6) {
+var Title$5 = styled__default.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 80px;\n  color: hsla(195, 10%, 52%, 0.72);\n  font-size: 10px;\n  ", ";\n"])), EllipsisStyles, function (_ref6) {
   var hasMarginBottom = _ref6.hasMarginBottom;
   return hasMarginBottom && "margin-bottom: 6px;";
 });
-var SubTitle = styled__default.div(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 80px;\n  color: hsl(195, 10%, 52%);\n  font-size: 12px;\n"])), EllipsisStyles);
+var SubTitle = styled__default.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,
@@ -12432,7 +13033,7 @@ var PanelMetaData = function PanelMetaData(_ref7) {
   var hasRightData = React.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,
@@ -12451,8 +13052,8 @@ var PanelMetaData = function PanelMetaData(_ref7) {
 
 var _excluded$A = ["streamProps", "panelMetaData", "customBottom", "panelOnClick"];
 
-var _templateObject$1a;
-var CameraPanelWrapper = styled__default.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n  width: 300px;\n  height: 230px;\n  border-radius: 3px;\n  box-shadow: 0 2px 10px 0 hsla(211, 42%, 86%, 0.41);\n  background-color: ", ";\n  }\n\n  ", ";\n"])), function (_ref) {
+var _templateObject$1b;
+var CameraPanelWrapper = styled__default.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) {
@@ -12473,8 +13074,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__default.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__default.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;
@@ -12487,10 +13088,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__default.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n  user-select: none;\n"])));
-var StyledLink$1 = styled__default(reactRouterDom.Link)(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n"])));
-var TagWrapper = styled__default.div(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: 500;\n  color: hsl(200, 3%, 39%);\n  padding: 4px 10px;\n  border: solid 1px hsl(120, 1%, 85%);\n  display: inline-flex;\n  align-items: center;\n  border-radius: 3px;\n  height: 26px;\n\n  ", " {\n    [stroke]{\n      ", ";\n    }\n    margin-right: 8px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  ", ";\n"])), function (_ref) {
+var _templateObject$1d, _templateObject2$15, _templateObject3$Z, _templateObject4$T;
+var TextContainer$3 = styled__default.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n  user-select: none;\n"])));
+var StyledLink$1 = styled__default(reactRouterDom.Link)(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n"])));
+var TagWrapper = styled__default.div(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: 500;\n  color: hsl(200, 3%, 39%);\n  padding: 4px 10px;\n  border: solid 1px hsl(120, 1%, 85%);\n  display: inline-flex;\n  align-items: center;\n  border-radius: 3px;\n  height: 26px;\n\n  ", " {\n    [stroke]{\n      ", ";\n    }\n    margin-right: 8px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
 }, function (_ref2) {
@@ -12503,7 +13104,7 @@ var TagWrapper = styled__default.div(_templateObject3$X || (_templateObject3$X =
   var theme = _ref4.theme,
       hoverColor = _ref4.hoverColor,
       enableHover = _ref4.enableHover;
-  return enableHover && styled.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 && styled.css(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["\n    &:hover {\n      cursor: pointer;\n      border-color: ", ";\n      color: ", ";\n      ", " {\n        [stroke]{\n          stroke: ", ";\n        }\n      }\n    }\n  "])), theme.colors.icons[hoverColor], theme.colors.icons[hoverColor], IconWrapper, theme.colors.icons[hoverColor]);
 });
 
 var Tag = function Tag(_ref5) {
@@ -12535,8 +13136,8 @@ var Tag = function Tag(_ref5) {
   }, renderTag()) : renderTag();
 };
 
-var _templateObject$1d;
-var TagListWrapper = styled__default.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__default.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;
@@ -12583,16 +13184,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__default.div(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose([""])));
-var Title$6 = styled__default.div(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: hsl(207, 5%, 57%);\n  font-size: 12px;\n  font-weight: 700;\n  margin-bottom: 17px;\n"])), function (_ref) {
+var _templateObject$1f, _templateObject2$16, _templateObject3$_, _templateObject4$U, _templateObject5$O, _templateObject6$B;
+var Container$R = styled__default.div(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose([""])));
+var Title$6 = styled__default.div(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: hsl(207, 5%, 57%);\n  font-size: 12px;\n  font-weight: 700;\n  margin-bottom: 17px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
 });
-var ButtonsWrapper$1 = styled__default.div(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n"])));
-var LeftButtons = styled__default.div(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["\n  button {\n    margin: 0 10px 10px 0;\n  }\n"])));
-var RightButtons = styled__default.div(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
-var SelectedResults = styled__default.div(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  margin-top: 29px;\n  min-height: 19px;\n  color: hsl(207, 5%, 57%);\n  font-size: 12px;\n"])), function (_ref2) {
+var ButtonsWrapper$1 = styled__default.div(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var LeftButtons = styled__default.div(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["\n  button {\n    margin: 0 10px 10px 0;\n  }\n"])));
+var RightButtons = styled__default.div(_templateObject5$O || (_templateObject5$O = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
+var SelectedResults = styled__default.div(_templateObject6$B || (_templateObject6$B = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  margin-top: 29px;\n  min-height: 19px;\n  color: hsl(207, 5%, 57%);\n  font-size: 12px;\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.fontFamily.ui;
 });
@@ -12617,7 +13218,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,
@@ -12857,18 +13458,18 @@ function useBreakpoints() {
   return breakpoints;
 }
 
-var _templateObject$1f, _templateObject2$16, _templateObject3$Z, _templateObject4$T, _templateObject5$O;
-var Container$R = styled__default.div(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose([""])));
-var Title$7 = styled__default.div(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
+var _templateObject$1g, _templateObject2$17, _templateObject3$$, _templateObject4$V, _templateObject5$P;
+var Container$S = styled__default.div(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose([""])));
+var Title$7 = styled__default.div(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
   var typography = _ref.theme.typography;
   return typography.modal.title;
 });
-var MessageBox$1 = styled__default.div(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n  ", ";\n  margin: 28px 0;\n"])), function (_ref2) {
+var MessageBox$1 = styled__default.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__default(Button)(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n"])));
-var ButtonsGroup$1 = styled__default.div(_templateObject5$O || (_templateObject5$O = _taggedTemplateLiteralLoose(["\n  text-align: right;\n"])));
+var StyledButton$5 = styled__default(Button)(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n"])));
+var ButtonsGroup$1 = styled__default.div(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n  text-align: right;\n"])));
 
 var ConfirmationModal = function ConfirmationModal(_ref3) {
   var _ref3$title = _ref3.title,
@@ -12901,7 +13502,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, {
@@ -12910,21 +13511,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__default.div(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n"])));
-var MobileLayout = styled__default.div(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose([""])));
-var Content = styled__default.div(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  flex: 1;\n  overflow: auto;\n\n  & > div {\n    max-width: 1400px;\n  }\n\n  ", "\n"])), function (_ref) {
+var Layout = styled__default.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n"])));
+var MobileLayout = styled__default.div(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose([""])));
+var Content = styled__default.div(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  flex: 1;\n  overflow: auto;\n\n  & > div {\n    max-width: 1400px;\n  }\n\n  ", "\n"])), function (_ref) {
   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 && styled.css(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["\n      & > div {\n        max-width: ", ";\n      }\n    "])), maxWidth);
+  return maxWidth && styled.css(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["\n      & > div {\n        max-width: ", ";\n      }\n    "])), maxWidth);
 });
-var MainContainer = styled__default.div(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n"])));
-var ContentArea = styled__default.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__default.div(_templateObject5$Q || (_templateObject5$Q = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n"])));
+var ContentArea = styled__default.div(_templateObject6$C || (_templateObject6$C = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  width: 100%;\n  padding: ", ";\n  margin-left: auto;\n  margin-right: auto;\n\n  @media ", " {\n    padding: ", ";\n  }\n\n  @media ", " {\n    max-width: ", ";\n    padding: ", ";\n  }\n"])), function (_ref3) {
   var paddingOverride = _ref3.paddingOverride;
   return paddingOverride ? paddingOverride : '40px 20px';
 }, deviceMediaQuery.medium, function (_ref4) {
@@ -12938,45 +13539,45 @@ var ContentArea = styled__default.div(_templateObject6$B || (_templateObject6$B
   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__default.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__default.div(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return styled.css(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose(["\n    transition: opacity ", " ", ";\n  "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
+  return styled.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 && styled.css(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n    font-size:14px;\n  "])));
+  return compact && styled.css(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose(["\n    font-size:14px;\n  "])));
 });
-var ContextIcon = styled__default.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__default.div(_templateObject4$X || (_templateObject4$X = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  flex: 0 0 40px;\n  width: 40px;\n  height: 40px;\n  margin: 0 20px;\n\n  border-radius: 7px;\n  display:flex;\n  justify-content:center;\n  align-items:center;\n\n  svg {\n    display: block;\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
-  return styled.css(_templateObject5$Q || (_templateObject5$Q = _taggedTemplateLiteralLoose(["\n    ", ";\n    transition: background ", " ", ";\n  "])), theme.styles.global.mainMenu.iconBackground["default"], theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
+  return styled.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__default.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__default.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 styled.css(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose(["\n    transition: opacity 0 ", ";\n  "])), theme.animation.easing.primary.easeInOut);
+  return styled.css(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose(["\n    transition: opacity 0 ", ";\n  "])), theme.animation.easing.primary.easeInOut);
 });
-var ContextActionBaseCSS = styled.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__default.a(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  text-decoration: none;\n"])));
-var ExternalIconWrapper = styled__default.div(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
-var ContextWrapper = styled__default.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 = styled.css(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n  -webkit-tap-highlight-color: transparent;\n  border: none;\n  background: none;\n  display: flex;\n  justify-content:left;\n  align-items:center;\n  flex-wrap: wrap;\n  cursor: pointer;\n  width: 100%;\n  outline: none;\n  padding: 0;\n  text-decoration: none;\n"])));
+var StyledAnchor = styled__default.a(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n  display: flex;\n  text-decoration: none;\n"])));
+var ExternalIconWrapper = styled__default.div(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
+var ContextWrapper = styled__default.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 && styled.css(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
+  return theme && styled.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 && styled.css(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n  ", "{\n    opacity: 1;\n  }\n"])), ContextTitle);
-}, ContextIcon, function (_ref7) {
+  return $menuOpen && styled.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__default(reactRouterDom.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__default(reactRouterDom.Link)(_templateObject14$7 || (_templateObject14$7 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n\n  &:hover ", "{\n    opacity: 1;\n    ", ";\n    ", "{\n      [stroke]{\n        stroke: ", ";\n      }\n    }\n  }\n\n  ", "\n"])), ContextActionBaseCSS$1, function (_ref9) {
   var theme = _ref9.theme;
-  return theme && styled.css(_templateObject15$4 || (_templateObject15$4 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
+  return theme && styled.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 && styled.css(_templateObject16$4 || (_templateObject16$4 = _taggedTemplateLiteralLoose(["\n    ", "{\n      opacity: 1;\n    }\n  "])), ContextTitle);
-}, ContextIcon, function (_ref11) {
+  return $menuOpen && styled.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) {
@@ -12984,19 +13585,19 @@ var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject14$5 ||
   return theme.colors.icons['inverse'];
 }, function (_ref13) {
   var $isActive = _ref13.$isActive;
-  return $isActive && styled.css(_templateObject17$4 || (_templateObject17$4 = _taggedTemplateLiteralLoose(["\n    ", ",\n    &:hover ", "{\n      ", ";\n    }\n  "])), ContextIcon, ContextIcon, function (_ref14) {
+  return $isActive && styled.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__default.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__default.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 && styled.css(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", ";\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
+  return theme && styled.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 && styled.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 && styled.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) {
@@ -13004,7 +13605,7 @@ var ContextActionButton = styled__default.button(_templateObject18$2 || (_templa
   return theme.colors.icons['inverse'];
 }, function (_ref19) {
   var isActive = _ref19.isActive;
-  return isActive && styled.css(_templateObject21$2 || (_templateObject21$2 = _taggedTemplateLiteralLoose(["\n    ", ",\n    &:hover ", "{\n      ", ";\n    }\n  "])), ContextIcon, ContextIcon, function (_ref20) {
+  return isActive && styled.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;
   });
@@ -13024,7 +13625,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,
@@ -13038,7 +13639,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() {
@@ -13200,42 +13801,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__default.ul(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n  margin-left: 40px;\n  padding: 0;\n\n"])));
-var SubmenuHeader = styled__default.div(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 40px;\n  margin-left: 40px;\n"])));
-var SubmenuItemTitle = styled__default.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__default.ul(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n  margin-left: 40px;\n  padding: 0;\n\n"])));
+var SubmenuHeader = styled__default.div(_templateObject2$1a || (_templateObject2$1a = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 40px;\n  margin-left: 40px;\n"])));
+var SubmenuItemTitle = styled__default.span(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n  display: block;\n  ", ";\n\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme && styled.css(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", "\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subheader);
+  return theme && styled.css(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    ", "\n  "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subheader);
 });
-var SubmenuItemLink = styled__default(reactRouterDom.Link)(_templateObject5$R || (_templateObject5$R = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n"])), resetButtonStyles);
-var ExternalIconWrapper$1 = styled__default.div(_templateObject6$D || (_templateObject6$D = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
-var SubmenuItemAnchor = styled__default.a(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  align-items: center;\n"])), resetButtonStyles);
-var SubmenuItem = styled__default.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__default(reactRouterDom.Link)(_templateObject5$S || (_templateObject5$S = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n"])), resetButtonStyles);
+var ExternalIconWrapper$1 = styled__default.div(_templateObject6$E || (_templateObject6$E = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
+var SubmenuItemAnchor = styled__default.a(_templateObject7$A || (_templateObject7$A = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  align-items: center;\n"])), resetButtonStyles);
+var SubmenuItem = styled__default.li(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 30px;\n  padding-left: 40px;\n  position: relative;\n\n  &::after {\n    display: block;\n    content: '';\n    height: 1px;\n    width: 14px;\n    position: absolute;\n    left: 0;\n    top: 10px;\n    background: ", ";\n  }\n\n  ", ", ", "{\n\n    ", ";\n\n\n\n  }\n"])), function (_ref2) {
   var colors = _ref2.theme.colors;
   return colors.divider;
 }, SubmenuItemLink, SubmenuItemAnchor, function (_ref3) {
   var theme = _ref3.theme,
       isActive = _ref3.isActive;
-  return theme && styled.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 && styled.css(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n        &, &:hover {\n          ", ";\n        }\n      "])), theme.typography.global.mainMenu.subItem.active));
+  return theme && styled.css(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n      font-family: ", ";\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      ", "\n\n    "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover, isActive && styled.css(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n        &, &:hover {\n          ", ";\n        }\n      "])), theme.typography.global.mainMenu.subItem.active));
 });
 var SubmenuContainer = styled__default.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 && styled.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 && styled.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__default.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__default.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 && styled.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 && styled.css(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n    ", "{\n      transition:\n        max-height ", " ", ",\n        opacity ", " ", ";\n      max-height: ", "px !important;\n      opacity: 1;\n    }\n  "])), SubmenuContainer, theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut, maxHeight);
 }, function (_ref8) {
   var loading = _ref8.loading;
-  return loading === 'true' && styled.css(_templateObject15$5 || (_templateObject15$5 = _taggedTemplateLiteralLoose(["\n    ", "{\n      max-height: none !important;\n      opacity: 1;\n    }\n  "])), SubmenuContainer);
+  return loading === 'true' && styled.css(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n    ", "{\n      max-height: none !important;\n      opacity: 1;\n    }\n  "])), SubmenuContainer);
 });
 
 var NavigationItem = function NavigationItem(_ref9) {
@@ -13347,30 +13948,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__default(reactRouterDom.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__default.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__default.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__default.object(_templateObject4$X || (_templateObject4$X = _taggedTemplateLiteralLoose([""])));
-var SVGObjectText = styled__default.object(_templateObject5$S || (_templateObject5$S = _taggedTemplateLiteralLoose(["\n  max-width: 180px;\n"])));
-var NavigationContainer = styled__default.div(_templateObject6$E || (_templateObject6$E = _taggedTemplateLiteralLoose([""])));
-var MenuFooter = styled__default.div(_templateObject7$A || (_templateObject7$A = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  justify-content: flex-end;\n"])), function (_ref) {
+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__default(reactRouterDom.Link)(_templateObject$1k || (_templateObject$1k = _taggedTemplateLiteralLoose(["\n  height: 50px;\n  margin: 0 20px 55px 15px;\n  display: flex;\n\n  object {\n    pointer-events: none;\n  }\n"])));
+var LogoMark = styled__default.div(_templateObject2$1b || (_templateObject2$1b = _taggedTemplateLiteralLoose(["\n  height: 50px;\n  flex: 0 0 50px;\n  margin-right: 15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n"])));
+var LogoType = styled__default.div(_templateObject3$13 || (_templateObject3$13 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  flex: 1;\n  height: 50px;\n  display: flex;\n  justify-content: left;\n  align-items: center;\n"])));
+var SVGObject = styled__default.object(_templateObject4$Z || (_templateObject4$Z = _taggedTemplateLiteralLoose([""])));
+var SVGObjectText = styled__default.object(_templateObject5$T || (_templateObject5$T = _taggedTemplateLiteralLoose(["\n  max-width: 180px;\n"])));
+var NavigationContainer = styled__default.div(_templateObject6$F || (_templateObject6$F = _taggedTemplateLiteralLoose([""])));
+var MenuFooter = styled__default.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 && styled.css(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), theme.styles.global.mainMenu.footerBackground);
+  return theme && styled.css(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), theme.styles.global.mainMenu.footerBackground);
 });
-var FooterItemContainer = styled__default.div(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n  min-height: 70px;\n"])));
-var PushContainer = styled__default.div(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 100%;\n  ", ";\n"])), function (_ref2) {
+var FooterItemContainer = styled__default.div(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n  min-height: 70px;\n"])));
+var PushContainer = styled__default.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 && styled.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__default.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__default.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 && styled.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' ? "" : styled.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 && styled.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' ? "" : styled.css(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n      transition: width ", " ", "\n      "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut), open ? theme.dimensions.global.mainMenu.width.open : theme.dimensions.global.mainMenu.width.closed, theme.styles.global.mainMenu.lines.backgroundColor, LogoType, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, open ? 1 : 0);
 });
-var ContainerInner = styled__default.div(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])), function (_ref4) {
+var ContainerInner = styled__default.div(_templateObject15$7 || (_templateObject15$7 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.dimensions.global.mainMenu.width.open;
 });
@@ -13390,7 +13991,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,
@@ -13414,29 +14016,20 @@ var MainMenu = function MainMenu(_ref5) {
     }
 
     setMenuOpen();
-
-    if (onMenuToggle) {
-      onMenuToggle(true);
-    }
-  }, [onMenuToggle, setMenuOpen]);
+  }, [setMenuOpen]);
   var autoMenuClose = React.useCallback(function () {
     setMenuClose();
-
-    if (onMenuToggle) {
-      onMenuToggle(false);
-    }
-  }, [onMenuToggle, setMenuClose]);
+  }, [setMenuClose]);
   var toggleMenuPin = React.useCallback(function (e) {
     if (e.pointerType === 'touch') {
       return;
     }
 
     togglePinned();
-
-    if (onMenuToggle) {
-      onMenuToggle(true);
-    }
-  }, [onMenuToggle, togglePinned]);
+  }, [togglePinned]);
+  React.useEffect(function () {
+    onMenuToggle(menuState.isMenuOpen);
+  }, [menuState.isMenuOpen, onMenuToggle]);
   var setFocusedContextCb = React.useCallback(function (contextKey) {
     if (contextKey === -1) {
       return;
@@ -13453,7 +14046,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,
@@ -13500,20 +14093,109 @@ var MainMenu = function MainMenu(_ref5) {
   })) : null))), document.body));
 };
 
-var _templateObject$1k, _templateObject2$1b, _templateObject3$12, _templateObject4$Y;
-var Container$T = styled__default.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__default.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose(["\n  margin: 10px 10px;\n  border: 1px solid #e2e2e380;\n  background-color: #eeeded80;\n  border-radius: 5px;\n  &:active {\n    box-shadow: 4px 4px #eeeded80;\n  }\n"])));
+var LabelTitle = styled__default.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n  max-width: 130px;\n  overflow-wrap: initial;\n  white-space: break-spaces;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  opacity: 0.76;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: #575757;\n  font-family: ", ";\n  margin-top: 2px;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.fontFamily.ui;
+});
+var LabelContent = styled__default.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n  font-size: 10px;\n  padding-left: 10px;\n  max-width: 200px;\n  overflow-wrap: initial;\n  white-space: break-spaces;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 4px 0 5px 0;\n  white-space: nowrap;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: rgba(87, 87, 87, 0.5);\n"])));
+var LabelNotes = styled__default.div(_templateObject4$_ || (_templateObject4$_ = _taggedTemplateLiteralLoose(["\n  padding-left: 10px;\n  max-width: 200px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 5px 0 8px 0;\n  max-height: 23px;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: rgba(87, 87, 87, 0.5);\n  ", "\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme && styled.css(_templateObject5$U || (_templateObject5$U = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.data);
+});
+var TitleContainer = styled__default.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap:6px;\n  flex-direction: row;\n  align-items: center;\n  margin-left: 10px;\n  margin: 3px 0 5px 10px;\n"])));
+var Container$U = styled__default.div(_templateObject7$C || (_templateObject7$C = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n"])));
+var TitleBox = styled__default.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var IconBox = styled__default.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__default.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__default.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 = React.useState(false),
+      showCopyText = _useState[0],
+      setShowCopyText = _useState[1];
+
+  var _useState2 = React.useState('dimmed'),
+      onHoverColorValue = _useState2[0],
+      setOnHoverColorValue = _useState2[1];
+
+  var onClickCopyText = React.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 = React.useCallback(function () {
+    setOnHoverColorValue('mono');
+  }, []);
+  var onLeaveMeatInfo = React.useCallback(function () {
+    setOnHoverColorValue('dimmed');
+  }, []);
+  return React__default.createElement(React.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__default.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__default.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__default.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__default.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__default.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__default.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__default.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) {
@@ -13528,7 +14210,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,
@@ -13537,72 +14219,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__default.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose([""])));
-var DrawerBottom = styled__default.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__default.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose([""])));
+var DrawerBottom = styled__default.div(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
-  return styled.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 styled.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__default.h2(_templateObject4$Z || (_templateObject4$Z = _taggedTemplateLiteralLoose(["\n  ", ";\n  padding: 0;\n  margin: 0 0 5px;\n"])), function (_ref2) {
+var DrawerHeader = styled__default.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__default.div(_templateObject5$T || (_templateObject5$T = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 15px;\n\n  ", ";\n"])), function (_ref3) {
+var CurrentUser = styled__default.div(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 15px;\n\n  ", ";\n"])), function (_ref3) {
   var theme = _ref3.theme;
-  return styled.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 styled.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__default.div(_templateObject7$B || (_templateObject7$B = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 10px 20px;\n  ", ";\n\n"])), function (_ref4) {
+var UserOptions = styled__default.div(_templateObject7$D || (_templateObject7$D = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 10px 20px;\n  ", ";\n\n"])), function (_ref4) {
   var theme = _ref4.theme;
-  return styled.css(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n  "])), theme.styles.global.mainMenu.lines.backgroundColor);
+  return styled.css(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n  "])), theme.styles.global.mainMenu.lines.backgroundColor);
 });
-var Logout = styled__default.div(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n    padding: 0 20px;\n"])));
-var LinkMenu = styled__default.ul(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 12px 0 0 0;\n  list-style: none;\n"])));
-var LinkMenuItem = styled__default.li(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n  padding: 10px 0;\n"])));
-var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n  width: 100%;\n\n  ", ";\n\n  ", ";\n"])), resetButtonStyles, function (_ref5) {
+var Logout = styled__default.div(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n    padding: 0 20px;\n"])));
+var LinkMenu = styled__default.ul(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 12px 0 0 0;\n  list-style: none;\n"])));
+var LinkMenuItem = styled__default.li(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n  padding: 10px 0;\n"])));
+var IconWrapperFooter = styled__default.div(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n  width: 5px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  > div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n  padding-right: 20px;\n"])));
+var LinkMenuItemA = styled__default(reactRouterDom.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 styled.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 styled.css(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n    ", ";\n\n    &:hover {\n      ", ";\n    }\n  "])), theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover);
 }, function (_ref6) {
   var theme = _ref6.theme,
       isActive = _ref6.isActive;
-  return isActive && styled.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 && styled.css(_templateObject15$8 || (_templateObject15$8 = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      ", ";\n    }\n  "])), theme.typography.global.mainMenu.subItem.active);
+});
+var FooterMeta = styled__default.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__default.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 styled.css(_templateObject18$4 || (_templateObject18$4 = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n  "])), theme.colors.divider);
+});
+var FooterText = styled__default.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 = React.useCallback(function (e) {
     try {
       e.preventDefault();
@@ -13622,9 +14333,18 @@ var UserMenu = function UserMenu(_ref7) {
       closeOnClick();
     }
   }, [closeOnClick]);
-  return React__default.createElement(React.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(React.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, {
@@ -13644,40 +14364,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__default.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 18px 20px 12px 20px;\n  height: 122px;\n"])));
-var ImgWrapper = styled__default.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n  border-radius: 5px;\n  overflow: hidden;\n  height: 40px;\n  width: 40px;\n  flex-shrink: 0;\n"])));
-var EmptyImg = styled__default.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n  background-color: hsl(210, 22%, 91%);\n  width: 100%;\n  height: 100%;\n"])));
-var Image$3 = styled__default.div(_templateObject4$_ || (_templateObject4$_ = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-image: url(", ");\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat; \n  display: ", ";\n"])), function (p) {
+var _templateObject$1o, _templateObject2$1f, _templateObject3$17, _templateObject4$11, _templateObject5$W, _templateObject6$I, _templateObject7$E, _templateObject8$A;
+var Container$W = styled__default.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__default.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__default.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n  background-color: hsl(210, 22%, 91%);\n  width: 100%;\n  height: 100%;\n"])));
+var Image$2 = styled__default.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__default.div(_templateObject5$U || (_templateObject5$U = _taggedTemplateLiteralLoose(["\n  margin-left: 20px;\n"])));
-var Title$9 = styled__default.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  font-weight: 500;\n  color: hsl(0, 0%, 34%);\n"])));
-var Message = styled__default.div(_templateObject7$C || (_templateObject7$C = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  font-weight: 500;\n  overflow: hidden;\n  color: hsl(0, 0%, 34%);\n  margin: 4px 0;\n  height: 30px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: inline-block;\n  vertical-align: middle;\n"])));
-var TimeMsg = styled__default.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  font-weight: 500;\n  color: hsl(0, 0%, 67%);\n  margin-top: 15px;\n"])));
+var InfoContainer = styled__default.div(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n  margin-left: 20px;\n"])));
+var Title$9 = styled__default.div(_templateObject6$I || (_templateObject6$I = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  font-weight: 500;\n  color: hsl(0, 0%, 34%);\n"])));
+var Message = styled__default.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__default.div(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  font-weight: 500;\n  color: hsl(0, 0%, 67%);\n  margin-top: 15px;\n"])));
 
 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__default.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var StatusContainer = styled__default.h2(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n    text-transform: uppercase;\n    padding: 10px 0 10px 20px;\n    font-size: 14px;\n    font-weight: 500;\n    color: hsl(0, 0%, 34%);\n    border-bottom: ", " 1px solid;\n    margin: 0;\n"])), function (_ref) {
+var _templateObject$1p, _templateObject2$1g, _templateObject3$18;
+var Container$X = styled__default.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var StatusContainer = styled__default.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__default.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n  border-bottom: ", " 1px solid;\n"])), function (_ref2) {
+var NotificationWrapper = styled__default.div(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n  border-bottom: ", " 1px solid;\n"])), function (_ref2) {
   var colors = _ref2.theme.colors;
   return colors.divider;
 });
@@ -13701,21 +14430,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(React.Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
+  return React__default.createElement(Container$X, null, unread && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
 };
 
-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__default.div(_templateObject$1o || (_templateObject$1o = _taggedTemplateLiteralLoose(["\n  z-index: 9;\n  position: sticky;\n  top: 0;\n  align-self: flex-start;\n  height: 65px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"])), function (_ref) {
+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__default.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 && styled.css(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n    // box-shadow: 5px 7px 10px 0 hsla(205, 16%, 77%, 0.1);\n    background-color:", ";\n  "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.styles.global.mainMenu.background.backgroundColor);
+  return colors && styled.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__default.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n  margin-left: 25px;\n  flex: 0 1 500px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var IconWrapper$3 = styled__default.div(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n  flex: 0 40px;\n  width: 5px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  > div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])));
-var SearchInput = styled__default.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__default.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__default.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__default.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) {
@@ -13725,19 +14454,19 @@ var SearchInput = styled__default.input(_templateObject5$V || (_templateObject5$
   var typography = _ref4.theme.typography;
   return typography.global.topBar.search.placeholder;
 });
-var ButtonArea = styled__default.div(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n  height: inherit;\n  padding-right: 10px;\n  display: flex;\n"])));
+var ButtonArea = styled__default.div(_templateObject6$J || (_templateObject6$J = _taggedTemplateLiteralLoose(["\n  height: inherit;\n  padding-right: 10px;\n  display: flex;\n"])));
 var DrawerToggle = styled__default.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 styled.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 styled.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 && styled.css(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      border-bottom-color: ", ";\n    }\n  "])), theme.colors.menu.active);
+  return isActive && styled.css(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      border-bottom-color: ", ";\n    }\n  "])), theme.colors.menu.active);
 });
-var DrawerPortalWrapper = styled__default.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose([""])));
-var Drawer = styled__default.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__default.div(_templateObject10$q || (_templateObject10$q = _taggedTemplateLiteralLoose([""])));
+var Drawer = styled__default.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) {
@@ -13751,12 +14480,12 @@ var Drawer = styled__default.div(_templateObject11$h || (_templateObject11$h = _
   return baseWidth ? baseWidth : "200px";
 }, function (_ref11) {
   var theme = _ref11.theme;
-  return styled.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 styled.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 && styled.css(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n    right: 0;\n    opacity: 1;\n    visibility: visible;\n  "])));
+  return isOpen && styled.css(_templateObject13$d || (_templateObject13$d = _taggedTemplateLiteralLoose(["\n    right: 0;\n    opacity: 1;\n    visibility: visible;\n  "])));
 });
-var NotificationsContainer = styled__default.div(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n    overflow-y: scroll;\n    margin-right: -17px;\n"])));
+var NotificationsContainer = styled__default.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,
@@ -13800,7 +14529,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 = React.useState(null),
       openDrawer = _useState[0],
@@ -13816,7 +14553,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'
@@ -13865,7 +14602,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'
@@ -13895,8 +14639,8 @@ var Tabs = function Tabs(_ref) {
   }, children);
 };
 
-var _templateObject$1p;
-var TabListWrapper = styled__default.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n"])));
+var _templateObject$1r;
+var TabListWrapper = styled__default.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n"])));
 
 var TabList = function TabList(_ref) {
   var children = _ref.children,
@@ -13913,11 +14657,11 @@ var TabList = function TabList(_ref) {
 
 var _excluded$E = ["children", "tabFor", "onClick"];
 
-var _templateObject$1q, _templateObject2$1g, _templateObject3$17;
-var TabComponent = styled__default.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__default.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__default.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__default.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 styled.css(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.ui);
+  return styled.css(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.ui);
 }, function (_ref2) {
   var active = _ref2.active;
   return active ? '600' : '500';
@@ -13952,8 +14696,8 @@ var Tab = function Tab(_ref5) {
 
 var _excluded$F = ["children", "tabId"];
 
-var _templateObject$1r;
-var Container$X = styled__default.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose(["\n"])));
+var _templateObject$1t;
+var Container$Z = styled__default.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n"])));
 
 var TabContent = function TabContent(_ref) {
   var children = _ref.children,
@@ -13963,20 +14707,20 @@ var TabContent = function TabContent(_ref) {
   var _useContext = React.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__default.button(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose(["\n  ", "\n  flex-basis: auto;\n  flex-grow: 1;\n"])), resetButtonStyles);
-var LinkTab = styled__default.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__default.button(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose(["\n  ", "\n  flex-basis: auto;\n  flex-grow: 1;\n"])), resetButtonStyles);
+var LinkTab = styled__default.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 styled.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 styled.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 && styled.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 && styled.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) {
@@ -13995,7 +14739,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);
     }
@@ -14010,23 +14754,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__default.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: 22px;\n  padding-bottom: 7px;\n  height: 60px;\n  cursor: pointer;\n\n  ", ";\n  ", " {\n    margin-left: 2px;\n    flex-shrink: 0;\n  }\n"])), function (_ref) {
+var _templateObject$1v, _templateObject2$1k, _templateObject3$1c, _templateObject4$14, _templateObject5$Y, _templateObject6$K;
+var Container$$ = styled__default.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 ? styled.css(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid hsl(196, 100%, 40%);\n    "]))) : styled.css(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid transparent;\n  "])));
+  return active ? styled.css(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid hsl(196, 100%, 40%);\n    "]))) : styled.css(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid transparent;\n  "])));
 }, IconWrapper);
-var Title$a = styled__default.div(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-family: ", ";\n  letter-spacing: 0.09px;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 5px;\n  flex-shrink: 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])), function (_ref2) {
+var Title$a = styled__default.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__default.div(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  font-family: ", ";\n  font-style: italic;\n  color: hsla(195, 10%, 52%, 0.72);\n  flex-shrink: 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])), function (_ref4) {
+var SubTitle$2 = styled__default.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__default.div(_templateObject6$I || (_templateObject6$I = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  margin-right: 20px;\n"])));
+var TextGroup$1 = styled__default.div(_templateObject6$K || (_templateObject6$K = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  margin-right: 20px;\n"])));
 
 var TabWithIcon = function TabWithIcon(_ref5) {
   var icon = _ref5.icon,
@@ -14043,7 +14787,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() {
@@ -14060,9 +14804,9 @@ var TabWithIcon = function TabWithIcon(_ref5) {
   }), title), subtitle && React__default.createElement(SubTitle$2, null, subtitle)));
 };
 
-var _templateObject$1u, _templateObject2$1j;
-var Container$_ = styled__default.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose([""])));
-var TabListWrapper$1 = styled__default.div(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n  padding-top: 10px;\n  padding-left: ", ";\n  box-shadow: 0 -5px 5px 0 hsla(0, 0%, 0%, 0.01);\n  border-bottom: 1px solid hsl(0, 0%, 89%);\n  overflow-y: auto;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none;  /* Internet Explorer 10+ */\n    &::-webkit-scrollbar { /* WebKit */\n    width: 0;\n    height: 0;\n  }\n"])), function (_ref) {
+var _templateObject$1w, _templateObject2$1l;
+var Container$10 = styled__default.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose([""])));
+var TabListWrapper$1 = styled__default.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';
 });
@@ -14071,7 +14815,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
@@ -14100,13 +14844,13 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
 
 var _excluded$I = ["closeId", "closeText"];
 
-var _templateObject$1v, _templateObject2$1k, _templateObject3$1a, _templateObject4$12;
-var StyledButton$6 = styled__default.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__default.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 styled.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 styled.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__default.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__default.div(_templateObject4$12 || (_templateObject4$12 = _taggedTemplateLiteralLoose(["\n  text-transform: uppercase;\n"])));
+var IconContainer$2 = styled__default.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__default.div(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose(["\n  text-transform: uppercase;\n"])));
 
 var CloseButton$1 = function CloseButton(_ref2) {
   var closeId = _ref2.closeId,
@@ -14128,9 +14872,9 @@ var CloseButton$1 = function CloseButton(_ref2) {
   })), React__default.createElement(TextWrapper, null, closeText));
 };
 
-var _templateObject$1w, _templateObject2$1l;
-var Container$$ = styled__default.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__default.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__default.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__default.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,
@@ -14139,14 +14883,14 @@ var MobileNavbarContent = function MobileNavbarContent(_ref) {
   var _useContext = React.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__default.div(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose([""])));
-var ItemWrapper = styled__default.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__default.div(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose([""])));
+var ItemWrapper = styled__default.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n  padding: 14px 0;\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
-  return styled.css(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", "\n  "])), theme.colors.divider);
+  return styled.css(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", "\n  "])), theme.colors.divider);
 });
 
 var MobileMenu = function MobileMenu(_ref2) {
@@ -14189,7 +14933,7 @@ var MobileMenu = function MobileMenu(_ref2) {
   var handleCloseMenu = React.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
@@ -14217,10 +14961,10 @@ var MobileMenu = function MobileMenu(_ref2) {
   })));
 };
 
-var _templateObject$1y, _templateObject2$1n, _templateObject3$1c;
-var Logo$1 = styled__default(reactRouterDom.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__default.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n  margin-right: 15px;\n"])));
-var SVGObject$1 = styled__default.object(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose([""])));
+var _templateObject$1A, _templateObject2$1p, _templateObject3$1f;
+var Logo$1 = styled__default(reactRouterDom.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__default.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n  margin-right: 15px;\n"])));
+var SVGObject$1 = styled__default.object(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose([""])));
 
 var MobileLogoLink = function MobileLogoLink(_ref) {
   var _ref$home = _ref.home,
@@ -14242,8 +14986,10 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
   }) : React__default.createElement(SvgLogoMark, null)));
 };
 
-var _templateObject$1z;
-var Container$11 = styled__default.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__default.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;
 });
@@ -14258,7 +15004,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 = React.useContext(TabContext),
       setSelected = _useContext.setSelected;
@@ -14266,7 +15013,7 @@ var MobileUserMenu = function MobileUserMenu(_ref2) {
   var handleCloseMenu = React.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,
@@ -14276,22 +15023,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__default.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__default.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__default.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__default.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);
@@ -14315,8 +15064,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
   }, {
@@ -14346,7 +15097,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,
@@ -14356,7 +15107,7 @@ var MobileNavbar = function MobileNavbar(_ref3) {
     loggedInUser: loggedInUser,
     onLogout: onLogout,
     onLanguageToggle: onLanguageToggle
-  }, {
+  }, props), {
     closeId: CLOSE_ID
   }))), React__default.createElement(TabContent, {
     tabId: MENU_TAB
@@ -14373,7 +15124,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,
@@ -14388,7 +15139,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;
@@ -14401,33 +15152,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__default.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__default.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__default.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__default.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__default.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__default.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__default.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__default(reactRouterDom.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__default(reactRouterDom.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__default.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__default.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__default.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__default.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__default.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__default.div(_templateObject6$L || (_templateObject6$L = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.35px;\n  color: hsl(0, 0%, 50%);\n  margin-bottom: 18px;\n"])));
+var SidebarLinkHeading = styled__default.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__default(reactRouterDom.Link)(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.35px;\n  color: hsl(0, 0%, 50%);\n"])));
+var SLink = styled__default(reactRouterDom.Link)(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 30px;\n  top: 15px;\n  /* width: 80px; */\n  /* height: 30px; */\n  font-size: 14px;\n  font-weight: 600;\n  text-align: center;\n  color: hsl(0, 0%, 55%);\n  border-radius: 3px;\n  background-color: hsl(206, 70%, 96%);\n  text-decoration: none;\n  padding: 7px 20px;\n"])));
 var SidebarLink = function SidebarLink(_ref) {
   var title = _ref.title,
       to = _ref.to;
@@ -14443,9 +15193,9 @@ 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);
 };
 
 Object.defineProperty(exports, 'IconSVGs', {
@@ -14482,6 +15232,7 @@ exports.FilterButton = FilterButton;
 exports.FilterDropdown = FilterDropdown;
 exports.FilterDropdownContainer = FilterDropdownContainer;
 exports.FilterInputs = FilterInputs;
+exports.FilterLayout = FilterLayout;
 exports.FiltersResults = FiltersResults;
 exports.Form = Form;
 exports.GlobalUI = GlobalUI;