@mw-kit/mw-ui 1.7.71 → 1.7.73

package/dist/index.modern.js

@@ -71,7 +71,6 @@ var colors = {
   milkWhite: '#FCFFF5',
   orange: '#FB8702',
   pink: '#E23851',
-  platinum: '#E2E2E3',
   purple: '#8E66BB',
   red: '#C31717',
   silver: '#B2B2B2',
@@ -12568,25 +12567,21 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
 });
 Input$1.displayName = 'Input';
 
-var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$4, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$2, _templateObject9$2, _templateObject10$2;
+var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$4, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2;
 var size = '17px';
-var Checkmark = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n\n  border-style: solid;\n  border-color: ", ";\n  border-width: 1px;\n  border-radius: 4px;\n\n  transition-property: border-color;\n  transition-duration: 0.25s;\n  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n\n  :after {\n    content: '';\n    position: absolute;\n\n    left: 50%;\n    top: 50%;\n    height: 0;\n    width: 0;\n\n    border-style: solid;\n    border-color: ", ";\n    border-width: 0;\n    transform: rotate(45deg);\n\n    transition-property: width height border-width top left;\n    transition-duration: 0.25s;\n    transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n  }\n\n  /** if there is a label, it will be placed after this element */\n  + * {\n    flex: 1;\n  }\n"])), size, size, function (_ref) {
+var Checkmark = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n\n  border-style: solid;\n  border-color: transparent;\n  border-width: 1px;\n  border-radius: 4px;\n\n  transition-property: border-color;\n  transition-duration: 0.25s;\n  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n\n  :after {\n    content: '';\n    position: absolute;\n\n    left: 50%;\n    top: 50%;\n    height: 0;\n    width: 0;\n\n    border-style: solid;\n    border-color: ", ";\n    border-width: 0;\n    transform: rotate(45deg);\n\n    transition-property: width height border-width top left;\n    transition-duration: 0.25s;\n    transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n  }\n\n  /** if there is a label, it will be placed after this element */\n  + * {\n    flex: 1;\n  }\n"])), size, size, function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white;
 }, function (_ref2) {
-  var theme = _ref2.theme,
-      viewMode = _ref2.$viewMode;
-  return viewMode ? 'transparent' : theme.colors.blue;
-}, function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref2.theme;
   return theme.colors.blue;
 });
-var Label$1 = styled.label(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  display: flex;\n  align-items: center;\n\n  user-select: none;\n  min-height: ", ";\n  min-width: ", ";\n  gap: ", ";\n\n  > input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n  }\n\n  :hover ", " {\n    background-color: ", ";\n  }\n\n  > input:checked ~ ", " {\n    :after {\n      width: 5px;\n      height: 9.5px;\n      border-width: 0 2px 2px 0;\n      left: 5px;\n      top: 1px;\n    }\n  }\n\n  ", ";\n\n  ", "\n"])), function (_ref4) {
-  var theme = _ref4.theme;
+var Label$1 = styled.label(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  display: flex;\n  align-items: center;\n\n  user-select: none;\n  min-height: ", ";\n  min-width: ", ";\n  gap: ", ";\n\n  > input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n  }\n\n  :hover ", " {\n    background-color: ", ";\n  }\n  ", "\n\n  > input:checked ~ ", " {\n    :after {\n      width: 5px;\n      height: 9.5px;\n      border-width: 0 2px 2px 0;\n      left: 5px;\n      top: 1px;\n    }\n  }\n\n  ", ";\n\n  ", "\n"])), function (_ref3) {
+  var theme = _ref3.theme;
   return theme.useTypography('p');
