@mw-kit/mw-ui 1.7.23 → 1.7.25

package/dist/index.modern.js

@@ -420,6 +420,14 @@ var getSpacings = function getSpacings(value, defaults) {
   };
   return values.top + " " + values.right + " " + values.bottom + " " + values.left;
 };
+var getBorder = function getBorder(config) {
+  return 'color' in config ? {
+    top: config,
+    left: config,
+    bottom: config,
+    right: config
+  } : config;
+};
 
 var Transition = function Transition(props) {
   var active = props.active,
@@ -12619,8 +12627,8 @@ var ScrollContainer = function ScrollContainer(props) {
   })), after);
 };
 
-var _templateObject$8, _templateObject2$7, _templateObject3$7, _templateObject4$6, _templateObject5$5, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$3;
-var Option = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: ", ";\n  color: ", ";\n  display: flex;\n\n  > :nth-child(1) {\n    flex: 1;\n  }\n\n  ", ";\n\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_ref) {
+var _templateObject$8, _templateObject2$7, _templateObject3$7, _templateObject4$6, _templateObject5$5, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$2;
+var Option = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: ", ";\n  color: ", ";\n  display: flex;\n\n  > :nth-child(1) {\n    flex: 1;\n  }\n\n  ", ";\n\n  ", ";\n\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -12638,11 +12646,25 @@ var Option = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplat
 
   return css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      opacity: 0.3;\n    "])));
 }, function (_ref5) {
-  var theme = _ref5.theme;
+  var border = _ref5.border,
+      theme = _ref5.theme;
+  if (!border) return;
+  var config = getBorder(border);
+  return keys(config).filter(function (k) {
+    return config[k] !== undefined;
+  }).map(function (pos) {
+    var cfg = config[pos];
+    var width = cfg.width || '1px';
+    var style = cfg.style || 'solid';
+    var color = isKeyOf(theme.colors, cfg.color) ? theme.colors[cfg.color] : cfg.color;
+    return css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n          border-", "-width: ", ";\n          border-", "-style: ", ";\n          border-", "-color: ", ";\n        "])), pos, width, pos, style, pos, color);
+  });
+}, function (_ref6) {
+  var theme = _ref6.theme;
   return theme.colors.iceWhite;
 });
-var Container$2 = styled(AbsoluteContainer)(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  > div {\n    display: flex;\n    width: 100%;\n\n    > div:nth-child(1) {\n      background-color: ", ";\n      border-radius: 4px;\n\n      ", "\n    }\n\n    ", "\n\n    ", "\n  }\n"])), function (_ref6) {
-  var theme = _ref6.theme;
+var Container$2 = styled(AbsoluteContainer)(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  > div {\n    display: flex;\n    width: 100%;\n\n    > div:nth-child(1) {\n      background-color: ", ";\n      border-radius: 4px;\n\n      ", "\n    }\n\n    ", "\n\n    ", "\n  }\n"])), function (_ref7) {
+  var theme = _ref7.theme;
   return theme.colors.white;
 }, function (props) {
   if (!props.containerSpacing) return;
@@ -12650,31 +12672,31 @@ var Container$2 = styled(AbsoluteContainer)(_templateObject4$6 || (_templateObje
   var tmp = spacing.split(' ');
   tmp[1] = "calc(" + props.theme.spacings.s1 + " / 2)";
   spacing = tmp.join(' ');
-  return css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n          padding: ", ";\n        "])), spacing);
-}, function (_ref7) {
-  var bordered = _ref7.bordered;
+  return css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n          padding: ", ";\n        "])), spacing);
+}, function (_ref8) {
+  var bordered = _ref8.bordered;
   if (!bordered) return;
-  return css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          :not(:last-child) {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n      "])), Option, function (_ref8) {
-    var theme = _ref8.theme;
+  return css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          :not(:last-child) {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n      "])), Option, function (_ref9) {
+    var theme = _ref9.theme;
     return theme.getColor('greyishBlue', 10);
   });
 }, function (props) {
   var theme = props.theme;
 
   if (!props.itemSpacing) {
-    return css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n          ", " {\n            margin: ", " 0px ", "\n              ", ";\n          }\n        "])), Delimiter, theme.spacings.s1, theme.spacings.s1, theme.spacings.s1);
+    return css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n          ", " {\n            margin: ", " 0px ", "\n              ", ";\n          }\n        "])), Delimiter, theme.spacings.s1, theme.spacings.s1, theme.spacings.s1);
   }
 
   var spacing = getSpacings(props.itemSpacing, {
     right: '0'
   });
-  return css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          padding: ", ";\n        }\n        ", " {\n          margin: ", ";\n        }\n      "])), Option, spacing, Delimiter, spacing);
+  return css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          padding: ", ";\n        }\n        ", " {\n          margin: ", ";\n        }\n      "])), Option, spacing, Delimiter, spacing);
 });
