@mw-kit/mw-ui 1.6.14 → 1.7.1

package/dist/index.js

@@ -12716,6 +12716,11 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
       paddingless = _props.paddingless;
 
   var mask = getMask(props.mask);
+  React.useEffect(function () {
+    if (!isString(props.value)) return;
+    var masked = mask(props.value);
+    if (masked !== props.value) setValue(masked);
+  }, [props.value]);
   var intInvalid = invalid ? 1 : 0;
   var intRequired = required ? 1 : 0;
   var intDisabled = disabled ? 1 : 0;
@@ -12765,10 +12770,7 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
     } : function () {};
 
     inputProps.onKeyDown = function (event) {
-      var target = event.target;
-      var v = target.value;
       onKeyDown(event);
-      if (v !== target.value) setValue(target.value);
 
       if (event.key === 'Enter') {
         _onPressEnter(event);
@@ -12848,8 +12850,7 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
     ref: ref
   })), icon && React__default.createElement(IconContainer, {
     type: iconSubmit ? 'submit' : 'button',
-    onClick: iconOnClick,
-    disabled: props.disabled
+    onClick: props.disabled ? undefined : iconOnClick
   }, React__default.createElement(Icon, Object.assign({}, icon))));
 });
 Input$1.displayName = 'Input';
@@ -13024,6 +13025,8 @@ var Time = React__default.forwardRef(function (props, ref) {
 
   var _onKeyDown = props.onKeyDown || function () {};
 
+  var setValue = props.setValue || function () {};
+
   var onKeyDown = function onKeyDown(event) {
     var target = event.target;
     var todayDate = new Date();
@@ -13049,13 +13052,13 @@ var Time = React__default.forwardRef(function (props, ref) {
         h = date.getHours();
         m = date.getMinutes();
         s = date.getSeconds();
-        target.value = [h.toString().padStart(2, '0'), m.toString().padStart(2, '0'), s.toString().padStart(2, '0')].join(':');
+        setValue([h.toString().padStart(2, '0'), m.toString().padStart(2, '0'), s.toString().padStart(2, '0')].join(':'));
       } else {
         date.setMinutes(m + 1);
         h = date.getHours();
         m = date.getMinutes();
         s = date.getSeconds();
-        target.value = [h.toString().padStart(2, '0'), m.toString().padStart(2, '0')].join(':');
+        setValue([h.toString().padStart(2, '0'), m.toString().padStart(2, '0')].join(':'));
       }
     } else if (event.key === 'ArrowDown') {
       var _date = new Date();
@@ -13072,14 +13075,14 @@ var Time = React__default.forwardRef(function (props, ref) {
         h = _date.getHours();
         m = _date.getMinutes();
         s = _date.getSeconds();
-        target.value = [h.toString().padStart(2, '0'), m.toString().padStart(2, '0'), s.toString().padStart(2, '0')].join(':');
+        setValue([h.toString().padStart(2, '0'), m.toString().padStart(2, '0'), s.toString().padStart(2, '0')].join(':'));
       } else {
         _date.setMinutes(m - 1);
 
         h = _date.getHours();
         m = _date.getMinutes();
         s = _date.getSeconds();
-        target.value = [h.toString().padStart(2, '0'), m.toString().padStart(2, '0')].join(':');
+        setValue([h.toString().padStart(2, '0'), m.toString().padStart(2, '0')].join(':'));
       }
     }
 
@@ -13530,7 +13533,7 @@ var Date$1 = React__default.forwardRef(function (props, ref) {
       date.setDate(date.getDate() + 1);
 
       if (!max || date <= max) {
-        target.value = dateToIsoString(date);
+        setValue(dateToIsoString(date));
       }
     } else if (event.key === 'ArrowDown') {
       var _date = new JSDate(y + "-" + m + "-" + d + " 00:00:00");
@@ -13538,7 +13541,7 @@ var Date$1 = React__default.forwardRef(function (props, ref) {
       _date.setDate(_date.getDate() - 1);
 
       if (!min || _date >= min) {
-        target.value = dateToIsoString(_date);
+        setValue(dateToIsoString(_date));
       }
     }
 
@@ -14368,10 +14371,6 @@ var Component = React__default.forwardRef(function (props, ref) {
       open = _useState3[0],
       setOpen = _useState3[1];
 
-  React.useEffect(function () {
-    var details = getPhoneDetails(value || '');
-    setCountry(details ? details.country : countries.br);
-  }, [value]);
   var options = Object.keys(countries).map(function (iso) {
     return {
       label: {
@@ -14394,8 +14393,20 @@ var Component = React__default.forwardRef(function (props, ref) {
   };
 
   React.useEffect(function () {
-    var details = getPhoneDetails(value || '');
-    setCountry(details ? details.country : countries.br);
+    if (!value) {
+      setInputValue('');
+      return;
+    }
+
+    var details = getPhoneDetails(value);
+
+    if (details) {
+      setCountry(details.country);
+      setInputValue(details.masked);
+    } else {
+      setCountry(countries.br);
+      setInputValue(value);
+    }
   }, [value]);
   React.useEffect(function () {
     setInputValue(function (prev) {
@@ -15083,6 +15094,7 @@ var CalendarInterval = function CalendarInterval(props) {
 var validate = function validate(_ref, min, max) {
   var start = _ref[0],
       end = _ref[1];
+  if (start === null || end === null) return true;
   if (min && start < min) return false;
   if (max && end > max) return false;
   return true;
@@ -15200,9 +15212,18 @@ var intervalTypes = {
   },
   custom: {
     label: function label(prev) {
-      var start = dateToIsoString(prev[0], false, false);
-      var end = dateToIsoString(prev[1], false, false);
-      return start + " - " + end;
+      var start = dateToIsoString(prev[0], true, false).substring(0, 14).split(' ');
+      var end = dateToIsoString(prev[1], true, false).substring(0, 14).split(' ');
+
+      if (start[1] === '00:00' && end[1] === '23:59') {
+        start.pop();
+        end.pop();
+      } else {
+        start[1] = "(" + start[1] + ")";
+        end[1] = "(" + end[1] + ")";
+      }
+
+      return start.join(' ') + " \xE0 " + end.join(' ');
     },
     initial: function initial(base) {
       if (!base) base = new Date();
@@ -15213,6 +15234,7 @@ var intervalTypes = {
 var identify = function identify(value) {
   var start = value[0],
       end = value[1];
+  if (start === null || end === null) return 'custom';
   var isoStart = dateToIsoString(start);
   var isoEnd = dateToIsoString(end);
 
@@ -15250,52 +15272,56 @@ var identify = function identify(value) {
 };
 var parse = function parse(value) {
   return value.map(function (v) {
-    return new Date(v);
+    return v ? new Date(v) : null;
   });
 };
 
-var _templateObject$q, _templateObject2$l, _templateObject3$j, _templateObject4$g, _templateObject5$f, _templateObject6$d, _templateObject7$b, _templateObject8$7, _templateObject9$7, _templateObject10$5;
-var RelativeContainer$5 = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  position: relative;\n  user-select: none;\n  min-width: 220px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: 4px;\n\n  > :nth-child(1) input {\n    color: transparent;\n  }\n"])), function (_ref) {
-  var theme = _ref.theme,
-      invalid = _ref.invalid;
-  return invalid ? theme.colors.warningRed : theme.colors.lightGrey;
-});
-var LabelContainer$3 = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: ", ";\n"])), function (_ref2) {
-  var theme = _ref2.theme;
+var _templateObject$q, _templateObject2$l, _templateObject3$j, _templateObject4$g, _templateObject5$f, _templateObject6$d, _templateObject7$b, _templateObject8$7, _templateObject9$7, _templateObject10$5, _templateObject11$4;
+var RelativeContainer$5 = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  position: relative;\n  user-select: none;\n  min-width: 220px;\n\n  > :nth-child(1) input {\n    color: transparent;\n  }\n"])));
+var LabelContainer$3 = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n  flex: 1;\n  text-align: center;\n\n  ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
   return theme.useTypography('p');
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.spacings.s3;
+}, function (_ref2) {
+  var onClick = _ref2.onClick;
+  if (!onClick) return;
+  return styled.css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
-var Container$a = styled__default.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 4px;\n  white-space: nowrap;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref4) {
+var Container$a = styled__default.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\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  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.spacings.s1;
+}, function (_ref4) {
   var theme = _ref4.theme,
-      iconWidth = _ref4.iconWidth,
-      paddingless = _ref4.paddingless;
+      invalid = _ref4.invalid;
+  return invalid ? theme.colors.warningRed : theme.colors.lightGrey;
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      iconWidth = _ref5.iconWidth,
+      paddingless = _ref5.paddingless;
 
   if (paddingless) {
-    return styled.css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n        width: calc(100% - 2px - ", ");\n        height: 19px;\n      "])), iconWidth);
+    return styled.css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n        width: calc(100% - 2px - ", ");\n      "])), iconWidth);
   }
 
-  return styled.css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n      width: calc(100% - 2px - ", " - ", ");\n      height: 33px;\n      padding: ", " 0 ", " ", ";\n    "])), iconWidth, theme.spacings.s3, theme.spacings.s2, theme.spacings.s2, theme.spacings.s3);
-}, function (_ref5) {
-  var invalid = _ref5.invalid,
-      theme = _ref5.theme;
-  if (!invalid) return;
-  return styled.css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), theme.colors.warningRed);
+  return styled.css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n      width: calc(100% - 2px - ", " - ", ");\n      padding: ", " 0 ", " ", ";\n    "])), iconWidth, theme.spacings.s3, theme.spacings.s2, theme.spacings.s2, theme.spacings.s3);
 }, function (_ref6) {
   var invalid = _ref6.invalid,
       theme = _ref6.theme;
   if (!invalid) return;
   return styled.css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), theme.colors.warningRed);
 }, function (_ref7) {
-  var disabled = _ref7.disabled;
+  var invalid = _ref7.invalid,
+      theme = _ref7.theme;
+  if (!invalid) return;
+  return styled.css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), theme.colors.warningRed);
+}, function (_ref8) {
+  var disabled = _ref8.disabled;
   if (!disabled) return;
-  return styled.css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return styled.css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 });
-var Button$4 = styled__default.button(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref8) {
-  var onClick = _ref8.onClick;
+var Button$4 = styled__default.button(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref9) {
+  var onClick = _ref9.onClick;
   if (!onClick) return;
-  return styled.css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
+  return styled.css(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
 
 var Component$1 = React__default.forwardRef(function (props, ref) {
@@ -15306,7 +15332,7 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
       open = _useState[0],
       setOpen = _useState[1];
 
-  var _useState2 = React.useState('day'),
+  var _useState2 = React.useState(props.only || 'day'),
       intervalType = _useState2[0],
       setIntervalType = _useState2[1];
 
@@ -15328,10 +15354,7 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
       throw Error('Min prop must be less than Max');
     }
 
-    if (props.value.some(function (v) {
-      return v === '';
-    })) {
-      setValue(intervalTypes.day.initial(props.min));
+    if (props.only) {
       return;
     }
 
@@ -15340,7 +15363,6 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
     if (value.some(function (v) {
       return !isDateInstance(v);
     }) || !validate(value, props.min, props.max)) {
-      setValue(intervalTypes.day.initial(props.min));
       return;
     }
 
@@ -15350,6 +15372,14 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
   var inputProps = filterObject(props, ['min', 'max']);
 
   var getArrowProps = function getArrowProps(key) {
+    if (value.some(function (v) {
+      return !isDateInstance(v);
+    })) {
+      return {
+        disabled: true
+      };
+    }
+
     var func = config[key];
 
     if (func === undefined) {
@@ -15373,9 +15403,21 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
     };
   };
 
-  var incrementProps = getArrowProps('increment');
-  var decrementProps = getArrowProps('decrement');
   var invalid = props.invalid || !validate(value, min, max);
+
+  var onClick = function () {
+    if (inputProps.disabled || !['custom', undefined].includes(props.only)) {
+      return undefined;
+    }
+
+    var toOpen = props.only === 'custom' ? 'calendar' : 'menu';
+    return function () {
+      return setOpen(function (prev) {
+        return prev === null ? toOpen : null;
+      });
+    };
+  }();
+
   return React__default.createElement(RelativeContainer$5, {
     ref: useOnClickOut(function () {
       return setOpen(null);
@@ -15394,11 +15436,7 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
         width: '24px'
       },
       position: 'right',
-      onClick: function onClick() {
-        return setOpen(function (prev) {
-          return prev === null ? 'menu' : null;
-        });
-      }
+      onClick: onClick
     },
     borderless: true,
     htmlDisabled: true
@@ -15407,27 +15445,35 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
     invalid: props.invalid ? 1 : 0,
     disabled: props.disabled ? 1 : 0,
     paddingless: props.paddingless ? 1 : 0
-  }, React__default.createElement(Button$4, Object.assign({
-    type: 'button'
-  }, decrementProps, {
-    disabled: disabled || decrementProps.disabled
-  }), React__default.createElement(Icon, {
-    type: 'feather',
-    icon: 'chevron_left',
-    color: props.invalid ? 'warningRed' : 'grey',
-    strokeWidth: '3px'
-  })), React__default.createElement("div", null, value.some(function (v) {
-    return !isDateInstance(v);
-  }) ? '' : config.label(value)), React__default.createElement(Button$4, Object.assign({
-    type: 'button'
-  }, incrementProps, {
-    disabled: disabled || incrementProps.disabled
-  }), React__default.createElement(Icon, {
-    type: 'feather',
-    icon: 'chevron_right',
-    color: props.invalid ? 'warningRed' : 'grey',
-    strokeWidth: '3px'
-  }))), React__default.createElement(Menu, {
+  }, function () {
+    var label = React__default.createElement(LabelContainer$3, {
+      onClick: onClick
+    }, value.some(function (v) {
+      return !isDateInstance(v);
+    }) ? '--/--/-- (--:--) à --/--/-- (--:--)' : config.label(value));
+    if (intervalType === 'custom') return label;
+    var incrementProps = getArrowProps('increment');
+    var decrementProps = getArrowProps('decrement');
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Button$4, Object.assign({
+      type: 'button'
+    }, decrementProps, {
+      disabled: disabled || decrementProps.disabled
+    }), React__default.createElement(Icon, {
+      type: 'feather',
+      icon: 'chevron_left',
+      color: props.invalid ? 'warningRed' : 'grey',
+      strokeWidth: '3px'
+    })), label, React__default.createElement(Button$4, Object.assign({
+      type: 'button'
+    }, incrementProps, {
+      disabled: disabled || incrementProps.disabled
+    }), React__default.createElement(Icon, {
+      type: 'feather',
+      icon: 'chevron_right',
+      color: props.invalid ? 'warningRed' : 'grey',
+      strokeWidth: '3px'
+    })));
+  }()), React__default.createElement(Menu, {
     open: open === 'menu',
     close: function close() {
       return setOpen(null);
@@ -15493,6 +15539,502 @@ var DatePicker$1 = Object.assign(Component$1, {
   useDefaultDateIntervalState: useDefaultDateIntervalState
 });
 
+var _templateObject$r;
+var Input$3 = styled__default.input(_templateObject$r || (_templateObject$r = _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) {
+  var theme = _ref2.theme,
+      invalid = _ref2.invalid;
+  return invalid ? theme.colors.warningRed : theme.colors.darkBlue;
+}, function (_ref3) {
+  var theme = _ref3.theme,
+      invalid = _ref3.invalid;
+  return invalid ? theme.colors.warningRed : theme.colors.darkGrey;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.useTypography('p');
+}, function (_ref5) {
+  var minWidth = _ref5.minWidth;
+  return minWidth || '20%';
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.spacings.s1;
+});
+
+var Input$4 = React__default.forwardRef(function (props, ref) {
+  var _props$value = props.value,
+      value = _props$value[0],
+      setValue = _props$value[1];
+
+  var _onKeyDown = props.onKeyDown || function () {};
+
+  var onPressEnter = props.onPressEnter;
+
+  var onKeyDown = function onKeyDown(e) {
+    _onKeyDown(e);
+
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      onPressEnter(e);
+    }
+  };
+
+  var mask = getMask(props.mask);
+
+  var _onChange = props.onChange || function () {};
+
+  var onChange = function onChange(e) {
+    e.target.value = mask(e.target.value);
+
+    _onChange(e);
+
+    setValue(e.target.value);
+  };
+
+  var inputProps = filterObject(props, ['value', 'onPressEnter']);
+  return React__default.createElement(Input$3, Object.assign({
+    ref: ref
+  }, inputProps, {
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    value: value
+  }));
+});
+Input$4.displayName = 'Input';
+
+var _templateObject$s, _templateObject2$m;
+var Label$6 = styled__default.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.spacings.s1;
+}, function (_ref2) {
+  var required = _ref2.required;
+  if (!required) return;
+  return styled.css(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+});
+
+var Label$7 = function Label(props) {
+  return props.children ? React__default.createElement(Label$6, Object.assign({}, props)) : null;
+};
+
+var _templateObject$t;
+var Tag = styled__default.div(_templateObject$t || (_templateObject$t = _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) {
+  var theme = _ref2.theme;
+  return theme.colors.white;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors.darkBlue;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.spacings.s1;
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      invalid = _ref5.invalid;
+  return theme.colors[invalid ? 'warningRed' : 'lightGrey'];
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.spacings.s1;
+});
+
+var Tag$1 = function Tag$1(props) {
+  return React__default.createElement(Tag, Object.assign({}, props), props.children, React__default.createElement("div", {
+    onClick: props.onClose
+  }, React__default.createElement(Icon, {
+    type: 'feather',
+    icon: 'x',
+    width: '10px',
+    color: props.invalid ? 'warningRed' : undefined,
+    strokeWidth: '3px'
+  })));
+};
+
+var _templateObject$u, _templateObject2$n, _templateObject3$k;
+var Label$8 = styled__default.label(_templateObject$u || (_templateObject$u = _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) {
+  var theme = _ref2.theme;
+  return theme.colors.greyishBlue;
+}, function (_ref3) {
+  var width = _ref3.width;
+  return width || '100%';
+}, function (_ref4) {
+  var disabled = _ref4.disabled;
+  if (!disabled) return;
+  return styled.css(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+});
+var TagContainer = styled__default.div(_templateObject3$k || (_templateObject3$k = _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'];
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.spacings.s1;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.spacings.s1;
+});
+
+var Tags = React__default.forwardRef(function (props, ref) {
+  var value = props.value,
+      setValue = props.setValue;
+
+  var _ref = props.input && props.input.value ? props.input.value : React.useState(''),
+      inputValue = _ref[0],
+      setInputValue = _ref[1];
+
+  var validate = props.validate || function () {
+    return true;
+  };
+
+  var onBeforeAdd = props.onBeforeAdd || function (v) {
+    return v;
+  };
+
+  var validateUnique = props.unique ? function (v) {
+    return value.some(function (e) {
+      return strCmp(e, v);
+    }) ? '' : v;
+  } : function (v) {
+    return v;
+  };
+
+  var add = function add(v) {
+    if (v === '') return;
+    v = validateUnique(v);
+    if (v === '') return;
+    v = onBeforeAdd(v);
+    if (v === '') return;
+    setValue([].concat(value, [v]));
+    setInputValue('');
+  };
+
+  var remove = function remove(index) {
+    var prev = [].concat(value);
+    prev.splice(index, 1);
+    setValue([].concat(prev));
+  };
+
+  return React__default.createElement(Label$8, {
+    disabled: props.disabled,
+    width: props.width
+  }, React__default.createElement(Label$7, {
+    required: props.required
+  }, props.label), React__default.createElement(TagContainer, {
+    invalid: props.invalid
+  }, value.map(function (v, index) {
+    return React__default.createElement(Tag$1, {
+      key: index,
+      onClose: function onClose() {
+        return remove(index);
+      },
+      invalid: !validate(v)
+    }, v);
+  }), React__default.createElement(Input$4, Object.assign({
+    ref: ref,
+    disabled: props.disabled || props.loading,
+    invalid: props.invalid
+  }, props.input, {
+    value: [inputValue, setInputValue],
+    onPressEnter: function onPressEnter(e) {
+      return add(e.target.value);
+    }
+  }))));
+});
+Tags.displayName = 'Tags';
+
+var _templateObject$v;
+var RelativeContainer$6 = styled__default.div(_templateObject$v || (_templateObject$v = _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;
+};
+
+var _mask$1 = function mask(v, seconds) {
+  v = v.replace(/\D+/g, '');
+
+  while (v.length > 0 && parseInt(v[0]) > 3) {
+    v = v.substring(1);
+  }
+
+  if (v.length > 1) {
+    if (v[0] === '3') {
+      while (v.length > 1 && parseInt(v[1]) > 1) {
+        v = v[0] + v.substring(2);
+      }
+    }
+  }
+
+  if (v.length > 2) {
+    while (v.length > 2 && parseInt(v[2]) > 1) {
+      v = v.substring(0, 2) + v.substring(3);
+    }
+  }
+
+  if (v.length > 3) {
+    if (v[2] === '1') {
+      while (v.length > 3 && parseInt(v[3]) > 2) {
+        v = v.substring(0, 3) + v.substring(4);
+      }
+    }
+  }
+
+  if (v.length > 8) {
+    while (v.length > 8 && parseInt(v[8]) > 2) {
+      v = v.substring(0, 8) + v.substring(9);
+    }
+  }
+
+  if (v.length > 9) {
+    if (v[8] === '2') {
+      while (v.length > 9 && parseInt(v[9]) > 3) {
+        v = v.substring(0, 9) + v.substring(10);
+      }
+    }
+  }
+
+  if (v.length > 10) {
+    while (v.length > 10 && parseInt(v[10]) > 5) {
+      v = v.substring(0, 10) + v.substring(11);
+    }
+  }
+
+  if (v.length > 12) {
+    while (v.length > 12 && parseInt(v[12]) > 5) {
+      v = v.substring(0, 12) + v.substring(13);
+    }
+  }
+
+  var date = [v.substring(0, 2), v.substring(2, 4), v.substring(4, 8), v.substring(8, 10), v.substring(10, 12), v.substring(12, 14)];
+
+  if (date[1] === '02') {
+    var d = parseInt(date[0]);
+
+    if (date[2].length < 4 || isLeapYear$1(parseInt(date[2]))) {
+      if (d > 29) {
+        date[0] = '29';
+      }
+    } else if (d > 28) {
+      date[0] = '28';
+    }
+  } else if (['04', '06', '09', '11'].includes(date[1]) && date[0] === '31') {
+    date[0] = '30';
+  }
+
+  v = date.join('');
+  v = v.replace(/^((\d{0,2}))((\d{0,2}))((\d{0,4}))((\d{0,2}))((\d{0,2}))((\d{0,2}))$/g, '$1/$3/$5 $7:$9:$11');
+
+  while (v.length > 0 && !v[v.length - 1].match(/^\d$/g)) {
+    v = v.substring(0, v.length - 1);
+  }
+
+  if (!seconds) {
+    v = v.substring(0, 16);
+  }
+
+  return v;
+};
+
+var getValueThroughDate = function getValueThroughDate(date, seconds) {
+  var newValue = dateToIsoString(date, true);
+  return !seconds ? newValue.substring(0, newValue.length - 3) : newValue;
+};
+
+var steps = {
+  year: {
+    increment: function increment(value) {
+      value.setFullYear(value.getFullYear() + 1);
+      return value;
+    },
+    decrement: function decrement(value) {
+      value.setFullYear(value.getFullYear() - 1);
+      return value;
+    }
+  },
+  month: {
+    increment: function increment(value) {
+      value.setMonth(value.getMonth() + 1);
+      return value;
+    },
+    decrement: function decrement(value) {
+      value.setMonth(value.getMonth() - 1);
+      return value;
+    }
+  },
+  day: {
+    increment: function increment(value) {
+      value.setDate(value.getDate() + 1);
+      return value;
+    },
+    decrement: function decrement(value) {
+      value.setDate(value.getDate() - 1);
+      return value;
+    }
+  },
+  hour: {
+    increment: function increment(value) {
+      value.setHours(value.getHours() + 1);
+      return value;
+    },
+    decrement: function decrement(value) {
+      value.setHours(value.getHours() - 1);
+      return value;
+    }
+  },
+  minute: {
+    increment: function increment(value) {
+      value.setMinutes(value.getMinutes() + 1);
+      return value;
+    },
+    decrement: function decrement(value) {
+      value.setMinutes(value.getMinutes() - 1);
+      return value;
+    }
+  },
+  second: {
+    increment: function increment(value) {
+      value.setSeconds(value.getSeconds() + 1);
+      return value;
+    },
+    decrement: function decrement(value) {
+      value.setSeconds(value.getSeconds() - 1);
+      return value;
+    }
+  }
+};
+var DateTime = React__default.forwardRef(function (props, ref) {
+  var picker = props.picker,
+      value = props.value,
+      min = props.min,
+      max = props.max;
+  var step = steps[props.step || 'day'];
+
+  var setValue = props.setValue || function () {};
+
+  var _useState = React.useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var _onKeyDown = props.onKeyDown || function () {};
+
+  var onKeyDown = function onKeyDown(event) {
+    var target = event.target;
+    var todayDate = new Date();
+    var cur = {
+      day: {
+        start: 0,
+        end: 2,
+        value: todayDate.getDate()
+      },
+      month: {
+        start: 2,
+        end: 4,
+        value: todayDate.getMonth() + 1
+      },
+      year: {
+        start: 4,
+        end: 8,
+        value: todayDate.getFullYear()
+      },
+      hours: {
+        start: 8,
+        end: 10,
+        value: todayDate.getHours()
+      },
+      minutes: {
+        start: 10,
+        end: 12,
+        value: todayDate.getMinutes()
+      },
+      seconds: {
+        start: 12,
+        end: 14,
+        value: todayDate.getSeconds()
+      }
+    };
+    var value = target.value.replace(/\D+/g, '');
+    var v = keys(cur).reduce(function (prev, k) {
+      var _extends2;
+
+      var _cur$k = cur[k],
+          start = _cur$k.start,
+          end = _cur$k.end,
+          current = _cur$k.value;
+      var len = end - start;
+      var tmp = value.substring(start, end);
+      return _extends({}, prev, (_extends2 = {}, _extends2[k] = tmp.length === 0 ? current : parseInt(tmp.padEnd(len, '0')), _extends2));
+    }, {});
+    var date = new Date(v.year + "-" + v.month + "-" + v.day + " " + v.hours + ":" + v.minutes + ":" + v.seconds);
+
+    if (event.key === 'ArrowUp') {
+      date = step.increment(date);
+
+      if (!max || date <= max) {
+        setValue(getValueThroughDate(date, props.seconds));
+      }
+    } else if (event.key === 'ArrowDown') {
+      date = step.decrement(date);
+
+      if (!min || date >= min) {
+        setValue(getValueThroughDate(date, props.seconds));
+      }
+    }
+
+    _onKeyDown(event);
+  };
+
+  var placeholder = props.placeholder === undefined ? 'dd/mm/aaaa hh:mm:ss' : props.placeholder;
+  var icon = picker ? {
+    icon: {
+      type: 'feather',
+      icon: 'calendar'
+    },
+    position: 'right',
+    onClick: function onClick() {
+      return setOpen(function (prev) {
+        return !prev;
+      });
+    }
+  } : undefined;
+  var inputProps = filterObject(props, ['picker', 'min', 'max']);
+  return React__default.createElement(RelativeContainer$6, {
+    ref: useOnClickOut(function () {
+      return setOpen(false);
+    })
+  }, React__default.createElement(Input$1, Object.assign({}, inputProps, {
+    type: 'text',
+    placeholder: placeholder,
+    mask: function mask(v) {
+      return _mask$1(v, props.seconds);
+    },
+    onKeyDown: onKeyDown,
+    icon: icon,
+    ref: ref
+  })), React__default.createElement(Calendar, {
+    open: open,
+    initalValue: value ? isoStringToDate(value) : undefined,
+    onSubmit: {
+      onClick: function onClick(date) {
+        if (!date) return;
+        setValue(getValueThroughDate(date, props.seconds));
+        setOpen(false);
+      }
+    },
+    min: min,
+    max: max,
+    references: {
+      bottom: '35px'
+    },
+    time: {
+      seconds: props.seconds
+    }
+  }));
+});
+DateTime.displayName = 'DateTime';
+
 var Component$2 = React__default.forwardRef(function (props, ref) {
   switch (props.type) {
     case 'date':
@@ -15575,6 +16117,20 @@ var Component$2 = React__default.forwardRef(function (props, ref) {
         }));
       }
 
+    case 'tags':
+      {
+        return React__default.createElement(Tags, Object.assign({}, props, {
+          ref: ref
+        }));
+      }
+
+    case 'datetime':
+      {
+        return React__default.createElement(DateTime, Object.assign({}, props, {
+          ref: ref
+        }));
+      }
+
     default:
       {
         return React__default.createElement(Input$1, Object.assign({}, props, {
@@ -15584,7 +16140,7 @@ var Component$2 = React__default.forwardRef(function (props, ref) {
   }
 });
 Component$2.displayName = 'Input';
-var Input$3 = Object.assign(Component$2, {
+var Input$5 = Object.assign(Component$2, {
   useDefaultDateIntervalState: DatePicker$1.useDefaultDateIntervalState,
   getPhoneDetails: Phone.getPhoneDetails
 });
@@ -15621,13 +16177,13 @@ var widths = {
   default: '642.5px'
 };
 
-var _templateObject$r, _templateObject2$m, _templateObject3$k, _templateObject4$h, _templateObject5$g, _templateObject6$e, _templateObject7$c, _templateObject8$8, _templateObject9$8, _templateObject10$6;
-var Background = styled__default.div(_templateObject$r || (_templateObject$r = _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$w, _templateObject2$o, _templateObject3$l, _templateObject4$h, _templateObject5$g, _templateObject6$e, _templateObject7$c, _templateObject8$8, _templateObject9$8, _templateObject10$6;
+var Background = styled__default.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  backdrop-filter: blur(3px);\n  background-color: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.getColor('black', 25);
 });
-var Content = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"])));
-var Header$3 = styled__default.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  ", "\n"])), function (_ref2) {
+var Content = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"])));
+var Header$3 = styled__default.div(_templateObject3$l || (_templateObject3$l = _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,
@@ -15730,8 +16286,8 @@ var Modal = function Modal(props) {
   }))))));
 };
 
-var _templateObject$s;
-var Content$1 = styled__default.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$x;
+var Content$1 = styled__default.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -15768,8 +16324,8 @@ var ConfirmDelete = function ConfirmDelete(props) {
   }, React__default.createElement(Content$1, null, children || content));
 };
 
-var _templateObject$t;
-var Content$2 = styled__default.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$y;
+var Content$2 = styled__default.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -15809,8 +16365,8 @@ var ConfirmSuccess = function ConfirmSuccess(props) {
   }, React__default.createElement(Content$2, null, children || content));
 };
 
-var _templateObject$u;
-var Content$3 = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$z;
+var Content$3 = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -15851,11 +16407,11 @@ var Modal$1 = Object.assign(Modal, {
   Audit: Audit
 });
 
-var _templateObject$v, _templateObject2$n, _templateObject3$l, _templateObject4$i, _templateObject5$h, _templateObject6$f, _templateObject7$d, _templateObject8$9, _templateObject9$9, _templateObject10$7;
-var Container$c = styled__default.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: #fff;\n  border: 1px solid #d4d4d5;\n  border-radius: 4px;\n  border-left-width: 5px;\n  padding: 14px;\n  ", "\n  ", "\n    ", "\n  ", "\n\n  ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n"])), function (props) {
-  return props.size === 'mini' && styled.css(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
+var _templateObject$A, _templateObject2$p, _templateObject3$m, _templateObject4$i, _templateObject5$h, _templateObject6$f, _templateObject7$d, _templateObject8$9, _templateObject9$9, _templateObject10$7;
+var Container$c = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: #fff;\n  border: 1px solid #d4d4d5;\n  border-radius: 4px;\n  border-left-width: 5px;\n  padding: 14px;\n  ", "\n  ", "\n    ", "\n  ", "\n\n  ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n"])), function (props) {
+  return props.size === 'mini' && styled.css(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 131px;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 131px;\n    "])));
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
 }, function (props) {
@@ -15881,13 +16437,13 @@ var Card = function Card(_ref) {
   return React__default.createElement(Container$c, Object.assign({}, rest), children);
 };
 
-var _templateObject$w, _templateObject2$o, _templateObject3$m, _templateObject4$j, _templateObject5$i, _templateObject6$g;
-var Container$d = styled__default.div(_templateObject$w || (_templateObject$w = _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$B, _templateObject2$q, _templateObject3$n, _templateObject4$j, _templateObject5$i, _templateObject6$g;
+var Container$d = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  border-radius: 4px;\n  width: ", ";\n  height: 88px;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", "\n\n  ", "\n\n    ", "\n\n  svg {\n    cursor: pointer;\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 13px;\n    height: 13px;\n  }\n"])), function (props) {
   return props.size === 'large' ? '837px' : '460px';
 }, function (props) {
-  return props.color === 'success' && styled.css(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n      background-color: #fcfff5;\n      opacity: 1;\n      border-color: #a8c599;\n      h4 {\n        color: #1e561f;\n      }\n      p {\n        color: #1e561fcc;\n      }\n    "])));
+  return props.color === 'success' && styled.css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n      background-color: #fcfff5;\n      opacity: 1;\n      border-color: #a8c599;\n      h4 {\n        color: #1e561f;\n      }\n      p {\n        color: #1e561fcc;\n      }\n    "])));
 }, function (props) {
-  return props.color === 'error' && styled.css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n      background-color: #fff6f6;\n      opacity: 1;\n      border-color: #973937;\n      h4 {\n        color: #973937;\n      }\n      p {\n        color: #973937;\n      }\n    "])));
+  return props.color === 'error' && styled.css(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n      background-color: #fff6f6;\n      opacity: 1;\n      border-color: #973937;\n      h4 {\n        color: #973937;\n      }\n      p {\n        color: #973937;\n      }\n    "])));
 }, function (props) {
   return props.color === 'warning' && styled.css(_templateObject4$j || (_templateObject4$j = _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    "])));
 });
@@ -15904,10 +16460,10 @@ 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$x, _templateObject2$p, _templateObject3$n, _templateObject4$k, _templateObject5$j, _templateObject6$h, _templateObject7$e, _templateObject8$a, _templateObject9$a, _templateObject10$8, _templateObject11$4;
-var Container$e = styled__default.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
-var Header$4 = styled__default.div(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var HeaderImage = styled__default.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
+var _templateObject$C, _templateObject2$r, _templateObject3$o, _templateObject4$k, _templateObject5$j, _templateObject6$h, _templateObject7$e, _templateObject8$a, _templateObject9$a, _templateObject10$8, _templateObject11$5;
+var Container$e = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
+var Header$4 = styled__default.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var HeaderImage = styled__default.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
 var HeaderContent = styled__default.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
 var MainContent = styled__default.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
 var HeaderLine = styled__default.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
@@ -15921,7 +16477,7 @@ var HeaderLine = styled__default.div(_templateObject6$h || (_templateObject6$h =
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var MainLine = styled__default(HeaderLine)(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
+var MainLine = styled__default(HeaderLine)(_templateObject11$5 || (_templateObject11$5 = _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);
@@ -15956,23 +16512,23 @@ var Template1 = function Template1(props) {
   })));
 };
 
-var _templateObject$y, _templateObject2$q, _templateObject3$o, _templateObject4$l, _templateObject5$k;
-var HeaderLine$1 = styled__default.div(_templateObject$y || (_templateObject$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$D, _templateObject2$s, _templateObject3$p, _templateObject4$l, _templateObject5$k;
+var HeaderLine$1 = styled__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && styled.css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
 
-var _templateObject$z, _templateObject2$r, _templateObject3$p, _templateObject4$m, _templateObject5$l, _templateObject6$i, _templateObject7$f, _templateObject8$b;
-var Container$f = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
-var Template2Container = styled__default(Container$f)(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  background: #fff;\n  border: 2px solid #ebebeb;\n"])));
-var Header$5 = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var _templateObject$E, _templateObject2$t, _templateObject3$q, _templateObject4$m, _templateObject5$l, _templateObject6$i, _templateObject7$f, _templateObject8$b;
+var Container$f = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var Template2Container = styled__default(Container$f)(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n  background: #fff;\n  border: 2px solid #ebebeb;\n"])));
+var Header$5 = styled__default.div(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var HeaderImage$1 = styled__default.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
 var HeaderContent$1 = styled__default.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
 var MainContent$1 = styled__default.div(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
@@ -16000,10 +16556,10 @@ var Template2 = function Template2(props) {
   })));
 };
 
-var _templateObject$A, _templateObject2$s, _templateObject3$q;
-var Container$g = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
-var Template3Container = styled__default(Container$g)(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose([""])));
-var Template3Line = styled__default(HeaderLine$1)(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n  background-color: #dadada;\n  height: ", ";\n"])), function (props) {
+var _templateObject$F, _templateObject2$u, _templateObject3$r;
+var Container$g = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var Template3Container = styled__default(Container$g)(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose([""])));
+var Template3Line = styled__default(HeaderLine$1)(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  background-color: #dadada;\n  height: ", ";\n"])), function (props) {
   return props.height;
 });
 
@@ -16032,12 +16588,12 @@ var Template3 = function Template3(props) {
   }));
 };
 
-var _templateObject$B, _templateObject2$t, _templateObject3$r, _templateObject4$n, _templateObject5$m, _templateObject6$j, _templateObject7$g, _templateObject8$c;
-var Container$h = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
-var HeaderLine$3 = styled__default.div(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
+var _templateObject$G, _templateObject2$v, _templateObject3$s, _templateObject4$n, _templateObject5$m, _templateObject6$j, _templateObject7$g, _templateObject8$c;
+var Container$h = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var HeaderLine$3 = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && styled.css(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && styled.css(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
@@ -16099,10 +16655,10 @@ var Template4 = function Template4(props) {
   }));
 };
 
-var _templateObject$C, _templateObject2$u, _templateObject3$s, _templateObject4$o, _templateObject5$n, _templateObject6$k, _templateObject7$h, _templateObject8$d, _templateObject9$b;
-var Container$i = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 746px;\n  height: 169px;\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n  padding: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
-var Circle = styled__default.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n  width: 141px;\n  height: 141px;\n  background-color: #dddedf;\n  border-radius: 50%;\n"])));
-var HeaderLine$4 = styled__default.div(_templateObject3$s || (_templateObject3$s = _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$H, _templateObject2$w, _templateObject3$t, _templateObject4$o, _templateObject5$n, _templateObject6$k, _templateObject7$h, _templateObject8$d, _templateObject9$b;
+var Container$i = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 746px;\n  height: 169px;\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n  padding: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+var Circle = styled__default.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n  width: 141px;\n  height: 141px;\n  background-color: #dddedf;\n  border-radius: 50%;\n"])));
+var HeaderLine$4 = styled__default.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && styled.css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
@@ -16147,10 +16703,10 @@ var Template5 = function Template5(props) {
   })));
 };
 
-var _templateObject$D, _templateObject2$v, _templateObject3$t, _templateObject4$p, _templateObject5$o, _templateObject6$l, _templateObject7$i, _templateObject8$e, _templateObject9$c;
-var Container$j = styled__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  width: 395px;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #f5f5f5;\n"])));
-var Header$6 = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n"])));
-var Footer$3 = styled__default.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-top: 1px solid #b1b1b3;\n  height: 50px;\n"])));
+var _templateObject$I, _templateObject2$x, _templateObject3$u, _templateObject4$p, _templateObject5$o, _templateObject6$l, _templateObject7$i, _templateObject8$e, _templateObject9$c;
+var Container$j = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  width: 395px;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #f5f5f5;\n"])));
+var Header$6 = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n"])));
+var Footer$3 = styled__default.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-top: 1px solid #b1b1b3;\n  height: 50px;\n"])));
 var HeaderLine$5 = styled__default.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
@@ -16190,10 +16746,10 @@ var Template6 = function Template6(props) {
   })));
 };
 
-var _templateObject$E, _templateObject2$w, _templateObject3$u, _templateObject4$q, _templateObject5$p, _templateObject6$m, _templateObject7$j, _templateObject8$f, _templateObject9$d, _templateObject10$9;
-var Container$k = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
-var Header$7 = styled__default.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
-var HeaderLine$6 = styled__default.div(_templateObject3$u || (_templateObject3$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) {
+var _templateObject$J, _templateObject2$y, _templateObject3$v, _templateObject4$q, _templateObject5$p, _templateObject6$m, _templateObject7$j, _templateObject8$f, _templateObject9$d, _templateObject10$9;
+var Container$k = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
+var Header$7 = styled__default.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
+var HeaderLine$6 = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && styled.css(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
@@ -16224,10 +16780,10 @@ var Template7 = function Template7(props) {
   })), React__default.createElement(Main, 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$F, _templateObject2$x, _templateObject3$v, _templateObject4$r, _templateObject5$q, _templateObject6$n, _templateObject7$k, _templateObject8$g, _templateObject9$e;
-var Container$l = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
-var Header$8 = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
-var HeaderLine$7 = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
+var _templateObject$K, _templateObject2$z, _templateObject3$w, _templateObject4$r, _templateObject5$q, _templateObject6$n, _templateObject7$k, _templateObject8$g, _templateObject9$e;
+var Container$l = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
+var Header$8 = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
+var HeaderLine$7 = styled__default.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && styled.css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
@@ -16267,10 +16823,10 @@ var Template8 = function Template8(props) {
   })));
 };
 
-var _templateObject$G, _templateObject2$y, _templateObject3$w, _templateObject4$s, _templateObject5$r, _templateObject6$o, _templateObject7$l, _templateObject8$h, _templateObject9$f, _templateObject10$a;
-var Container$m = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
-var Header$9 = styled__default.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
-var HeaderLine$8 = styled__default.div(_templateObject3$w || (_templateObject3$w = _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$L, _templateObject2$A, _templateObject3$x, _templateObject4$s, _templateObject5$r, _templateObject6$o, _templateObject7$l, _templateObject8$h, _templateObject9$f, _templateObject10$a;
+var Container$m = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
+var Header$9 = styled__default.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
+var HeaderLine$8 = styled__default.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && styled.css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
@@ -16306,10 +16862,10 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$2, null, React__default.createElement(Circle$2, null)));
 };
 
-var _templateObject$H, _templateObject2$z, _templateObject3$x, _templateObject4$t, _templateObject5$s, _templateObject6$p, _templateObject7$m, _templateObject8$i, _templateObject9$g, _templateObject10$b, _templateObject11$5;
-var Container$n = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
-var Header$a = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
-var HeaderLine$9 = styled__default.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
+var _templateObject$M, _templateObject2$B, _templateObject3$y, _templateObject4$t, _templateObject5$s, _templateObject6$p, _templateObject7$m, _templateObject8$i, _templateObject9$g, _templateObject10$b, _templateObject11$6;
+var Container$n = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
+var Header$a = styled__default.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
+var HeaderLine$9 = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && styled.css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
@@ -16329,7 +16885,7 @@ var CustomLine$6 = styled__default(HeaderLine$9)(_templateObject8$i || (_templat
 });
 var GraphLine = styled__default(CustomLine$6)(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
 var Main$3 = styled__default.div(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  padding: 0 7px 72px 7px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  justify-content: center;\n"])));
-var Circle$3 = styled__default.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
+var Circle$3 = styled__default.div(_templateObject11$6 || (_templateObject11$6 = _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);
@@ -16450,9 +17006,9 @@ var Placeholder = function Placeholder(props) {
   }
 };
 
-var _templateObject$I, _templateObject2$A, _templateObject3$y, _templateObject4$u, _templateObject5$t;
-var Image = styled__default.img(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
-var Container$o = styled__default.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n\n  &,\n  ", " {\n    width: ", ";\n\n    height: ", ";\n  }\n"])), Image, function (_ref) {
+var _templateObject$N, _templateObject2$C, _templateObject3$z, _templateObject4$u, _templateObject5$t;
+var Image = styled__default.img(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
+var Container$o = styled__default.div(_templateObject2$C || (_templateObject2$C = _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) {
@@ -16479,7 +17035,7 @@ var Container$o = styled__default.div(_templateObject2$A || (_templateObject2$A
       return 'auto';
   }
 });
-var Dimmer = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: opacity 0.5s;\n  cursor: pointer;\n\n  :hover {\n    opacity: 1;\n  }\n"])), function (_ref3) {
+var Dimmer = styled__default.div(_templateObject3$z || (_templateObject3$z = _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);
 });
@@ -16523,8 +17079,52 @@ var Zoom = function Zoom(props) {
   }))));
 };
 
-var _templateObject$J;
-var Container$p = styled__default.div(_templateObject$J || (_templateObject$J = _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$O, _templateObject2$D, _templateObject3$A;
+var Container$p = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n  align-items: center;\n  color: ", ";\n\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.spacings.s4;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.darkestGrey;
+}, function (_ref3) {
+  var onClick = _ref3.onClick;
+
+  if (!onClick) {
+    return styled.css(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n        opacity: 0.3;\n        pointer-events: none;\n      "])));
+  }
+
+  return styled.css(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
+});
+
+var Button$6 = function Button(props) {
+  var getContent = props.getContent;
+
+  var _useState = React.useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var close = function close() {
+    return setOpen(false);
+  };
+
+  var onClick = props.disabled ? undefined : function () {
+    return setOpen(function (prev) {
+      return !prev;
+    });
+  };
+  return React__default.createElement("div", {
+    ref: useOnClickOut(close)
+  }, React__default.createElement(Container$p, Object.assign({}, props, {
+    onClick: onClick
+  }), props.children, React__default.createElement(Icon, {
+    type: 'semantic',
+    icon: open ? 'caret up' : 'caret down',
+    width: '12px'
+  })), getContent(open, close));
+};
+
+var _templateObject$P;
+var Container$q = styled__default.div(_templateObject$P || (_templateObject$P = _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;
@@ -16570,7 +17170,7 @@ var Header$b = function Header(props) {
     setSearched('');
   };
 
-  return React__default.createElement(Container$p, null, React__default.createElement("div", null, isString(title) ? title : title.element), withSearch && React__default.createElement(Input$3, {
+  return React__default.createElement(Container$q, null, React__default.createElement("div", null, isString(title) ? title : title.element), withSearch && React__default.createElement(Input$5, {
     type: 'search',
     placeholder: 'Pesquisa',
     setValue: setSearch,
@@ -16587,8 +17187,8 @@ var Header$b = function Header(props) {
   }));
 };
 
-var _templateObject$K;
-var EmptyMessage = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  padding: 0 20px;\n  color: ", ";\n  text-align: center;\n  margin: auto;\n  width: 100%;\n"])), function (_ref) {
+var _templateObject$Q;
+var EmptyMessage = styled__default.div(_templateObject$Q || (_templateObject$Q = _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;
 });
@@ -16844,7 +17444,7 @@ var Submenu = function Submenu(props) {
   });
 };
 
-var Filters = function Filters(props) {
+var FiltersMenu = function FiltersMenu(props) {
   var open = props.open,
       close = props.close;
 
@@ -16900,45 +17500,66 @@ var Filters = function Filters(props) {
   }));
 };
 
-var _templateObject$L, _templateObject2$B, _templateObject3$z, _templateObject4$v;
-var Container$q = styled__default(AbsoluteContainer)(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\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 s3 = _ref.theme.spacings.s3;
-  return s3 + " 0 " + s3 + " " + s3;
+var Filters = Object.assign(function (props) {
+  var items = props.items,
+      setAppliedFilters = props.setAppliedFilters;
+  var buttonProps = filterObject(props, ['items', 'setAppliedFilters']);
+  return React__default.createElement(Button$6, Object.assign({}, buttonProps, {
+    getContent: function getContent(open, close) {
+      return React__default.createElement(FiltersMenu, Object.assign({}, {
+        open: open,
+        close: close,
+        setAppliedFilters: setAppliedFilters,
+        items: items
+      }));
+    }
+  }), "Filtros");
+}, {
+  Menu: FiltersMenu
 });
-var Header$c = styled__default.div(_templateObject2$B || (_templateObject2$B = _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 (_ref2) {
+
+var _templateObject$R, _templateObject2$E, _templateObject3$B, _templateObject4$v;
+var Container$r = styled__default(AbsoluteContainer)(_templateObject$R || (_templateObject$R = _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;
-}, function (_ref3) {
+  return s3 + " 0 " + s3 + " " + s3;
+});
+var Header$c = styled__default.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  padding: ", ";\n  > div {\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (_ref3) {
   var s3 = _ref3.theme.spacings.s3;
+  return s3;
+}, function (_ref4) {
+  var s3 = _ref4.theme.spacings.s3;
   return "0 " + s3 + " " + s3 + " 0";
 });
-var Title = styled__default.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  ", "\n  color: ", ";\n"])), function (_ref4) {
-  var useTypography = _ref4.theme.useTypography;
+var Title = styled__default.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n  ", "\n  color: ", ";\n"])), function (_ref5) {
+  var useTypography = _ref5.theme.useTypography;
   return useTypography('p', {
     fontWeight: 'bold'
   });
-}, function (_ref5) {
-  var getColor = _ref5.theme.getColor;
+}, function (_ref6) {
+  var getColor = _ref6.theme.getColor;
   return getColor('greyishBlue', 50);
 });
-var Item = styled__default.div(_templateObject4$v || (_templateObject4$v = _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 (_ref6) {
-  var s1 = _ref6.theme.spacings.s1;
+var Item = styled__default.div(_templateObject4$v || (_templateObject4$v = _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 (_ref7) {
-  var getColor = _ref7.theme.getColor;
-  return getColor('greyishBlue', 25);
 }, function (_ref8) {
-  var useTypography = _ref8.theme.useTypography;
-  return useTypography('p');
+  var getColor = _ref8.theme.getColor;
+  return getColor('greyishBlue', 25);
 }, function (_ref9) {
-  var getColor = _ref9.theme.getColor;
-  return getColor('greyishBlue', 50);
+  var useTypography = _ref9.theme.useTypography;
+  return useTypography('p');
 }, function (_ref10) {
-  var useTypography = _ref10.theme.useTypography;
+  var getColor = _ref10.theme.getColor;
+  return getColor('greyishBlue', 50);
+}, function (_ref11) {
+  var useTypography = _ref11.theme.useTypography;
   return useTypography('p');
 });
 
-var AppliedFilters = function AppliedFilters(props) {
+var AppliedFiltersMenu = function AppliedFiltersMenu(props) {
   var open = props.open,
       close = props.close,
       _props$appliedFilters = props.appliedFilters,
@@ -16980,7 +17601,7 @@ var AppliedFilters = function AppliedFilters(props) {
     });
   };
 
-  return React__default.createElement(Container$q, {
+  return React__default.createElement(Container$r, {
     open: open,
     width: '275px',
     height: '261px',
@@ -16993,7 +17614,7 @@ var AppliedFilters = function AppliedFilters(props) {
     type: 'button',
     onClick: onClear,
     appearance: 'link'
-  }, "Limpar Todos")), React__default.createElement(Input$3, {
+  }, "Limpar Todos")), React__default.createElement(Input$5, {
     type: 'search',
     placeholder: 'Pesquisar',
     setValue: setSearch,
@@ -17036,6 +17657,22 @@ var AppliedFilters = function AppliedFilters(props) {
   }))));
 };
 
+var AppliedFilters = Object.assign(function (props) {
+  var appliedFilters = props.appliedFilters;
+  var buttonProps = filterObject(props, ['appliedFilters']);
+  return React__default.createElement(Button$6, Object.assign({}, buttonProps, {
+    getContent: function getContent(open, close) {
+      return React__default.createElement(AppliedFiltersMenu, Object.assign({}, {
+        open: open,
+        close: close,
+        appliedFilters: appliedFilters
+      }));
+    }
+  }), "Filtros Aplicados (", appliedFilters[0].length, ")");
+}, {
+  Menu: AppliedFiltersMenu
+});
+
 var Provider$2 = React__default.createContext({
   cols: {}
 });
@@ -17043,7 +17680,7 @@ var useContext$2 = function useContext() {
   return React__default.useContext(Provider$2);
 };
 
-var _templateObject$M, _templateObject2$C, _templateObject3$A, _templateObject4$w, _templateObject5$u, _templateObject6$q, _templateObject7$n, _templateObject8$j, _templateObject9$h, _templateObject10$c, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2;
+var _templateObject$S, _templateObject2$F, _templateObject3$C, _templateObject4$w, _templateObject5$u, _templateObject6$q, _templateObject7$n, _templateObject8$j, _templateObject9$h, _templateObject10$c, _templateObject11$7, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2;
 var aligns = {
   self: {
     horizontal: {
@@ -17072,13 +17709,13 @@ var aligns = {
     }
   }
 };
-var Col = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n\n  ", "\n\n  padding: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var Col = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n\n  ", "\n\n  padding: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var width = _ref.width;
 
   if (width === undefined) {
-    return styled.css(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n        flex-basis: 0;\n        flex-grow: 1;\n        max-width: 100%;\n        width: 100%;\n      "])));
+    return styled.css(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n        flex-basis: 0;\n        flex-grow: 1;\n        max-width: 100%;\n        width: 100%;\n      "])));
   } else if (width === 'auto') {
-    return styled.css(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n        flex: 0 0 auto;\n        width: auto;\n        max-width: none;\n      "])));
+    return styled.css(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n        flex: 0 0 auto;\n        width: auto;\n        max-width: none;\n      "])));
   }
 
   var w = parseFloat(width) * 100 / 12;
@@ -17134,7 +17771,7 @@ var Col = styled__default.div(_templateObject$M || (_templateObject$M = _taggedT
   var bordered = _ref5.bordered,
       lightestGrey = _ref5.theme.colors.lightestGrey;
   if (!bordered) return;
-  return styled.css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
+  return styled.css(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
 }, function (_ref6) {
   var fontColor = _ref6.fontColor,
       theme = _ref6.theme;
@@ -17177,17 +17814,17 @@ var useContext$3 = function useContext() {
   return React__default.useContext(Provider$3);
 };
 
-var _templateObject$N, _templateObject2$D, _templateObject3$B;
-var Grid = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var _templateObject$T, _templateObject2$G, _templateObject3$D;
+var Grid = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var spacing = _ref.spacing;
   if (spacing === undefined) return;
   var padding = getSpacings(spacing);
-  return styled.css(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), padding);
+  return styled.css(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), padding);
 }, function (_ref2) {
   var borderless = _ref2.borderless,
       lightestGrey = _ref2.theme.colors.lightestGrey;
   if (borderless) return;
-  return styled.css(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n      border: 1px solid ", ";\n    "])), lightestGrey);
+  return styled.css(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n      border: 1px solid ", ";\n    "])), lightestGrey);
 });
 
 var Grid$1 = function Grid$1(props) {
@@ -17202,7 +17839,7 @@ var Grid$1 = function Grid$1(props) {
   }, React__default.createElement(Grid, Object.assign({}, gridProps)));
 };
 
-var _templateObject$O, _templateObject2$E, _templateObject3$C, _templateObject4$x, _templateObject5$v, _templateObject6$r, _templateObject7$o, _templateObject8$k, _templateObject9$i, _templateObject10$d;
+var _templateObject$U, _templateObject2$H, _templateObject3$E, _templateObject4$x, _templateObject5$v, _templateObject6$r, _templateObject7$o, _templateObject8$k, _templateObject9$i, _templateObject10$d;
 var horizontalAligns = {
   around: 'space-around',
   between: 'space-between',
@@ -17215,15 +17852,15 @@ var verticalAligns = {
   top: 'start',
   bottom: 'end'
 };
-var Row = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  color: ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var Row = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  color: ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var spacing = _ref.spacing;
   if (spacing === undefined) return;
   var padding = getSpacings(spacing);
-  return styled.css(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), padding);
+  return styled.css(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), padding);
 }, function (_ref2) {
   var spacingAround = _ref2.spacingAround;
   if (spacingAround) return;
-  return styled.css(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n      :first-child {\n        padding-top: 0;\n      }\n      :last-child {\n        padding-bottom: 0;\n      }\n    "])));
+  return styled.css(_templateObject3$E || (_templateObject3$E = _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;
@@ -17307,14 +17944,14 @@ var theme$1 = {
   button: theme
 };
 
-var _templateObject$P;
-var FontStyles = styled.createGlobalStyle(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n"])));
+var _templateObject$V;
+var FontStyles = styled.createGlobalStyle(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n"])));
 
 var Globals = function Globals() {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(FontStyles, null));
 };
 
-var _templateObject$Q;
+var _templateObject$W;
 
 var getColor$1 = function getColor(color, opacity) {
   if (opacity === void 0) {
@@ -17333,7 +17970,7 @@ var useTypography = function useTypography(typography, options) {
       fontFamily = _typographies$typogra.fontFamily,
       fontWeight = _typographies$typogra.fontWeight,
       fontSize = _typographies$typogra.fontSize;
-  return styled.css(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n  "])), fontFamily, options.fontWeight || fontWeight, fontSize);
+  return styled.css(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n  "])), fontFamily, options.fontWeight || fontWeight, fontSize);
 };
 
 var isDarkColor = function isDarkColor(color, ifDark, ifLight) {
@@ -17398,7 +18035,7 @@ exports.MwFilters = Filters;
 exports.MwGrid = Grid$2;
 exports.MwIcon = Icon;
 exports.MwIndicator = Indicator;
-exports.MwInput = Input$3;
+exports.MwInput = Input$5;
 exports.MwLoader = Loader;
 exports.MwMenu = Menu;
 exports.MwModal = Modal$1;