npm - @mw-kit/mw-ui - Versions diffs - 1.7.55 → 1.7.57 - Mend

@mw-kit/mw-ui 1.7.55 → 1.7.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/dist/index.js CHANGED Viewed

@@ -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],
@@ -15614,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) {
@@ -15623,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;
@@ -15782,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,
@@ -15900,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,
@@ -15910,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 - min) * 100 / (max - min))
+    }
+  }, React__default.createElement(Icon, {
     type: 'feather',
     icon: 'minus_circle',
     color: 'white',
@@ -15922,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 - min) * 100 / (max - min))
+    }
+  })), React__default.createElement(SelectedArea, {
     percent: percent
   }, Array(spans).fill(1).map(function (_value, index) {
     return React__default.createElement("span", {
@@ -15932,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) {
@@ -15965,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) {
@@ -16175,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) {
@@ -16209,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) {
@@ -16463,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) {
@@ -16527,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) {
@@ -16575,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) {
@@ -16588,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'];
@@ -16670,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;
@@ -17072,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'
@@ -17096,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) {
@@ -17210,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];
@@ -17222,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) {
@@ -17277,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"];
@@ -17307,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;
@@ -17371,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;
 });
@@ -17720,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: {
@@ -17749,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);
@@ -17767,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;
@@ -17777,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]));
     }
   }
@@ -17791,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;
@@ -17811,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) {
@@ -17854,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) {
@@ -17879,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',
@@ -17892,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,
@@ -17916,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 ? {
@@ -17936,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;
@@ -17947,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) {
@@ -18007,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"];
@@ -18116,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;
 });
@@ -18154,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;
 });
@@ -18195,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;
 });
@@ -18237,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);
@@ -18289,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);
@@ -18333,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;
 });
@@ -18365,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;
@@ -18432,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);
@@ -18480,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;
@@ -18523,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);
@@ -18557,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);
@@ -18600,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);
@@ -18639,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);
@@ -18783,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;
   });
@@ -18853,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) {
@@ -18986,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;
@@ -18997,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, {
@@ -19020,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) {
@@ -19049,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"];