@mw-kit/mw-ui 1.7.54 → 1.7.56

package/dist/index.js

@@ -200,9 +200,20 @@ var keys = function keys(value) {
 var notEmptyString = function notEmptyString(value) {
   return typeof value === 'string' && value.trim() !== '';
 };
+var isNumber = function isNumber(value) {
+  return typeof value === 'number' && isFinite(value);
+};
+var isNumeric = function isNumeric(value) {
+  if (isNumber(value)) return true;
+  if (!isString(value)) return false;
+  return !isNaN(parseFloat(value));
+};
 var isBoolean = function isBoolean(value) {
   return typeof value === 'boolean';
 };
+var isNumericString = function isNumericString(value) {
+  return notEmptyString(value) && isNumeric(value);
+};
 var isString = function isString(value) {
   return typeof value === 'string';
 };
@@ -324,6 +335,11 @@ var filterObject = function filterObject(object, remove, inital) {
   }, inital);
   return r;
 };
+var numberOrDefault = function numberOrDefault(value, defaultValue) {
+  if (isNumber(value)) return value;
+  if (isNumericString(value)) return parseFloat(value);
+  return defaultValue;
+};
 var isoStringToDate = function isoStringToDate(value) {
   var _value$split = value.split(' '),
       d = _value$split[0],
@@ -14977,17 +14993,11 @@ var Select = React__default.forwardRef(function (props, ref) {
 Select.displayName = 'Select';
 
 var Password = React__default.forwardRef(function (props, ref) {
-  var _useState = React.useState('none'),
+  var _useState = React.useState('hidden'),
       visibility = _useState[0],
       setVisibility = _useState[1];
 
   var icons = {
-    none: {
-      icon: 'edit',
-      onClick: function onClick() {
-        return setVisibility('hidden');
-      }
-    },
     visible: {
       icon: 'eye_off',
       onClick: function onClick() {
@@ -15006,15 +15016,6 @@ var Password = React__default.forwardRef(function (props, ref) {
     icon: icons[visibility].icon,
     width: '19px'
   };
-
-  var _onBlur = props.onBlur || function () {};
-
-  var onBlur = function onBlur(event) {
-    if (!event.target.value) setVisibility('none');
-
-    _onBlur(event);
-  };
-
   return React__default.createElement(Input$1, Object.assign({}, props, {
     type: visibility === 'visible' ? 'text' : 'PASSWORD',
     icon: {
@@ -15022,9 +15023,7 @@ var Password = React__default.forwardRef(function (props, ref) {
       position: 'right',
       onClick: icons[visibility].onClick
     },
-    onBlur: onBlur,
     placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-    htmlDisabled: visibility === 'none',
     ref: ref
   }));
 });
@@ -15631,8 +15630,8 @@ var Switch = function Switch(props) {
   })), React__default.createElement("span", null), label.after && React__default.createElement(LabelContainer$3, null, label.after));
 };
 
-var _templateObject$q, _templateObject2$m, _templateObject3$i, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$8, _templateObject10$7, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$1;
-var bullet = styled.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 _templateObject$q, _templateObject2$m;
+var bullet = styled.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  box-shadow: 0px 1px 3px ", ";\n\n  background-color: ", ";\n\n  transition: background-color 0.2s ease-in-out;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s4;
 }, function (_ref2) {
@@ -15640,95 +15639,131 @@ var bullet = styled.css(_templateObject$q || (_templateObject$q = _taggedTemplat
   return theme.spacings.s4;
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.colors.white;
-}, function (_ref4) {
-  var theme = _ref4.theme;
   return theme.getColor('black', 10);
+}, function (props) {
+  var theme = props.theme;
+  var min = numberOrDefault(props.min, 0);
+  var value = numberOrDefault(props.value, 0);
+  return theme.colors[min > 0 || value > min ? 'blue' : 'white'];
 });
-var NavBar = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 2;\n\n  left: 0;\n  width: 100%;\n  height: calc(33px + ", ");\n  transition: height 0.25s ease-in-out;\n  overflow: hidden;\n\n  ", "\n\n  > div {\n    position: absolute;\n    z-index: 2;\n\n    width: 100px;\n    left: ", ";\n    background-color: ", ";\n    color: ", ";\n    padding: ", ";\n    border-radius: 4px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n"])), function (_ref5) {
-  var theme = _ref5.theme;
+var Input$2 = styled__default.input(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  background-color: transparent;\n  outline: none;\n  position: relative;\n  z-index: 3;\n  margin: 0;\n\n  :not(:disabled) {\n    cursor: pointer;\n  }\n\n  /** firefox */\n  ::-moz-range-thumb {\n    ", "\n  }\n  /** ie */\n  ::-ms-thumb {\n    ", "\n  }\n  /** chrome */\n  ::-webkit-slider-thumb {\n    ", "\n  }\n"])), bullet, bullet, bullet);
+
+var _templateObject$r;
+var SelectedArea = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n\n  height: 3px;\n  width: 100%;\n  position: absolute;\n  bottom: calc(50% - 2px);\n  left: 0;\n  display: flex;\n  z-index: 1;\n\n  > span {\n    width: ", "%;\n    display: block;\n    box-sizing: border-box;\n    height: 100%;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.getColor('greyishBlue', 10);
+}, function (_ref2) {
+  var percent = _ref2.percent;
+  return percent;
+});
+
+var _templateObject$s, _templateObject2$n, _templateObject3$i;
+var InputContainer$1 = styled__default.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  gap: 6px;\n\n  > div {\n    position: relative;\n  }\n\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme,
+      invalid = _ref.invalid;
+
+  if (!invalid) {
+    return styled.css(_templateObject2$n || (_templateObject2$n = _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.blue, Input$2, theme.colors.lightestGrey, theme.colors.lightestGrey, theme.colors.lightestGrey);
+  }
+
+  return styled.css(_templateObject3$i || (_templateObject3$i = _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 _templateObject$t;
+var LabelContainer$4 = styled__default.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
   return theme.spacings.s1;
-}, function (_ref6) {
-  var position = _ref6.position;
-  return position === 'bottom' ? styled.css(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n          bottom: 100%;\n          > div {\n            bottom: ", ";\n          }\n        "])), function (_ref7) {
+});
+
+var _templateObject$u, _templateObject2$o, _templateObject3$j;
+var NavBar = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 2;\n\n  left: 0;\n  width: 100%;\n  height: calc(33px + ", ");\n  transition: height 0.25s ease-in-out;\n  overflow: hidden;\n\n  ", "\n\n  > div:nth-child(1) {\n    position: absolute;\n    z-index: 2;\n\n    width: 100px;\n    background-color: ", ";\n    color: ", ";\n    padding: ", ";\n    border-radius: 4px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  > div:nth-child(2) {\n    position: absolute;\n\n    width: ", ";\n    height: ", ";\n    border-radius: 2px 0 0 0;\n\n    transform: rotate(45deg);\n\n    background-color: ", ";\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.spacings.s3;
+}, function (_ref2) {
+  var position = _ref2.position;
+  return position === 'bottom' ? styled.css(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n          bottom: calc(100% + ", ");\n          > div:nth-child(1) {\n            bottom: ", ";\n          }\n\n          > div:nth-child(2) {\n            top: calc(\n              (100% - 19.8px / 2) - ", "\n            );\n          }\n        "])), function (_ref3) {
+    var theme = _ref3.theme;
+    return theme.spacings.s1;
+  }, function (_ref4) {
+    var theme = _ref4.theme;
+    return theme.spacings.s1;
+  }, function (_ref5) {
+    var theme = _ref5.theme;
+    return theme.spacings.s1;
+  }) : styled.css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n          top: calc(100% + ", ");\n          > div:nth-child(1) {\n            top: ", ";\n          }\n\n          > div:nth-child(2) {\n            bottom: calc(\n              (100% - 19.8px / 2) - ", "\n            );\n          }\n        "])), function (_ref6) {
+    var theme = _ref6.theme;
+    return theme.spacings.s1;
+  }, function (_ref7) {
     var theme = _ref7.theme;
     return theme.spacings.s1;
-  }) : styled.css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n          top: 100%;\n          > div {\n            top: ", ";\n          }\n        "])), function (_ref8) {
+  }, function (_ref8) {
     var theme = _ref8.theme;
     return theme.spacings.s1;
   });
 }, function (_ref9) {
-  var percent = _ref9.percent;
-  if (percent < 10) return '0%';
-  if (percent > 90) return 'calc(100% - 100px)';
-  return "calc(" + percent + "% - 50px + 22px * " + (50 - percent) / 100 + ")";
+  var theme = _ref9.theme;
+  return theme.colors.blue;
 }, function (_ref10) {
   var theme = _ref10.theme;
-  return theme.colors.blue;
+  return theme.colors.white;
 }, function (_ref11) {
   var theme = _ref11.theme;
-  return theme.colors.white;
+  return theme.spacings.s1;
 }, function (_ref12) {
   var theme = _ref12.theme;
-  return theme.spacings.s1;
-});
-var Input$2 = styled__default.input(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  background-color: transparent;\n  outline: none;\n  position: relative;\n  z-index: 3;\n  margin: 0;\n\n  :not(:disabled) {\n    cursor: pointer;\n  }\n\n  /** firefox */\n  ::-moz-range-thumb {\n    ", "\n  }\n  /** ie */\n  ::-ms-thumb {\n    ", "\n  }\n  /** chrome */\n  ::-webkit-slider-thumb {\n    ", "\n  }\n"])), bullet, bullet, bullet);
-var LabelContainer$4 = styled__default.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n"])), function (_ref13) {
+  return theme.spacings.s3;
+}, function (_ref13) {
   var theme = _ref13.theme;
-  return theme.spacings.s1;
-});
-var Label$5 = styled__default.label(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: 19px;\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n\n  ", "\n\n  > ", " {\n    ", "\n  }\n\n  :not(:hover) ", " {\n    height: 0;\n  }\n"])), function (_ref14) {
+  return theme.spacings.s3;
+}, function (_ref14) {
   var theme = _ref14.theme;
+  return theme.colors.blue;
+});
+
+var _templateObject$v, _templateObject2$p, _templateObject3$k;
+var Label$5 = styled__default.label(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: 19px;\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n\n  ", "\n\n  > ", " {\n    ", "\n  }\n\n  :not(:hover) ", " {\n    height: 0;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
   return theme.useTypography('p');
-}, function (_ref15) {
-  var width = _ref15.width;
+}, function (_ref2) {
+  var width = _ref2.width;
   return width || '100%';
-}, function (_ref16) {
-  var disabled = _ref16.disabled;
+}, function (_ref3) {
+  var disabled = _ref3.disabled;
   if (!disabled) return;
-  return styled.css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
-}, LabelContainer$4, function (_ref17) {
-  var required = _ref17.required;
-  return required && styled.css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n          :after {\n            content: ' *';\n          }\n        "])));
+  return styled.css(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+}, LabelContainer$4, function (_ref4) {
+  var required = _ref4.required;
+  return required && styled.css(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n          :after {\n            content: ' *';\n          }\n        "])));
 }, NavBar);
-var InputContainer$1 = styled__default.div(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  gap: 6px;\n\n  > div {\n    position: relative;\n  }\n\n  ", "\n"])), function (_ref18) {
-  var theme = _ref18.theme,
-      invalid = _ref18.invalid;
-
-  if (!invalid) {
-    return styled.css(_templateObject11$4 || (_templateObject11$4 = _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.blue, Input$2, theme.colors.lightestGrey, theme.colors.lightestGrey, theme.colors.lightestGrey);
-  }
 
-  return styled.css(_templateObject12$3 || (_templateObject12$3 = _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 _templateObject$w, _templateObject2$q;
+var Marker = styled__default.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  width: 40px;\n  text-align: center;\n  left: ", ";\n  z-index: 2;\n\n  :first-child {\n    left: 0;\n    text-align: left;\n\n    :after {\n      left: 0;\n    }\n  }\n  :last-child {\n    right: 0;\n    left: unset;\n    text-align: right;\n\n    :after {\n      right: 0;\n      left: unset;\n    }\n  }\n\n  ", "\n"])), function (_ref) {
+  var left = _ref.left;
+  return left;
+}, function (_ref2) {
+  var bullet = _ref2.bullet,
+      theme = _ref2.theme;
+  if (!bullet) return;
+  return styled.css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '';\n        position: absolute;\n        left: calc(50% - 5px);\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n        border: 1px solid ", ";\n        background-color: ", ";\n        box-shadow: 0px 1px 3px ", ";\n      }\n    "])), theme.colors.lightestGrey, theme.colors.white, theme.getColor('black', 10));
 });
-var MinMaxLabelContainer = styled__default.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
-var LabelsContainer = styled__default.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n\n  ", "\n"])), function (_ref19) {
-  var position = _ref19.position;
+
+var _templateObject$x;
+var MinMaxLabelContainer = styled__default.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
+
+var _templateObject$y, _templateObject2$r, _templateObject3$l;
+var LabelsContainer = styled__default.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n\n  ", "\n"])), function (_ref) {
+  var position = _ref.position;
 
   if (position === 'bottom') {
-    return styled.css(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex-direction: column-reverse;\n        }\n\n        ", " {\n          :after {\n            bottom: calc(100% + 10.5px);\n          }\n        }\n\n        ", " {\n          align-items: start;\n        }\n      "])), InputContainer$1, Marker, MinMaxLabelContainer);
+    return styled.css(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex-direction: column-reverse;\n        }\n\n        ", " {\n          :after {\n            bottom: calc(100% + 10.5px);\n          }\n        }\n\n        ", " {\n          align-items: start;\n        }\n      "])), InputContainer$1, Marker, MinMaxLabelContainer);
   }
 
-  return styled.css(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n      ", " {\n        flex-direction: column;\n      }\n\n      ", " {\n        :after {\n          top: calc(100% + 8px);\n        }\n      }\n\n      ", " {\n        align-items: end;\n      }\n    "])), InputContainer$1, Marker, MinMaxLabelContainer);
-});
-var SelectedArea = styled__default.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n\n  height: 3px;\n  width: 100%;\n  position: absolute;\n  bottom: calc(50% - 2px);\n  left: 0;\n  display: flex;\n  z-index: 1;\n\n  > span {\n    width: ", "%;\n    display: block;\n    box-sizing: border-box;\n    height: 100%;\n  }\n"])), function (_ref20) {
-  var theme = _ref20.theme;
-  return theme.getColor('greyishBlue', 10);
-}, function (_ref21) {
-  var percent = _ref21.percent;
-  return percent;
-});
-var MarkersContainer = styled__default.div(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n  height: 17px;\n"])));
-var Marker = styled__default.div(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  width: 40px;\n  text-align: center;\n  left: ", ";\n  z-index: 2;\n\n  :first-child {\n    left: 0;\n    text-align: left;\n\n    :after {\n      left: 0;\n    }\n  }\n  :last-child {\n    right: 0;\n    left: unset;\n    text-align: right;\n\n    :after {\n      right: 0;\n      left: unset;\n    }\n  }\n\n  ", "\n"])), function (_ref22) {
-  var left = _ref22.left;
-  return left;
-}, function (_ref23) {
-  var bullet = _ref23.bullet,
-      theme = _ref23.theme;
-  if (!bullet) return;
-  return styled.css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '';\n        position: absolute;\n        left: calc(50% - 5px);\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n        border: 1px solid ", ";\n        background-color: ", ";\n        box-shadow: 0px 1px 3px ", ";\n      }\n    "])), theme.colors.lightestGrey, theme.colors.white, theme.getColor('black', 10));
+  return styled.css(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n      ", " {\n        flex-direction: column;\n      }\n\n      ", " {\n        :after {\n          top: calc(100% + 8px);\n        }\n      }\n\n      ", " {\n        align-items: end;\n      }\n    "])), InputContainer$1, Marker, MinMaxLabelContainer);
 });
 
+var _templateObject$z;
+var MarkersContainer = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  height: 17px;\n"])));
+
 var getMarkers = function getMarkers(props) {
   if (props.markers && 'markers' in props.markers) {
     var _strict = props.markers.strict;
@@ -15799,16 +15834,24 @@ var getMarkers = function getMarkers(props) {
   };
 };
 
-var getLeft = function getLeft(markers, percent, index) {
+var getMarkerLeft = function getMarkerLeft(markers, range, index, value, min, strict) {
   var z = markers - 2;
   if (z < markers - 1) z = markers - 1;
   var y = 20 / z;
   var x = 20 - y * (z - index);
-  var p = index * percent;
+  var p = strict ? index * 100 / range : (value - min) * 100 / range;
   var left = "calc(" + p + "% - 10px - " + x + "px)";
   return left;
 };
 
+var getBarLeft = function getBarLeft(size, percent) {
+  return "min(max(calc(" + percent + "% - " + size / 2 + "px + 22px * " + (size / 2 - percent) / 100 + "), 0%), calc(100% - " + size + "px))";
+};
+
+var getIndicatorLeft = function getIndicatorLeft(size, percent) {
+  return "min(max(calc(((" + percent + "% - " + size / 2 + "px + 22px * " + (size / 2 - percent) / 100 + ")) + (" + size / 2 + "px + 2px)), 0%), calc(100% - " + size + "px))";
+};
+
 var Range = React__default.forwardRef(function (props, ref) {
   var label = props.label,
       minLabel = props.minLabel,
@@ -15917,7 +15960,7 @@ var Range = React__default.forwardRef(function (props, ref) {
   }, minLabel && React__default.createElement(MinMaxLabelContainer, null, minLabel), React__default.createElement(InputContainer$1, {
     invalid: invalid ? 1 : 0
   }, markers.length > 0 && React__default.createElement(MarkersContainer, null, markers.map(function (marker, index) {
-    var left = getLeft(markers.length, percent, index);
+    var left = getMarkerLeft(markers.length, range, index, marker.value, min, strict);
     var bullet = marker.value > value ? 1 : 0;
     return React__default.createElement(Marker, {
       key: marker.value,
@@ -15927,9 +15970,12 @@ var Range = React__default.forwardRef(function (props, ref) {
   })), React__default.createElement("div", null, React__default.createElement(Input$2, Object.assign({
     ref: ref
   }, inputProps)), React__default.createElement(NavBar, {
-    percent: value * 100 / max,
     position: position
-  }, React__default.createElement("div", null, React__default.createElement(Icon, {
+  }, React__default.createElement("div", {
+    style: {
+      left: getBarLeft(100, value * 100 / max)
+    }
+  }, React__default.createElement(Icon, {
     type: 'feather',
     icon: 'minus_circle',
     color: 'white',
@@ -15939,7 +15985,11 @@ var Range = React__default.forwardRef(function (props, ref) {
     icon: 'plus_circle',
     color: 'white',
     onClick: canIncrement ? increment : undefined
-  }))), React__default.createElement(SelectedArea, {
+  })), React__default.createElement("div", {
+    style: {
+      left: getIndicatorLeft(14, value * 100 / max)
+    }
+  })), React__default.createElement(SelectedArea, {
     percent: percent
   }, Array(spans).fill(1).map(function (_value, index) {
     return React__default.createElement("span", {
@@ -15949,31 +15999,31 @@ var Range = React__default.forwardRef(function (props, ref) {
 });
 Range.displayName = 'input';
 
-var _templateObject$r, _templateObject2$n, _templateObject3$j, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$b;
-var LabelContainer$5 = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
+var _templateObject$A, _templateObject2$s, _templateObject3$m, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$a;
+var LabelContainer$5 = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 });
-var Label$6 = styled__default.label(_templateObject2$n || (_templateObject2$n = _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__default.label(_templateObject2$s || (_templateObject2$s = _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 theme = _ref2.theme;
   return theme.spacings.s1;
 }, function (_ref3) {
   var disabled = _ref3.disabled;
 
   if (!disabled) {
-    return styled.css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
+    return styled.css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
   }
 
-  return styled.css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return styled.css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, function (_ref4) {
   var required = _ref4.required;
   if (!required) return;
-  return styled.css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n      > ", " {\n        :after {\n          content: ' *';\n        }\n      }\n    "])), LabelContainer$5);
+  return styled.css(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n      > ", " {\n        :after {\n          content: ' *';\n        }\n      }\n    "])), LabelContainer$5);
 }, function (_ref5) {
   var invalid = _ref5.invalid;
 
   if (!invalid) {
-    return styled.css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n        > span {\n          border-color: ", ";\n          :before {\n            background-color: ", ";\n          }\n        }\n      "])), function (_ref6) {
+    return styled.css(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n        > span {\n          border-color: ", ";\n          :before {\n            background-color: ", ";\n          }\n        }\n      "])), function (_ref6) {
       var theme = _ref6.theme;
       return theme.colors.blue;
     }, function (_ref7) {
@@ -15982,7 +16032,7 @@ var Label$6 = styled__default.label(_templateObject2$n || (_templateObject2$n =
     });
   }
 
-  return styled.css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n      > span {\n        border-color: ", ";\n        :before {\n          background-color: ", ";\n        }\n      }\n    "])), function (_ref8) {
+  return styled.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 theme.colors.warningRed;
   }, function (_ref9) {
@@ -16192,24 +16242,24 @@ var parse = function parse(value) {
   });
 };
 
-var _templateObject$s, _templateObject2$o, _templateObject3$k, _templateObject4$f, _templateObject5$d, _templateObject6$c, _templateObject7$c, _templateObject8$9, _templateObject9$9, _templateObject10$8, _templateObject11$5, _templateObject12$4;
-var RelativeContainer$5 = styled__default.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$6 = styled__default.div(_templateObject2$o || (_templateObject2$o = _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 _templateObject$B, _templateObject2$t, _templateObject3$n, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$b, _templateObject8$8, _templateObject9$8, _templateObject10$7, _templateObject11$4, _templateObject12$3;
+var RelativeContainer$5 = styled__default.div(_templateObject$B || (_templateObject$B = _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__default.div(_templateObject2$t || (_templateObject2$t = _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;
   return theme.useTypography('p');
 }, function (_ref2) {
   var children = _ref2.children;
   if (children) return;
-  return styled.css(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '--/--/-- (--:--) \xE0 --/--/-- (--:--)';\n        color: ", ";\n      }\n    "])), function (_ref3) {
+  return styled.css(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '--/--/-- (--:--) \xE0 --/--/-- (--:--)';\n        color: ", ";\n      }\n    "])), function (_ref3) {
     var theme = _ref3.theme;
     return theme.colors.darkGrey;
   });
 }, function (_ref4) {
   var onClick = _ref4.onClick;
   if (!onClick) return;
-  return styled.css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
+  return styled.css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
-var Container$6 = styled__default.div(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  white-space: nowrap;\n  gap: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n\n  width: 100%;\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref5) {
+var Container$6 = styled__default.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  white-space: nowrap;\n  gap: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n\n  width: 100%;\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.spacings.s1;
 }, function (_ref6) {
@@ -16226,29 +16276,29 @@ var Container$6 = styled__default.div(_templateObject5$d || (_templateObject5$d
       bgColor = _ref8[0],
       color = _ref8[1];
 
-  return styled.css(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background-color: ", ";\n      /** google chrome blue background */\n      -webkit-box-shadow: 0 0 0px 1000px ", " inset !important;\n    "])), color, bgColor, bgColor);
+  return styled.css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background-color: ", ";\n      /** google chrome blue background */\n      -webkit-box-shadow: 0 0 0px 1000px ", " inset !important;\n    "])), color, bgColor, bgColor);
 }, function (_ref9) {
   var theme = _ref9.theme,
       paddingless = _ref9.paddingless;
   if (paddingless) return;
-  return styled.css(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", "\n        ", ";\n    "])), theme.spacings.s2, theme.spacings.s1, theme.spacings.s2, theme.spacings.s3);
+  return styled.css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", "\n        ", ";\n    "])), theme.spacings.s2, theme.spacings.s1, theme.spacings.s2, theme.spacings.s3);
 }, function (_ref10) {
   var disabled = _ref10.disabled;
   if (!disabled) return;
-  return styled.css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return styled.css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 });
-var Button$4 = styled__default.button(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref11) {
+var Button$4 = styled__default.button(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref11) {
   var onClick = _ref11.onClick;
   if (!onClick) return;
-  return styled.css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
+  return styled.css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
-var LabelText$1 = styled__default.label(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref12) {
+var LabelText$1 = styled__default.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 styled.css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return styled.css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Component$1 = React__default.forwardRef(function (props, ref) {
@@ -16480,8 +16530,8 @@ var DatePicker$1 = Object.assign(Component$1, {
   useDefaultDateIntervalState: useDefaultDateIntervalState
 });
 
-var _templateObject$t;
-var Input$3 = styled__default.input(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  line-height: 17px;\n\n  ::placeholder {\n    color: ", ";\n\n    line-height: 17px;\n    ", ";\n    opacity: 1;\n  }\n\n  display: block;\n  box-sizing: border-box;\n  flex: 1;\n  min-width: ", ";\n\n  padding: calc(", " / 2) 0;\n\n  box-shadow: none;\n  outline: none;\n  border: 1px solid transparent;\n"])), function (_ref) {
+var _templateObject$C;
+var Input$3 = styled__default.input(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  line-height: 17px;\n\n  ::placeholder {\n    color: ", ";\n\n    line-height: 17px;\n    ", ";\n    opacity: 1;\n  }\n\n  display: block;\n  box-sizing: border-box;\n  flex: 1;\n  min-width: ", ";\n\n  padding: calc(", " / 2) 0;\n\n  box-shadow: none;\n  outline: none;\n  border: 1px solid transparent;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -16544,22 +16594,22 @@ var Input$4 = React__default.forwardRef(function (props, ref) {
 });
 Input$4.displayName = 'Input';
 
-var _templateObject$u, _templateObject2$p;
-var Label$7 = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref) {
+var _templateObject$D, _templateObject2$u;
+var Label$7 = styled__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s1;
 }, function (_ref2) {
   var required = _ref2.required;
   if (!required) return;
-  return styled.css(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return styled.css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Label$8 = function Label(props) {
   return props.children ? React__default.createElement(Label$7, Object.assign({}, props)) : null;
 };
 
-var _templateObject$v;
-var Tag = styled__default.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n\n  background-color: ", ";\n  color: ", ";\n  padding: calc(", " / 2);\n\n  border-style: solid;\n  border-width: 1px;\n  border-color: ", ";\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  > div:last-child {\n    cursor: pointer;\n  }\n"])), function (_ref) {
+var _templateObject$E;
+var Tag = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n\n  background-color: ", ";\n  color: ", ";\n  padding: calc(", " / 2);\n\n  border-style: solid;\n  border-width: 1px;\n  border-color: ", ";\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  > div:last-child {\n    cursor: pointer;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -16592,8 +16642,8 @@ var Tag$1 = function Tag$1(props) {
   })));
 };
 
-var _templateObject$w, _templateObject2$q, _templateObject3$l;
-var Label$9 = styled__default.label(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n\n  ", "\n"])), function (_ref) {
+var _templateObject$F, _templateObject2$v, _templateObject3$o;
+var Label$9 = styled__default.label(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -16605,9 +16655,9 @@ var Label$9 = styled__default.label(_templateObject$w || (_templateObject$w = _t
 }, function (_ref4) {
   var disabled = _ref4.disabled;
   if (!disabled) return;
-  return styled.css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return styled.css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 });
-var TagContainer = styled__default.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: 4px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: calc(", " / 2);\n  padding: ", ";\n"])), function (_ref5) {
+var TagContainer = styled__default.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: 4px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: calc(", " / 2);\n  padding: ", ";\n"])), function (_ref5) {
   var theme = _ref5.theme,
       invalid = _ref5.invalid;
   return theme.colors[invalid ? 'warningRed' : 'lightGrey'];
@@ -16687,8 +16737,8 @@ var Tags = React__default.forwardRef(function (props, ref) {
 });
 Tags.displayName = 'Tags';
 
-var _templateObject$x;
-var RelativeContainer$6 = styled__default.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$G;
+var RelativeContainer$6 = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 
 var isLeapYear$1 = function isLeapYear(year) {
   if (year % 4 !== 0) return false;else if (year % 100 !== 0) return true;else if (year % 400 !== 0) return false;else return true;
@@ -17089,22 +17139,22 @@ var Input$5 = Object.assign(Component$2, {
   getPhoneDetails: Phone.getPhoneDetails
 });
 
-var _templateObject$y, _templateObject2$r, _templateObject3$m, _templateObject4$g;
-var Container$7 = styled__default(AbsoluteContainer)(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n\n  > div {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n\n    > div {\n      padding: ", ";\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n  }\n"])), function (_ref) {
+var _templateObject$H, _templateObject2$w, _templateObject3$p, _templateObject4$f;
+var Container$7 = styled__default(AbsoluteContainer)(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n\n  > div {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n\n    > div {\n      padding: ", ";\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white;
 }, function (_ref2) {
   var s3 = _ref2.theme.spacings.s3;
   return s3 + " 0 " + s3 + " " + s3;
 });
-var Header$3 = styled__default.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  padding: ", ";\n  > div {\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (_ref3) {
+var Header$3 = styled__default.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  padding: ", ";\n  > div {\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (_ref3) {
   var s3 = _ref3.theme.spacings.s3;
   return s3;
 }, function (_ref4) {
   var s3 = _ref4.theme.spacings.s3;
   return "0 " + s3 + " " + s3 + " 0";
 });
-var Title = styled__default.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n  ", "\n  color: ", ";\n"])), function (_ref5) {
+var Title = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  ", "\n  color: ", ";\n"])), function (_ref5) {
   var useTypography = _ref5.theme.useTypography;
   return useTypography('p', {
     fontWeight: 'bold'
@@ -17113,7 +17163,7 @@ var Title = styled__default.div(_templateObject3$m || (_templateObject3$m = _tag
   var getColor = _ref6.theme.getColor;
   return getColor('greyishBlue', 50);
 });
-var Item = styled__default.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  display: flex;\n  align-items: center;\n\n  :not(:last-child) {\n    border-bottom: 1px solid\n      ", ";\n  }\n\n  > div:nth-child(1) {\n    flex: 1;\n\n    > div:nth-child(1) {\n      ", "\n      color: ", ";\n    }\n    > div:nth-child(2) {\n      ", "\n    }\n  }\n  > div:nth-child(2) {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n"])), function (_ref7) {
+var Item = styled__default.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  display: flex;\n  align-items: center;\n\n  :not(:last-child) {\n    border-bottom: 1px solid\n      ", ";\n  }\n\n  > div:nth-child(1) {\n    flex: 1;\n\n    > div:nth-child(1) {\n      ", "\n      color: ", ";\n    }\n    > div:nth-child(2) {\n      ", "\n    }\n  }\n  > div:nth-child(2) {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n"])), function (_ref7) {
   var s1 = _ref7.theme.spacings.s1;
   return s1 + " " + s1 + " " + s1 + " 0";
 }, function (_ref8) {
@@ -17227,8 +17277,8 @@ var AppliedFiltersMenu = function AppliedFiltersMenu(props) {
   }))));
 };
 
-var _templateObject$z, _templateObject2$s, _templateObject3$n;
-var Container$8 = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n  align-items: center;\n  color: ", ";\n\n  ", "\n"])), function (_ref) {
+var _templateObject$I, _templateObject2$x, _templateObject3$q;
+var Container$8 = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n  align-items: center;\n  color: ", ";\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       gap = _ref.$gap;
   return gap === '0' ? '0' : theme.spacings[gap];
@@ -17239,10 +17289,10 @@ var Container$8 = styled__default.div(_templateObject$z || (_templateObject$z =
   var onClick = _ref3.onClick;
 
   if (!onClick) {
-    return styled.css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n        opacity: 0.3;\n        pointer-events: none;\n      "])));
+    return styled.css(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n        opacity: 0.3;\n        pointer-events: none;\n      "])));
   }
 
-  return styled.css(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
+  return styled.css(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 });
 
 var Button$5 = function Button(props) {
@@ -17294,25 +17344,25 @@ var AppliedFilters = Object.assign(function (props) {
   Menu: AppliedFiltersMenu
 });
 
-var _templateObject$A, _templateObject2$t, _templateObject3$o, _templateObject4$h, _templateObject5$e, _templateObject6$d, _templateObject7$d, _templateObject8$a, _templateObject9$a, _templateObject10$9;
-var Container$9 = styled__default.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' && styled.css(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
+var _templateObject$J, _templateObject2$y, _templateObject3$r, _templateObject4$g, _templateObject5$d, _templateObject6$c, _templateObject7$c, _templateObject8$9, _templateObject9$9, _templateObject10$8;
+var Container$9 = styled__default.div(_templateObject$J || (_templateObject$J = _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' && styled.css(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 131px;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 131px;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
 }, function (props) {
-  return props.size === 'big' && styled.css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n      width: 414px;\n      height: 324px;\n    "])));
+  return props.size === 'big' && styled.css(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n      width: 414px;\n      height: 324px;\n    "])));
 }, function (props) {
-  return props.borderType === 'info' && styled.css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n      border-left-color: #4d6dbe;\n    "])));
+  return props.borderType === 'info' && styled.css(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n      border-left-color: #4d6dbe;\n    "])));
 }, function (props) {
-  return props.borderType === 'success' && styled.css(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n      border-left-color: #66bb6a;\n    "])));
+  return props.borderType === 'success' && styled.css(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n      border-left-color: #66bb6a;\n    "])));
 }, function (props) {
-  return props.borderType === 'warning' && styled.css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n      border-left-color: #fbcb01;\n    "])));
+  return props.borderType === 'warning' && styled.css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n      border-left-color: #fbcb01;\n    "])));
 }, function (props) {
-  return props.borderType === 'danger' && styled.css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
+  return props.borderType === 'danger' && styled.css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
 }, function (props) {
-  return props.borderType === 'none' && styled.css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
+  return props.borderType === 'none' && styled.css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
 });
 
 var _excluded$1 = ["children"];
@@ -17324,8 +17374,8 @@ var Card = function Card(_ref) {
   return React__default.createElement(Container$9, Object.assign({}, rest), children);
 };
 
-var _templateObject$B;
-var Container$a = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n\n  > div:nth-child(1) {\n    ", "\n    color: ", ";\n  }\n"])), function (_ref) {
+var _templateObject$K;
+var Container$a = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n\n  > div:nth-child(1) {\n    ", "\n    color: ", ";\n  }\n"])), function (_ref) {
   var _ref$theme$spacings = _ref.theme.spacings,
       s1 = _ref$theme$spacings.s1,
       s3 = _ref$theme$spacings.s3;
@@ -17388,8 +17438,8 @@ var Header$4 = function Header(props) {
   }));
 };
 
-var _templateObject$C;
-var EmptyMessage = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  padding: 0 20px;\n  color: ", ";\n  text-align: center;\n  margin: auto;\n  width: 100%;\n"])), function (_ref) {
+var _templateObject$L;
+var EmptyMessage = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  padding: 0 20px;\n  color: ", ";\n  text-align: center;\n  margin: auto;\n  width: 100%;\n"])), function (_ref) {
   var lightGrey = _ref.theme.colors.lightGrey;
   return lightGrey;
 });
@@ -17737,7 +17787,7 @@ var useContext$2 = function useContext() {
   return React__default.useContext(Provider$2);
 };
 
-var _templateObject$D, _templateObject2$u, _templateObject3$p, _templateObject4$i, _templateObject5$f, _templateObject6$e, _templateObject7$e, _templateObject8$b, _templateObject9$b, _templateObject10$a, _templateObject11$6, _templateObject12$5, _templateObject13$3, _templateObject14$3, _templateObject15$3;
+var _templateObject$M, _templateObject2$z, _templateObject3$s, _templateObject4$h, _templateObject5$e, _templateObject6$d, _templateObject7$d, _templateObject8$a, _templateObject9$a, _templateObject10$9, _templateObject11$5, _templateObject12$4, _templateObject13$2, _templateObject14$2, _templateObject15$2;
 var aligns = {
   self: {
     horizontal: {
@@ -17766,17 +17816,17 @@ var aligns = {
     }
   }
 };
-var Col = styled__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n\n  ", "\n\n  padding: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var Col = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n\n  ", "\n\n  padding: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var width = _ref.width;
 
   if (width === undefined) {
-    return styled.css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n        flex-basis: 0;\n        flex-grow: 1;\n        max-width: 100%;\n        width: 100%;\n      "])));
+    return styled.css(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n        flex-basis: 0;\n        flex-grow: 1;\n        max-width: 100%;\n        width: 100%;\n      "])));
   } else if (width === 'auto') {
-    return styled.css(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n        flex: 0 0 auto;\n        width: auto;\n        max-width: none;\n      "])));
+    return styled.css(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n        flex: 0 0 auto;\n        width: auto;\n        max-width: none;\n      "])));
   }
 
   var w = parseFloat(width) * 100 / 12;
-  return styled.css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n      flex: 0 0 ", "%;\n      max-width: ", "%;\n      width: 100%;\n    "])), w, w);
+  return styled.css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n      flex: 0 0 ", "%;\n      max-width: ", "%;\n      width: 100%;\n    "])), w, w);
 }, function (_ref2) {
   var spacing = _ref2.spacing;
   var padding = getSpacings(spacing === undefined ? 's1' : spacing);
@@ -17784,7 +17834,7 @@ var Col = styled__default.div(_templateObject$D || (_templateObject$D = _taggedT
 }, function (_ref3) {
   var spacingAround = _ref3.spacingAround;
   if (spacingAround) return;
-  return styled.css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n      :first-child {\n        padding-left: 0;\n      }\n      :last-child {\n        padding-right: 0;\n      }\n    "])));
+  return styled.css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n      :first-child {\n        padding-left: 0;\n      }\n      :last-child {\n        padding-right: 0;\n      }\n    "])));
 }, function (_ref4) {
   var align = _ref4.align;
   if (align === undefined) return;
@@ -17794,13 +17844,13 @@ var Col = styled__default.div(_templateObject$D || (_templateObject$D = _taggedT
     if (align.self.horizontal !== undefined) {
       var v = align.self.horizontal;
       var a = aligns.self.horizontal;
-      styles.push(styled.css(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n          justify-self: ", ";\n        "])), a[v]));
+      styles.push(styled.css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n          justify-self: ", ";\n        "])), a[v]));
     }
 
     if (align.self.vertical !== undefined) {
       var _v = align.self.vertical;
       var _a = aligns.self.vertical;
-      styles.push(styled.css(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n          align-self: ", ";\n        "])), _a[_v]));
+      styles.push(styled.css(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n          align-self: ", ";\n        "])), _a[_v]));
     }
   }
 
@@ -17808,19 +17858,19 @@ var Col = styled__default.div(_templateObject$D || (_templateObject$D = _taggedT
     if (align.content.horizontal !== undefined) {
       var _v2 = align.content.horizontal;
       var _a2 = aligns.content.horizontal;
-      styles.push(styled.css(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n          justify-content: ", ";\n        "])), _a2[_v2]));
+      styles.push(styled.css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n          justify-content: ", ";\n        "])), _a2[_v2]));
     }
 
     if (align.content.vertical !== undefined) {
       var _v3 = align.content.vertical;
       var _a3 = aligns.content.vertical;
-      styles.push(styled.css(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n          align-items: ", ";\n        "])), _a3[_v3]));
+      styles.push(styled.css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n          align-items: ", ";\n        "])), _a3[_v3]));
     }
   }
 
   if (align.text !== undefined) {
     var _v4 = align.text;
-    styles.push(styled.css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n        text-align: ", ";\n      "])), _v4));
+    styles.push(styled.css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n        text-align: ", ";\n      "])), _v4));
   }
 
   return styles;
@@ -17828,30 +17878,30 @@ var Col = styled__default.div(_templateObject$D || (_templateObject$D = _taggedT
   var bordered = _ref5.bordered,
       lightestGrey = _ref5.theme.colors.lightestGrey;
   if (!bordered) return;
-  return styled.css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
+  return styled.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 styled.css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), c);
+  return styled.css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), c);
 }, function (_ref7) {
   var backgroundColor = _ref7.backgroundColor,
       theme = _ref7.theme;
   if (backgroundColor === undefined) return;
   var c = Array.isArray(backgroundColor) ? theme.getColor.apply(theme, backgroundColor) : theme.colors[backgroundColor];
-  return styled.css(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), c);
+  return styled.css(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), c);
 }, function (_ref8) {
   var hover = _ref8.hover,
       theme = _ref8.theme;
   if (!hover) return;
   var h = hover === true ? ['lightGrey', 50] : hover;
   var c = Array.isArray(h) ? theme.getColor.apply(theme, h) : theme.colors[h];
-  return styled.css(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
+  return styled.css(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
 }, function (_ref9) {
   var pointer = _ref9.pointer;
   if (!pointer) return;
-  return styled.css(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
+  return styled.css(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 });
 
 var Col$1 = function Col$1(props) {
@@ -17871,17 +17921,17 @@ var useContext$3 = function useContext() {
   return React__default.useContext(Provider$3);
 };
 
-var _templateObject$E, _templateObject2$v, _templateObject3$q;
-var Grid = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var _templateObject$N, _templateObject2$A, _templateObject3$t;
+var Grid = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var spacing = _ref.spacing;
   if (spacing === undefined) return;
   var padding = getSpacings(spacing);
-  return styled.css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), padding);
+  return styled.css(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), padding);
 }, function (_ref2) {
   var borderless = _ref2.borderless,
       lightestGrey = _ref2.theme.colors.lightestGrey;
   if (borderless) return;
-  return styled.css(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n      border: 1px solid ", ";\n    "])), lightestGrey);
+  return styled.css(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n      border: 1px solid ", ";\n    "])), lightestGrey);
 });
 
 var Grid$1 = function Grid$1(props) {
@@ -17896,7 +17946,7 @@ var Grid$1 = function Grid$1(props) {
   }, React__default.createElement(Grid, Object.assign({}, gridProps)));
 };
 
-var _templateObject$F, _templateObject2$w, _templateObject3$r, _templateObject4$j, _templateObject5$g, _templateObject6$f, _templateObject7$f, _templateObject8$c, _templateObject9$c, _templateObject10$b;
+var _templateObject$O, _templateObject2$B, _templateObject3$u, _templateObject4$i, _templateObject5$f, _templateObject6$e, _templateObject7$e, _templateObject8$b, _templateObject9$b, _templateObject10$a;
 var horizontalAligns = {
   around: 'space-around',
   between: 'space-between',
@@ -17909,23 +17959,23 @@ var verticalAligns = {
   top: 'start',
   bottom: 'end'
 };
-var Row = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  color: ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var Row = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  color: ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var spacing = _ref.spacing;
   if (spacing === undefined) return;
   var padding = getSpacings(spacing);
-  return styled.css(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), padding);
+  return styled.css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), padding);
 }, function (_ref2) {
   var spacingAround = _ref2.spacingAround;
   if (spacingAround) return;
-  return styled.css(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n      :first-child {\n        padding-top: 0;\n      }\n      :last-child {\n        padding-bottom: 0;\n      }\n    "])));
+  return styled.css(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n      :first-child {\n        padding-top: 0;\n      }\n      :last-child {\n        padding-bottom: 0;\n      }\n    "])));
 }, function (_ref3) {
   var horizontalAlign = _ref3.horizontalAlign;
   if (horizontalAlign === undefined) return;
-  return styled.css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n      justify-content: ", ";\n    "])), horizontalAligns[horizontalAlign]);
+  return styled.css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n      justify-content: ", ";\n    "])), horizontalAligns[horizontalAlign]);
 }, function (_ref4) {
   var verticalAlign = _ref4.verticalAlign;
   if (verticalAlign === undefined) return;
-  return styled.css(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n      align-items: ", ";\n    "])), verticalAligns[verticalAlign]);
+  return styled.css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n      align-items: ", ";\n    "])), verticalAligns[verticalAlign]);
 }, function (_ref5) {
   var striped = _ref5.striped,
       backgroundColor = _ref5.backgroundColor,
@@ -17933,11 +17983,11 @@ var Row = styled__default.div(_templateObject$F || (_templateObject$F = _taggedT
 
   if (backgroundColor !== undefined) {
     var c = Array.isArray(backgroundColor) ? theme.getColor.apply(theme, backgroundColor) : theme.colors[backgroundColor];
-    return styled.css(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), c);
+    return styled.css(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), c);
   }
 
   if (striped === undefined) {
-    return styled.css(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), theme.colors.white);
+    return styled.css(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), theme.colors.white);
   }
 
   var config = striped === true ? {
@@ -17953,7 +18003,7 @@ var Row = styled__default.div(_templateObject$F || (_templateObject$F = _taggedT
     even: theme.colors.white,
     odd: theme.colors.white
   });
-  return styled.css(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n      :nth-child(even) {\n        background-color: ", ";\n      }\n      :nth-child(odd) {\n        background-color: ", ";\n      }\n    "])), colors.even, colors.odd);
+  return styled.css(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n      :nth-child(even) {\n        background-color: ", ";\n      }\n      :nth-child(odd) {\n        background-color: ", ";\n      }\n    "])), colors.even, colors.odd);
 }, function (_ref6) {
   var fontColor = _ref6.fontColor,
       theme = _ref6.theme;
@@ -17964,14 +18014,14 @@ var Row = styled__default.div(_templateObject$F || (_templateObject$F = _taggedT
   var borderless = _ref7.borderless,
       lightestGrey = _ref7.theme.colors.lightestGrey;
   if (borderless) return;
-  return styled.css(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-bottom: 1px solid ", ";\n      }\n    "])), lightestGrey);
+  return styled.css(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-bottom: 1px solid ", ";\n      }\n    "])), lightestGrey);
 }, function (_ref8) {
   var hover = _ref8.hover,
       theme = _ref8.theme;
   if (!hover) return;
   var h = hover === true ? ['lightGrey', 50] : hover;
   var c = Array.isArray(h) ? theme.getColor.apply(theme, h) : theme.colors[h];
-  return styled.css(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
+  return styled.css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
 });
 
 var Row$1 = function Row$1(props) {
@@ -18024,40 +18074,40 @@ var widths = {
   default: '642.5px'
 };
 
-var _templateObject$G, _templateObject2$x, _templateObject3$s, _templateObject4$k, _templateObject5$h, _templateObject6$g, _templateObject7$g, _templateObject8$d, _templateObject9$d, _templateObject10$c;
-var Background = styled__default.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 _templateObject$P, _templateObject2$C, _templateObject3$v, _templateObject4$j, _templateObject5$g, _templateObject6$f, _templateObject7$f, _templateObject8$c, _templateObject9$c, _templateObject10$b;
+var Background = styled__default.div(_templateObject$P || (_templateObject$P = _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);
 });
-var Content = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"])));
-var Header$5 = styled__default.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  ", "\n"])), function (_ref2) {
+var Content = styled__default.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"])));
+var Header$5 = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  ", "\n"])), function (_ref2) {
   var _ref2$theme = _ref2.theme,
       colors = _ref2$theme.colors,
       spacings = _ref2$theme.spacings,
       useTypography = _ref2$theme.useTypography;
-  return styled.css(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", ";\n    padding: ", ";\n\n    ", "\n  "])), colors.lightestGrey, spacings.s4, useTypography('h1'));
+  return styled.css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", ";\n    padding: ", ";\n\n    ", "\n  "])), colors.lightestGrey, spacings.s4, useTypography('h1'));
 });
-var Footer$2 = styled__default.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  ", "\n"])), function (_ref3) {
+var Footer$2 = styled__default.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  ", "\n"])), function (_ref3) {
   var _ref3$theme = _ref3.theme,
       spacings = _ref3$theme.spacings,
       colors = _ref3$theme.colors;
-  return styled.css(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n    border-top: 1px solid ", ";\n    padding: ", ";\n  "])), colors.lightestGrey, spacings.s3);
+  return styled.css(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n    border-top: 1px solid ", ";\n    padding: ", ";\n  "])), colors.lightestGrey, spacings.s3);
 });
-var FooterMessage = styled__default.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n  max-width: 75%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  span {\n    font-size: 14px;\n    color: ", ";\n  }\n"])), function (_ref4) {
+var FooterMessage = styled__default.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n  max-width: 75%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  span {\n    font-size: 14px;\n    color: ", ";\n  }\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.getColor('darkBlue', 75);
 });
-var FooterButtons = styled__default.div(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: ", ";\n"])), function (_ref5) {
+var FooterButtons = styled__default.div(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: ", ";\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.spacings.s3;
 });
-var Container$b = styled__default.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (_ref6) {
+var Container$b = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (_ref6) {
   var theme = _ref6.theme,
       size = _ref6.size,
       customSize = _ref6.customSize,
       color = _ref6.color,
       inverted = _ref6.inverted;
-  return styled.css(_templateObject10$c || (_templateObject10$c = _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 styled.css(_templateObject10$b || (_templateObject10$b = _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"];
@@ -18133,8 +18183,8 @@ var Modal = function Modal(props) {
   }))))));
 };
 
-var _templateObject$H;
-var Content$1 = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$Q;
+var Content$1 = styled__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -18171,8 +18221,8 @@ var ConfirmDelete = function ConfirmDelete(props) {
   }, React__default.createElement(Content$1, null, children || content));
 };
 
-var _templateObject$I;
-var Content$2 = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$R;
+var Content$2 = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -18212,8 +18262,8 @@ var ConfirmSuccess = function ConfirmSuccess(props) {
   }, React__default.createElement(Content$2, null, children || content));
 };
 
-var _templateObject$J;
-var Content$3 = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$S;
+var Content$3 = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -18254,24 +18304,24 @@ var Modal$1 = Object.assign(Modal, {
   Audit: Audit
 });
 
-var _templateObject$K, _templateObject2$y, _templateObject3$t, _templateObject4$l, _templateObject5$i, _templateObject6$h, _templateObject7$h, _templateObject8$e, _templateObject9$e, _templateObject10$d, _templateObject11$7;
-var Container$c = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
-var Header$6 = styled__default.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var HeaderImage = styled__default.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
-var HeaderContent = styled__default.div(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
-var MainContent = styled__default.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
-var HeaderLine = styled__default.div(_templateObject6$h || (_templateObject6$h = _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) {
+var _templateObject$T, _templateObject2$D, _templateObject3$w, _templateObject4$k, _templateObject5$h, _templateObject6$g, _templateObject7$g, _templateObject8$d, _templateObject9$d, _templateObject10$c, _templateObject11$6;
+var Container$c = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
+var Header$6 = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var HeaderImage = styled__default.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
+var HeaderContent = styled__default.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
+var MainContent = styled__default.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
+var HeaderLine = styled__default.div(_templateObject6$g || (_templateObject6$g = _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) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && styled.css(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && styled.css(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && styled.css(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var MainLine = styled__default(HeaderLine)(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
+var MainLine = styled__default(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);
@@ -18306,28 +18356,28 @@ var Template1 = function Template1(props) {
   })));
 };
 
-var _templateObject$L, _templateObject2$z, _templateObject3$u, _templateObject4$m, _templateObject5$j;
-var HeaderLine$1 = styled__default.div(_templateObject$L || (_templateObject$L = _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) {
+var _templateObject$U, _templateObject2$E, _templateObject3$x, _templateObject4$l, _templateObject5$i;
+var HeaderLine$1 = styled__default.div(_templateObject$U || (_templateObject$U = _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) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && styled.css(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && styled.css(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && styled.css(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
 
-var _templateObject$M, _templateObject2$A, _templateObject3$v, _templateObject4$n, _templateObject5$k, _templateObject6$i, _templateObject7$i, _templateObject8$f;
-var Container$d = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
-var Template2Container = styled__default(Container$d)(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  background: #fff;\n  border: 2px solid #ebebeb;\n"])));
-var Header$7 = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var HeaderImage$1 = styled__default.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
-var HeaderContent$1 = styled__default.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
-var MainContent$1 = styled__default.div(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
-var MainLine$1 = styled__default(HeaderLine$1)(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
-var HeaderLine$2 = styled__default(HeaderLine$1)(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose([""])));
+var _templateObject$V, _templateObject2$F, _templateObject3$y, _templateObject4$m, _templateObject5$j, _templateObject6$h, _templateObject7$h, _templateObject8$e;
+var Container$d = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var Template2Container = styled__default(Container$d)(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  background: #fff;\n  border: 2px solid #ebebeb;\n"])));
+var Header$7 = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var HeaderImage$1 = styled__default.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
+var HeaderContent$1 = styled__default.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
+var MainContent$1 = styled__default.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
+var MainLine$1 = styled__default(HeaderLine$1)(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
+var HeaderLine$2 = styled__default(HeaderLine$1)(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose([""])));
 
 var Template2 = function Template2(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -18350,10 +18400,10 @@ var Template2 = function Template2(props) {
   })));
 };
 
-var _templateObject$N, _templateObject2$B, _templateObject3$w;
-var Container$e = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
-var Template3Container = styled__default(Container$e)(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose([""])));
-var Template3Line = styled__default(HeaderLine$1)(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  background-color: #dadada;\n  height: ", ";\n"])), function (props) {
+var _templateObject$W, _templateObject2$G, _templateObject3$z;
+var Container$e = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var Template3Container = styled__default(Container$e)(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose([""])));
+var Template3Line = styled__default(HeaderLine$1)(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  background-color: #dadada;\n  height: ", ";\n"])), function (props) {
   return props.height;
 });
 
@@ -18382,21 +18432,21 @@ var Template3 = function Template3(props) {
   }));
 };
 
-var _templateObject$O, _templateObject2$C, _templateObject3$x, _templateObject4$o, _templateObject5$l, _templateObject6$j, _templateObject7$j, _templateObject8$g;
-var Container$f = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
-var HeaderLine$3 = styled__default.div(_templateObject2$C || (_templateObject2$C = _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) {
+var _templateObject$X, _templateObject2$H, _templateObject3$A, _templateObject4$n, _templateObject5$k, _templateObject6$i, _templateObject7$i, _templateObject8$f;
+var Container$f = styled__default.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var HeaderLine$3 = styled__default.div(_templateObject2$H || (_templateObject2$H = _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) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && styled.css(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && styled.css(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && styled.css(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var Template4Container = styled__default(Container$f)(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n"])));
-var CustomLine = styled__default(HeaderLine$3)(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
+var Template4Container = styled__default(Container$f)(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n"])));
+var CustomLine = styled__default(HeaderLine$3)(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
@@ -18449,28 +18499,28 @@ var Template4 = function Template4(props) {
   }));
 };
 
-var _templateObject$P, _templateObject2$D, _templateObject3$y, _templateObject4$p, _templateObject5$m, _templateObject6$k, _templateObject7$k, _templateObject8$h, _templateObject9$f;
-var Container$g = styled__default.div(_templateObject$P || (_templateObject$P = _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__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  width: 141px;\n  height: 141px;\n  background-color: #dddedf;\n  border-radius: 50%;\n"])));
-var HeaderLine$4 = styled__default.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) {
+var _templateObject$Y, _templateObject2$I, _templateObject3$B, _templateObject4$o, _templateObject5$l, _templateObject6$j, _templateObject7$j, _templateObject8$g, _templateObject9$e;
+var Container$g = styled__default.div(_templateObject$Y || (_templateObject$Y = _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__default.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n  width: 141px;\n  height: 141px;\n  background-color: #dddedf;\n  border-radius: 50%;\n"])));
+var HeaderLine$4 = styled__default.div(_templateObject3$B || (_templateObject3$B = _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) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && styled.css(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && styled.css(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && styled.css(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$1 = styled__default(HeaderLine$4)(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
+var CustomLine$1 = styled__default(HeaderLine$4)(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
 }, function (props) {
   return props.color;
 });
-var MainContent$2 = styled__default.div(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  margin-left: 35px;\n"])));
+var MainContent$2 = styled__default.div(_templateObject9$e || (_templateObject9$e = _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);
@@ -18497,22 +18547,22 @@ var Template5 = function Template5(props) {
   })));
 };
 
-var _templateObject$Q, _templateObject2$E, _templateObject3$z, _templateObject4$q, _templateObject5$n, _templateObject6$l, _templateObject7$l, _templateObject8$i, _templateObject9$g;
-var Container$h = styled__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  width: 395px;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #f5f5f5;\n"])));
-var Header$8 = styled__default.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n"])));
-var Footer$3 = styled__default.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-top: 1px solid #b1b1b3;\n  height: 50px;\n"])));
-var HeaderLine$5 = styled__default.div(_templateObject4$q || (_templateObject4$q = _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) {
+var _templateObject$Z, _templateObject2$J, _templateObject3$C, _templateObject4$p, _templateObject5$m, _templateObject6$k, _templateObject7$k, _templateObject8$h, _templateObject9$f;
+var Container$h = styled__default.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  width: 395px;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #f5f5f5;\n"])));
+var Header$8 = styled__default.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n"])));
+var Footer$3 = styled__default.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-top: 1px solid #b1b1b3;\n  height: 50px;\n"])));
+var HeaderLine$5 = styled__default.div(_templateObject4$p || (_templateObject4$p = _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) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && styled.css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && styled.css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && styled.css(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$2 = styled__default(HeaderLine$5)(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
+var CustomLine$2 = styled__default(HeaderLine$5)(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
@@ -18540,29 +18590,29 @@ var Template6 = function Template6(props) {
   })));
 };
 
-var _templateObject$R, _templateObject2$F, _templateObject3$A, _templateObject4$r, _templateObject5$o, _templateObject6$m, _templateObject7$m, _templateObject8$j, _templateObject9$h, _templateObject10$e;
-var Container$i = styled__default.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__default.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
-var HeaderLine$6 = styled__default.div(_templateObject3$A || (_templateObject3$A = _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) {
+var _templateObject$_, _templateObject2$K, _templateObject3$D, _templateObject4$q, _templateObject5$n, _templateObject6$l, _templateObject7$l, _templateObject8$i, _templateObject9$g, _templateObject10$d;
+var Container$i = styled__default.div(_templateObject$_ || (_templateObject$_ = _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__default.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
+var HeaderLine$6 = styled__default.div(_templateObject3$D || (_templateObject3$D = _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) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && styled.css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && styled.css(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && styled.css(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$3 = styled__default(HeaderLine$6)(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
+var CustomLine$3 = styled__default(HeaderLine$6)(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
 }, function (props) {
   return props.color;
 });
-var Main$2 = styled__default.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__default.div(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n  width: 30px;\n  height: 30px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n  margin: 0 16px;\n"])));
+var Main$2 = styled__default.div(_templateObject9$g || (_templateObject9$g = _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__default.div(_templateObject10$d || (_templateObject10$d = _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);
@@ -18574,28 +18624,28 @@ 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$S, _templateObject2$G, _templateObject3$B, _templateObject4$s, _templateObject5$p, _templateObject6$n, _templateObject7$n, _templateObject8$k, _templateObject9$i;
-var Container$j = styled__default.div(_templateObject$S || (_templateObject$S = _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$a = styled__default.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$7 = styled__default.div(_templateObject3$B || (_templateObject3$B = _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) {
+var _templateObject$$, _templateObject2$L, _templateObject3$E, _templateObject4$r, _templateObject5$o, _templateObject6$m, _templateObject7$m, _templateObject8$j, _templateObject9$h;
+var Container$j = styled__default.div(_templateObject$$ || (_templateObject$$ = _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$a = styled__default.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
+var HeaderLine$7 = styled__default.div(_templateObject3$E || (_templateObject3$E = _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) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && styled.css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && styled.css(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && styled.css(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$4 = styled__default(HeaderLine$7)(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
+var CustomLine$4 = styled__default(HeaderLine$7)(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
 }, function (props) {
   return props.color;
 });
-var Main$3 = styled__default.div(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n  padding: 14px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
+var Main$3 = styled__default.div(_templateObject9$h || (_templateObject9$h = _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);
@@ -18617,29 +18667,29 @@ var Template8 = function Template8(props) {
   })));
 };
 
-var _templateObject$T, _templateObject2$H, _templateObject3$C, _templateObject4$t, _templateObject5$q, _templateObject6$o, _templateObject7$o, _templateObject8$l, _templateObject9$j, _templateObject10$f;
-var Container$k = styled__default.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__default.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$8 = styled__default.div(_templateObject3$C || (_templateObject3$C = _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) {
+var _templateObject$10, _templateObject2$M, _templateObject3$F, _templateObject4$s, _templateObject5$p, _templateObject6$n, _templateObject7$n, _templateObject8$k, _templateObject9$i, _templateObject10$e;
+var Container$k = styled__default.div(_templateObject$10 || (_templateObject$10 = _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__default.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
+var HeaderLine$8 = styled__default.div(_templateObject3$F || (_templateObject3$F = _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) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && styled.css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && styled.css(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && styled.css(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$5 = styled__default(HeaderLine$8)(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
+var CustomLine$5 = styled__default(HeaderLine$8)(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
 }, function (props) {
   return props.color;
 });
-var Main$4 = styled__default.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__default.div(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
+var Main$4 = styled__default.div(_templateObject9$i || (_templateObject9$i = _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__default.div(_templateObject10$e || (_templateObject10$e = _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);
@@ -18656,30 +18706,30 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$4, null, React__default.createElement(Circle$2, null)));
 };
 
-var _templateObject$U, _templateObject2$I, _templateObject3$D, _templateObject4$u, _templateObject5$r, _templateObject6$p, _templateObject7$p, _templateObject8$m, _templateObject9$k, _templateObject10$g, _templateObject11$8;
-var Container$l = styled__default.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__default.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
-var HeaderLine$9 = styled__default.div(_templateObject3$D || (_templateObject3$D = _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) {
+var _templateObject$11, _templateObject2$N, _templateObject3$G, _templateObject4$t, _templateObject5$q, _templateObject6$o, _templateObject7$o, _templateObject8$l, _templateObject9$j, _templateObject10$f, _templateObject11$7;
+var Container$l = styled__default.div(_templateObject$11 || (_templateObject$11 = _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__default.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
+var HeaderLine$9 = styled__default.div(_templateObject3$G || (_templateObject3$G = _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) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && styled.css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && styled.css(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && styled.css(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$6 = styled__default(HeaderLine$9)(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
+var CustomLine$6 = styled__default(HeaderLine$9)(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
 }, function (props) {
   return props.color;
 });
-var GraphLine = styled__default(CustomLine$6)(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
-var Main$5 = styled__default.div(_templateObject10$g || (_templateObject10$g = _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__default.div(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
+var GraphLine = styled__default(CustomLine$6)(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
+var Main$5 = styled__default.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__default.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);
@@ -18800,32 +18850,32 @@ var Placeholder = function Placeholder(props) {
   }
 };
 
-var _templateObject$V, _templateObject2$J, _templateObject3$E, _templateObject4$v, _templateObject5$s, _templateObject6$q, _templateObject7$q;
-var Container$m = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  span {\n    display: inline-block;\n    margin-left: 7px;\n    color: #000000cc;\n  }\n"])));
-var Progress = styled__default.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n  width: 64px;\n  height: 12px;\n  border: 1px solid #e4e4e4;\n  div {\n    width: ", ";\n    max-width: 64px;\n    height: 100%;\n    ", "\n\n    ", "\n    ", "\n      ", "\n      ", "\n  }\n"])), function (props) {
+var _templateObject$12, _templateObject2$O, _templateObject3$H, _templateObject4$u, _templateObject5$r, _templateObject6$p, _templateObject7$p;
+var Container$m = styled__default.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  span {\n    display: inline-block;\n    margin-left: 7px;\n    color: #000000cc;\n  }\n"])));
+var Progress = styled__default.div(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n  width: 64px;\n  height: 12px;\n  border: 1px solid #e4e4e4;\n  div {\n    width: ", ";\n    max-width: 64px;\n    height: 100%;\n    ", "\n\n    ", "\n    ", "\n      ", "\n      ", "\n  }\n"])), function (props) {
   return props.value + "%";
 }, function (props) {
-  return props.type === 'default' && styled.css(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref) {
+  return props.type === 'default' && styled.css(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref) {
     var theme = _ref.theme;
     return theme.colors.warningGray;
   });
 }, function (props) {
-  return props.type === 'info' && styled.css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref2) {
+  return props.type === 'info' && styled.css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref2) {
     var theme = _ref2.theme;
     return theme.colors.blue;
   });
 }, function (props) {
-  return props.type === 'danger' && styled.css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref3) {
+  return props.type === 'danger' && styled.css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref3) {
     var theme = _ref3.theme;
     return theme.colors.warningRed;
   });
 }, function (props) {
-  return props.type === 'success' && styled.css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref4) {
+  return props.type === 'success' && styled.css(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref4) {
     var theme = _ref4.theme;
     return theme.colors.green;
   });
 }, function (props) {
-  return props.type === 'warning' && styled.css(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref5) {
+  return props.type === 'warning' && styled.css(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref5) {
     var theme = _ref5.theme;
     return theme.colors.warningYellow;
   });
@@ -18870,21 +18920,21 @@ function SvgClose(props) {
   })));
 }
 
-var _templateObject$W, _templateObject2$K, _templateObject3$F, _templateObject4$w, _templateObject5$t, _templateObject6$r;
-var Container$n = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  display: block;\n  border-bottom-style: solid;\n\n  ", "\n"])), function (_ref) {
+var _templateObject$13, _templateObject2$P, _templateObject3$I, _templateObject4$v, _templateObject5$s, _templateObject6$q;
+var Container$n = styled__default.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  display: block;\n  border-bottom-style: solid;\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       internal = _ref.internal;
-  return styled.css(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n    margin-bottom: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), theme.spacings.s2, internal ? '1px' : '2px', internal ? theme.getColor('lightestGrey', 50) : theme.colors.blue);
+  return styled.css(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n    margin-bottom: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), theme.spacings.s2, internal ? '1px' : '2px', internal ? theme.getColor('lightestGrey', 50) : theme.colors.blue);
 });
-var Tabs = styled__default.ul(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  list-style: none;\n  display: inline-flex;\n  gap: 1px;\n  padding: 0;\n  margin: 0;\n\n  ", "\n"])), function (_ref2) {
+var Tabs = styled__default.ul(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  list-style: none;\n  display: inline-flex;\n  gap: 1px;\n  padding: 0;\n  margin: 0;\n\n  ", "\n"])), function (_ref2) {
   var theme = _ref2.theme,
       internal = _ref2.internal;
-  return styled.css(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n    height: ", ";\n    box-shadow: 0 0 10px 0 ", ";\n  "])), internal ? '41px' : '49px', theme.getColor('black', 10));
+  return styled.css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n    height: ", ";\n    box-shadow: 0 0 10px 0 ", ";\n  "])), internal ? '41px' : '49px', theme.getColor('black', 10));
 });
-var Tab = styled__default.li(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 4px 4px 0 0;\n\n  svg {\n    transform: scale(calc(18 / 24));\n    stroke-width: 2px;\n  }\n\n  ", "\n"])), function (_ref3) {
+var Tab = styled__default.li(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 4px 4px 0 0;\n\n  svg {\n    transform: scale(calc(18 / 24));\n    stroke-width: 2px;\n  }\n\n  ", "\n"])), function (_ref3) {
   var theme = _ref3.theme,
       active = _ref3.active;
-  return styled.css(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    padding: 0 ", ";\n    gap: ", ";\n\n    span {\n      font-family: ", ";\n      font-size: ", ";\n      font-weight: ", ";\n\n      color: ", ";\n    }\n\n    svg {\n      stroke: ", ";\n\n      &:hover {\n        stroke: ", ";\n      }\n    }\n  "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s2, theme.spacings.s2, theme.typographies.h2.fontFamily, theme.typographies.h2.fontSize, theme.typographies.h2.fontWeight, theme.colors[active ? 'white' : 'darkBlue'], theme.colors[active ? 'white' : 'darkBlue'], theme.colors.red);
+  return styled.css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    padding: 0 ", ";\n    gap: ", ";\n\n    span {\n      font-family: ", ";\n      font-size: ", ";\n      font-weight: ", ";\n\n      color: ", ";\n    }\n\n    svg {\n      stroke: ", ";\n\n      &:hover {\n        stroke: ", ";\n      }\n    }\n  "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s2, theme.spacings.s2, theme.typographies.h2.fontFamily, theme.typographies.h2.fontSize, theme.typographies.h2.fontWeight, theme.colors[active ? 'white' : 'darkBlue'], theme.colors[active ? 'white' : 'darkBlue'], theme.colors.red);
 });
 
 var initialStatus = function initialStatus(active, length) {
@@ -19003,8 +19053,8 @@ var Tabs$1 = function Tabs$1(props) {
   }, [])));
 };
 
-var _templateObject$X;
-var Container$o = styled__default.textarea(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  resize: none;\n  outline: 0;\n  border: 1px solid #c8c8c8;\n  padding: 14px;\n  border-radius: 4px;\n  color: #192338;\n"])), function (props) {
+var _templateObject$14;
+var Container$o = styled__default.textarea(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  resize: none;\n  outline: 0;\n  border: 1px solid #c8c8c8;\n  padding: 14px;\n  border-radius: 4px;\n  color: #192338;\n"])), function (props) {
   return "" + props.width;
 }, function (props) {
   return "" + props.height;
@@ -19014,18 +19064,18 @@ var TextArea = function TextArea(props) {
   return React__default.createElement(Container$o, Object.assign({}, props));
 };
 
-var _templateObject$Y, _templateObject2$L, _templateObject3$G, _templateObject4$x, _templateObject5$u, _templateObject6$s;
-var Container$p = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n  border-radius: 4px;\n  width: ", ";\n  height: 88px;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", "\n\n  ", "\n\n    ", "\n\n  svg {\n    cursor: pointer;\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 13px;\n    height: 13px;\n  }\n"])), function (props) {
+var _templateObject$15, _templateObject2$Q, _templateObject3$J, _templateObject4$w, _templateObject5$t, _templateObject6$r;
+var Container$p = styled__default.div(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n  border-radius: 4px;\n  width: ", ";\n  height: 88px;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", "\n\n  ", "\n\n    ", "\n\n  svg {\n    cursor: pointer;\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 13px;\n    height: 13px;\n  }\n"])), function (props) {
   return props.size === 'large' ? '837px' : '460px';
 }, function (props) {
-  return props.color === 'success' && styled.css(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n      background-color: #fcfff5;\n      opacity: 1;\n      border-color: #a8c599;\n      h4 {\n        color: #1e561f;\n      }\n      p {\n        color: #1e561fcc;\n      }\n    "])));
+  return props.color === 'success' && styled.css(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n      background-color: #fcfff5;\n      opacity: 1;\n      border-color: #a8c599;\n      h4 {\n        color: #1e561f;\n      }\n      p {\n        color: #1e561fcc;\n      }\n    "])));
 }, function (props) {
-  return props.color === 'error' && styled.css(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n      background-color: #fff6f6;\n      opacity: 1;\n      border-color: #973937;\n      h4 {\n        color: #973937;\n      }\n      p {\n        color: #973937;\n      }\n    "])));
+  return props.color === 'error' && styled.css(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n      background-color: #fff6f6;\n      opacity: 1;\n      border-color: #973937;\n      h4 {\n        color: #973937;\n      }\n      p {\n        color: #973937;\n      }\n    "])));
 }, function (props) {
-  return props.color === 'warning' && styled.css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n      background-color: #fffaf3;\n      opacity: 1;\n      border-color: #ccbea0;\n      h4 {\n        color: #7a4d05;\n      }\n      p {\n        color: #7a4d05cc;\n      }\n    "])));
+  return props.color === 'warning' && styled.css(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n      background-color: #fffaf3;\n      opacity: 1;\n      border-color: #ccbea0;\n      h4 {\n        color: #7a4d05;\n      }\n      p {\n        color: #7a4d05cc;\n      }\n    "])));
 });
-var IconContainer$2 = styled__default.div(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 14px 14px 0 0;\n  margin: 0;\n"])));
-var IconContent = styled__default.div(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 13px 0 21px 28px;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  h4 {\n    margin-bottom: 7px;\n    font-size: 18p;\n  }\n  p {\n    margin: 0;\n    font-size: 14px;\n    max-width: 380px;\n  }\n"])));
+var IconContainer$2 = styled__default.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 14px 14px 0 0;\n  margin: 0;\n"])));
+var IconContent = styled__default.div(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 13px 0 21px 28px;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  h4 {\n    margin-bottom: 7px;\n    font-size: 18p;\n  }\n  p {\n    margin: 0;\n    font-size: 14px;\n    max-width: 380px;\n  }\n"])));
 
 var Toast = function Toast(props) {
   return React__default.createElement(Container$p, Object.assign({}, props), React__default.createElement(IconContainer$2, null, React__default.createElement(Icon, {
@@ -19037,9 +19087,9 @@ 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$Z, _templateObject2$M, _templateObject3$H, _templateObject4$y, _templateObject5$v;
-var Image = styled__default.img(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
-var Container$q = styled__default.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n\n  &,\n  ", " {\n    width: ", ";\n\n    height: ", ";\n  }\n"])), Image, function (_ref) {
+var _templateObject$16, _templateObject2$R, _templateObject3$K, _templateObject4$x, _templateObject5$u;
+var Image = styled__default.img(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
+var Container$q = styled__default.div(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n\n  &,\n  ", " {\n    width: ", ";\n\n    height: ", ";\n  }\n"])), Image, function (_ref) {
   var width = _ref.width;
 
   switch (typeof width) {
@@ -19066,15 +19116,15 @@ var Container$q = styled__default.div(_templateObject2$M || (_templateObject2$M
       return 'auto';
   }
 });
-var Dimmer = styled__default.div(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: opacity 0.5s;\n  cursor: pointer;\n\n  :hover {\n    opacity: 1;\n  }\n"])), function (_ref3) {
+var Dimmer = styled__default.div(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: opacity 0.5s;\n  cursor: pointer;\n\n  :hover {\n    opacity: 1;\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.getColor('greyishBlue', 50);
 });
-var Button$6 = styled__default(Button$1)(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
+var Button$6 = styled__default(Button$1)(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.getColor('white', 50);
 });
-var ModalContent = styled__default.div(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n\n  img {\n    max-height: 100%;\n    max-width: 100%;\n  }\n"])));
+var ModalContent = styled__default.div(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n\n  img {\n    max-height: 100%;\n    max-width: 100%;\n  }\n"])));
 
 var _excluded$3 = ["src", "defaultClickOptions"];