npm - @mw-kit/mw-ui - Versions diffs - 1.7.54 → 1.7.56 - Mend

@mw-kit/mw-ui 1.7.54 → 1.7.56

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.modern.js CHANGED Viewed

@@ -197,9 +197,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';
 };
@@ -321,6 +332,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],
@@ -14974,17 +14990,11 @@ var Select = React__default.forwardRef(function (props, ref) {
 Select.displayName = 'Select';
 var Password = React__default.forwardRef(function (props, ref) {
-  var _useState = useState('none'),
+  var _useState = useState('hidden'),
       visibility = _useState[0],
       setVisibility = _useState[1];
   var icons = {
-    none: {
-      icon: 'edit',
-      onClick: function onClick() {
-        return setVisibility('hidden');
-      }
-    },
     visible: {
       icon: 'eye_off',
       onClick: function onClick() {
@@ -15003,15 +15013,6 @@ var Password = React__default.forwardRef(function (props, ref) {
     icon: icons[visibility].icon,
     width: '19px'
   };
-  var _onBlur = props.onBlur || function () {};
-  var onBlur = function onBlur(event) {
-    if (!event.target.value) setVisibility('none');
-    _onBlur(event);
-  };
   return React__default.createElement(Input$1, Object.assign({}, props, {
     type: visibility === 'visible' ? 'text' : 'PASSWORD',
     icon: {
@@ -15019,9 +15020,7 @@ var Password = React__default.forwardRef(function (props, ref) {
       position: 'right',
       onClick: icons[visibility].onClick
     },
-    onBlur: onBlur,
     placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-    htmlDisabled: visibility === 'none',
     ref: ref
   }));
 });
@@ -15628,8 +15627,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 = 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 = 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) {
@@ -15637,95 +15636,131 @@ var bullet = css(_templateObject$q || (_templateObject$q = _taggedTemplateLitera
   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.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.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.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.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 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 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.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' ? 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.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' ? 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;
+  }) : 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;
-  }) : 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.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.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.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.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 css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
-}, LabelContainer$4, function (_ref17) {
-  var required = _ref17.required;
-  return required && css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n          :after {\n            content: ' *';\n          }\n        "])));
+  return css(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+}, LabelContainer$4, function (_ref4) {
+  var required = _ref4.required;
+  return required && css(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n          :after {\n            content: ' *';\n          }\n        "])));
 }, NavBar);
-var InputContainer$1 = styled.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 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 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.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 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.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
-var LabelsContainer = styled.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.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
+var _templateObject$y, _templateObject2$r, _templateObject3$l;
+var LabelsContainer = styled.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 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 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 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.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.div(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n  height: 17px;\n"])));
-var Marker = styled.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 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 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.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;
@@ -15796,16 +15831,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,
@@ -15914,7 +15957,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,
@@ -15924,9 +15967,12 @@ var Range = React__default.forwardRef(function (props, ref) {
   })), React__default.createElement("div", null, React__default.createElement(Input$2, Object.assign({
     ref: ref
   }, inputProps)), React__default.createElement(NavBar, {
-    percent: value * 100 / max,
     position: position
-  }, React__default.createElement("div", null, React__default.createElement(Icon, {
+  }, React__default.createElement("div", {
+    style: {
+      left: getBarLeft(100, value * 100 / max)
+    }
+  }, React__default.createElement(Icon, {
     type: 'feather',
     icon: 'minus_circle',
     color: 'white',
@@ -15936,7 +15982,11 @@ var Range = React__default.forwardRef(function (props, ref) {
     icon: 'plus_circle',
     color: 'white',
     onClick: canIncrement ? increment : undefined
-  }))), React__default.createElement(SelectedArea, {
+  })), React__default.createElement("div", {
+    style: {
+      left: getIndicatorLeft(14, value * 100 / max)
+    }
+  })), React__default.createElement(SelectedArea, {
     percent: percent
   }, Array(spans).fill(1).map(function (_value, index) {
     return React__default.createElement("span", {
@@ -15946,31 +15996,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.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.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.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.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 css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
+    return css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
   }
-  return css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, function (_ref4) {
   var required = _ref4.required;
   if (!required) return;
-  return css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n      > ", " {\n        :after {\n          content: ' *';\n        }\n      }\n    "])), LabelContainer$5);
+  return 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 css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n        > span {\n          border-color: ", ";\n          :before {\n            background-color: ", ";\n          }\n        }\n      "])), function (_ref6) {
+    return css(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n        > span {\n          border-color: ", ";\n          :before {\n            background-color: ", ";\n          }\n        }\n      "])), function (_ref6) {
       var theme = _ref6.theme;
       return theme.colors.blue;
     }, function (_ref7) {
@@ -15979,7 +16029,7 @@ var Label$6 = styled.label(_templateObject2$n || (_templateObject2$n = _taggedTe
     });
   }
-  return css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n      > span {\n        border-color: ", ";\n        :before {\n          background-color: ", ";\n        }\n      }\n    "])), function (_ref8) {
+  return css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n      > span {\n        border-color: ", ";\n        :before {\n          background-color: ", ";\n        }\n      }\n    "])), function (_ref8) {
     var theme = _ref8.theme;
     return theme.colors.warningRed;
   }, function (_ref9) {
@@ -16189,24 +16239,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.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.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.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.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 css(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '--/--/-- (--:--) \xE0 --/--/-- (--:--)';\n        color: ", ";\n      }\n    "])), function (_ref3) {
+  return 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 css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
+  return css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
-var Container$6 = styled.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.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) {
@@ -16223,29 +16273,29 @@ var Container$6 = styled.div(_templateObject5$d || (_templateObject5$d = _tagged
       bgColor = _ref8[0],
       color = _ref8[1];
-  return 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 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 css(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", "\n        ", ";\n    "])), theme.spacings.s2, theme.spacings.s1, theme.spacings.s2, theme.spacings.s3);
+  return 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 css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 });
-var Button$4 = styled.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.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 css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
+  return css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
-var LabelText$1 = styled.label(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref12) {
+var LabelText$1 = styled.label(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref12) {
   var theme = _ref12.theme;
   return theme.spacings.s1;
 }, function (_ref13) {
   var required = _ref13.required;
   if (!required) return;
-  return css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 var Component$1 = React__default.forwardRef(function (props, ref) {
@@ -16477,8 +16527,8 @@ var DatePicker$1 = Object.assign(Component$1, {
   useDefaultDateIntervalState: useDefaultDateIntervalState
 });
-var _templateObject$t;
-var Input$3 = styled.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.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) {
@@ -16541,22 +16591,22 @@ var Input$4 = React__default.forwardRef(function (props, ref) {
 });
 Input$4.displayName = 'Input';
-var _templateObject$u, _templateObject2$p;
-var Label$7 = styled.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.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 css(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return 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.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.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) {
@@ -16589,8 +16639,8 @@ var Tag$1 = function Tag$1(props) {
   })));
 };
-var _templateObject$w, _templateObject2$q, _templateObject3$l;
-var Label$9 = styled.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.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) {
@@ -16602,9 +16652,9 @@ var Label$9 = styled.label(_templateObject$w || (_templateObject$w = _taggedTemp
 }, function (_ref4) {
   var disabled = _ref4.disabled;
   if (!disabled) return;
-  return css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 });
-var TagContainer = styled.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.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'];
@@ -16684,8 +16734,8 @@ var Tags = React__default.forwardRef(function (props, ref) {
 });
 Tags.displayName = 'Tags';
-var _templateObject$x;
-var RelativeContainer$6 = styled.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$G;
+var RelativeContainer$6 = styled.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;
@@ -17086,22 +17136,22 @@ var Input$5 = Object.assign(Component$2, {
   getPhoneDetails: Phone.getPhoneDetails
 });
-var _templateObject$y, _templateObject2$r, _templateObject3$m, _templateObject4$g;
-var Container$7 = styled(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(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.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.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.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n  ", "\n  color: ", ";\n"])), function (_ref5) {
+var Title = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  ", "\n  color: ", ";\n"])), function (_ref5) {
   var useTypography = _ref5.theme.useTypography;
   return useTypography('p', {
     fontWeight: 'bold'
@@ -17110,7 +17160,7 @@ var Title = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTempla
   var getColor = _ref6.theme.getColor;
   return getColor('greyishBlue', 50);
 });
-var Item = styled.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.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) {
@@ -17224,8 +17274,8 @@ var AppliedFiltersMenu = function AppliedFiltersMenu(props) {
   }))));
 };
-var _templateObject$z, _templateObject2$s, _templateObject3$n;
-var Container$8 = styled.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.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];
@@ -17236,10 +17286,10 @@ var Container$8 = styled.div(_templateObject$z || (_templateObject$z = _taggedTe
   var onClick = _ref3.onClick;
   if (!onClick) {
-    return css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n        opacity: 0.3;\n        pointer-events: none;\n      "])));
+    return css(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n        opacity: 0.3;\n        pointer-events: none;\n      "])));
   }
-  return css(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
+  return css(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 });
 var Button$5 = function Button(props) {
@@ -17291,25 +17341,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.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: #fff;\n  border: 1px solid #d4d4d5;\n  border-radius: 4px;\n  border-left-width: 5px;\n  padding: 14px;\n  ", "\n  ", "\n    ", "\n  ", "\n\n  ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n"])), function (props) {
-  return props.size === 'mini' && css(_templateObject2$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.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' && css(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 131px;\n    "])));
+  return props.size === 'small' && css(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 131px;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
+  return props.size === 'medium' && css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
 }, function (props) {
-  return props.size === 'big' && css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n      width: 414px;\n      height: 324px;\n    "])));
+  return props.size === 'big' && css(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n      width: 414px;\n      height: 324px;\n    "])));
 }, function (props) {
-  return props.borderType === 'info' && css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n      border-left-color: #4d6dbe;\n    "])));
+  return props.borderType === 'info' && css(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n      border-left-color: #4d6dbe;\n    "])));
 }, function (props) {
-  return props.borderType === 'success' && css(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n      border-left-color: #66bb6a;\n    "])));
+  return props.borderType === 'success' && css(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n      border-left-color: #66bb6a;\n    "])));
 }, function (props) {
-  return props.borderType === 'warning' && css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n      border-left-color: #fbcb01;\n    "])));
+  return props.borderType === 'warning' && css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n      border-left-color: #fbcb01;\n    "])));
 }, function (props) {
-  return props.borderType === 'danger' && css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
+  return props.borderType === 'danger' && css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
 }, function (props) {
-  return props.borderType === 'none' && css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
+  return props.borderType === 'none' && css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
 });
 var _excluded$1 = ["children"];
@@ -17321,8 +17371,8 @@ var Card = function Card(_ref) {
   return React__default.createElement(Container$9, Object.assign({}, rest), children);
 };
-var _templateObject$B;
-var Container$a = styled.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.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;
@@ -17385,8 +17435,8 @@ var Header$4 = function Header(props) {
   }));
 };
-var _templateObject$C;
-var EmptyMessage = styled.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.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;
 });
@@ -17734,7 +17784,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: {
@@ -17763,17 +17813,17 @@ var aligns = {
     }
   }
 };
-var Col = styled.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.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 css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n        flex-basis: 0;\n        flex-grow: 1;\n        max-width: 100%;\n        width: 100%;\n      "])));
+    return 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 css(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n        flex: 0 0 auto;\n        width: auto;\n        max-width: none;\n      "])));
+    return 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 css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n      flex: 0 0 ", "%;\n      max-width: ", "%;\n      width: 100%;\n    "])), w, w);
+  return 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);
@@ -17781,7 +17831,7 @@ var Col = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLi
 }, function (_ref3) {
   var spacingAround = _ref3.spacingAround;
   if (spacingAround) return;
-  return css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n      :first-child {\n        padding-left: 0;\n      }\n      :last-child {\n        padding-right: 0;\n      }\n    "])));
+  return 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;
@@ -17791,13 +17841,13 @@ var Col = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLi
     if (align.self.horizontal !== undefined) {
       var v = align.self.horizontal;
       var a = aligns.self.horizontal;
-      styles.push(css(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n          justify-self: ", ";\n        "])), a[v]));
+      styles.push(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(css(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n          align-self: ", ";\n        "])), _a[_v]));
+      styles.push(css(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n          align-self: ", ";\n        "])), _a[_v]));
     }
   }
@@ -17805,19 +17855,19 @@ var Col = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLi
     if (align.content.horizontal !== undefined) {
       var _v2 = align.content.horizontal;
       var _a2 = aligns.content.horizontal;
-      styles.push(css(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n          justify-content: ", ";\n        "])), _a2[_v2]));
+      styles.push(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(css(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n          align-items: ", ";\n        "])), _a3[_v3]));
+      styles.push(css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n          align-items: ", ";\n        "])), _a3[_v3]));
     }
   }
   if (align.text !== undefined) {
     var _v4 = align.text;
-    styles.push(css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n        text-align: ", ";\n      "])), _v4));
+    styles.push(css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n        text-align: ", ";\n      "])), _v4));
   }
   return styles;
@@ -17825,30 +17875,30 @@ var Col = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLi
   var bordered = _ref5.bordered,
       lightestGrey = _ref5.theme.colors.lightestGrey;
   if (!bordered) return;
-  return css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
+  return css(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
 }, function (_ref6) {
   var fontColor = _ref6.fontColor,
       theme = _ref6.theme;
   if (fontColor === undefined) return;
   var c = Array.isArray(fontColor) ? theme.getColor.apply(theme, fontColor) : theme.colors[fontColor];
-  return css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), c);
+  return css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), c);
 }, function (_ref7) {
   var backgroundColor = _ref7.backgroundColor,
       theme = _ref7.theme;
   if (backgroundColor === undefined) return;
   var c = Array.isArray(backgroundColor) ? theme.getColor.apply(theme, backgroundColor) : theme.colors[backgroundColor];
-  return css(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), c);
+  return 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 css(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
+  return css(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
 }, function (_ref9) {
   var pointer = _ref9.pointer;
   if (!pointer) return;
-  return css(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
+  return css(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 });
 var Col$1 = function Col$1(props) {
@@ -17868,17 +17918,17 @@ var useContext$3 = function useContext() {
   return React__default.useContext(Provider$3);
 };
-var _templateObject$E, _templateObject2$v, _templateObject3$q;
-var Grid = styled.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.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 css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), padding);
+  return 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 css(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n      border: 1px solid ", ";\n    "])), lightestGrey);
+  return css(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n      border: 1px solid ", ";\n    "])), lightestGrey);
 });
 var Grid$1 = function Grid$1(props) {
@@ -17893,7 +17943,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',
@@ -17906,23 +17956,23 @@ var verticalAligns = {
   top: 'start',
   bottom: 'end'
 };
-var Row = styled.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.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 css(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), padding);
+  return css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), padding);
 }, function (_ref2) {
   var spacingAround = _ref2.spacingAround;
   if (spacingAround) return;
-  return css(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n      :first-child {\n        padding-top: 0;\n      }\n      :last-child {\n        padding-bottom: 0;\n      }\n    "])));
+  return 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 css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n      justify-content: ", ";\n    "])), horizontalAligns[horizontalAlign]);
+  return css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n      justify-content: ", ";\n    "])), horizontalAligns[horizontalAlign]);
 }, function (_ref4) {
   var verticalAlign = _ref4.verticalAlign;
   if (verticalAlign === undefined) return;
-  return css(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n      align-items: ", ";\n    "])), verticalAligns[verticalAlign]);
+  return css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n      align-items: ", ";\n    "])), verticalAligns[verticalAlign]);
 }, function (_ref5) {
   var striped = _ref5.striped,
       backgroundColor = _ref5.backgroundColor,
@@ -17930,11 +17980,11 @@ var Row = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLi
   if (backgroundColor !== undefined) {
     var c = Array.isArray(backgroundColor) ? theme.getColor.apply(theme, backgroundColor) : theme.colors[backgroundColor];
-    return css(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), c);
+    return css(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), c);
   }
   if (striped === undefined) {
-    return css(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), theme.colors.white);
+    return css(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), theme.colors.white);
   }
   var config = striped === true ? {
@@ -17950,7 +18000,7 @@ var Row = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLi
     even: theme.colors.white,
     odd: theme.colors.white
   });
-  return 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 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;
@@ -17961,14 +18011,14 @@ var Row = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLi
   var borderless = _ref7.borderless,
       lightestGrey = _ref7.theme.colors.lightestGrey;
   if (borderless) return;
-  return css(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-bottom: 1px solid ", ";\n      }\n    "])), lightestGrey);
+  return 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 css(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
+  return css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
 });
 var Row$1 = function Row$1(props) {
@@ -18021,40 +18071,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.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.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.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"])));
-var Header$5 = styled.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.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"])));
+var Header$5 = styled.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 css(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", ";\n    padding: ", ";\n\n    ", "\n  "])), colors.lightestGrey, spacings.s4, useTypography('h1'));
+  return 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.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.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 css(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n    border-top: 1px solid ", ";\n    padding: ", ";\n  "])), colors.lightestGrey, spacings.s3);
+  return css(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n    border-top: 1px solid ", ";\n    padding: ", ";\n  "])), colors.lightestGrey, spacings.s3);
 });
-var FooterMessage = styled.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.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.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.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.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (_ref6) {
+var Container$b = styled.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 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 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"];
@@ -18130,8 +18180,8 @@ var Modal = function Modal(props) {
   }))))));
 };
-var _templateObject$H;
-var Content$1 = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$Q;
+var Content$1 = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -18168,8 +18218,8 @@ var ConfirmDelete = function ConfirmDelete(props) {
   }, React__default.createElement(Content$1, null, children || content));
 };
-var _templateObject$I;
-var Content$2 = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$R;
+var Content$2 = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -18209,8 +18259,8 @@ var ConfirmSuccess = function ConfirmSuccess(props) {
   }, React__default.createElement(Content$2, null, children || content));
 };
-var _templateObject$J;
-var Content$3 = styled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$S;
+var Content$3 = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -18251,24 +18301,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.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
-var Header$6 = styled.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var HeaderImage = styled.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
-var HeaderContent = styled.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.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
-var HeaderLine = styled.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.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
+var Header$6 = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var HeaderImage = styled.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
+var HeaderContent = styled.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.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
+var HeaderLine = styled.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' && css(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var MainLine = styled(HeaderLine)(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
+var MainLine = styled(HeaderLine)(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
 var Template1 = function Template1(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -18303,28 +18353,28 @@ var Template1 = function Template1(props) {
   })));
 };
-var _templateObject$L, _templateObject2$z, _templateObject3$u, _templateObject4$m, _templateObject5$j;
-var HeaderLine$1 = styled.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.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' && css(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && 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.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
-var Template2Container = styled(Container$d)(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  background: #fff;\n  border: 2px solid #ebebeb;\n"])));
-var Header$7 = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var HeaderImage$1 = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
-var HeaderContent$1 = styled.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.div(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
-var MainLine$1 = styled(HeaderLine$1)(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
-var HeaderLine$2 = styled(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.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var Template2Container = styled(Container$d)(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  background: #fff;\n  border: 2px solid #ebebeb;\n"])));
+var Header$7 = styled.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var HeaderImage$1 = styled.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
+var HeaderContent$1 = styled.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.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
+var MainLine$1 = styled(HeaderLine$1)(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
+var HeaderLine$2 = styled(HeaderLine$1)(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose([""])));
 var Template2 = function Template2(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -18347,10 +18397,10 @@ var Template2 = function Template2(props) {
   })));
 };
-var _templateObject$N, _templateObject2$B, _templateObject3$w;
-var Container$e = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
-var Template3Container = styled(Container$e)(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose([""])));
-var Template3Line = styled(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.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var Template3Container = styled(Container$e)(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose([""])));
+var Template3Line = styled(HeaderLine$1)(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  background-color: #dadada;\n  height: ", ";\n"])), function (props) {
   return props.height;
 });
@@ -18379,21 +18429,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.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
-var HeaderLine$3 = styled.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.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var HeaderLine$3 = styled.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' && css(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var Template4Container = styled(Container$f)(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n"])));
-var CustomLine = styled(HeaderLine$3)(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
+var Template4Container = styled(Container$f)(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n"])));
+var CustomLine = styled(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;
@@ -18446,28 +18496,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.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.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.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.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.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.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' && css(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$1 = styled(HeaderLine$4)(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
+var CustomLine$1 = styled(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.div(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  margin-left: 35px;\n"])));
+var MainContent$2 = styled.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);
@@ -18494,22 +18544,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.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.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.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-top: 1px solid #b1b1b3;\n  height: 50px;\n"])));
-var HeaderLine$5 = styled.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.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.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.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-top: 1px solid #b1b1b3;\n  height: 50px;\n"])));
+var HeaderLine$5 = styled.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' && css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$2 = styled(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(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;
@@ -18537,29 +18587,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.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
-var Header$9 = styled.div(_templateObject2$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.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.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.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.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' && css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$3 = styled(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(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.div(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n  margin: 10px 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-evenly;\n"])));
-var Circle$1 = styled.div(_templateObject10$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.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.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);
@@ -18571,28 +18621,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.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.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.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.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.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.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' && css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$4 = styled(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(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.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.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);
@@ -18614,29 +18664,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.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
-var Header$b = styled.div(_templateObject2$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.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.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.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.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' && css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$5 = styled(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(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.div(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  padding: 14px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
-var Circle$2 = styled.div(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
+var Main$4 = styled.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.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);
@@ -18653,30 +18703,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.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
-var Header$c = styled.div(_templateObject2$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.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.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.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.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' && css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$6 = styled(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(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(CustomLine$6)(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
-var Main$5 = styled.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.div(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
+var GraphLine = styled(CustomLine$6)(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
+var Main$5 = styled.div(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  padding: 0 7px 72px 7px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  justify-content: center;\n"])));
+var Circle$3 = styled.div(_templateObject11$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);
@@ -18797,32 +18847,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.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.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.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.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' && css(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref) {
+  return props.type === 'default' && 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' && css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref2) {
+  return props.type === 'info' && 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' && css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref3) {
+  return props.type === 'danger' && 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' && css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref4) {
+  return props.type === 'success' && 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' && css(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref5) {
+  return props.type === 'warning' && css(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref5) {
     var theme = _ref5.theme;
     return theme.colors.warningYellow;
   });
@@ -18867,21 +18917,21 @@ function SvgClose(props) {
   })));
 }
-var _templateObject$W, _templateObject2$K, _templateObject3$F, _templateObject4$w, _templateObject5$t, _templateObject6$r;
-var Container$n = styled.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.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 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 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.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.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 css(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n    height: ", ";\n    box-shadow: 0 0 10px 0 ", ";\n  "])), internal ? '41px' : '49px', theme.getColor('black', 10));
+  return 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.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.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 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 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) {
@@ -19000,8 +19050,8 @@ var Tabs$1 = function Tabs$1(props) {
   }, [])));
 };
-var _templateObject$X;
-var Container$o = styled.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.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;
@@ -19011,18 +19061,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.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.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' && 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' && 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' && 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' && 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' && 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' && 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.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.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.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.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, {
@@ -19034,9 +19084,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.img(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
-var Container$q = styled.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.img(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
+var Container$q = styled.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) {
@@ -19063,15 +19113,15 @@ var Container$q = styled.div(_templateObject2$M || (_templateObject2$M = _tagged
       return 'auto';
   }
 });
-var Dimmer = styled.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.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(Button$1)(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
+var Button$6 = styled(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.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.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"];