npm - @mw-kit/mw-ui - Versions diffs - 1.2.4 → 1.3.1 - Mend

@mw-kit/mw-ui 1.2.4 → 1.3.1

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 (20) hide show

package/dist/index.js CHANGED Viewed

@@ -158,6 +158,9 @@ var typographies = {
   }
 };
+var stripAccents = function stripAccents(value) {
+  return value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+};
 var isKeyOf = function isKeyOf(object, key) {
   return Object.prototype.hasOwnProperty.call(object, key);
 };
@@ -171,6 +174,35 @@ var isObject = function isObject(value) {
 var isString = function isString(value) {
   return typeof value === 'string';
 };
+var strCmp = function strCmp(x, y, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  options = _extends({
+    ignoreAccents: true,
+    ignoreCase: true,
+    trim: true,
+    contain: false
+  }, options);
+  if (options.trim) {
+    x = x.trim();
+    y = y.trim();
+  }
+  if (options.ignoreCase) {
+    x = x.toUpperCase();
+    y = y.toUpperCase();
+  }
+  if (options.ignoreAccents) {
+    x = stripAccents(x);
+    y = stripAccents(y);
+  }
+  return options.contain ? x.includes(y) : x === y;
+};
 var filterObject = function filterObject(object, keys, inital) {
   if (inital === void 0) {
@@ -11809,7 +11841,7 @@ var EllipsisContainer$1 = function EllipsisContainer$1(props) {
   }));
 };
-var _templateObject$5, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$3;
+var _templateObject$5, _templateObject2$3, _templateObject3$3, _templateObject4$3;
 var Container$1 = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  padding-right: calc(", " / 2);\n  display: flex;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
@@ -11817,10 +11849,9 @@ var Container$1 = styled__default.div(_templateObject$5 || (_templateObject$5 =
   var theme = _ref2.theme;
   return theme.spacings.s1;
 });
-var OverflowContainer = styled__default.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  overflow-y: scroll;\n  overflow-y: overlay;\n  max-height: 100%;\n  width: 100%;\n\n  ", "\n\n  scrollbar-color: ", ";\n  scrollbar-width: auto;\n\n  ::-webkit-scrollbar {\n    width: 7px;\n  }\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  ", ";\n"])), function (_ref3) {
+var OverflowContainer = styled__default.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  overflow-y: scroll;\n  overflow-y: overlay;\n  width: 100%;\n\n  max-height: ", ";\n\n  scrollbar-color: ", ";\n  scrollbar-width: auto;\n\n  ::-webkit-scrollbar {\n    width: 7px;\n  }\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  ", ";\n"])), function (_ref3) {
   var height = _ref3.height;
-  if (!height) return;
-  return styled.css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), height);
+  return height || '100%';
 }, function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.grey + " " + theme.colors.white;
@@ -11834,14 +11865,15 @@ var OverflowContainer = styled__default.div(_templateObject2$3 || (_templateObje
   var spacing = _ref7.spacing,
       theme = _ref7.theme;
   var value = getSpacings(spacing || '0', '0').split(' ');
-  return styled.css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n      padding: ", " calc(", " * 1.5) ", "\n        ", ";\n    "])), value[0], theme.spacings.s1, value[2], value[3]);
+  return styled.css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n      padding: ", " calc(", " * 1.5) ", "\n        ", ";\n    "])), value[0], theme.spacings.s1, value[2], value[3]);
 });