-var Delimiter = styled.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  border-bottom: 1px solid ", ";\n  margin: 14px;\n  width: calc(100% - 28px);\n"])), function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.useTypography('p');
-}, function (_ref10) {
+var Delimiter = styled.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  border-bottom: 1px solid ", ";\n  margin: 14px;\n  width: calc(100% - 28px);\n"])), function (_ref10) {
   var theme = _ref10.theme;
+  return theme.useTypography('p');
+}, function (_ref11) {
+  var theme = _ref11.theme;
   return theme.colors.greyishBlue;
 });
 
@@ -12761,7 +12783,8 @@ var MenuComponent = function MenuComponent(props, ref) {
       key: index
     }, React__default.createElement(OptionContent, null, React__default.createElement(Option, {
       onClick: onClick,
-      disabled: disabled
+      disabled: disabled,
+      border: option.border
     }, isString(label.element) ? React__default.createElement(EllipsisContainer$1, null, label.element) : label.element, caret ? React__default.createElement(Icon, {
       type: 'semantic',
       icon: 'caret right',
@@ -12925,7 +12948,7 @@ var Indicator = function Indicator(props) {
   }, props)));
 };
 
-var _templateObject$b, _templateObject2$a, _templateObject3$9, _templateObject4$8, _templateObject5$7, _templateObject6$5, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$2, _templateObject11$2;
+var _templateObject$b, _templateObject2$a, _templateObject3$9, _templateObject4$8, _templateObject5$7, _templateObject6$5, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$3, _templateObject11$2;
 var Footer = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  > button:last-child {\n    margin-left: auto;\n  }\n"])));
 var WeekContainer = styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n\n  :not(:first-child) {\n    border-top: 1px solid ", ";\n  }\n\n  > * {\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    width: 32px;\n    height: 32px;\n\n    color: ", ";\n    box-shadow: none;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n\n    border: 1px solid transparent;\n    :not(:last-child) {\n      border-right-color: ", ";\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -12982,7 +13005,7 @@ var DayContainer = styled.button(_templateObject4$8 || (_templateObject4$8 = _ta
     return;
   }
 
-  return css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '';\n        position: absolute;\n        top: -60%;\n        right: -60%;\n        width: 100%;\n        height: 100%;\n        background-color: ", ";\n        transform: rotate(45deg);\n      }\n    "])), theme.colors[appearance === 'active' ? 'white' : 'blue']);
+  return css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '';\n        position: absolute;\n        top: -60%;\n        right: -60%;\n        width: 100%;\n        height: 100%;\n        background-color: ", ";\n        transform: rotate(45deg);\n      }\n    "])), theme.colors[appearance === 'active' ? 'white' : 'blue']);
 });
 var DayIndicator = styled(Indicator).attrs({
   size: 'mini'
@@ -13557,7 +13580,7 @@ var getTimeProps = function getTimeProps(time, value) {
   });
 };
 
-var _templateObject$e, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$6, _templateObject8$6, _templateObject9$6, _templateObject10$3, _templateObject11$3, _templateObject12$2;
+var _templateObject$e, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$6, _templateObject8$6, _templateObject9$6, _templateObject10$4, _templateObject11$3, _templateObject12$2;
 var Button = styled.button(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  padding: 0\n    ", ";\n  font-family: 'Lato', sans-serif;\n  font-weight: ", ";\n  border-radius: 4px;\n  position: relative;\n  user-select: none;\n\n  ", ";\n\n  ", ";\n\n  color: ", ";\n\n  :disabled {\n    ", "\n  }\n\n  :hover {\n    cursor: ", ";\n\n    ", "\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       appearance = _ref.appearance;
@@ -13629,7 +13652,7 @@ var Button = styled.button(_templateObject$e || (_templateObject$e = _taggedTemp
   }
 
   if (['link', 'bordeless'].includes(appearance)) {
-    return css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.getColor('blue', 50));
+    return css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.getColor('blue', 50));
   }
 
   return css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), theme.getColor(color || 'blue'));