-}, function (_ref5) {
-  var padding = _ref5.$padding,
-      theme = _ref5.theme;
+}, function (_ref4) {
+  var padding = _ref4.$padding,
+      theme = _ref4.theme;
   if (!padding) return;
   var _padding = {
     top: '0',
@@ -12628,9 +12623,9 @@ var Label$1 = styled.label(_templateObject2$6 || (_templateObject2$6 = _taggedTe
   }
 
   return css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n    "])), _padding.top, _padding.left, _padding.right, _padding.bottom);
-}, function (_ref6) {
-  var disabled = _ref6.$disabled,
-      readOnly = _ref6.$readOnly;
+}, function (_ref5) {
+  var disabled = _ref5.$disabled,
+      readOnly = _ref5.$readOnly;
 
   if (disabled) {
     return css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n        opacity: 0.5;\n      "])));
@@ -12638,35 +12633,42 @@ var Label$1 = styled.label(_templateObject2$6 || (_templateObject2$6 = _taggedTe
 
   if (readOnly) return;
   return css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
-}, function (_ref7) {
-  var theme = _ref7.theme,
-      bordered = _ref7.$bordered,
-      invalid = _ref7.$invalid;
+}, function (_ref6) {
+  var theme = _ref6.theme,
+      bordered = _ref6.$bordered,
+      invalid = _ref6.$invalid;
   if (!bordered) return;
   return css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n\n      border-width: 1px;\n      border-style: solid;\n      border-color: ", ";\n      border-radius: 4px;\n    "])), theme.spacings.s2, theme.spacings.s3, theme.colors[invalid ? 'warningRed' : 'lightGrey']);
-}, size, size, function (_ref8) {
-  var theme = _ref8.theme;
+}, size, size, function (_ref7) {
+  var theme = _ref7.theme;
   return theme.spacings.s1;
-}, Checkmark, function (_ref9) {
-  var theme = _ref9.theme;
+}, Checkmark, function (_ref8) {
+  var theme = _ref8.theme;
   return theme.colors.iceWhite;
-}, Checkmark, function (_ref10) {
-  var theme = _ref10.theme,
-      invalid = _ref10.$invalid;
+}, function (_ref9) {
+  var theme = _ref9.theme,
+      viewMode = _ref9.$viewMode;
+  return viewMode ? css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n          > input ~ ", " {\n            border-color: transparent;\n          }\n        "])), Checkmark) : css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n          > input ~ ", " {\n            border-color: ", ";\n          }\n          > input:checked ~ ", " {\n            border-color: ", ";\n          }\n        "])), Checkmark, theme.colors.lightestGrey, Checkmark, function (_ref10) {
+    var theme = _ref10.theme;
+    return theme.colors.blue;
+  });
+}, Checkmark, function (_ref11) {
+  var theme = _ref11.theme,
+      invalid = _ref11.$invalid;
   if (!invalid) return;
-  return css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n      ", ",\n      > input:checked ~ ", ", \n      > input:checked ~ ", ":after {\n        border-color: ", ";\n      }\n    "])), Checkmark, Checkmark, Checkmark, theme.colors.warningRed);
-}, function (_ref11) {
-  var width = _ref11.$width;
-  return width && css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n        width: ", ";\n      "])), width);
+  return css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n      ", ",\n      > input:checked ~ ", ", \n      > input:checked ~ ", ":after {\n        border-color: ", ";\n      }\n    "])), Checkmark, Checkmark, Checkmark, theme.colors.warningRed);
+}, function (_ref12) {
+  var width = _ref12.$width;
+  return width && css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n        width: ", ";\n      "])), width);
 });