-var RelativeContainer = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  flex: 1;\n"])));
+var RelativeContainer = styled__default.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n"])));
 var ScrollContainer = function ScrollContainer(props) {
   var before = props.before,
       after = props.after,
-      loading = props.loading;
+      loading = props.loading,
+      inner = props.inner;
   var onScrollEnd = props.onScrollEnd || function () {};
@@ -11868,7 +11900,7 @@ var ScrollContainer = function ScrollContainer(props) {
   var _onScroll = props.onScroll || function () {};
   var htmlProps = filterObject(props, ['onScrollEnd', 'before', 'after', 'loading']);
-  return React__default.createElement(Container$1, null, before, React__default.createElement(RelativeContainer, null, React__default.createElement(OverflowContainer, Object.assign({}, htmlProps, {
+  return React__default.createElement(Container$1, null, before, React__default.createElement(RelativeContainer, null, inner || React__default.createElement(OverflowContainer, Object.assign({}, htmlProps, {
     onScroll: function onScroll(event) {
       _onScroll(event);
@@ -11879,27 +11911,31 @@ var ScrollContainer = function ScrollContainer(props) {
   })), after);
 };
-var _templateObject$6, _templateObject2$4, _templateObject3$4, _templateObject4$4, _templateObject5$4, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject$6, _templateObject2$4, _templateObject3$4, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 var positions = {
   'top right': function topRight(_ref) {
-    var left = _ref.left;
-    return styled.css(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n    top: 0;\n    left: ", ";\n  "])), left || '100%');
+    var bottom = _ref.bottom,
+        left = _ref.left;
+    return styled.css(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n    top: ", ";\n    left: ", ";\n  "])), bottom ? "calc(100% - " + bottom + ")" : 0, left || '100%');
   },
   'top left': function topLeft(_ref2) {
-    var right = _ref2.right;
-    return styled.css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n    top: 0;\n    right: ", ";\n  "])), right || '100%');
+    var bottom = _ref2.bottom,
+        right = _ref2.right;
+    return styled.css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n    top: ", ";\n    right: ", ";\n  "])), bottom ? "calc(100% - " + bottom + ")" : 0, right || '100%');
   },
   'bottom right': function bottomRight(_ref3) {
-    var left = _ref3.left;
-    return styled.css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n    bottom: 0;\n    left: ", ";\n  "])), left || '100%');
+    var top = _ref3.top,
+        left = _ref3.left;
+    return styled.css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n    bottom: ", ";\n    left: ", ";\n  "])), top ? "calc(100% - " + top + ")" : 0, left || '100%');
   },
   'bottom left': function bottomLeft(_ref4) {
-    var right = _ref4.right;
-    return styled.css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n    bottom: 0;\n    right: ", ";\n  "])), right || '100%');
+    var top = _ref4.top,
+        right = _ref4.right;
+    return styled.css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n    bottom: ", ";\n    right: ", ";\n  "])), top ? "calc(100% - " + top + ")" : 0, right || '100%');
   },
   'right top': function rightTop(_ref5) {
     var bottom = _ref5.bottom;
-    return styled.css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n    bottom: ", ";\n    right: 0;\n  "])), bottom || '100%');
+    return styled.css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n    bottom: ", ";\n    right: 0;\n  "])), bottom || '100%');
   },
   'right bottom': function rightBottom(_ref6) {
     var top = _ref6.top;
@@ -11953,7 +11989,6 @@ var Container$2 = styled__default.div(_templateObject9$1 || (_templateObject9$1
 });
 var AbsoluteContainer = function AbsoluteContainer(props) {
-  var disableAutoPosition = props.disableAutoPosition || props.position;
   var center = props.center || {
     x: 50,
     y: 75
@@ -11974,7 +12009,8 @@ var AbsoluteContainer = function AbsoluteContainer(props) {
       setFirstRender = _useState3[1];
   React.useEffect(function () {
-    if (disableAutoPosition || !ref) return;
+    setFirstRender(false);
+    if (props.position || !ref) return;
     var width = window.innerWidth;
     var height = window.innerHeight;
@@ -11984,13 +12020,23 @@ var AbsoluteContainer = function AbsoluteContainer(props) {
     var x = left * 100 / width;
     var y = top * 100 / height;
-    var xDirection = x > center.x ? 'left' : 'right';
-    var yDirection = y > center.y ? 'top' : 'bottom';
-    var newPosition = axis === 'y' ? xDirection + " " + yDirection : yDirection + " " + xDirection;
-    setPosition(newPosition);
-    setFirstRender(false);
+    if (axis === 'y') {
+      var xDirection = x > center.x ? 'left' : 'right';
+      var yDirection = y > center.y ? 'top' : 'bottom';
+      var newPosition = xDirection + " " + yDirection;
+      setPosition(newPosition);
+    } else {
+      var _xDirection = x > center.x ? 'left' : 'right';
+      var _yDirection = y > center.y ? 'bottom' : 'top';
+      var _newPosition = _yDirection + " " + _xDirection;
+      setPosition(_newPosition);
+    }
   }, [ref]);
-  var htmlProps = filterObject(props, ['center', 'position', 'disableAutoPosition', 'children']);
+  var htmlProps = filterObject(props, ['center', 'position', 'children']);
   return React__default.createElement(Container$2, Object.assign({}, htmlProps, {
     position: position,
     ref: setRef,
@@ -11998,7 +12044,7 @@ var AbsoluteContainer = function AbsoluteContainer(props) {
   }), React__default.createElement("div", null, props.children));
 };
-var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$5, _templateObject5$5, _templateObject6$2, _templateObject7$2, _templateObject8$2;
+var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$5, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2;
 var Option = styled__default.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: ", ";\n  display: flex;\n\n  > :nth-child(1) {\n    flex: 1;\n  }\n\n  ", ";\n\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
@@ -12017,29 +12063,36 @@ var Option = styled__default.div(_templateObject$7 || (_templateObject$7 = _tagg
   var theme = _ref4.theme;
   return theme.colors.iceWhite;
 });
-var Container$3 = styled__default(AbsoluteContainer)(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  > div {\n    > div:nth-child(1) {\n      background-color: ", ";\n      border-radius: 4px;\n    }\n\n    ", "\n\n    ", "\n  }\n"])), function (_ref5) {
+var Container$3 = styled__default(AbsoluteContainer)(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  > div {\n    display: flex;\n    width: 100%;\n\n    > div:nth-child(1) {\n      background-color: ", ";\n      border-radius: 4px;\n\n      ", "\n    }\n\n    ", "\n\n    ", "\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.colors.white;
+}, function (props) {
+  if (!props.containerSpacing) return;
+  var spacing = getSpacings(props.containerSpacing);
+  var tmp = spacing.split(' ');
+  tmp[1] = "calc(" + props.theme.spacings.s1 + " / 2)";
+  spacing = tmp.join(' ');
+  return styled.css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n          padding: ", ";\n        "])), spacing);
 }, function (_ref6) {
   var bordered = _ref6.bordered;
   if (!bordered) return;
-  return styled.css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n        ", " {\n          :not(:last-child) {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n      "])), Option, function (_ref7) {
+  return styled.css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n        ", " {\n          :not(:last-child) {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n      "])), Option, function (_ref7) {
     var theme = _ref7.theme;
     return theme.getColor('greyishBlue', 10);
   });
 }, function (props) {
   var theme = props.theme;
-  if (!props.spacing) {
-    return styled.css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n          ", " {\n            margin: ", " 0px ", "\n              ", ";\n          }\n        "])), Delimiter, theme.spacings.s1, theme.spacings.s1, theme.spacings.s1);
+  if (!props.itemSpacing) {
+    return styled.css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n          ", " {\n            margin: ", " 0px ", "\n              ", ";\n          }\n        "])), Delimiter, theme.spacings.s1, theme.spacings.s1, theme.spacings.s1);
   }
-  var spacing = getSpacings(props.spacing, {
+  var spacing = getSpacings(props.itemSpacing, {
     right: '0'
   });
-  return styled.css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n        ", " {\n          padding: ", ";\n        }\n        ", " {\n          margin: ", ";\n        }\n      "])), Option, spacing, Delimiter, spacing);
+  return styled.css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n        ", " {\n          padding: ", ";\n        }\n        ", " {\n          margin: ", ";\n        }\n      "])), Option, spacing, Delimiter, spacing);
 });
-var Delimiter = styled__default.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  border-bottom: 1px solid ", ";\n  margin: 14px;\n  width: calc(100% - 28px);\n"])), function (_ref8) {
+var Delimiter = styled__default.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  border-bottom: 1px solid ", ";\n  margin: 14px;\n  width: calc(100% - 28px);\n"])), function (_ref8) {
   var theme = _ref8.theme;
   return theme.useTypography('p');
 }, function (_ref9) {
@@ -12052,22 +12105,14 @@ var Menu = function Menu(props) {
       open = _props.open,
       close = _props.close,
       options = _props.options,
-      width = _props.width,
-      height = _props.height,
-      maxWidth = _props.maxWidth,
-      maxHeight = _props.maxHeight,
-      bordered = _props.bordered,
-      spacing = _props.spacing,
-      position = _props.position,
-      disableAutoPosition = _props.disableAutoPosition,
-      axis = _props.axis,
-      references = _props.references,
       onScrollEnd = _props.onScrollEnd,
       before = _props.before,
       after = _props.after,
       scrollHeight = _props.scrollHeight,
       scrollSpacing = _props.scrollSpacing,
-      loading = _props.loading;
+      children = _props.children,
+      loading = _props.loading,
+      innerContent = _props.innerContent;
   var _useState = React.useState(-1),
       activeOption = _useState[0],
@@ -12098,22 +12143,15 @@ var Menu = function Menu(props) {
     }));
   };
+  var absoluteContainerProps = filterObject(props, ['scrollSpacing', 'onScrollEnd', 'before', 'after', 'scrollHeight', 'open', 'close', 'options', 'loading', 'children'], {
+    itemSpacing: 's1'
+  });
   if (!open) return React__default.createElement(React__default.Fragment, null);
-  return React__default.createElement(Container$3, {
-    width: width,
-    height: height,
-    maxWidth: maxWidth,
-    maxHeight: maxHeight,
-    position: position,
-    bordered: bordered,
-    spacing: spacing,
-    disableAutoPosition: disableAutoPosition,
-    axis: axis,
-    references: references
-  }, React__default.createElement(ScrollContainer, {
+  return React__default.createElement(Container$3, Object.assign({}, absoluteContainerProps), React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollContainer, {
     onScrollEnd: onScrollEnd,
     before: before,
     after: after,
+    inner: innerContent,
     height: scrollHeight,
     spacing: scrollSpacing,
     loading: loading
@@ -12121,7 +12159,8 @@ var Menu = function Menu(props) {
     var _option = _extends({}, option),
         delimiter = _option.delimiter,
         keepOpen = _option.keepOpen,
-        submenu = _option.submenu;
+        submenu = _option.submenu,
+        caret = _option.caret;
     var label = isString(option.label) ? {
       text: option.label,
@@ -12181,15 +12220,15 @@ var Menu = function Menu(props) {
     }, React__default.createElement(Option, {
       onClick: onClick,
       disabled: disabled
-    }, isString(label.element) ? React__default.createElement(EllipsisContainer$1, null, label.element) : label.element, submenu && React__default.createElement(Icon, {
+    }, isString(label.element) ? React__default.createElement(EllipsisContainer$1, null, label.element) : label.element, caret || submenu ? React__default.createElement(Icon, {
       type: 'semantic',
       icon: 'caret right',
       width: '14px'
-    })), delimiter && React__default.createElement(Delimiter, null));
-  })), getSubmenu(activeOption));
+    }) : null), delimiter && React__default.createElement(Delimiter, null));
+  })), children, getSubmenu(activeOption)));
 };
-var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$6, _templateObject5$6, _templateObject6$3;
+var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$6, _templateObject5$5, _templateObject6$3;
 var Container$4 = styled__default.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  div {\n    border-radius: 50%;\n    width: ", ";\n    height: ", ";\n\n    ", "\n\n    ", "\n    ", "\n      ", "\n      ", "\n  }\n\n  span {\n    display: inline-block;\n    margin-left: 8px;\n    color: ", ";\n  }\n"])), function (_ref) {
   var props = _ref.props;
   return props.size === 'medium' ? '15px' : '6px';
@@ -12216,7 +12255,7 @@ var Container$4 = styled__default.div(_templateObject$8 || (_templateObject$8 =
   });
 }, function (_ref9) {
   var props = _ref9.props;
-  return props.type === 'success' && styled.css(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref10) {
+  return props.type === 'success' && styled.css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref10) {
     var theme = _ref10.theme;
     return theme.colors.green;
   });
@@ -12236,7 +12275,7 @@ var Indicator = function Indicator(props) {
   }, React__default.createElement("div", null), React__default.createElement("span", null, " ", props.description, " "));
 };
-var _templateObject$9, _templateObject2$7, _templateObject3$7, _templateObject4$7, _templateObject5$7, _templateObject6$4, _templateObject7$3;
+var _templateObject$9, _templateObject2$7, _templateObject3$7, _templateObject4$7, _templateObject5$6, _templateObject6$4, _templateObject7$3;
 var Container$5 = styled__default.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  span {\n    display: inline-block;\n    margin-left: 7px;\n    color: #000000cc;\n  }\n"])));
 var Progress = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _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 + "%";
@@ -12251,7 +12290,7 @@ var Progress = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _
     return theme.colors.blue;
   });
 }, function (props) {
-  return props.type === 'danger' && styled.css(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref3) {
+  return props.type === 'danger' && styled.css(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref3) {
     var theme = _ref3.theme;
     return theme.colors.warningRed;
   });
@@ -12306,7 +12345,7 @@ function SvgClose(props) {
   })));
 }
-var _templateObject$a, _templateObject2$8, _templateObject3$8, _templateObject4$8, _templateObject5$8, _templateObject6$5;
+var _templateObject$a, _templateObject2$8, _templateObject3$8, _templateObject4$8, _templateObject5$7, _templateObject6$5;
 var Container$6 = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  display: block;\n  border-bottom-style: solid;\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       internal = _ref.internal;
@@ -12317,7 +12356,7 @@ var Tabs = styled__default.ul(_templateObject3$8 || (_templateObject3$8 = _tagge
       internal = _ref2.internal;
   return styled.css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n    height: ", ";\n    box-shadow: 0 0 10px 0 ", ";\n  "])), internal ? '41px' : '49px', theme.getColor('black', 10));
 });
-var Tab = styled__default.li(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 4px 4px 0 0;\n\n  svg {\n    transform: scale(calc(18 / 24));\n    stroke-width: 2px;\n  }\n\n  ", "\n"])), function (_ref3) {
+var Tab = styled__default.li(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 4px 4px 0 0;\n\n  svg {\n    transform: scale(calc(18 / 24));\n    stroke-width: 2px;\n  }\n\n  ", "\n"])), function (_ref3) {
   var theme = _ref3.theme,
       active = _ref3.active;
   return styled.css(_templateObject6$5 || (_templateObject6$5 = _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);
@@ -12409,7 +12448,7 @@ var getMask = function getMask(mask) {
   };
 };
-var _templateObject$b, _templateObject2$9, _templateObject3$9, _templateObject4$9, _templateObject5$9, _templateObject6$6, _templateObject7$4, _templateObject8$3, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12$1;
+var _templateObject$b, _templateObject2$9, _templateObject3$9, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$2, _templateObject11$1, _templateObject12$1;
 var IconContainer = styled__default.button(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: calc(", " + 1px);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 17px;\n\n  background-color: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 0;\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s2;
@@ -12440,7 +12479,7 @@ var Input = styled__default.input(_templateObject3$9 || (_templateObject3$9 = _t
     });
   }
-  return styled.css(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n        opacity: 0.5;\n        font-size: 14px;\n        letter-spacing: 0px;\n      "])));
+  return styled.css(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n        opacity: 0.5;\n        font-size: 14px;\n        letter-spacing: 0px;\n      "])));
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.spacings.s2 + " " + theme.spacings.s3;
@@ -12475,7 +12514,7 @@ var Label = styled__default.label(_templateObject8$3 || (_templateObject8$3 = _t
 }, function (_ref16) {
   var disabled = _ref16.disabled;
   if (!disabled) return;
-  return styled.css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return styled.css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, function (_ref17) {
   var theme = _ref17.theme;
   return theme.spacings.s1;
@@ -12653,7 +12692,7 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
 });
 Input$1.displayName = 'Input';
-var _templateObject$c, _templateObject2$a, _templateObject3$a, _templateObject4$a, _templateObject5$a, _templateObject6$7, _templateObject7$5;
+var _templateObject$c, _templateObject2$a, _templateObject3$a, _templateObject4$a, _templateObject5$9, _templateObject6$7, _templateObject7$5;
 var width = '17px';
 var Checkmark = styled__default.span(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0px;\n  left: 0;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n\n  border-style: solid;\n  border-color: ", ";\n  border-width: 1px;\n  border-radius: 4px;\n\n  transition-property: border-color;\n  transition-duration: 0.25s;\n  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n\n  :after {\n    content: '';\n    position: absolute;\n\n    left: 50%;\n    top: 50%;\n    height: 0;\n    width: 0;\n\n    border-style: solid;\n    border-color: ", ";\n    border-width: 0;\n    transform: rotate(45deg);\n\n    transition-property: width height border-width top left;\n    transition-duration: 0.25s;\n    transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n  }\n"])), width, width, function (_ref) {
   var theme = _ref.theme;
@@ -12719,7 +12758,7 @@ var Label$1 = styled__default.label(_templateObject2$a || (_templateObject2$a =
     return styled.css(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n        cursor: pointer;\n      "])));
   }
-  return styled.css(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return styled.css(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, width, function (_ref7) {
   var theme = _ref7.theme;
   return theme.spacings.s1;
@@ -12897,7 +12936,7 @@ var Time = React__default.forwardRef(function (props, ref) {
 });
 Time.displayName = 'Time';
-var _templateObject$d, _templateObject2$b, _templateObject3$b, _templateObject4$b, _templateObject5$b, _templateObject6$8, _templateObject7$6, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1;
+var _templateObject$d, _templateObject2$b, _templateObject3$b, _templateObject4$b, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$4, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1;
 var Container$7 = styled__default.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  background-color: ", ";\n  padding: ", ";\n\n  > div:nth-child(1) {\n    border: 1px solid ", ";\n    margin-bottom: ", ";\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white;
@@ -12920,7 +12959,7 @@ var MonthContainer = styled__default.div(_templateObject4$b || (_templateObject4
   var theme = _ref6.theme;
   return theme.spacings.s1;
 });
-var NavBtn = styled__default.button(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n  width: 32px;\n  height: 32px;\n  box-shadow: none;\n  border: 0.5px solid transparent;\n  background-color: transparent;\n  cursor: pointer;\n  border: none;\n\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  :disabled {\n    visibility: hidden;\n  }\n"])), function (_ref7) {
+var NavBtn = styled__default.button(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n  width: 32px;\n  height: 32px;\n  box-shadow: none;\n  border: 0.5px solid transparent;\n  background-color: transparent;\n  cursor: pointer;\n  border: none;\n\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  :disabled {\n    visibility: hidden;\n  }\n"])), function (_ref7) {
   var theme = _ref7.theme;
   return theme.useTypography('p');
 });
@@ -12952,7 +12991,7 @@ var DayContainer = styled__default.button(_templateObject8$4 || (_templateObject
       color = _ref15.color;
   if (color === 'grey') {
-    return styled.css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), theme.getColor('greyishBlue', 10));
+    return styled.css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), theme.getColor('greyishBlue', 10));
   } else if (color === 'blue') {
     return styled.css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n\n        :not(:disabled) {\n          background-color: ", ";\n        }\n      "])), theme.colors.white, theme.getColor('blue', 30));
   }
@@ -13419,6 +13458,9 @@ var Header$1 = function Header() {
       setSearched = _context$search[1],
       loading = context.loading,
       options = context.options;
+  React.useEffect(function () {
+    setSearch(searched);
+  }, [searched]);
   var onClick = function onClick() {
     setChecked(function (prev) {
@@ -13544,7 +13586,6 @@ var getOptions = function getOptions(props, options, checked, setChecked) {
 var Select = React__default.forwardRef(function (props, ref) {
   var position = props.position,
-      disableAutoPosition = props.disableAutoPosition,
       loader = props.loader,
       type = props.type;
@@ -13585,7 +13626,7 @@ var Select = React__default.forwardRef(function (props, ref) {
   };
   var parsedOptions = getOptions(props, options, checked, setChecked);
-  var inputProps = filterObject(props, ['type', 'onScrollEnd', 'position', 'disableAutoPosition', 'value']);
+  var inputProps = filterObject(props, ['type', 'onScrollEnd', 'position', 'value']);
   if (props.type === 'select-multiple') {
     if (props.value.length > 0) {
@@ -13645,6 +13686,11 @@ var Select = React__default.forwardRef(function (props, ref) {
       return clearTimeout(timeoutId);
     };
   }, [onSubmit]);
+  React.useEffect(function () {
+    if (open) return;
+    setSearch('');
+    if (Array.isArray(props.value)) setChecked([].concat(props.value));
+  }, [props.value, open]);
   return React__default.createElement(Provider.Provider, {
     value: {
       props: props,
@@ -13685,16 +13731,19 @@ var Select = React__default.forwardRef(function (props, ref) {
     onScrollEnd: onScrollEnd,
     width: '100%',
     bordered: true,
-    spacing: type === 'select-multiple' ? undefined : 's3',
+    itemSpacing: type === 'select-multiple' ? undefined : 's3',
     position: position,
-    disableAutoPosition: disableAutoPosition,
     references: {
       bottom: '35px'
     },
     before: React__default.createElement(Header$1, null),
     after: React__default.createElement(Footer$1, null),
     scrollHeight: props.search ? '135px' : '165px',
-    loading: loading
+    loading: loading,
+    center: props.center || {
+      x: 50,
+      y: 50
+    }
   })));
 });
 Select.displayName = 'Select';
@@ -14094,12 +14143,12 @@ var Phone = React__default.forwardRef(function (props, ref) {
     width: '100%',
     maxHeight: '165px',
     bordered: true,
-    spacing: 's3'
+    itemSpacing: 's3'
   }));
 });
 Phone.displayName = 'Phone';
-var _templateObject$i, _templateObject2$f, _templateObject3$e, _templateObject4$d, _templateObject5$c, _templateObject6$9;
+var _templateObject$i, _templateObject2$f, _templateObject3$e, _templateObject4$d, _templateObject5$b, _templateObject6$9;
 var RelativeContainer$4 = styled__default.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  input {\n    color: transparent;\n  }\n"])));
 var Container$8 = styled__default.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  width: calc(100% - 2px - ", ");\n  height: 33px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: ", ";\n  border-radius: 4px;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var iconWidth = _ref.iconWidth,
@@ -14118,7 +14167,7 @@ var Container$8 = styled__default.div(_templateObject2$f || (_templateObject2$f
   if (!disabled) return;
   return styled.css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 });
-var Button$3 = styled__default.button(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref5) {
+var Button$3 = styled__default.button(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref5) {
   var onClick = _ref5.onClick;
   if (!onClick) return;
   return styled.css(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
@@ -14232,7 +14281,7 @@ var DatePicker = React__default.forwardRef(function (props, ref) {
 });
 DatePicker.displayName = 'DatePicker';
-var _templateObject$j, _templateObject2$g, _templateObject3$f, _templateObject4$e, _templateObject5$d, _templateObject6$a, _templateObject7$7;
+var _templateObject$j, _templateObject2$g, _templateObject3$f, _templateObject4$e, _templateObject5$c, _templateObject6$a, _templateObject7$7;
 var LabelContainer = styled__default.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
@@ -14251,7 +14300,7 @@ var Label$3 = styled__default.label(_templateObject2$g || (_templateObject2$g =
 }, function (_ref4) {
   var required = _ref4.required;
   if (!required) return;
-  return styled.css(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n      > ", " {\n        :after {\n          content: '*';\n        }\n      }\n    "])), LabelContainer);
+  return styled.css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n      > ", " {\n        :after {\n          content: '*';\n        }\n      }\n    "])), LabelContainer);
 }, function (_ref5) {
   var invalid = _ref5.invalid;
@@ -14310,7 +14359,7 @@ var Switch = function Switch(props) {
   })), React__default.createElement("span", null), label && React__default.createElement(LabelContainer, null, label));
 };
-var _templateObject$k, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$e, _templateObject6$b, _templateObject7$8, _templateObject8$5, _templateObject9$4, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15, _templateObject16;
+var _templateObject$k, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$b, _templateObject7$8, _templateObject8$5, _templateObject9$5, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15, _templateObject16;
 var bullet = styled.css(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: ", ";\n  height: ", ";\n  border-radius: 100%;\n  border-width: 1px;\n  border-style: solid;\n  background-color: ", ";\n  box-shadow: 0px 1px 3px ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s4;
@@ -14341,7 +14390,7 @@ var Label$4 = styled__default.label(_templateObject3$g || (_templateObject3$g =
 }, function (_ref9) {
   var required = _ref9.required;
   if (!required) return;
-  return styled.css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n        :after {\n          content: ' *';\n        }\n      "])));
+  return styled.css(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n        :after {\n          content: ' *';\n        }\n      "])));
 });
 var InputContainer = styled__default.div(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  gap: 6px;\n\n  > div {\n    position: relative;\n  }\n\n  ", "\n"])), function (_ref10) {
   var theme = _ref10.theme,
@@ -14353,7 +14402,7 @@ var InputContainer = styled__default.div(_templateObject6$b || (_templateObject6
   return styled.css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n      ", " > span {\n        background-color: ", ";\n      }\n\n      ", " {\n        /** firefox */\n        ::-moz-range-thumb {\n          border-color: ", ";\n        }\n        /** ie */\n        ::-ms-thumb {\n          border-color: ", ";\n        }\n        /** chrome */\n        ::-webkit-slider-thumb {\n          border-color: ", ";\n        }\n      }\n    "])), SelectedArea, theme.colors.warningRed, Input$2, theme.colors.warningRed, theme.colors.warningRed, theme.colors.warningRed);
 });
-var MinMaxLabelContainer = styled__default.div(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
+var MinMaxLabelContainer = styled__default.div(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
 var LabelsContainer = styled__default.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n\n  ", "\n"])), function (_ref11) {
   var position = _ref11.position;
@@ -14520,7 +14569,7 @@ var Range = React__default.forwardRef(function (props, ref) {
 });
 Range.displayName = 'input';
-var _templateObject$l, _templateObject2$i, _templateObject3$h, _templateObject4$g, _templateObject5$f, _templateObject6$c, _templateObject7$9;
+var _templateObject$l, _templateObject2$i, _templateObject3$h, _templateObject4$g, _templateObject5$e, _templateObject6$c, _templateObject7$9;
 var LabelContainer$1 = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
@@ -14539,7 +14588,7 @@ var Label$5 = styled__default.label(_templateObject2$i || (_templateObject2$i =
 }, function (_ref4) {
   var required = _ref4.required;
   if (!required) return;
-  return styled.css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n      > ", " {\n        :after {\n          content: ' *';\n        }\n      }\n    "])), LabelContainer$1);
+  return styled.css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n      > ", " {\n        :after {\n          content: ' *';\n        }\n      }\n    "])), LabelContainer$1);
 }, function (_ref5) {
   var invalid = _ref5.invalid;
@@ -14697,7 +14746,7 @@ var widths = {
   default: '642.5px'
 };
-var _templateObject$m, _templateObject2$j, _templateObject3$i, _templateObject4$h, _templateObject5$g, _templateObject6$d, _templateObject7$a, _templateObject8$6, _templateObject9$5, _templateObject10$5;
+var _templateObject$m, _templateObject2$j, _templateObject3$i, _templateObject4$h, _templateObject5$f, _templateObject6$d, _templateObject7$a, _templateObject8$6, _templateObject9$6, _templateObject10$5;
 var Background = styled__default.div(_templateObject$m || (_templateObject$m = _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);
@@ -14710,7 +14759,7 @@ var Header$2 = styled__default.div(_templateObject3$i || (_templateObject3$i = _
       useTypography = _ref2$theme.useTypography;
   return styled.css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", ";\n    padding: ", ";\n\n    ", "\n  "])), colors.lightestGrey, spacings.s4, useTypography('h1'));
 });
-var Footer$2 = styled__default.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  ", "\n"])), function (_ref3) {
+var Footer$2 = styled__default.div(_templateObject5$f || (_templateObject5$f = _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;
@@ -14724,7 +14773,7 @@ var FooterButtons = styled__default.div(_templateObject8$6 || (_templateObject8$
   var theme = _ref5.theme;
   return theme.spacings.s3;
 });
-var Container$9 = styled__default.div(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (_ref6) {
+var Container$9 = styled__default.div(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (_ref6) {
   var theme = _ref6.theme,
       size = _ref6.size,
       customSize = _ref6.customSize,
@@ -14926,7 +14975,7 @@ Modal$1.ConfirmDelete = ConfirmDelete;
 Modal$1.ConfirmEdit = ConfirmSuccess;
 Modal$1.Audit = Audit;
-var _templateObject$q, _templateObject2$k, _templateObject3$j, _templateObject4$i, _templateObject5$h, _templateObject6$e, _templateObject7$b, _templateObject8$7, _templateObject9$6, _templateObject10$6;
+var _templateObject$q, _templateObject2$k, _templateObject3$j, _templateObject4$i, _templateObject5$g, _templateObject6$e, _templateObject7$b, _templateObject8$7, _templateObject9$7, _templateObject10$6;
 var Container$a = styled__default.div(_templateObject$q || (_templateObject$q = _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$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
 }, function (props) {
@@ -14934,7 +14983,7 @@ var Container$a = styled__default.div(_templateObject$q || (_templateObject$q =
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
 }, function (props) {
-  return props.size === 'big' && styled.css(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n      width: 414px;\n      height: 324px;\n    "])));
+  return props.size === 'big' && styled.css(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n      width: 414px;\n      height: 324px;\n    "])));
 }, function (props) {
   return props.borderType === 'info' && styled.css(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n      border-left-color: #4d6dbe;\n    "])));
 }, function (props) {
@@ -14942,7 +14991,7 @@ var Container$a = styled__default.div(_templateObject$q || (_templateObject$q =
 }, function (props) {
   return props.borderType === 'warning' && styled.css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n      border-left-color: #fbcb01;\n    "])));
 }, function (props) {
-  return props.borderType === 'danger' && styled.css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
+  return props.borderType === 'danger' && styled.css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
 }, function (props) {
   return props.borderType === 'none' && styled.css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
 });
@@ -14956,7 +15005,7 @@ var Card = function Card(_ref) {
   return React__default.createElement(Container$a, Object.assign({}, rest), children);
 };
-var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$j, _templateObject5$i, _templateObject6$f;
+var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$j, _templateObject5$h, _templateObject6$f;
 var Container$b = styled__default.div(_templateObject$r || (_templateObject$r = _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) {
@@ -14966,7 +15015,7 @@ var Container$b = styled__default.div(_templateObject$r || (_templateObject$r =
 }, 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    "])));
 });
-var IconContainer$2 = styled__default.div(_templateObject5$i || (_templateObject5$i = _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 IconContainer$2 = styled__default.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 14px 14px 0 0;\n  margin: 0;\n"])));
 var IconContent = styled__default.div(_templateObject6$f || (_templateObject6$f = _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) {
@@ -15085,12 +15134,12 @@ var CalendarInterval = function CalendarInterval(props) {
   })));
 };
-var _templateObject$t, _templateObject2$m, _templateObject3$l, _templateObject4$k, _templateObject5$j, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$7, _templateObject10$7, _templateObject11$4;
+var _templateObject$t, _templateObject2$m, _templateObject3$l, _templateObject4$k, _templateObject5$i, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$8, _templateObject10$7, _templateObject11$4;
 var Container$d = styled__default.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
 var Header$3 = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var HeaderImage = styled__default.div(_templateObject3$l || (_templateObject3$l = _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 MainContent = styled__default.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
 var HeaderLine = styled__default.div(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
@@ -15098,7 +15147,7 @@ var HeaderLine = styled__default.div(_templateObject6$g || (_templateObject6$g =
 }, function (props) {
   return props.size === 'small' && styled.css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
@@ -15137,7 +15186,7 @@ var Template1 = function Template1(props) {
   })));
 };
-var _templateObject$u, _templateObject2$n, _templateObject3$m, _templateObject4$l, _templateObject5$k;
+var _templateObject$u, _templateObject2$n, _templateObject3$m, _templateObject4$l, _templateObject5$j;
 var HeaderLine$1 = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
@@ -15147,15 +15196,15 @@ var HeaderLine$1 = styled__default.div(_templateObject$u || (_templateObject$u =
 }, 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    "])));
+  return props.size === 'large' && styled.css(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var _templateObject$v, _templateObject2$o, _templateObject3$n, _templateObject4$m, _templateObject5$l, _templateObject6$h, _templateObject7$d, _templateObject8$9;
+var _templateObject$v, _templateObject2$o, _templateObject3$n, _templateObject4$m, _templateObject5$k, _templateObject6$h, _templateObject7$d, _templateObject8$9;
 var Container$e = styled__default.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
 var Template2Container = styled__default(Container$e)(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  background: #fff;\n  border: 2px solid #ebebeb;\n"])));
 var Header$4 = styled__default.div(_templateObject3$n || (_templateObject3$n = _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 HeaderContent$1 = styled__default.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
 var MainContent$1 = styled__default.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
 var MainLine$1 = styled__default(HeaderLine$1)(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
 var HeaderLine$2 = styled__default(HeaderLine$1)(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose([""])));
@@ -15213,7 +15262,7 @@ var Template3 = function Template3(props) {
   }));
 };
-var _templateObject$x, _templateObject2$q, _templateObject3$p, _templateObject4$n, _templateObject5$m, _templateObject6$i, _templateObject7$e, _templateObject8$a;
+var _templateObject$x, _templateObject2$q, _templateObject3$p, _templateObject4$n, _templateObject5$l, _templateObject6$i, _templateObject7$e, _templateObject8$a;
 var Container$g = styled__default.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
 var HeaderLine$3 = styled__default.div(_templateObject2$q || (_templateObject2$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) {
   return props.height;
@@ -15222,7 +15271,7 @@ var HeaderLine$3 = styled__default.div(_templateObject2$q || (_templateObject2$q
 }, function (props) {
   return props.size === 'small' && styled.css(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
@@ -15280,7 +15329,7 @@ var Template4 = function Template4(props) {
   }));
 };
-var _templateObject$y, _templateObject2$r, _templateObject3$q, _templateObject4$o, _templateObject5$n, _templateObject6$j, _templateObject7$f, _templateObject8$b, _templateObject9$8;
+var _templateObject$y, _templateObject2$r, _templateObject3$q, _templateObject4$o, _templateObject5$m, _templateObject6$j, _templateObject7$f, _templateObject8$b, _templateObject9$9;
 var Container$h = styled__default.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 746px;\n  height: 169px;\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n  padding: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 var Circle = styled__default.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  width: 141px;\n  height: 141px;\n  background-color: #dddedf;\n  border-radius: 50%;\n"])));
 var HeaderLine$4 = styled__default.div(_templateObject3$q || (_templateObject3$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) {
@@ -15288,7 +15337,7 @@ var HeaderLine$4 = styled__default.div(_templateObject3$q || (_templateObject3$q
 }, function (props) {
   return props.size === 'mini' && styled.css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
@@ -15301,7 +15350,7 @@ var CustomLine$1 = styled__default(HeaderLine$4)(_templateObject8$b || (_templat
 }, function (props) {
   return props.color;
 });
-var MainContent$2 = styled__default.div(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  margin-left: 35px;\n"])));
+var MainContent$2 = styled__default.div(_templateObject9$9 || (_templateObject9$9 = _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);
@@ -15328,14 +15377,14 @@ var Template5 = function Template5(props) {
   })));
 };
-var _templateObject$z, _templateObject2$s, _templateObject3$r, _templateObject4$p, _templateObject5$o, _templateObject6$k, _templateObject7$g, _templateObject8$c, _templateObject9$9;
+var _templateObject$z, _templateObject2$s, _templateObject3$r, _templateObject4$p, _templateObject5$n, _templateObject6$k, _templateObject7$g, _templateObject8$c, _templateObject9$a;
 var Container$i = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  width: 395px;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #f5f5f5;\n"])));
 var Header$5 = styled__default.div(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n"])));
 var Footer$3 = styled__default.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-top: 1px solid #b1b1b3;\n  height: 50px;\n"])));
 var HeaderLine$5 = styled__default.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && styled.css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && styled.css(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
@@ -15343,7 +15392,7 @@ var HeaderLine$5 = styled__default.div(_templateObject4$p || (_templateObject4$p
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$2 = styled__default(HeaderLine$5)(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
+var CustomLine$2 = styled__default(HeaderLine$5)(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
@@ -15371,7 +15420,7 @@ var Template6 = function Template6(props) {
   })));
 };
-var _templateObject$A, _templateObject2$t, _templateObject3$s, _templateObject4$q, _templateObject5$p, _templateObject6$l, _templateObject7$h, _templateObject8$d, _templateObject9$a, _templateObject10$8;
+var _templateObject$A, _templateObject2$t, _templateObject3$s, _templateObject4$q, _templateObject5$o, _templateObject6$l, _templateObject7$h, _templateObject8$d, _templateObject9$b, _templateObject10$8;
 var Container$j = styled__default.div(_templateObject$A || (_templateObject$A = _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$6 = styled__default.div(_templateObject2$t || (_templateObject2$t = _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$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) {
@@ -15379,7 +15428,7 @@ var HeaderLine$6 = styled__default.div(_templateObject3$s || (_templateObject3$s
 }, function (props) {
   return props.size === 'mini' && styled.css(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
@@ -15392,7 +15441,7 @@ var CustomLine$3 = styled__default(HeaderLine$6)(_templateObject8$d || (_templat
 }, function (props) {
   return props.color;
 });
-var Main = styled__default.div(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n  margin: 10px 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-evenly;\n"])));
+var Main = styled__default.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n  margin: 10px 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-evenly;\n"])));
 var Circle$1 = styled__default.div(_templateObject10$8 || (_templateObject10$8 = _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) {
@@ -15405,7 +15454,7 @@ 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$B, _templateObject2$u, _templateObject3$t, _templateObject4$r, _templateObject5$q, _templateObject6$m, _templateObject7$i, _templateObject8$e, _templateObject9$b;
+var _templateObject$B, _templateObject2$u, _templateObject3$t, _templateObject4$r, _templateObject5$p, _templateObject6$m, _templateObject7$i, _templateObject8$e, _templateObject9$c;
 var Container$k = styled__default.div(_templateObject$B || (_templateObject$B = _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$u || (_templateObject2$u = _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$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) {
@@ -15413,7 +15462,7 @@ var HeaderLine$7 = styled__default.div(_templateObject3$t || (_templateObject3$t
 }, function (props) {
   return props.size === 'mini' && styled.css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
@@ -15426,7 +15475,7 @@ var CustomLine$4 = styled__default(HeaderLine$7)(_templateObject8$e || (_templat
 }, function (props) {
   return props.color;
 });
-var Main$1 = styled__default.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n  padding: 14px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
+var Main$1 = styled__default.div(_templateObject9$c || (_templateObject9$c = _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);
@@ -15448,7 +15497,7 @@ var Template8 = function Template8(props) {
   })));
 };
-var _templateObject$C, _templateObject2$v, _templateObject3$u, _templateObject4$s, _templateObject5$r, _templateObject6$n, _templateObject7$j, _templateObject8$f, _templateObject9$c, _templateObject10$9;
+var _templateObject$C, _templateObject2$v, _templateObject3$u, _templateObject4$s, _templateObject5$q, _templateObject6$n, _templateObject7$j, _templateObject8$f, _templateObject9$d, _templateObject10$9;
 var Container$l = styled__default.div(_templateObject$C || (_templateObject$C = _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$8 = styled__default.div(_templateObject2$v || (_templateObject2$v = _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$u || (_templateObject3$u = _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) {
@@ -15456,7 +15505,7 @@ var HeaderLine$8 = styled__default.div(_templateObject3$u || (_templateObject3$u
 }, function (props) {
   return props.size === 'mini' && styled.css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
@@ -15469,7 +15518,7 @@ var CustomLine$5 = styled__default(HeaderLine$8)(_templateObject8$f || (_templat
 }, function (props) {
   return props.color;
 });
-var Main$2 = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  padding: 14px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
+var Main$2 = styled__default.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  padding: 14px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
 var Circle$2 = styled__default.div(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 var Template8$1 = function Template8(props) {
@@ -15487,7 +15536,7 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$2, null, React__default.createElement(Circle$2, null)));
 };
-var _templateObject$D, _templateObject2$w, _templateObject3$v, _templateObject4$t, _templateObject5$s, _templateObject6$o, _templateObject7$k, _templateObject8$g, _templateObject9$d, _templateObject10$a, _templateObject11$5;
+var _templateObject$D, _templateObject2$w, _templateObject3$v, _templateObject4$t, _templateObject5$r, _templateObject6$o, _templateObject7$k, _templateObject8$g, _templateObject9$e, _templateObject10$a, _templateObject11$5;
 var Container$m = styled__default.div(_templateObject$D || (_templateObject$D = _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$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$9 = styled__default.div(_templateObject3$v || (_templateObject3$v = _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) {
@@ -15495,7 +15544,7 @@ var HeaderLine$9 = styled__default.div(_templateObject3$v || (_templateObject3$v
 }, function (props) {
   return props.size === 'mini' && styled.css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
@@ -15508,7 +15557,7 @@ var CustomLine$6 = styled__default(HeaderLine$9)(_templateObject8$g || (_templat
 }, function (props) {
   return props.color;
 });
-var GraphLine = styled__default(CustomLine$6)(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
+var GraphLine = styled__default(CustomLine$6)(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
 var Main$3 = styled__default.div(_templateObject10$a || (_templateObject10$a = _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"])));
@@ -15631,7 +15680,7 @@ var Placeholder = function Placeholder(props) {
   }
 };
-var _templateObject$E, _templateObject2$x, _templateObject3$w, _templateObject4$u, _templateObject5$t;
+var _templateObject$E, _templateObject2$x, _templateObject3$w, _templateObject4$u, _templateObject5$s;
 var Image = styled__default.img(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
 var Container$n = styled__default.div(_templateObject2$x || (_templateObject2$x = _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;
@@ -15668,7 +15717,7 @@ var Button$4 = styled__default(Button$1)(_templateObject4$u || (_templateObject4
   var theme = _ref4.theme;
   return theme.getColor('white', 50);
 });
-var ModalContent = styled__default.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n\n  img {\n    max-height: 100%;\n    max-width: 100%;\n  }\n"])));
+var ModalContent = styled__default.div(_templateObject5$s || (_templateObject5$s = _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"];
@@ -15704,6 +15753,331 @@ var Zoom = function Zoom(props) {
   }))));
 };
+var _templateObject$F;
+var Container$o = styled__default.div(_templateObject$F || (_templateObject$F = _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;
+  return "0 calc(" + s3 + " * .75) " + s1 + " " + s1;
+}, function (_ref2) {
+  var s3 = _ref2.theme.spacings.s3;
+  return s3;
+}, function (_ref3) {
+  var useTypography = _ref3.theme.useTypography;
+  return useTypography('p');
+}, function (_ref4) {
+  var getColor = _ref4.theme.getColor;
+  return getColor('greyishBlue', 50);
+});
+var Header$a = function Header(props) {
+  var title = props.title,
+      _props$search = props.search,
+      searched = _props$search[0],
+      _setSearched = _props$search[1],
+      allowEmptySearch = props.allowEmptySearch,
+      withSearch = props.withSearch,
+      _props$touched = props.touched,
+      setTouched = _props$touched[1];
+  var _useState = React.useState(''),
+      search = _useState[0],
+      setSearch = _useState[1];
+  var setSearched = allowEmptySearch ? _setSearched : function (value) {
+    if (value === '') return;
+    _setSearched(value);
+    setTouched(true);
+  };
+  React.useEffect(function () {
+    setSearch(searched);
+  }, [searched]);
+  var onSubmit = function onSubmit() {
+    setSearched(search);
+  };
+  var onClear = function onClear() {
+    setSearch('');
+    setSearched('');
+  };
+  return React__default.createElement(Container$o, null, React__default.createElement("div", null, isString(title) ? title : title.element), withSearch && React__default.createElement(Input$3, {
+    type: 'search',
+    placeholder: 'Pesquisa',
+    setValue: setSearch,
+    value: search,
+    onPressEnter: onSubmit,
+    clearable: search !== '' && search === searched ? onClear : undefined,
+    icon: {
+      icon: {
+        type: 'feather',
+        icon: 'search'
+      },
+      onClick: onSubmit
+    }
+  }));
+};
+var _templateObject$G;
+var EmptyMessage = styled__default.div(_templateObject$G || (_templateObject$G = _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;
+});
+var getInstance = function getInstance(props) {
+  var item = props.item;
+  if (Array.isArray(item.options)) {
+    var intialOptions = [].concat(item.options);
+    var _getOptions = function _getOptions(value) {
+      try {
+        var options = intialOptions.filter(function (option) {
+          var label = isString(option.label) ? option.label : option.label.text;
+          return strCmp(label, value, {
+            contain: true
+          });
+        });
+        return Promise.resolve({
+          options: options,
+          lastPage: true
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+    return {
+      getOptions: _getOptions
+    };
+  }
+  var loader = item.options;
+  var getOptions = function getOptions(value, page) {
+    try {
+      return Promise.resolve(loader(value, page)).then(function (options) {
+        return Array.isArray(options) ? {
+          options: options,
+          lastPage: true
+        } : options;
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return {
+    getOptions: getOptions
+  };
+};
+var Submenu = function Submenu(props) {
+  var item = props.item,
+      close = props.close,
+      setAppliedFilters = props.setAppliedFilters;
+  var isDynamic = !Array.isArray(item.options);
+  var _getInstance = getInstance(props),
+      getOptions = _getInstance.getOptions;
+  var _useState = React.useState([]),
+      options = _useState[0],
+      setOptions = _useState[1];
+  var _useState2 = React.useState(1),
+      page = _useState2[0],
+      setPage = _useState2[1];
+  var _useState3 = React.useState(''),
+      search = _useState3[0],
+      _setSearch = _useState3[1];
+  var _useState4 = React.useState(false),
+      lastPage = _useState4[0],
+      setLastPage = _useState4[1];
+  var _useState5 = React.useState(false),
+      loading = _useState5[0],
+      setLoading = _useState5[1];
+  var _useState6 = React.useState(false),
+      touched = _useState6[0],
+      setTouched = _useState6[1];
+  var setSearch = function setSearch(value) {
+    _setSearch(value);
+    setPage(1);
+  };
+  var onSearch = React.useCallback(function () {
+    try {
+      return Promise.resolve(getOptions(search, page)).then(function (_ref) {
+        var newOptions = _ref.options,
+            lastPage = _ref.lastPage;
+        setLastPage(lastPage);
+        setOptions([].concat(newOptions));
+        setLoading(false);
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [item, search, page]);
+  React.useEffect(function () {
+    setOptions([]);
+    setSearch('');
+    setTouched(false);
+  }, [item]);
+  React.useEffect(function () {
+    if (isDynamic && !touched) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    var timeoutId = setTimeout(function () {
+      return onSearch();
+    }, 250);
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, [touched, onSearch]);
+  var onClickOption = function onClickOption(index) {
+    var option = options[index];
+    setAppliedFilters(function (prev) {
+      var newState = [].concat(prev);
+      var index = newState.findIndex(function (filter) {
+        return filter.name === item.name;
+      });
+      if (index !== -1) {
+        if (newState[index].value === option.value) return prev;
+        newState[index].value = option.value;
+        return [].concat(newState);
+      }
+      newState.push({
+        name: item.name,
+        labels: {
+          filter: isString(item.label) ? {
+            text: item.label,
+            element: item.label
+          } : item.label,
+          option: isString(option.label) ? {
+            text: option.label,
+            element: option.label
+          } : option.label
+        },
+        value: option.value
+      });
+      return newState;
+    });
+  };
+  var optionsParser = function optionsParser(option) {
+    return {
+      label: option.label,
+      data: {
+        value: option.value
+      },
+      onClick: onClickOption
+    };
+  };
+  var onScrollEnd = function onScrollEnd() {
+    if (lastPage) return;
+    setPage(function (prev) {
+      return prev + 1;
+    });
+  };
+  var itemSpacing = item.optionSpacing || isDynamic ? 's3' : 's1';
+  return React__default.createElement(Menu, {
+    open: true,
+    axis: 'x',
+    options: options.map(optionsParser),
+    close: close,
+    width: isDynamic ? '275px' : '160px',
+    height: '261px',
+    containerSpacing: {
+      top: 's3',
+      left: 's1',
+      bottom: isDynamic ? 's3' : 's1'
+    },
+    onScrollEnd: onScrollEnd,
+    itemSpacing: {
+      top: itemSpacing,
+      left: 's1',
+      bottom: itemSpacing
+    },
+    bordered: isDynamic,
+    before: React__default.createElement(Header$a, {
+      title: item.label,
+      search: [search, setSearch],
+      touched: [touched, setTouched],
+      allowEmptySearch: item.allowEmptySearch,
+      withSearch: isDynamic
+    }),
+    loading: loading,
+    innerContent: isDynamic && options.length === 0 ? React__default.createElement(EmptyMessage, null, function () {
+      if (search !== '') {
+        return React__default.createElement(React__default.Fragment, null, "Nenhum resultado foi encontrado");
+      }
+      return React__default.createElement(React__default.Fragment, null, "Utilize a busca para pesquisar por ", React__default.createElement("br", null), isString(item.label) ? item.label : item.label.text);
+    }()) : undefined
+  });
+};
+var FilterMenu = function FilterMenu(props) {
+  var _useState = React.useState(-1),
+      active = _useState[0],
+      setActive = _useState[1];
+  var items = props.items.map(function (item) {
+    return {
+      label: item.label,
+      delimiter: item.delimiter,
+      keepOpen: true,
+      caret: true,
+      onClick: function onClick(index) {
+        setActive(function (prev) {
+          return prev === index ? -1 : index;
+        });
+      }
+    };
+  });
+  var selected = active >= 0 && active < props.items.length ? props.items[active] : null;
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Menu, {
+    open: props.open,
+    options: items,
+    close: props.close,
+    width: '160px',
+    height: '261px',
+    containerSpacing: {
+      top: 's1',
+      left: 's1',
+      bottom: 's1'
+    },
+    itemSpacing: {
+      top: 's1',
+      left: 's1',
+      bottom: 's1'
+    }
+  }, selected && React__default.createElement(Submenu, {
+    item: selected,
+    close: function close() {
+      return setActive(-1);
+    },
+    setAppliedFilters: props.setAppliedFilters
+  })));
+};
 var theme = {
   sizes: sizes,
   fontSizes: fontSizes
@@ -15713,14 +16087,14 @@ var theme$1 = {
   button: theme
 };
-var _templateObject$F;
-var FontStyles = styled.createGlobalStyle(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n"])));
+var _templateObject$H;
+var FontStyles = styled.createGlobalStyle(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n"])));
 var Globals = function Globals() {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(FontStyles, null));
 };
-var _templateObject$G;
+var _templateObject$I;
 var getColor$1 = function getColor(color, opacity) {
   if (opacity === void 0) {
@@ -15735,7 +16109,7 @@ var useTypography = function useTypography(typography) {
       fontFamily = _typographies$typogra.fontFamily,
       fontWeight = _typographies$typogra.fontWeight,
       fontSize = _typographies$typogra.fontSize;
-  return styled.css(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n  "])), fontFamily, fontWeight, fontSize);
+  return styled.css(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n  "])), fontFamily, fontWeight, fontSize);
 };
 var isDarkColor = function isDarkColor(color, ifDark, ifLight) {
@@ -15795,6 +16169,7 @@ exports.MwCalendarInterval = CalendarInterval;
 exports.MwCard = Card;
 exports.MwDatePicker = Calendar;
 exports.MwEllipsisContainer = EllipsisContainer$1;
+exports.MwFilterMenu = FilterMenu;
 exports.MwIcon = Icon;
 exports.MwIndicator = Indicator;
 exports.MwInput = Input$3;