@@ -14272,13 +14295,13 @@ var Header$1 = function Header() {
 
 var getOptions = function getOptions(props, options) {
   return options.map(function (option) {
+    var value = option.value,
+        onClick = option.onClick,
+        data = option.data;
     var label = isString(option.label) ? {
       text: option.label,
       element: option.label
     } : option.label;
-    var value = option.value,
-        onClick = option.onClick,
-        data = option.data;
     return {
       label: label,
       onClick: onClick ? function (index, _option, event) {
@@ -14288,11 +14311,16 @@ var getOptions = function getOptions(props, options) {
           data: data
         }, event);
       } : function () {
-        props.setValue(value, option);
+        props.setValue(value === props.value ? '' : value, option);
       },
       data: data,
       disabled: option.disabled,
-      rules: option.rules
+      rules: option.rules,
+      border: {
+        left: {
+          color: value === props.value ? 'blue' : 'transparent'
+        }
+      }
     };
   });
 };
@@ -14302,7 +14330,7 @@ var getInputValue = function getInputValue(value, options, parsedOptions) {
     return option.value === value;
   });
   var selected = parsedOptions[selectedIndex];
-  return selected ? selected.label.text : '';
+  return selected ? selected.label.text : value;
 };
 
 var useSelect = function useSelect(props) {
@@ -15415,7 +15443,7 @@ var Switch = function Switch(props) {
   })), React__default.createElement("span", null), label.after && React__default.createElement(LabelContainer$3, null, label.after));
 };
 
-var _templateObject$q, _templateObject2$l, _templateObject3$g, _templateObject4$d, _templateObject5$b, _templateObject6$9, _templateObject7$9, _templateObject8$8, _templateObject9$8, _templateObject10$4, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16;
+var _templateObject$q, _templateObject2$l, _templateObject3$g, _templateObject4$d, _templateObject5$b, _templateObject6$9, _templateObject7$9, _templateObject8$8, _templateObject9$8, _templateObject10$5, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16;
 var bullet = css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: ", ";\n  height: ", ";\n  border-radius: 100%;\n  border-width: 1px;\n  border-style: solid;\n  background-color: ", ";\n  box-shadow: 0px 1px 3px ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s4;
