@mw-kit/mw-ui 1.7.20 → 1.7.22

package/dist/index.modern.js

@@ -12938,9 +12938,9 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
 });
 Input$1.displayName = 'Input';
 
-var _templateObject$d, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$5, _templateObject8$4;
-var width = '17px';
-var Checkmark = styled.span(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0px;\n  left: 0;\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"])), width, width, function (_ref) {
+var _templateObject$d, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$5, _templateObject8$4, _templateObject9$4;
+var size = '17px';
+var Checkmark = styled.div(_templateObject$d || (_templateObject$d = _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 theme = _ref.theme;
   return theme.colors.white;
 }, function (_ref2) {
@@ -12950,7 +12950,7 @@ var Checkmark = styled.span(_templateObject$d || (_templateObject$d = _taggedTem
   var theme = _ref3.theme;
   return theme.colors.blue;
 });
-var Label$1 = styled.label(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n\n  display: block;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  > div {\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    padding-left: calc(", " + ", ");\n    user-select: none;\n    min-height: 17px;\n\n    > div:first-child {\n      display: inline-block;\n      ", "\n      line-height: 14px;\n\n      ", "\n    }\n\n    > input {\n      position: absolute;\n      opacity: 0;\n      height: 0;\n      width: 0;\n    }\n\n    :hover ", " {\n      background-color: ", ";\n    }\n\n    > input:checked ~ ", " {\n      border-color: ", ";\n\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"])), function (_ref4) {
+var Label$1 = styled.label(_templateObject2$b || (_templateObject2$b = _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    border-color: ", ";\n\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"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.useTypography('p');
 }, function (_ref5) {
@@ -13011,47 +13011,59 @@ var Label$1 = styled.label(_templateObject2$b || (_templateObject2$b = _taggedTe
       invalid = _ref7.invalid;
   if (!bordered) return;
   return css(_templateObject6$6 || (_templateObject6$6 = _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']);
-}, width, function (_ref8) {
+}, size, size, function (_ref8) {
   var theme = _ref8.theme;
   return theme.spacings.s1;
-}, function (_ref9) {
+}, Checkmark, function (_ref9) {
   var theme = _ref9.theme;
-  return theme.useTypography('p');
-}, function (_ref10) {
-  var required = _ref10.required;
-  if (!required) return;
-  return css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n          :after {\n            content: ' *';\n          }\n        "])));
-}, Checkmark, function (_ref11) {
-  var theme = _ref11.theme;
   return theme.colors.iceWhite;
-}, Checkmark, function (_ref12) {
-  var theme = _ref12.theme;
+}, Checkmark, function (_ref10) {
+  var theme = _ref10.theme;
   return theme.colors.blue;
-}, function (_ref13) {
-  var theme = _ref13.theme,
-      invalid = _ref13.invalid;
+}, function (_ref11) {
+  var theme = _ref11.theme,
+      invalid = _ref11.invalid;
   if (!invalid) return;
-  return css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n        ", ",\n        > input:checked ~ ", ", \n      > input:checked ~ ", ":after {\n          border-color: ", ";\n        }\n      "])), Checkmark, Checkmark, Checkmark, theme.colors.warningRed);
+  return css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n      ", ",\n      > input:checked ~ ", ", \n      > input:checked ~ ", ":after {\n        border-color: ", ";\n      }\n    "])), Checkmark, Checkmark, Checkmark, theme.colors.warningRed);
+});
+var LabelContent = styled.div(_templateObject8$4 || (_templateObject8$4 = _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;
+  return theme.useTypography('p');
+}, function (_ref13) {
+  var required = _ref13.required;
+  if (!required) return;
+  return css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Checkbox = React__default.forwardRef(function (props, ref) {
-  var label = props.label,
-      disabled = props.disabled,
+  var disabled = props.disabled,
       required = props.required,
       invalid = props.invalid,
       padding = props.padding,
       bordered = props.bordered;
   var htmlProps = filterObject(props, ['label', 'invalid', 'required', 'padding', 'bordered']);
+
+  var _ref = typeof props.label === 'function' ? [props.label] : [LabelContent, props.label],
+      LabelComponent = _ref[0],
+      children = _ref[1];
+
   return React__default.createElement(Label$1, {
     disabled: disabled ? 1 : 0,
     required: required ? 1 : 0,
     invalid: invalid ? 1 : 0,
     bordered: bordered ? 1 : 0,
     padding: padding
-  }, React__default.createElement("div", null, React__default.createElement("div", null, label), React__default.createElement("input", Object.assign({}, htmlProps, {
+  }, React__default.createElement("input", Object.assign({}, htmlProps, {
     type: 'checkbox',
     ref: ref
-  })), React__default.createElement(Checkmark, null)));
+  })), React__default.createElement(Checkmark, null), React__default.createElement(LabelComponent, Object.assign({}, {
+    disabled: disabled,
+    required: required,
+    invalid: invalid,
+    bordered: bordered,
+    padding: padding,
+    children: children
+  })));
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -13086,7 +13098,7 @@ var inputTimeWidth = {
   withoutSeconds: '66px'
 };
 
-var _templateObject$e, _templateObject2$c, _templateObject3$b, _templateObject4$a, _templateObject5$9, _templateObject6$7, _templateObject7$6, _templateObject8$5, _templateObject9$4;
+var _templateObject$e, _templateObject2$c, _templateObject3$b, _templateObject4$a, _templateObject5$9, _templateObject6$7, _templateObject7$6, _templateObject8$5, _templateObject9$5;
 var Container$7 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  background-color: ", ";\n  position: relative;\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s3;
@@ -13137,7 +13149,7 @@ var MonthBtn = styled.div(_templateObject7$6 || (_templateObject7$6 = _taggedTem
   if (!onClick) return;
   return css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 });
-var NavBtn = styled.button(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n  width: 32px;\n  height: 32px;\n  box-shadow: none;\n  border: none;\n  background-color: transparent;\n\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  :disabled {\n    visibility: hidden;\n  }\n  :not(:disabled) {\n    cursor: pointer;\n    :hover {\n      background-color: ", ";\n    }\n  }\n\n  transition-property: background-color;\n  transition-timing-function: ease-in-out;\n  transition-duration: 0.25s;\n"])), function (_ref15) {
+var NavBtn = styled.button(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n  width: 32px;\n  height: 32px;\n  box-shadow: none;\n  border: none;\n  background-color: transparent;\n\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  :disabled {\n    visibility: hidden;\n  }\n  :not(:disabled) {\n    cursor: pointer;\n    :hover {\n      background-color: ", ";\n    }\n  }\n\n  transition-property: background-color;\n  transition-timing-function: ease-in-out;\n  transition-duration: 0.25s;\n"])), function (_ref15) {
   var theme = _ref15.theme;
   return theme.useTypography('p');
 }, function (_ref16) {
@@ -13202,7 +13214,7 @@ var MonthPicker = function MonthPicker(props) {
   }));
 };
 
-var _templateObject$f, _templateObject2$d, _templateObject3$c, _templateObject4$b, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$6, _templateObject9$5, _templateObject10$3, _templateObject11$3;
+var _templateObject$f, _templateObject2$d, _templateObject3$c, _templateObject4$b, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$3, _templateObject11$3;
 var Footer = styled.div(_templateObject$f || (_templateObject$f = _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$d || (_templateObject2$d = _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;
@@ -13246,7 +13258,7 @@ var DayContainer = styled.button(_templateObject4$b || (_templateObject4$b = _ta
     }, hover('white'));
   }
 
-  return css(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      ", "\n    "])), theme.colors.white, hover('blue'));
+  return css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      ", "\n    "])), theme.colors.white, hover('blue'));
 }, function (_ref10) {
   var theme = _ref10.theme;
   return theme.colors.silver;
@@ -14416,15 +14428,20 @@ var getOptions = function getOptions(props, options) {
       element: option.label
     } : option.label;
     var value = option.value,
-        onClick = option.onClick;
+        onClick = option.onClick,
+        data = option.data;
     return {
       label: label,
       onClick: onClick ? function (index, _option, event) {
-        onClick(index, option, event);
+        onClick(index, {
+          label: label,
+          value: value,
+          data: data
+        }, event);
       } : function () {
         props.setValue(value, option);
       },
-      data: option.data,
+      data: data,
       disabled: option.disabled,
       rules: option.rules
     };
@@ -14567,6 +14584,9 @@ var getOptions$1 = function getOptions(options, checked, setChecked) {
       text: option.label,
       element: option.label
     } : option.label;
+    var value = option.value,
+        onClick = option.onClick,
+        data = option.data;
     return {
       label: {
         text: label.text,
@@ -14595,7 +14615,14 @@ var getOptions$1 = function getOptions(options, checked, setChecked) {
           }
         })
       },
-      data: option.data,
+      onClick: onClick ? function (index, _option, event) {
+        onClick(index, {
+          label: label,
+          value: value,
+          data: data
+        }, event);
+      } : undefined,
+      data: data,
       disabled: option.disabled,
       rules: option.rules,
       keepOpen: true
@@ -14610,7 +14637,8 @@ var getInputValue$1 = function getInputValue(value) {
 
 var useSelectMultiple = function useSelectMultiple(props) {
   var init = function init() {
-    return props.value.length === 0 ? [] : typeof props.value[0] === 'string' ? [].concat(props.value).map(function (value) {
+    if (props.value.length) return [];
+    return typeof props.value[0] === 'string' ? [].concat(props.value).map(function (value) {
       return {
         value: value,
         label: value
@@ -15288,7 +15316,7 @@ var Phone = Object.assign(Component, {
   getPhoneDetails: getPhoneDetails
 });
 
-var _templateObject$q, _templateObject2$k, _templateObject3$f, _templateObject4$c, _templateObject5$b, _templateObject6$9, _templateObject7$8, _templateObject8$7, _templateObject9$6;
+var _templateObject$q, _templateObject2$k, _templateObject3$f, _templateObject4$c, _templateObject5$b, _templateObject6$9, _templateObject7$8, _templateObject8$7, _templateObject9$7;
 var RelativeContainer$4 = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  input {\n    color: transparent;\n  }\n"])));
 var LabelContainer$2 = styled.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -15320,7 +15348,7 @@ var Container$8 = styled.div(_templateObject3$f || (_templateObject3$f = _tagged
 var Button$3 = styled.button(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref6) {
   var onClick = _ref6.onClick;
   if (!onClick) return;
-  return css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
+  return css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
 
 var DatePicker = React__default.forwardRef(function (props, ref) {
@@ -15517,7 +15545,7 @@ var Switch = function Switch(props) {
   })), React__default.createElement("span", null), label.after && React__default.createElement(LabelContainer$3, null, label.after));
 };
 
-var _templateObject$s, _templateObject2$m, _templateObject3$h, _templateObject4$e, _templateObject5$d, _templateObject6$b, _templateObject7$a, _templateObject8$8, _templateObject9$7, _templateObject10$4, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16;
+var _templateObject$s, _templateObject2$m, _templateObject3$h, _templateObject4$e, _templateObject5$d, _templateObject6$b, _templateObject7$a, _templateObject8$8, _templateObject9$8, _templateObject10$4, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16;
 var bullet = css(_templateObject$s || (_templateObject$s = _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;
@@ -15560,7 +15588,7 @@ var InputContainer = styled.div(_templateObject6$b || (_templateObject6$b = _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$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
+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 position = _ref11.position;
 
@@ -15979,7 +16007,7 @@ var parse = function parse(value) {
   });
 };
 
-var _templateObject$u, _templateObject2$o, _templateObject3$j, _templateObject4$g, _templateObject5$f, _templateObject6$d, _templateObject7$c, _templateObject8$9, _templateObject9$8, _templateObject10$5, _templateObject11$5;
+var _templateObject$u, _templateObject2$o, _templateObject3$j, _templateObject4$g, _templateObject5$f, _templateObject6$d, _templateObject7$c, _templateObject8$9, _templateObject9$9, _templateObject10$5, _templateObject11$5;
 var RelativeContainer$5 = styled.div(_templateObject$u || (_templateObject$u = _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$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n  flex: 1;\n  text-align: center;\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -16020,7 +16048,7 @@ var Container$9 = styled.div(_templateObject4$g || (_templateObject4$g = _tagged
 var Button$4 = styled.button(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref9) {
   var onClick = _ref9.onClick;
   if (!onClick) return;
-  return css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
+  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 theme = _ref10.theme;
@@ -16884,7 +16912,7 @@ var widths = {
   default: '642.5px'
 };
 
-var _templateObject$A, _templateObject2$r, _templateObject3$l, _templateObject4$h, _templateObject5$g, _templateObject6$e, _templateObject7$d, _templateObject8$a, _templateObject9$9, _templateObject10$6;
+var _templateObject$A, _templateObject2$r, _templateObject3$l, _templateObject4$h, _templateObject5$g, _templateObject6$e, _templateObject7$d, _templateObject8$a, _templateObject9$a, _templateObject10$6;
 var Background = styled.div(_templateObject$A || (_templateObject$A = _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);
@@ -16911,7 +16939,7 @@ var FooterButtons = styled.div(_templateObject8$a || (_templateObject8$a = _tagg
   var theme = _ref5.theme;
   return theme.spacings.s3;
 });
-var Container$a = styled.div(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (_ref6) {
+var Container$a = styled.div(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (_ref6) {
   var theme = _ref6.theme,
       size = _ref6.size,
       customSize = _ref6.customSize,
@@ -17114,7 +17142,7 @@ var Modal$1 = Object.assign(Modal, {
   Audit: Audit
 });
 
-var _templateObject$E, _templateObject2$s, _templateObject3$m, _templateObject4$i, _templateObject5$h, _templateObject6$f, _templateObject7$e, _templateObject8$b, _templateObject9$a, _templateObject10$7;
+var _templateObject$E, _templateObject2$s, _templateObject3$m, _templateObject4$i, _templateObject5$h, _templateObject6$f, _templateObject7$e, _templateObject8$b, _templateObject9$b, _templateObject10$7;
 var Container$b = styled.div(_templateObject$E || (_templateObject$E = _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) {
@@ -17130,7 +17158,7 @@ var Container$b = styled.div(_templateObject$E || (_templateObject$E = _taggedTe
 }, function (props) {
   return props.borderType === 'warning' && css(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n      border-left-color: #fbcb01;\n    "])));
 }, function (props) {
-  return props.borderType === 'danger' && css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
+  return props.borderType === 'danger' && css(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
 }, function (props) {
   return props.borderType === 'none' && css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
 });
@@ -17167,7 +17195,7 @@ var Toast = function Toast(props) {
   })), React__default.createElement(IconContent, null, React__default.createElement("h4", null, props.title), React__default.createElement("p", null, " ", props.description)));
 };
 
-var _templateObject$G, _templateObject2$u, _templateObject3$o, _templateObject4$k, _templateObject5$j, _templateObject6$h, _templateObject7$f, _templateObject8$c, _templateObject9$b, _templateObject10$8, _templateObject11$6;
+var _templateObject$G, _templateObject2$u, _templateObject3$o, _templateObject4$k, _templateObject5$j, _templateObject6$h, _templateObject7$f, _templateObject8$c, _templateObject9$c, _templateObject10$8, _templateObject11$6;
 var Container$d = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
 var Header$4 = styled.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var HeaderImage = styled.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
@@ -17180,7 +17208,7 @@ var HeaderLine = styled.div(_templateObject6$h || (_templateObject6$h = _taggedT
 }, function (props) {
   return props.size === 'small' && css(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
@@ -17362,7 +17390,7 @@ var Template4 = function Template4(props) {
   }));
 };
 
-var _templateObject$L, _templateObject2$z, _templateObject3$t, _templateObject4$o, _templateObject5$n, _templateObject6$k, _templateObject7$i, _templateObject8$f, _templateObject9$c;
+var _templateObject$L, _templateObject2$z, _templateObject3$t, _templateObject4$o, _templateObject5$n, _templateObject6$k, _templateObject7$i, _templateObject8$f, _templateObject9$d;
 var Container$h = styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 746px;\n  height: 169px;\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n  padding: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 var Circle = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  width: 141px;\n  height: 141px;\n  background-color: #dddedf;\n  border-radius: 50%;\n"])));
 var HeaderLine$4 = styled.div(_templateObject3$t || (_templateObject3$t = _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) {
@@ -17383,7 +17411,7 @@ var CustomLine$1 = styled(HeaderLine$4)(_templateObject8$f || (_templateObject8$
 }, function (props) {
   return props.color;
 });
-var MainContent$2 = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  margin-left: 35px;\n"])));
+var MainContent$2 = styled.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  margin-left: 35px;\n"])));
 
 var Template5 = function Template5(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -17410,7 +17438,7 @@ var Template5 = function Template5(props) {
   })));
 };
 
-var _templateObject$M, _templateObject2$A, _templateObject3$u, _templateObject4$p, _templateObject5$o, _templateObject6$l, _templateObject7$j, _templateObject8$g, _templateObject9$d;
+var _templateObject$M, _templateObject2$A, _templateObject3$u, _templateObject4$p, _templateObject5$o, _templateObject6$l, _templateObject7$j, _templateObject8$g, _templateObject9$e;
 var Container$i = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  width: 395px;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #f5f5f5;\n"])));
 var Header$6 = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n"])));
 var Footer$3 = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-top: 1px solid #b1b1b3;\n  height: 50px;\n"])));
@@ -17425,7 +17453,7 @@ var HeaderLine$5 = styled.div(_templateObject4$p || (_templateObject4$p = _tagge
 }, function (props) {
   return props.size === 'large' && css(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$2 = styled(HeaderLine$5)(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
+var CustomLine$2 = styled(HeaderLine$5)(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
@@ -17453,7 +17481,7 @@ var Template6 = function Template6(props) {
   })));
 };
 
-var _templateObject$N, _templateObject2$B, _templateObject3$v, _templateObject4$q, _templateObject5$p, _templateObject6$m, _templateObject7$k, _templateObject8$h, _templateObject9$e, _templateObject10$9;
+var _templateObject$N, _templateObject2$B, _templateObject3$v, _templateObject4$q, _templateObject5$p, _templateObject6$m, _templateObject7$k, _templateObject8$h, _templateObject9$f, _templateObject10$9;
 var Container$j = styled.div(_templateObject$N || (_templateObject$N = _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$7 = styled.div(_templateObject2$B || (_templateObject2$B = _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$v || (_templateObject3$v = _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) {
@@ -17474,7 +17502,7 @@ var CustomLine$3 = styled(HeaderLine$6)(_templateObject8$h || (_templateObject8$
 }, function (props) {
   return props.color;
 });
-var Main$2 = styled.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n  margin: 10px 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-evenly;\n"])));
+var Main$2 = styled.div(_templateObject9$f || (_templateObject9$f = _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$9 || (_templateObject10$9 = _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) {
@@ -17487,7 +17515,7 @@ var Template7 = function Template7(props) {
   })), React__default.createElement(Main$2, null, React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null)));
 };
 
-var _templateObject$O, _templateObject2$C, _templateObject3$w, _templateObject4$r, _templateObject5$q, _templateObject6$n, _templateObject7$l, _templateObject8$i, _templateObject9$f;
+var _templateObject$O, _templateObject2$C, _templateObject3$w, _templateObject4$r, _templateObject5$q, _templateObject6$n, _templateObject7$l, _templateObject8$i, _templateObject9$g;
 var Container$k = styled.div(_templateObject$O || (_templateObject$O = _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$8 = styled.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$7 = styled.div(_templateObject3$w || (_templateObject3$w = _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) {
@@ -17508,7 +17536,7 @@ var CustomLine$4 = styled(HeaderLine$7)(_templateObject8$i || (_templateObject8$
 }, function (props) {
   return props.color;
 });
-var Main$3 = styled.div(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  padding: 14px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
+var Main$3 = styled.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  padding: 14px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
 
 var Template8 = function Template8(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -17530,7 +17558,7 @@ var Template8 = function Template8(props) {
   })));
 };
 
-var _templateObject$P, _templateObject2$D, _templateObject3$x, _templateObject4$s, _templateObject5$r, _templateObject6$o, _templateObject7$m, _templateObject8$j, _templateObject9$g, _templateObject10$a;
+var _templateObject$P, _templateObject2$D, _templateObject3$x, _templateObject4$s, _templateObject5$r, _templateObject6$o, _templateObject7$m, _templateObject8$j, _templateObject9$h, _templateObject10$a;
 var Container$l = styled.div(_templateObject$P || (_templateObject$P = _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$9 = styled.div(_templateObject2$D || (_templateObject2$D = _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$x || (_templateObject3$x = _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) {
@@ -17551,7 +17579,7 @@ var CustomLine$5 = styled(HeaderLine$8)(_templateObject8$j || (_templateObject8$
 }, function (props) {
   return props.color;
 });
-var Main$4 = styled.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  padding: 14px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
+var Main$4 = styled.div(_templateObject9$h || (_templateObject9$h = _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$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
 var Template8$1 = function Template8(props) {
@@ -17569,7 +17597,7 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$4, null, React__default.createElement(Circle$2, null)));
 };
 
-var _templateObject$Q, _templateObject2$E, _templateObject3$y, _templateObject4$t, _templateObject5$s, _templateObject6$p, _templateObject7$n, _templateObject8$k, _templateObject9$h, _templateObject10$b, _templateObject11$7;
+var _templateObject$Q, _templateObject2$E, _templateObject3$y, _templateObject4$t, _templateObject5$s, _templateObject6$p, _templateObject7$n, _templateObject8$k, _templateObject9$i, _templateObject10$b, _templateObject11$7;
 var Container$m = styled.div(_templateObject$Q || (_templateObject$Q = _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$a = 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$9 = styled.div(_templateObject3$y || (_templateObject3$y = _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) {
@@ -17590,7 +17618,7 @@ var CustomLine$6 = styled(HeaderLine$9)(_templateObject8$k || (_templateObject8$
 }, function (props) {
   return props.color;
 });
-var GraphLine = styled(CustomLine$6)(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
+var GraphLine = styled(CustomLine$6)(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
 var Main$5 = styled.div(_templateObject10$b || (_templateObject10$b = _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$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
@@ -18387,7 +18415,7 @@ var useContext$2 = function useContext() {
   return React__default.useContext(Provider$2);
 };
 
-var _templateObject$W, _templateObject2$I, _templateObject3$C, _templateObject4$w, _templateObject5$u, _templateObject6$q, _templateObject7$o, _templateObject8$l, _templateObject9$i, _templateObject10$c, _templateObject11$8, _templateObject12$4, _templateObject13$3, _templateObject14$3, _templateObject15$2;
+var _templateObject$W, _templateObject2$I, _templateObject3$C, _templateObject4$w, _templateObject5$u, _templateObject6$q, _templateObject7$o, _templateObject8$l, _templateObject9$j, _templateObject10$c, _templateObject11$8, _templateObject12$4, _templateObject13$3, _templateObject14$3, _templateObject15$2;
 var aligns = {
   self: {
     horizontal: {
@@ -18464,7 +18492,7 @@ var Col = styled.div(_templateObject$W || (_templateObject$W = _taggedTemplateLi
     if (align.content.vertical !== undefined) {
       var _v3 = align.content.vertical;
       var _a3 = aligns.content.vertical;
-      styles.push(css(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n          align-items: ", ";\n        "])), _a3[_v3]));
+      styles.push(css(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n          align-items: ", ";\n        "])), _a3[_v3]));
     }
   }
 
@@ -18546,7 +18574,7 @@ var Grid$1 = function Grid$1(props) {
   }, React__default.createElement(Grid, Object.assign({}, gridProps)));
 };
 
-var _templateObject$Y, _templateObject2$K, _templateObject3$E, _templateObject4$x, _templateObject5$v, _templateObject6$r, _templateObject7$p, _templateObject8$m, _templateObject9$j, _templateObject10$d;
+var _templateObject$Y, _templateObject2$K, _templateObject3$E, _templateObject4$x, _templateObject5$v, _templateObject6$r, _templateObject7$p, _templateObject8$m, _templateObject9$k, _templateObject10$d;
 var horizontalAligns = {
   around: 'space-around',
   between: 'space-between',
@@ -18614,7 +18642,7 @@ var Row = styled.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLi
   var borderless = _ref7.borderless,
       lightestGrey = _ref7.theme.colors.lightestGrey;
   if (borderless) return;
-  return css(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-bottom: 1px solid ", ";\n      }\n    "])), lightestGrey);
+  return css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-bottom: 1px solid ", ";\n      }\n    "])), lightestGrey);
 }, function (_ref8) {
   var hover = _ref8.hover,
       theme = _ref8.theme;