-var LabelContent = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  ", "\n  line-height: 14px;\n  flex: 1;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref12) {
-  var theme = _ref12.theme;
+var LabelContent = styled.div(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  ", "\n  line-height: 14px;\n  flex: 1;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref13) {
+  var theme = _ref13.theme;
   return theme.useTypography('p');
-}, function (_ref13) {
-  var required = _ref13.required,
-      viewMode = _ref13.viewMode;
+}, function (_ref14) {
+  var required = _ref14.required,
+      viewMode = _ref14.viewMode;
   if (!required || viewMode) return;
-  return css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Checkbox = React__default.forwardRef(function (props, ref) {
@@ -12704,14 +12706,13 @@ var Checkbox = React__default.forwardRef(function (props, ref) {
     "$bordered": !viewMode && bordered,
     "$padding": padding,
     "$readOnly": props.readOnly || viewMode,
-    "$width": props.width
+    "$width": props.width,
+    "$viewMode": viewMode
   }, React__default.createElement("input", Object.assign({}, htmlProps, {
     type: 'checkbox',
     ref: ref,
     disabled: htmlProps.disabled || viewMode
-  })), React__default.createElement(Checkmark, {
-    "$viewMode": viewMode
-  }), React__default.createElement(LabelComponent, Object.assign({}, {
+  })), React__default.createElement(Checkmark, null), React__default.createElement(LabelComponent, Object.assign({}, {
     disabled: disabled,
     required: required,
     viewMode: viewMode,
@@ -13222,7 +13223,7 @@ var Indicator = function Indicator(props) {
   }, props)));
 };
 
-var _templateObject$e, _templateObject2$c, _templateObject3$b, _templateObject4$8, _templateObject5$7, _templateObject6$6, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$2;
+var _templateObject$e, _templateObject2$c, _templateObject3$b, _templateObject4$8, _templateObject5$7, _templateObject6$6, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$3;
 var Footer = styled.div(_templateObject$e || (_templateObject$e = _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$c || (_templateObject2$c = _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;
@@ -13286,7 +13287,7 @@ var DayContainer = styled.button(_templateObject4$8 || (_templateObject4$8 = _ta
 });
 var DayIndicator = styled(Indicator).attrs({
   size: 'mini'
-})(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: calc(", " - 1px);\n  left: calc(50% - (", " / 2) + 1px);\n"])), sizes.mini, sizes.mini);
+})(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: calc(", " - 1px);\n  left: calc(50% - (", " / 2) + 1px);\n"])), sizes.mini, sizes.mini);
 
 var getCalendar = function getCalendar(d) {
   var date = new Date(d.getTime());
@@ -15790,7 +15791,7 @@ var bullet = css(_templateObject$t || (_templateObject$t = _taggedTemplateLitera
   return bulletSize;
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.colors.platinum;
+  return theme.colors.lightestGrey;
 }, function (_ref4) {
   var theme = _ref4.theme;
   return theme.getColor('black', 10);
@@ -16175,7 +16176,7 @@ var LabelContainer$5 = styled.div(_templateObject$E || (_templateObject$E = _tag
   var theme = _ref.theme;
   return theme.useTypography('p');
 });
-var Label$6 = styled.label(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n\n  ", "\n\n  ", "\n\n", "\n\n  > input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 0;\n    width: 0;\n    /* Chrome, Safari, Edge, Opera */\n    :-webkit-outer-spin-button,\n    :-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    /* Firefox */\n    -moz-appearance: none;\n  }\n\n  > span {\n    height: 17px;\n    width: 17px;\n    min-height: 17px;\n    min-width: 17px;\n    max-height: 17px;\n    max-width: 17px;\n    border-radius: 100%;\n    border-width: 1px;\n    border-style: solid;\n    background-color: ", ";\n    position: relative;\n    transition-property: border-color;\n    transition-duration: 0.5s;\n    transition-timing-function: ease-in-out;\n    :before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      height: 0;\n      width: 0;\n      border-radius: 100%;\n      transition-property: top, left, width, height, background-color;\n      transition-duration: 0.5s;\n      transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n    }\n  }\n  > input:checked + span {\n    :before {\n      top: calc(50% - 4.5px);\n      left: calc(50% - 4.5px);\n      height: 9px;\n      width: 9px;\n    }\n  }\n"])), function (_ref2) {
+var Label$6 = styled.label(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n\n  ", "\n\n  ", "\n\n", "\n\n  > input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 0;\n    width: 0;\n    /* Chrome, Safari, Edge, Opera */\n    :-webkit-outer-spin-button,\n    :-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    /* Firefox */\n    -moz-appearance: none;\n  }\n\n  > span {\n    align-self: center;\n    height: 17px;\n    width: 17px;\n    min-height: 17px;\n    min-width: 17px;\n    max-height: 17px;\n    max-width: 17px;\n    border-radius: 100%;\n    border-width: 1px;\n    border-style: solid;\n    background-color: ", ";\n    position: relative;\n    transition-property: border-color;\n    transition-duration: 0.5s;\n    transition-timing-function: ease-in-out;\n    :before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      height: 0;\n      width: 0;\n      border-radius: 100%;\n      transition-property: top, left, width, height, background-color;\n      transition-duration: 0.5s;\n      transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n    }\n  }\n  > input:checked + span {\n    :before {\n      top: calc(50% - 4.5px);\n      left: calc(50% - 4.5px);\n      height: 9px;\n      width: 9px;\n    }\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.spacings.s1;
 }, function (_ref3) {
@@ -16194,24 +16195,30 @@ var Label$6 = styled.label(_templateObject2$t || (_templateObject2$t = _taggedTe
   var invalid = _ref5.invalid;
 
   if (!invalid) {
-    return css(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n        > span {\n          border-color: ", ";\n          :before {\n            background-color: ", ";\n          }\n        }\n      "])), function (_ref6) {
+    return css(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n        > span {\n          border-color: ", ";\n          :before {\n            background-color: ", ";\n          }\n        }\n        > input:checked + span {\n          border-color: ", ";\n          :before {\n            background-color: ", ";\n          }\n        }\n      "])), function (_ref6) {
       var theme = _ref6.theme;
-      return theme.colors.blue;
+      return theme.colors.lightestGrey;
     }, function (_ref7) {
       var theme = _ref7.theme;
+      return theme.colors.lightestGrey;
+    }, function (_ref8) {
+      var theme = _ref8.theme;
+      return theme.colors.blue;
+    }, function (_ref9) {
+      var theme = _ref9.theme;
       return theme.colors.blue;
     });
   }
 
-  return css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n      > span {\n        border-color: ", ";\n        :before {\n          background-color: ", ";\n        }\n      }\n    "])), function (_ref8) {
-    var theme = _ref8.theme;
+  return css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n      > span {\n        border-color: ", ";\n        :before {\n          background-color: ", ";\n        }\n      }\n    "])), function (_ref10) {
+    var theme = _ref10.theme;
     return theme.colors.warningRed;
-  }, function (_ref9) {
-    var theme = _ref9.theme;
+  }, function (_ref11) {
+    var theme = _ref11.theme;
     return theme.colors.warningRed;
   });
-}, function (_ref10) {
-  var theme = _ref10.theme;
+}, function (_ref12) {
+  var theme = _ref12.theme;
   return theme.colors.white;
 });
 
@@ -16413,7 +16420,7 @@ var parse = function parse(value) {
   });
 };
 
-var _templateObject$F, _templateObject2$u, _templateObject3$o, _templateObject4$f, _templateObject5$d, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject10$7, _templateObject11$3, _templateObject12$2;
+var _templateObject$F, _templateObject2$u, _templateObject3$o, _templateObject4$f, _templateObject5$d, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject10$7, _templateObject11$4, _templateObject12$3;
 var RelativeContainer$5 = styled.div(_templateObject$F || (_templateObject$F = _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$6 = styled.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n  flex: 1;\n\n  :first-child {\n    text-align: left;\n  }\n  :not(:first-child) {\n    text-align: center;\n  }\n\n  ", "\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -16463,13 +16470,13 @@ var Button$4 = styled.button(_templateObject9$8 || (_templateObject9$8 = _tagged
   if (!onClick) return;
   return css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
-var LabelText$1 = styled.label(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref12) {
+var LabelText$1 = styled.label(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref12) {
   var theme = _ref12.theme;
   return theme.spacings.s1;
 }, function (_ref13) {
   var required = _ref13.required;
   if (!required) return;
-  return css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Component$1 = React__default.forwardRef(function (props, ref) {
@@ -17956,7 +17963,7 @@ var useContext$3 = function useContext() {
   return React__default.useContext(Provider$3);
 };
 
-var _templateObject$Q, _templateObject2$A, _templateObject3$t, _templateObject4$i, _templateObject5$f, _templateObject6$d, _templateObject7$d, _templateObject8$b, _templateObject9$a, _templateObject10$9, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$2;
+var _templateObject$Q, _templateObject2$A, _templateObject3$t, _templateObject4$i, _templateObject5$f, _templateObject6$d, _templateObject7$d, _templateObject8$b, _templateObject9$a, _templateObject10$9, _templateObject11$5, _templateObject12$4, _templateObject13$2, _templateObject14$2, _templateObject15$2;
 var aligns = {
   self: {
     horizontal: {
@@ -18047,13 +18054,13 @@ var Col = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLi
   var bordered = _ref5.bordered,
       lightestGrey = _ref5.theme.colors.lightestGrey;
   if (!bordered) return;
-  return css(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
+  return css(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
 }, function (_ref6) {
   var fontColor = _ref6.fontColor,
       theme = _ref6.theme;
   if (fontColor === undefined) return;
   var c = Array.isArray(fontColor) ? theme.getColor.apply(theme, fontColor) : theme.colors[fontColor];
-  return css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), c);
+  return css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), c);
 }, function (_ref7) {
   var backgroundColor = _ref7.backgroundColor,
       theme = _ref7.theme;
@@ -18187,9 +18194,9 @@ var Row = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLi
   return c;
 }, function (_ref7) {
   var borderless = _ref7.borderless,
-      platinum = _ref7.theme.colors.platinum;
+      lightestGrey = _ref7.theme.colors.lightestGrey;
   if (borderless) return;
-  return css(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n      border-bottom: 1px solid ", ";\n      :last-child {\n        border-bottom: 1px solid transparent;\n      }\n    "])), platinum);
+  return css(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n      border-bottom: 1px solid ", ";\n      :last-child {\n        border-bottom: 1px solid transparent;\n      }\n    "])), lightestGrey);
 }, function (_ref8) {
   var hover = _ref8.hover,
       theme = _ref8.theme;
@@ -18482,7 +18489,7 @@ var Modal$1 = Object.assign(Modal, {
   Audit: Audit
 });
 
-var _templateObject$X, _templateObject2$E, _templateObject3$x, _templateObject4$l, _templateObject5$i, _templateObject6$g, _templateObject7$g, _templateObject8$e, _templateObject9$d, _templateObject10$c, _templateObject11$5;
+var _templateObject$X, _templateObject2$E, _templateObject3$x, _templateObject4$l, _templateObject5$i, _templateObject6$g, _templateObject7$g, _templateObject8$e, _templateObject9$d, _templateObject10$c, _templateObject11$6;
 var Container$c = styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
 var Header$6 = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var HeaderImage = styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
@@ -18499,7 +18506,7 @@ var HeaderLine = styled.div(_templateObject6$g || (_templateObject6$g = _taggedT
 }, function (props) {
   return props.size === 'large' && css(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var MainLine = styled(HeaderLine)(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
+var MainLine = styled(HeaderLine)(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
 
 var Template1 = function Template1(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -18884,7 +18891,7 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$4, null, React__default.createElement(Circle$2, null)));
 };
 
-var _templateObject$15, _templateObject2$O, _templateObject3$H, _templateObject4$u, _templateObject5$r, _templateObject6$o, _templateObject7$o, _templateObject8$m, _templateObject9$j, _templateObject10$f, _templateObject11$6;
+var _templateObject$15, _templateObject2$O, _templateObject3$H, _templateObject4$u, _templateObject5$r, _templateObject6$o, _templateObject7$o, _templateObject8$m, _templateObject9$j, _templateObject10$f, _templateObject11$7;
 var Container$l = styled.div(_templateObject$15 || (_templateObject$15 = _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$O || (_templateObject2$O = _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$H || (_templateObject3$H = _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) {
@@ -18907,7 +18914,7 @@ var CustomLine$6 = styled(HeaderLine$9)(_templateObject8$m || (_templateObject8$
 });
 var GraphLine = styled(CustomLine$6)(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
 var Main$5 = styled.div(_templateObject10$f || (_templateObject10$f = _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$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
+var Circle$3 = styled.div(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
 var Template10 = function Template10(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);