@@ -15459,7 +15487,7 @@ var InputContainer = styled.div(_templateObject6$9 || (_templateObject6$9 = _tag
   return css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n      ", " > span {\n        background-color: ", ";\n      }\n\n      ", " {\n        /** firefox */\n        ::-moz-range-thumb {\n          border-color: ", ";\n        }\n        /** ie */\n        ::-ms-thumb {\n          border-color: ", ";\n        }\n        /** chrome */\n        ::-webkit-slider-thumb {\n          border-color: ", ";\n        }\n      }\n    "])), SelectedArea, theme.colors.warningRed, Input$2, theme.colors.warningRed, theme.colors.warningRed, theme.colors.warningRed);
 });
 var MinMaxLabelContainer = styled.div(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
-var LabelsContainer = styled.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n\n  ", "\n"])), function (_ref11) {
+var LabelsContainer = styled.div(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n\n  ", "\n"])), function (_ref11) {
   var position = _ref11.position;
 
   if (position === 'bottom') {
@@ -15877,7 +15905,7 @@ var parse = function parse(value) {
   });
 };
 
-var _templateObject$s, _templateObject2$n, _templateObject3$i, _templateObject4$f, _templateObject5$d, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$9, _templateObject10$5, _templateObject11$5;
+var _templateObject$s, _templateObject2$n, _templateObject3$i, _templateObject4$f, _templateObject5$d, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$9, _templateObject10$6, _templateObject11$5;
 var RelativeContainer$5 = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  position: relative;\n  user-select: none;\n  min-width: 220px;\n\n  > input,\n  > label > input {\n    color: transparent;\n    background-color: transparent;\n    width: 1px;\n    height: 1px;\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    border: 0;\n    padding: 0;\n    overflow: hidden;\n    outline: none;\n    box-shadow: none;\n  }\n"])));
 var LabelContainer$5 = styled.div(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n  flex: 1;\n  text-align: center;\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -15920,7 +15948,7 @@ var Button$4 = styled.button(_templateObject8$9 || (_templateObject8$9 = _tagged
   if (!onClick) return;
   return css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
-var LabelText$1 = styled.label(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref10) {
+var LabelText$1 = styled.label(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref10) {
   var theme = _ref10.theme;
   return theme.spacings.s1;
 }, function (_ref11) {
@@ -16950,7 +16978,7 @@ var AppliedFilters = Object.assign(function (props) {
   Menu: AppliedFiltersMenu
 });
 
-var _templateObject$A, _templateObject2$s, _templateObject3$m, _templateObject4$h, _templateObject5$e, _templateObject6$c, _templateObject7$c, _templateObject8$a, _templateObject9$a, _templateObject10$6;
+var _templateObject$A, _templateObject2$s, _templateObject3$m, _templateObject4$h, _templateObject5$e, _templateObject6$c, _templateObject7$c, _templateObject8$a, _templateObject9$a, _templateObject10$7;
 var Container$9 = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: #fff;\n  border: 1px solid #d4d4d5;\n  border-radius: 4px;\n  border-left-width: 5px;\n  padding: 14px;\n  ", "\n  ", "\n    ", "\n  ", "\n\n  ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n"])), function (props) {
   return props.size === 'mini' && css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
 }, function (props) {
@@ -16968,7 +16996,7 @@ var Container$9 = styled.div(_templateObject$A || (_templateObject$A = _taggedTe
 }, function (props) {
   return props.borderType === 'danger' && css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
 }, function (props) {
-  return props.borderType === 'none' && css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
+  return props.borderType === 'none' && css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
 });
 
 var _excluded$1 = ["children"];
@@ -17384,7 +17412,7 @@ var useContext$2 = function useContext() {
   return React__default.useContext(Provider$2);
 };
 
-var _templateObject$D, _templateObject2$t, _templateObject3$n, _templateObject4$i, _templateObject5$f, _templateObject6$d, _templateObject7$d, _templateObject8$b, _templateObject9$b, _templateObject10$7, _templateObject11$6, _templateObject12$4, _templateObject13$3, _templateObject14$3, _templateObject15$2;
+var _templateObject$D, _templateObject2$t, _templateObject3$n, _templateObject4$i, _templateObject5$f, _templateObject6$d, _templateObject7$d, _templateObject8$b, _templateObject9$b, _templateObject10$8, _templateObject11$6, _templateObject12$4, _templateObject13$3, _templateObject14$3, _templateObject15$2;
 var aligns = {
   self: {
     horizontal: {
@@ -17467,7 +17495,7 @@ var Col = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLi
 
   if (align.text !== undefined) {
     var _v4 = align.text;
-    styles.push(css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n        text-align: ", ";\n      "])), _v4));
+    styles.push(css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n        text-align: ", ";\n      "])), _v4));
   }
 
   return styles;
@@ -17543,7 +17571,7 @@ var Grid$1 = function Grid$1(props) {
   }, React__default.createElement(Grid, Object.assign({}, gridProps)));
 };
 
-var _templateObject$F, _templateObject2$v, _templateObject3$p, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$e, _templateObject8$c, _templateObject9$c, _templateObject10$8;
+var _templateObject$F, _templateObject2$v, _templateObject3$p, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$e, _templateObject8$c, _templateObject9$c, _templateObject10$9;
 var horizontalAligns = {
   around: 'space-around',
   between: 'space-between',
@@ -17618,7 +17646,7 @@ var Row = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLi
   if (!hover) return;
   var h = hover === true ? ['lightGrey', 50] : hover;
   var c = Array.isArray(h) ? theme.getColor.apply(theme, h) : theme.colors[h];
-  return css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
+  return css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
 });
 
 var Row$1 = function Row$1(props) {
@@ -17671,7 +17699,7 @@ var widths = {
   default: '642.5px'
 };
 
-var _templateObject$G, _templateObject2$w, _templateObject3$q, _templateObject4$k, _templateObject5$h, _templateObject6$f, _templateObject7$f, _templateObject8$d, _templateObject9$d, _templateObject10$9;
+var _templateObject$G, _templateObject2$w, _templateObject3$q, _templateObject4$k, _templateObject5$h, _templateObject6$f, _templateObject7$f, _templateObject8$d, _templateObject9$d, _templateObject10$a;
 var Background = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  backdrop-filter: blur(3px);\n  background-color: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.getColor('black', 25);
@@ -17704,7 +17732,7 @@ var Container$b = styled.div(_templateObject9$d || (_templateObject9$d = _tagged
       customSize = _ref6.customSize,
       color = _ref6.color,
       inverted = _ref6.inverted;
-  return css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    box-shadow: 0 0 21px 7px ", ";\n\n    width: ", ";\n\n    height: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), theme.colors.white, theme.getColor('black', 15), size === 'custom' && customSize ? customSize.width || 'auto' : widths[size], size === 'custom' && customSize ? customSize.height || 'auto' : heights[size], Header$5, inverted ? theme.isDarkColor(color) : theme.colors[color], inverted ? theme.colors[color] : theme.isDarkColor(color));
+  return css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    box-shadow: 0 0 21px 7px ", ";\n\n    width: ", ";\n\n    height: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), theme.colors.white, theme.getColor('black', 15), size === 'custom' && customSize ? customSize.width || 'auto' : widths[size], size === 'custom' && customSize ? customSize.height || 'auto' : heights[size], Header$5, inverted ? theme.isDarkColor(color) : theme.colors[color], inverted ? theme.colors[color] : theme.isDarkColor(color));
 });
 
 var _excluded$2 = ["children"];
@@ -17901,7 +17929,7 @@ var Modal$1 = Object.assign(Modal, {
   Audit: Audit
 });
 
-var _templateObject$K, _templateObject2$x, _templateObject3$r, _templateObject4$l, _templateObject5$i, _templateObject6$g, _templateObject7$g, _templateObject8$e, _templateObject9$e, _templateObject10$a, _templateObject11$7;
+var _templateObject$K, _templateObject2$x, _templateObject3$r, _templateObject4$l, _templateObject5$i, _templateObject6$g, _templateObject7$g, _templateObject8$e, _templateObject9$e, _templateObject10$b, _templateObject11$7;
 var Container$c = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
 var Header$6 = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var HeaderImage = styled.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
@@ -17916,7 +17944,7 @@ var HeaderLine = styled.div(_templateObject6$g || (_templateObject6$g = _taggedT
 }, function (props) {
   return props.size === 'medium' && css(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
 var MainLine = styled(HeaderLine)(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
 
@@ -18187,7 +18215,7 @@ var Template6 = function Template6(props) {
   })));
 };
 
-var _templateObject$R, _templateObject2$E, _templateObject3$y, _templateObject4$r, _templateObject5$o, _templateObject6$l, _templateObject7$l, _templateObject8$j, _templateObject9$h, _templateObject10$b;
+var _templateObject$R, _templateObject2$E, _templateObject3$y, _templateObject4$r, _templateObject5$o, _templateObject6$l, _templateObject7$l, _templateObject8$j, _templateObject9$h, _templateObject10$c;
 var Container$i = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$9 = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$6 = styled.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
@@ -18209,7 +18237,7 @@ var CustomLine$3 = styled(HeaderLine$6)(_templateObject8$j || (_templateObject8$
   return props.color;
 });
 var Main$2 = styled.div(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n  margin: 10px 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-evenly;\n"])));
-var Circle$1 = styled.div(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n  width: 30px;\n  height: 30px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n  margin: 0 16px;\n"])));
+var Circle$1 = styled.div(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n  width: 30px;\n  height: 30px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n  margin: 0 16px;\n"])));
 
 var Template7 = function Template7(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -18264,7 +18292,7 @@ var Template8 = function Template8(props) {
   })));
 };
 
-var _templateObject$T, _templateObject2$G, _templateObject3$A, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$n, _templateObject8$l, _templateObject9$j, _templateObject10$c;
+var _templateObject$T, _templateObject2$G, _templateObject3$A, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$n, _templateObject8$l, _templateObject9$j, _templateObject10$d;
 var Container$k = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$b = styled.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$8 = styled.div(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
@@ -18286,7 +18314,7 @@ var CustomLine$5 = styled(HeaderLine$8)(_templateObject8$l || (_templateObject8$
   return props.color;
 });
 var Main$4 = styled.div(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  padding: 14px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
-var Circle$2 = styled.div(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
+var Circle$2 = styled.div(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
 var Template8$1 = function Template8(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -18303,7 +18331,7 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$4, null, React__default.createElement(Circle$2, null)));
 };
 
-var _templateObject$U, _templateObject2$H, _templateObject3$B, _templateObject4$u, _templateObject5$r, _templateObject6$o, _templateObject7$o, _templateObject8$m, _templateObject9$k, _templateObject10$d, _templateObject11$8;
+var _templateObject$U, _templateObject2$H, _templateObject3$B, _templateObject4$u, _templateObject5$r, _templateObject6$o, _templateObject7$o, _templateObject8$m, _templateObject9$k, _templateObject10$e, _templateObject11$8;
 var Container$l = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$c = styled.div(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$9 = styled.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
@@ -18325,7 +18353,7 @@ var CustomLine$6 = styled(HeaderLine$9)(_templateObject8$m || (_templateObject8$
   return props.color;
 });
 var GraphLine = styled(CustomLine$6)(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
-var Main$5 = styled.div(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  padding: 0 7px 72px 7px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  justify-content: center;\n"])));
+var Main$5 = styled.div(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  padding: 0 7px 72px 7px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  justify-content: center;\n"])));
 var Circle$3 = styled.div(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
 var Template10 = function Template10(props) {