@mw-kit/mw-ui 1.7.91 → 1.7.93

package/dist/index.modern.js

@@ -12225,8 +12225,8 @@ var EllipsisContainer$1 = function EllipsisContainer$1(props) {
   }));
 };
 
-var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1;
-var IconContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 17px;\n\n  background-color: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 0;\n"])));
+var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1;
+var IconContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 17px;\n\n  background-color: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 0;\n\n  cursor: auto;\n"])));
 var ChildrenContainer = styled(EllipsisContainer$1)(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  bottom: 0;\n  left: 0;\n  line-height: 19px;\n  display: flex;\n  gap: calc(", " / 2);\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s1;
@@ -12288,7 +12288,7 @@ var InputContainer = styled.div(_templateObject11$1 || (_templateObject11$1 = _t
   var width = _ref12.width;
   return width || '100%';
 });
-var Label = styled.label(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: 17px;\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n\n  ", "\n\n  > ", " > ", " {\n    bottom: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref13) {
+var Label = styled.label(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: 17px;\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n\n  ", "\n\n  > ", " > ", " {\n    bottom: ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref13) {
   var theme = _ref13.theme;
   return theme.useTypography('p');
 }, function (_ref14) {
@@ -12307,44 +12307,48 @@ var Label = styled.label(_templateObject12$1 || (_templateObject12$1 = _taggedTe
       paddingless = _ref17.$paddingless;
   return paddingless ? '2px' : "calc(" + theme.spacings.s2 + " + 1px)";
 }, function (_ref18) {
-  var readOnly = _ref18.$readOnly,
-      disabled = _ref18.$disabled,
-      loading = _ref18.$loading;
-  if (loading || readOnly || disabled) return;
-  return css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
+  var disabled = _ref18.$disabled;
+  if (!disabled) return;
+  return css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n      > ", ":after {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n      }\n    "])), InputContainer);
 }, function (_ref19) {
-  var theme = _ref19.theme,
-      iconWidths = _ref19.$iconWidths,
-      position = _ref19.$iconPosition,
-      paddingless = _ref19.$paddingless;
+  var readOnly = _ref19.$readOnly,
+      disabled = _ref19.$disabled,
+      loading = _ref19.$loading;
+  if (loading || readOnly || disabled) return;
+  return css(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
+}, function (_ref20) {
+  var theme = _ref20.theme,
+      iconWidths = _ref20.$iconWidths,
+      position = _ref20.$iconPosition,
+      paddingless = _ref20.$paddingless;
   if (iconWidths.length < 1) return;
   var width = "calc(" + iconWidths.join(' + ') + " + " + theme.spacings.s1 + " / 2 * " + (iconWidths.length - 1) + ")";
   var padding = paddingless ? '0px' : theme.spacings.s3;
 
   if (position === 'right') {
-    return css(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n        > ", " > ", " {\n          width: ", ";\n          right: calc(", " / 2);\n        }\n\n        > ", " > ", " {\n          padding-right: calc(", " + ", ");\n          ~ ", " {\n            padding-right: calc(", " + ", ");\n          }\n        }\n      "])), InputContainer, IconContainer, width, padding, InputContainer, Input, padding, width, ChildrenContainer, padding, width);
+    return css(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n        > ", " > ", " {\n          width: ", ";\n          right: calc(", " / 2);\n        }\n\n        > ", " > ", " {\n          padding-right: calc(", " + ", ");\n          ~ ", " {\n            padding-right: calc(", " + ", ");\n          }\n        }\n      "])), InputContainer, IconContainer, width, padding, InputContainer, Input, padding, width, ChildrenContainer, padding, width);
   }
 
-  return css(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n      > ", " > ", " {\n        width: ", ";\n        left: calc(", " / 2);\n      }\n\n      > ", " > ", " {\n        padding-left: calc(", " + ", ");\n        ~ ", " {\n          padding-left: calc(", " + ", ");\n        }\n      }\n    "])), InputContainer, IconContainer, width, padding, InputContainer, Input, padding, width, ChildrenContainer, padding, width);
+  return css(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n      > ", " > ", " {\n        width: ", ";\n        left: calc(", " / 2);\n      }\n\n      > ", " > ", " {\n        padding-left: calc(", " + ", ");\n        ~ ", " {\n          padding-left: calc(", " + ", ");\n        }\n      }\n    "])), InputContainer, IconContainer, width, padding, InputContainer, Input, padding, width, ChildrenContainer, padding, width);
 });
-var LabelText = styled.div(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n\n  ", "\n\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref20) {
-  var viewMode = _ref20.$viewMode;
+var LabelText = styled.div(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n\n  ", "\n\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref21) {
+  var viewMode = _ref21.$viewMode;
   if (!viewMode) return;
-  return css(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n      font-weight: bold;\n    "])));
-}, function (_ref21) {
-  var theme = _ref21.theme,
-      viewMode = _ref21.$viewMode;
-  return theme.spacings[viewMode ? 's3' : 's1'];
+  return css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n      font-weight: bold;\n    "])));
 }, function (_ref22) {
-  var required = _ref22.$required,
+  var theme = _ref22.theme,
       viewMode = _ref22.$viewMode;
+  return theme.spacings[viewMode ? 's3' : 's1'];
+}, function (_ref23) {
+  var required = _ref23.$required,
+      viewMode = _ref23.$viewMode;
   if (!required || viewMode) return;
-  return css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
-var ViewModeContainer = styled.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref23) {
-  var children = _ref23.children;
+var ViewModeContainer = styled.div(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref24) {
+  var children = _ref24.children;
   if (children) return;
-  return css(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n      :before {\n        content: ' ';\n        white-space: pre;\n      }\n    "])));
+  return css(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose(["\n      :before {\n        content: ' ';\n        white-space: pre;\n      }\n    "])));
 });
 
 var defaultValue = {
@@ -12915,8 +12919,8 @@ var ScrollContainer = React__default.forwardRef(function (props, ref) {
 });
 ScrollContainer.displayName = 'ScrollContainer';
 
-var _templateObject$b, _templateObject2$9, _templateObject3$9, _templateObject4$6, _templateObject5$5, _templateObject6$4, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$3;
-var Option = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: ", ";\n  color: ", ";\n  display: flex;\n  gap: ", ";\n\n  > :nth-child(1) {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    max-width: 100%;\n  }\n\n  ", ";\n\n  ", ";\n\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_ref) {
+var _templateObject$b, _templateObject2$9, _templateObject3$9, _templateObject4$6, _templateObject5$5, _templateObject6$4, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$3, _templateObject11$3;
+var Option = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: ", ";\n  color: ", ";\n  display: flex;\n  gap: ", ";\n\n  > :nth-child(1) {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    max-width: 100%;\n  }\n\n  ", ";\n\n  ", ";\n\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -12929,7 +12933,7 @@ var Option = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplat
   var theme = _ref4.theme;
   return theme.spacings.s1;
 }, function (_ref5) {
-  var disabled = _ref5.disabled;
+  var disabled = _ref5.$disabled;
 
   if (!disabled) {
     return css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n        cursor: pointer;\n      "])));
@@ -12937,7 +12941,7 @@ var Option = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplat
 
   return css(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      opacity: 0.3;\n    "])));
 }, function (_ref6) {
-  var border = _ref6.border,
+  var border = _ref6.$border,
       theme = _ref6.theme;
   if (!border) return;
   var config = getBorder(border);
@@ -12952,10 +12956,17 @@ var Option = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplat
   });
 }, function (_ref7) {
   var theme = _ref7.theme;
-  return theme.colors.iceWhite;
+  return theme.getColor('blue', 15);
+}, function (_ref8) {
+  var highlighted = _ref8.$highlighted;
+  if (!highlighted) return;
+  return css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), function (_ref9) {
+    var theme = _ref9.theme;
+    return theme.getColor('blue', 15);
+  });
 });
-var Container$2 = styled(AbsoluteContainer)(_templateObject5$5 || (_templateObject5$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 (_ref8) {
-  var theme = _ref8.theme;
+var Container$2 = styled(AbsoluteContainer)(_templateObject6$4 || (_templateObject6$4 = _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 (_ref10) {
+  var theme = _ref10.theme;
   return theme.colors.white;
 }, function (props) {
   if (!props.containerSpacing) return;
@@ -12963,46 +12974,76 @@ var Container$2 = styled(AbsoluteContainer)(_templateObject5$5 || (_templateObje
   var tmp = spacing.split(' ');
   tmp[1] = "calc(" + props.theme.spacings.s1 + " / 2)";
   spacing = tmp.join(' ');
-  return css(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n          padding: ", ";\n        "])), spacing);
-}, function (_ref9) {
-  var bordered = _ref9.bordered;
+  return css(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n          padding: ", ";\n        "])), spacing);
+}, function (_ref11) {
+  var bordered = _ref11.bordered;
   if (!bordered) return;
-  return css(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n        ", " {\n          :not(:last-child) {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n      "])), Option, function (_ref10) {
-    var theme = _ref10.theme;
+  return css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          :not(:last-child) {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n      "])), Option, function (_ref12) {
+    var theme = _ref12.theme;
     return theme.getColor('greyishBlue', 10);
   });
 }, function (props) {
   var theme = props.theme;
 
   if (!props.itemSpacing) {
-    return css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n          ", " {\n            margin: ", " 0px ", "\n              ", ";\n          }\n        "])), Delimiter, theme.spacings.s1, theme.spacings.s1, theme.spacings.s1);
+    return css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n          ", " {\n            margin: ", " 0px ", "\n              ", ";\n          }\n        "])), Delimiter, theme.spacings.s1, theme.spacings.s1, theme.spacings.s1);
   }
 
   var spacing = getSpacings(props.itemSpacing, {
     right: '0'
   });
-  return css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          padding: ", ";\n        }\n        ", " {\n          margin: ", ";\n        }\n      "])), Option, spacing, Delimiter, spacing);
+  return css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          padding: ", ";\n        }\n        ", " {\n          margin: ", ";\n        }\n      "])), Option, spacing, Delimiter, spacing);
 });
-var Delimiter = styled.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  border-bottom: 1px solid ", ";\n  margin: 14px;\n  width: calc(100% - 28px);\n"])), function (_ref11) {
-  var theme = _ref11.theme;
+var Delimiter = styled.div(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  border-bottom: 1px solid ", ";\n  margin: 14px;\n  width: calc(100% - 28px);\n"])), function (_ref13) {
+  var theme = _ref13.theme;
   return theme.useTypography('p');
-}, function (_ref12) {
-  var theme = _ref12.theme;
+}, function (_ref14) {
+  var theme = _ref14.theme;
   return theme.colors.greyishBlue;
 });
 
+var EmptyLabel = function EmptyLabel(_ref) {
+  var label = _ref.label;
+  return React__default.createElement(React__default.Fragment, {
+    children: label
+  });
+};
+
+var isVisible = function isVisible(elem, bound) {
+  var docViewTop = bound.scrollTop;
+  var docViewBottom = docViewTop + bound.offsetHeight;
+  var elemTop = elem.offsetTop;
+  var elemBottom = elemTop + elem.offsetHeight;
+  return elemBottom <= docViewBottom && elemTop >= docViewTop;
+};
+
 var MenuComponent = function MenuComponent(props, ref) {
   var _props = _extends({}, props),
       close = _props.close,
       options = _props.options,
-      children = _props.children;
+      children = _props.children,
+      highlight = _props.highlight;
+
+  var _useState = useState(null),
+      scrollRef = _useState[0],
+      setScrollRef = _useState[1];
 
-  var absoluteContainerProps = filterObject(props, ['scrollSpacing', 'onScrollEnd', 'before', 'after', 'close', 'options', 'loading', 'children', 'emptyContent'], {
+  useEffect(function () {
+    if (!scrollRef || highlight === undefined) return;
+    var element = scrollRef.children[highlight];
+    if (!element) return;
+    if (isVisible(element, scrollRef)) return;
+    scrollRef.scrollTo(0, element.offsetTop);
+  }, [highlight, scrollRef]);
+  var absoluteContainerProps = filterObject(props, ['scrollSpacing', 'scrollTabIndex', 'label', 'rules', 'onClickOption', 'onScrollEnd', 'before', 'after', 'close', 'options', 'loading', 'children', 'emptyContent', 'highlight'], {
     itemSpacing: 's1'
   });
+  var rules = props.rules || [];
+  var LabelComponent = props.label || EmptyLabel;
   return React__default.createElement(Container$2, Object.assign({}, absoluteContainerProps, {
     ref: ref
   }), React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollContainer, {
+    ref: setScrollRef,
     onScrollEnd: props.onScrollEnd,
     before: props.before,
     after: props.after,
@@ -13011,7 +13052,8 @@ var MenuComponent = function MenuComponent(props, ref) {
       content: props.emptyContent
     } : undefined,
     spacing: props.scrollSpacing,
-    loading: props.loading
+    loading: props.loading,
+    tabIndex: props.scrollTabIndex
   }, options.map(function (option, index) {
     var _option = _extends({}, option),
         delimiter = _option.delimiter,
@@ -13023,23 +13065,23 @@ var MenuComponent = function MenuComponent(props, ref) {
     var onClick;
     var disabled = option.disabled;
 
-    var OptionContent = function OptionContent(_ref) {
-      var children = _ref.children;
+    var OptionContent = function OptionContent(_ref2) {
+      var children = _ref2.children;
       return children;
     };
 
     if (!disabled) {
-      var rule = (option.rules || []).map(function (rule) {
+      var rule = rules.map(function (rule) {
         return rule(index, data);
       }).find(function (result) {
         return result !== true;
       });
 
       if (rule === true || rule === undefined) {
-        var _onClick = option.onClick || function () {};
+        var _onClick = props.onClickOption || function () {};
 
         onClick = function onClick(e) {
-          _onClick(index, option, e);
+          _onClick(index, option.data, e);
 
           closeMenu();
         };
@@ -13047,8 +13089,8 @@ var MenuComponent = function MenuComponent(props, ref) {
         disabled = true;
 
         if (rule !== false) {
-          OptionContent = function OptionContent(_ref2) {
-            var children = _ref2.children;
+          OptionContent = function OptionContent(_ref3) {
+            var children = _ref3.children;
             return React__default.createElement(Popup, Object.assign({
               on: 'click',
               position: 'left center',
@@ -13069,21 +13111,16 @@ var MenuComponent = function MenuComponent(props, ref) {
     }
 
     OptionContent.displayName = 'OptionContent';
-    var label = option.label;
-    var labelOptions = filterObject(option, ['onClick', 'label', 'rules']);
-    labelOptions.disabled = disabled;
-    var LabelComponent = typeof label === 'function' ? label : function () {
-      return React__default.createElement(React__default.Fragment, {
-        children: label
-      });
-    };
     return React__default.createElement(React__default.Fragment, {
       key: index
     }, React__default.createElement(OptionContent, null, React__default.createElement(Option, {
       onClick: onClick,
-      disabled: disabled,
-      border: option.border
-    }, React__default.createElement("div", null, React__default.createElement(LabelComponent, Object.assign({}, option))), caret ? React__default.createElement(Icon, {
+      "$disabled": disabled,
+      "$border": option.border,
+      "$highlighted": index === highlight
+    }, React__default.createElement("div", null, React__default.createElement(LabelComponent, Object.assign({}, option, {
+      disabled: disabled
+    }))), caret ? React__default.createElement(Icon, {
       type: 'semantic',
       icon: 'caret right',
       width: '14px'
@@ -13254,7 +13291,7 @@ var Indicator = function Indicator(props) {
   }, props)));
 };
 
-var _templateObject$e, _templateObject2$c, _templateObject3$b, _templateObject4$8, _templateObject5$7, _templateObject6$6, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$3;
+var _templateObject$e, _templateObject2$c, _templateObject3$b, _templateObject4$8, _templateObject5$7, _templateObject6$6, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$4;
 var Footer = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  > button:last-child {\n    margin-left: auto;\n  }\n"])));
 var WeekContainer = styled.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n\n  :not(:first-child) {\n    border-top: 1px solid ", ";\n  }\n\n  > * {\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    width: 32px;\n    height: 32px;\n\n    color: ", ";\n    box-shadow: none;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n\n    border: 1px solid transparent;\n    :not(:last-child) {\n      border-right-color: ", ";\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -13318,7 +13355,7 @@ var DayContainer = styled.button(_templateObject4$8 || (_templateObject4$8 = _ta
 });
 var DayIndicator = styled(Indicator).attrs({
   size: 'mini'
-})(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: calc(", " - 1px);\n  left: calc(50% - (", " / 2) + 1px);\n"])), sizes.mini, sizes.mini);
+})(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: calc(", " - 1px);\n  left: calc(50% - (", " / 2) + 1px);\n"])), sizes.mini, sizes.mini);
 
 var getCalendar = function getCalendar(d) {
   var date = new Date(d.getTime());
@@ -14596,15 +14633,99 @@ var Date$1 = React__default.forwardRef(function (props, ref) {
 });
 Date$1.displayName = 'Date';
 
+var _templateObject$l, _templateObject2$f, _templateObject3$d, _templateObject4$a;
+var RelativeContainer$2 = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n  ", ";\n"])), function (_ref) {
+  var width = _ref.width;
+  return !width ? null : css(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n          width: ", ";\n        "])), width);
+});
+var EmptyContentContainer = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.spacings.s3;
+});
+var HiddenInput = styled.input(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n  width: 0;\n  height: 0;\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  outline: none;\n"])));
+
+var isAvailable = function isAvailable(index, option, rules) {
+  return !option.disabled && !(rules || []).some(function (rule) {
+    return rule(index, option) !== true;
+  });
+};
+
+var useNavigation = function useNavigation(props) {
+  var _props$highlight = props.highlight,
+      highlight = _props$highlight[0],
+      setHighlight = _props$highlight[1],
+      options = props.options,
+      onSelectHighlight = props.onSelectHighlight,
+      rules = props.rules;
+  var onKeyDown = useCallback(function (e) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+
+      var getNext = function getNext(index, current) {
+        var option = options[index];
+        if (!option) return current;
+
+        if (isAvailable(index, option, rules)) {
+          return index;
+        }
+
+        return getNext(index + 1, current);
+      };
+
+      setHighlight(function (prev) {
+        return getNext(prev + 1, prev);
+      });
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+
+      var getPrev = function getPrev(index, current) {
+        var option = options[index];
+        if (!option) return current;
+
+        if (isAvailable(index, option, rules)) {
+          return index;
+        }
+
+        return getPrev(index - 1, current);
+      };
+
+      setHighlight(function (prev) {
+        return getPrev(prev - 1, prev);
+      });
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      var option = options[highlight];
+
+      if (option) {
+        onSelectHighlight(highlight, option);
+      }
+    }
+  }, [highlight, options, rules]);
+
+  var onFocus = function onFocus(e) {
+    setHighlight(0);
+  };
+
+  var onBlur = function onBlur(e) {
+    setHighlight(-1);
+  };
+
+  return {
+    onKeyDown: onKeyDown,
+    onFocus: onFocus,
+    onBlur: onBlur
+  };
+};
+
 var Provider$1 = React__default.createContext({});
 var useContext$1 = function useContext() {
   return React__default.useContext(Provider$1);
 };
 
-var _templateObject$l, _templateObject2$f;
-var HeaderContainer = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$m, _templateObject2$g;
+var HeaderContainer = styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n    padding: ", " 0 ", " ", ";\n  "])), theme.spacings.s3, theme.spacings.s1, theme.spacings.s3);
+  return css(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n    padding: ", " 0 ", " ", ";\n  "])), theme.spacings.s3, theme.spacings.s1, theme.spacings.s3);
 });
 
 var Header$1 = function Header() {
@@ -14614,66 +14735,40 @@ var Header$1 = function Header() {
     return React__default.createElement(React__default.Fragment, null);
   }
 
-  var _context$search = context.search,
-      search = _context$search[0],
-      _context$searchInput = context.searchInput,
+  var _context$searchInput = context.searchInput,
       searchInput = _context$searchInput[0],
-      setSearchInput = _context$searchInput[1],
-      onClearSearch = context.onClearSearch,
-      onSearch = context.onSearch,
-      loading = context.loading;
+      setSearchInput = _context$searchInput[1];
   return React__default.createElement(HeaderContainer, null, React__default.createElement(Input$1, {
     type: 'search',
     placeholder: 'Pesquisa',
     setValue: setSearchInput,
     value: searchInput,
-    onPressEnter: onSearch,
-    clearable: searchInput !== '' && searchInput === search ? onClearSearch : undefined,
     icon: {
       icon: {
         type: 'feather',
-        icon: 'search',
-        onClick: onSearch
+        icon: 'search'
       }
-    },
-    loading: loading
+    }
   }));
 };
 
-var getOptions = function getOptions(setValue, options, selected) {
+var getOptions = function getOptions(options, selected) {
   return options.map(function (option) {
-    var value = option.value,
-        onClick = option.onClick,
-        rules = option.rules,
-        disabled = option.disabled;
     var isSelected = option.value === (selected === null || selected === void 0 ? void 0 : selected.value);
-
-    var data = _extends({}, option.data, {
-      selected: isSelected,
-      value: value
-    });
-
-    var LabelComponent = option.label;
+    var data = {
+      data: option.data,
+      value: option.value
+    };
     var parsed = {
-      label: typeof LabelComponent !== 'function' ? LabelComponent : function (_ref) {
-        var disabled = _ref.disabled;
-        return React__default.createElement(LabelComponent, Object.assign({}, {
-          value: value,
-          data: data,
-          disabled: disabled
-        }));
-      },
-      onClick: onClick || function () {
-        setValue(isSelected ? '' : value, option.data);
-      },
-      disabled: disabled,
-      rules: rules,
       border: {
         left: {
           color: isSelected ? 'blue' : 'transparent'
         }
       },
-      data: data
+      data: data,
+      label: option.label,
+      disabled: option.disabled,
+      keepOpen: true
     };
     return parsed;
   });
@@ -14689,17 +14784,17 @@ var getSelected = function getSelected(value, options) {
 };
 
 var getInputContent = function getInputContent(props, selectedOption) {
-  if (typeof selectedOption.label !== 'function') return selectedOption.label;
-  var LabelComponent = selectedOption.label;
-  return React__default.createElement(LabelComponent, {
-    data: _extends({}, selectedOption.data),
-    value: selectedOption.value,
+  if (!props.optionLabel) return selectedOption.label;
+  var LabelComponent = props.optionLabel;
+  return React__default.createElement(LabelComponent, Object.assign({}, selectedOption, {
     disabled: props.disabled || props.loading,
     mode: 'placeholder'
-  });
+  }));
 };
 
-var useSelect = function useSelect(props, _ref2) {
+var useSelect = function useSelect(props, _ref, _ref2, setOpen) {
+  var highlight = _ref[0],
+      setHighlight = _ref[1];
   var options = _ref2[0],
       setOptions = _ref2[1];
 
@@ -14707,11 +14802,22 @@ var useSelect = function useSelect(props, _ref2) {
       selectedOption = _ref3[0],
       value = _ref3[1];
 
-  var parsedOptions = getOptions(props.setValue, options, selectedOption);
+  var parsedOptions = getOptions(options, selectedOption);
 
   var onReset = function onReset() {};
 
   var inputContent = selectedOption ? getInputContent(props, selectedOption) : props.value;
+
+  var onSelect = function onSelect(index, option) {
+    if (!isAvailable(index, option, props.rules)) {
+      return;
+    }
+
+    var isSelected = option.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value);
+    props.setValue(isSelected ? '' : option.value, option.data);
+    setOpen(false);
+  };
+
   var parsed = {
     parsedOptions: parsedOptions,
     options: [options, setOptions],
@@ -14719,8 +14825,16 @@ var useSelect = function useSelect(props, _ref2) {
     onReset: onReset,
     menu: {
       itemSpacing: 's3',
-      before: React__default.createElement(Header$1, null),
-      maxHeight: props.maxHeight || '180px'
+      before: React__default.createElement(React__default.Fragment, null, React__default.createElement(Header$1, null), React__default.createElement(HiddenInput, Object.assign({}, useNavigation({
+        highlight: [highlight, setHighlight],
+        options: options,
+        onSelectHighlight: onSelect,
+        rules: props.rules
+      })))),
+      maxHeight: props.maxHeight || props.search ? '238px' : '180px',
+      onClickOption: function onClickOption(index, option) {
+        onSelect(index, option);
+      }
     },
     getContext: function getContext(base, children) {
       return React__default.createElement(Provider$1.Provider, {
@@ -14787,13 +14901,13 @@ var Footer$1 = function Footer() {
   });
 };
 
-var _templateObject$m, _templateObject2$g, _templateObject3$d, _templateObject4$a;
-var Link = styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  ", "\n\n  color: ", ";\n\n  ", "\n"])), function (_ref) {
+var _templateObject$n, _templateObject2$h, _templateObject3$e, _templateObject4$b;
+var Link = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  ", "\n\n  color: ", ";\n\n  ", "\n"])), function (_ref) {
   var size = _ref.size;
   var _sizes = sizes$1[size || 'small'],
       fontSize = _sizes.fontSize,
       lineHeight = _sizes.lineHeight;
-  return css(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n    "])), fontSize, lineHeight);
+  return css(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n    "])), fontSize, lineHeight);
 }, function (_ref2) {
   var colorSetting = _ref2.colorSetting,
       theme = _ref2.theme;
@@ -14806,17 +14920,17 @@ var Link = styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateL
       disabled = _ref3.disabled,
       theme = _ref3.theme,
       colorSetting = _ref3.colorSetting;
-  return disabled ? css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n          opacity: 0.5;\n        "]))) : onClick ? css(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n          cursor: pointer;\n          :hover {\n            color: ", ";\n          }\n        "])), theme.colors[_extends({
+  return disabled ? css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n          opacity: 0.5;\n        "]))) : onClick ? css(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n          cursor: pointer;\n          :hover {\n            color: ", ";\n          }\n        "])), theme.colors[_extends({
     hover: 'blue'
   }, colorSetting && typeof colorSetting !== 'string' ? colorSetting : {}).hover]) : null;
 });
 
-var _templateObject$n, _templateObject2$h, _templateObject3$e;
-var HeaderContainer$1 = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$o, _templateObject2$i, _templateObject3$f;
+var HeaderContainer$1 = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n    padding: ", " 0 ", " ", ";\n  "])), theme.spacings.s3, theme.spacings.s1, theme.spacings.s3);
+  return css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n    padding: ", " 0 ", " ", ";\n  "])), theme.spacings.s3, theme.spacings.s1, theme.spacings.s3);
 });
-var SelectAllContainer = styled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n  display: flex;\n  justify-content: space-between;\n"])), function (_ref2) {
+var SelectAllContainer = styled.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n  display: flex;\n  justify-content: space-between;\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.spacings.s1;
 });
@@ -14831,14 +14945,9 @@ var Header$2 = function Header() {
   var _context$checked = context.checked,
       checked = _context$checked[0],
       setChecked = _context$checked[1],
-      _context$search = context.search,
-      search = _context$search[0],
       _context$searchInput = context.searchInput,
       searchInput = _context$searchInput[0],
       setSearchInput = _context$searchInput[1],
-      onSearch = context.onSearch,
-      onClearSearch = context.onClearSearch,
-      loading = context.loading,
       options = context.options;
 
   var onClick = function onClick() {
@@ -14860,16 +14969,12 @@ var Header$2 = function Header() {
     placeholder: 'Pesquisa',
     setValue: setSearchInput,
     value: searchInput,
-    onPressEnter: onSearch,
-    clearable: searchInput !== '' && searchInput === search ? onClearSearch : undefined,
     icon: {
       icon: {
         type: 'feather',
-        icon: 'search',
-        onClick: onSearch
+        icon: 'search'
       }
-    },
-    loading: loading
+    }
   }));
 };
 
@@ -14887,7 +14992,7 @@ var Label$2 = function Label(props) {
     checked: checked.findIndex(function (e) {
       return e.value === value;
     }) !== -1,
-    label: typeof LabelComponent !== 'function' ? LabelComponent : React__default.createElement(LabelComponent, Object.assign({}, props.option)),
+    label: LabelComponent ? React__default.createElement(LabelComponent, Object.assign({}, props.option)) : props.option.label,
     disabled: disabled,
     onChange: function onChange(event) {
       var isChecked = event.target.checked;
@@ -14915,32 +15020,21 @@ var Label$2 = function Label(props) {
       right: 's3',
       bottom: 's3'
     },
-    width: '100%'
+    width: '100%',
+    tabIndex: -1
   });
 };
 
-var getOptions$1 = function getOptions(options, value) {
+var getOptions$1 = function getOptions(options) {
   return options.map(function (option) {
-    var _label = option.label,
-        onClick = option.onClick;
     var data = {
       data: option.data,
       value: option.value
     };
     var parsed = {
-      label: function label(option) {
-        return React__default.createElement(Label$2, {
-          option: _extends({}, data, {
-            disabled: option.disabled
-          }),
-          label: _label,
-          value: value
-        });
-      },
-      onClick: onClick,
       data: data,
+      label: option.label,
       disabled: option.disabled,
-      rules: option.rules,
       keepOpen: true
     };
     return parsed;
@@ -14962,22 +15056,47 @@ var parseValue = function parseValue(value) {
   return parsed;
 };
 
-var useSelectMultiple = function useSelectMultiple(props, _ref) {
-  var options = _ref[0],
-      setOptions = _ref[1];
+var useSelectMultiple = function useSelectMultiple(props, _ref, _ref2, _setOpen) {
+  var highlight = _ref[0],
+      setHighlight = _ref[1];
+  var options = _ref2[0],
+      setOptions = _ref2[1];
   var initial = parseValue(props.value);
 
   var _useState = useState([].concat(initial)),
       checked = _useState[0],
       setChecked = _useState[1];
 
-  var parsedOptions = getOptions$1(options, initial);
+  var parsedOptions = getOptions$1(options);
   var inputContent = getInputContent$1(props.value);
 
   var onReset = function onReset() {
     setChecked([].concat(initial));
   };
 
+  var onSelectHighlight = function onSelectHighlight(index, option) {
+    if (!isAvailable(index, option, props.rules)) {
+      return;
+    }
+
+    setChecked(function (prev) {
+      var index = prev.findIndex(function (e) {
+        return e.value === option.value;
+      });
+
+      if (index < 0) {
+        return [].concat(prev, [{
+          data: option.data,
+          value: option.value
+        }]);
+      }
+
+      var news = [].concat(prev);
+      news.splice(index, 1);
+      return news;
+    });
+  };
+
   var returnData = {
     parsedOptions: parsedOptions,
     options: [options, setOptions],
@@ -14985,12 +15104,27 @@ var useSelectMultiple = function useSelectMultiple(props, _ref) {
     onReset: onReset,
     menu: {
       itemSpacing: undefined,
-      before: React__default.createElement(Header$2, null),
+      before: React__default.createElement(React__default.Fragment, null, React__default.createElement(Header$2, null), React__default.createElement(HiddenInput, Object.assign({}, useNavigation({
+        highlight: [highlight, setHighlight],
+        options: options,
+        onSelectHighlight: onSelectHighlight,
+        rules: props.rules
+      })))),
       after: {
         fluid: true,
         children: React__default.createElement(Footer$1, null)
       },
-      maxHeight: props.maxHeight || (props.selectAll ? '269px' : '224px')
+      maxHeight: props.maxHeight || (props.selectAll ? '269px' : '224px'),
+      label: function label(option) {
+        return React__default.createElement(Label$2, {
+          option: _extends({}, option, {
+            value: option.data.value,
+            data: option.data.data
+          }),
+          label: props.optionLabel,
+          value: initial
+        });
+      }
     },
     getContext: function getContext(base, children) {
       return React__default.createElement(Provider$2.Provider, {
@@ -15033,16 +15167,6 @@ var useSelectMultiple = function useSelectMultiple(props, _ref) {
   return returnData;
 };
 
-var _templateObject$o, _templateObject2$i, _templateObject3$f;
-var RelativeContainer$2 = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  position: relative;\n  ", ";\n"])), function (_ref) {
-  var width = _ref.width;
-  return !width ? null : css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n          width: ", ";\n        "])), width);
-});
-var EmptyContentContainer = styled.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n"])), function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.spacings.s3;
-});
-
 var Select = React__default.forwardRef(function (props, ref) {
   var position = props.position,
       loader = props.loader,
@@ -15052,38 +15176,44 @@ var Select = React__default.forwardRef(function (props, ref) {
       options = _useState[0],
       setOptions = _useState[1];
 
-  var _ref = props.type === 'select-multiple' ? useSelectMultiple(props, [options, setOptions]) : useSelect(props, [options, setOptions]),
-      parsedOptions = _ref.parsedOptions,
-      inputContent = _ref.inputContent,
-      onReset = _ref.onReset,
-      menuProps = _ref.menu,
-      getContext = _ref.getContext,
-      onClear = _ref.onClear,
-      dirty = _ref.dirty;
-
-  var _useState2 = useState(true),
-      _loading = _useState2[0],
-      setLoading = _useState2[1];
+  var _useState2 = useState(-1),
+      highlight = _useState2[0],
+      setHighlight = _useState2[1];
 
-  var _useState3 = useState(''),
-      search = _useState3[0],
-      _setSearch = _useState3[1];
+  var _useState3 = useState(false),
+      open = _useState3[0],
+      setOpen = _useState3[1];
+
+  var hook = props.type === 'select-multiple' ? useSelectMultiple : useSelect;
+
+  var _hook = hook(props, [highlight, setHighlight], [options, setOptions], setOpen),
+      parsedOptions = _hook.parsedOptions,
+      inputContent = _hook.inputContent,
+      onReset = _hook.onReset,
+      menuProps = _hook.menu,
+      getContext = _hook.getContext,
+      onClear = _hook.onClear,
+      dirty = _hook.dirty;
+
+  var _useState4 = useState(true),
+      _loading = _useState4[0],
+      setLoading = _useState4[1];
 
-  var _useState4 = useState(''),
-      searchInput = _useState4[0],
-      setSearchInput = _useState4[1];
+  var _useState5 = useState(''),
+      search = _useState5[0],
+      _setSearch = _useState5[1];
 
-  var _useState5 = useState(1),
-      page = _useState5[0],
-      setPage = _useState5[1];
+  var _useState6 = useState(''),
+      searchInput = _useState6[0],
+      setSearchInput = _useState6[1];
 
-  var _useState6 = useState(false),
-      lastPage = _useState6[0],
-      setLastPage = _useState6[1];
+  var _useState7 = useState(1),
+      page = _useState7[0],
+      setPage = _useState7[1];
 
-  var _useState7 = useState(false),
-      open = _useState7[0],
-      setOpen = _useState7[1];
+  var _useState8 = useState(false),
+      lastPage = _useState8[0],
+      setLastPage = _useState8[1];
 
   var loading = props.loading || _loading;
 
@@ -15093,18 +15223,18 @@ var Select = React__default.forwardRef(function (props, ref) {
     setPage(1);
   };
 
-  var inputProps = filterObject(props, ['type', 'onScrollEnd', 'position', 'value', 'onClear', 'placeholder', 'initialLoader']);
+  var inputProps = filterObject(props, ['type', 'onScrollEnd', 'position', 'value', 'onClear', 'placeholder', 'initialLoader', 'onClickOption', 'rules', 'onScrollEnd', 'position', 'center', 'maxHeight', 'emptyContent', 'optionLabel']);
 
   var _onScrollEnd = props.onScrollEnd || function () {};
 
-  var onScrollEnd = function onScrollEnd() {
+  var onScrollEnd = function onScrollEnd(e) {
     if (!lastPage && !loading) {
       setPage(function (prev) {
         return prev + 1;
       });
     }
 
-    _onScrollEnd();
+    _onScrollEnd(e);
   };
 
   var onSubmit = useCallback(function () {
@@ -15113,9 +15243,9 @@ var Select = React__default.forwardRef(function (props, ref) {
       return Promise.resolve(loader(search, page)).then(function (optionsResult) {
         if (optionsResult === null) return;
 
-        var _ref2 = Array.isArray(optionsResult) ? [optionsResult, true] : [optionsResult.options, optionsResult.lastPage],
-            options = _ref2[0],
-            lastPage = _ref2[1];
+        var _ref = Array.isArray(optionsResult) ? [optionsResult, true] : [optionsResult.options, optionsResult.lastPage],
+            options = _ref[0],
+            lastPage = _ref[1];
 
         var initial = initialLoader ? initialLoader() : [];
         var filtered = initialLoader ? options.filter(function (x) {
@@ -15154,15 +15284,17 @@ var Select = React__default.forwardRef(function (props, ref) {
   useEffect(function () {
     setSearchInput(search);
   }, [search]);
-
-  var onSearch = function onSearch() {
-    setSearch(searchInput);
-  };
-
-  var onClearSearch = function onClearSearch() {
-    setSearchInput('');
-    setSearch('');
-  };
+  useEffect(function () {
+    if (page === 1) setHighlight(-1);
+  }, [page]);
+  useEffect(function () {
+    var timeoutId = setTimeout(function () {
+      return setSearch(searchInput);
+    }, 1000);
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, [searchInput]);
 
   var onClick = function onClick() {
     setOpen(function (prev) {
@@ -15173,11 +15305,7 @@ var Select = React__default.forwardRef(function (props, ref) {
   var isEmpty = (typeof props.value === 'string' || Array.isArray(props.value)) && props.value.length === 0;
   return getContext({
     setOpen: setOpen,
-    search: [search, setSearch],
-    searchInput: [searchInput, setSearchInput],
-    onSearch: onSearch,
-    onClearSearch: onClearSearch,
-    loading: loading
+    searchInput: [searchInput, setSearchInput]
   }, React__default.createElement(RelativeContainer$2, {
     ref: useOnClickOut(function () {
       return setOpen(false);
@@ -15188,6 +15316,17 @@ var Select = React__default.forwardRef(function (props, ref) {
     htmlReadOnly: true,
     onClick: onClick,
     loading: loading,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === ' ') {
+        setOpen(function (prev) {
+          return !prev;
+        });
+      } else if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
+        setOpen(true);
+      }
+
+      if (props.onKeyDown) props.onKeyDown(e);
+    },
     dirty: dirty,
     icon: {
       icon: {
@@ -15204,14 +15343,21 @@ var Select = React__default.forwardRef(function (props, ref) {
   } : {
     clearable: onClear
   }, {
-    children: loading ? '' : inputContent
+    children: inputContent
   })), React__default.createElement(Menu, Object.assign({}, menuProps, {
+    rules: (props.rules || []).map(function (rule) {
+      return function (index, data) {
+        return rule(index, data.data);
+      };
+    }),
+    highlight: highlight,
     open: open,
     close: function close() {
       return setOpen(false);
     },
     options: parsedOptions,
     onScrollEnd: onScrollEnd,
+    scrollTabIndex: -1,
     width: props.inputWidth || '100%',
     bordered: true,
     position: position,
@@ -15551,15 +15697,7 @@ var Component = React__default.forwardRef(function (props, ref) {
 
   var options = Object.keys(countries).map(function (iso) {
     return {
-      label: function label(option) {
-        var country = option.data;
-        return React__default.createElement(Label$3, null, React__default.createElement(Flag, {
-          iso: iso
-        }), country.name, React__default.createElement("span", null, "+", country.ddi));
-      },
-      onClick: function onClick() {
-        setCountry(countries[iso]);
-      },
+      label: country.name,
       data: countries[iso]
     };
   });
@@ -15625,6 +15763,16 @@ var Component = React__default.forwardRef(function (props, ref) {
       return setOpen(false);
     },
     options: options,
+    onClickOption: function onClickOption(_index, _ref) {
+      var iso = _ref.iso;
+      return setCountry(countries[iso]);
+    },
+    label: function label(option) {
+      var country = option.data;
+      return React__default.createElement(Label$3, null, React__default.createElement(Flag, {
+        iso: country.iso
+      }), country.name, React__default.createElement("span", null, "+", country.ddi));
+    },
     width: '100%',
     maxHeight: '165px',
     bordered: true,
@@ -15644,7 +15792,7 @@ var Phone = Object.assign(Component, {
   getPhoneDetails: getPhoneDetails
 });
 
-var _templateObject$r, _templateObject2$l, _templateObject3$h, _templateObject4$b, _templateObject5$9, _templateObject6$8, _templateObject7$8, _templateObject8$7, _templateObject9$7;
+var _templateObject$r, _templateObject2$l, _templateObject3$h, _templateObject4$c, _templateObject5$9, _templateObject6$8, _templateObject7$8, _templateObject8$7, _templateObject9$7;
 var RelativeContainer$4 = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  input {\n    color: transparent;\n  }\n"])));
 var LabelContainer$2 = styled.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -15660,7 +15808,7 @@ var Container$5 = styled.div(_templateObject3$h || (_templateObject3$h = _tagged
   var borderwidth = 1;
 
   if (paddingless) {
-    return css(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n        bottom: ", "px;\n        left: ", "px;\n        width: calc(100% - ", "px - ", ");\n        height: calc(17px + ", "px);\n      "])), borderwidth, borderwidth, borderwidth * 2, iconWidth, borderwidth * 2);
+    return css(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n        bottom: ", "px;\n        left: ", "px;\n        width: calc(100% - ", "px - ", ");\n        height: calc(17px + ", "px);\n      "])), borderwidth, borderwidth, borderwidth * 2, iconWidth, borderwidth * 2);
   }
 
   return css(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n      bottom: ", "px;\n      left: ", "px;\n      width: calc(\n        100% - ", "px - ", " - ", "\n      );\n      height: calc(31px + ", "px);\n      padding: ", " 0 ", " ", ";\n    "])), borderwidth, borderwidth, borderwidth * 2, iconWidth, theme.spacings.s3, borderwidth * 2, theme.spacings.s2, theme.spacings.s2, theme.spacings.s3);
@@ -15794,7 +15942,7 @@ var DatePicker = React__default.forwardRef(function (props, ref) {
 });
 DatePicker.displayName = 'DatePicker';
 
-var _templateObject$s, _templateObject2$m, _templateObject3$i, _templateObject4$c, _templateObject5$a, _templateObject6$9, _templateObject7$9, _templateObject8$8;
+var _templateObject$s, _templateObject2$m, _templateObject3$i, _templateObject4$d, _templateObject5$a, _templateObject6$9, _templateObject7$9, _templateObject8$8;
 var LabelContainer$3 = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n  display: flex;\n  align-items: center;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
@@ -15809,7 +15957,7 @@ var LabelContainer$3 = styled.div(_templateObject$s || (_templateObject$s = _tag
   if (!keepSpace || children) return;
   return css(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n      :before {\n        content: '';\n        white-space: pre;\n      }\n    "])));
 });
-var Label$4 = styled.label(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n  position: relative;\n  align-items: center;\n\n  ", "\n\n  ", "\n\n  > input {\n    position: absolute;\n    height: 0%;\n    width: 0%;\n    opacity: 0;\n  }\n\n  > span {\n    position: relative;\n    width: 50px;\n    height: calc(", " + 1px);\n    background-color: ", ";\n    border-radius: 20px;\n    transition-property: background-color;\n    transition-duration: 0.4s;\n    transition-timing-function: ease-in-out;\n    box-sizing: content-box;\n    :before {\n      content: '';\n      transition-property: left;\n      transition-duration: 0.4s;\n      transition-timing-function: ease-in-out;\n      position: absolute;\n      border-width: 1px;\n      border-style: solid;\n      border-radius: 100%;\n      left: 0;\n      box-shadow: 0px 1px 3px ", ";\n      width: calc(", " - 1px);\n      height: calc(", " - 1px);\n      background-color: ", ";\n    }\n  }\n\n  > input:checked + span {\n    :before {\n      left: calc(100% - ", " - 1px);\n    }\n  }\n"])), function (_ref4) {
+var Label$4 = styled.label(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n  position: relative;\n  align-items: center;\n\n  ", "\n\n  ", "\n\n  > input {\n    position: absolute;\n    height: 0%;\n    width: 0%;\n    opacity: 0;\n  }\n\n  > span {\n    position: relative;\n    width: 50px;\n    height: calc(", " + 1px);\n    background-color: ", ";\n    border-radius: 20px;\n    transition-property: background-color;\n    transition-duration: 0.4s;\n    transition-timing-function: ease-in-out;\n    box-sizing: content-box;\n    :before {\n      content: '';\n      transition-property: left;\n      transition-duration: 0.4s;\n      transition-timing-function: ease-in-out;\n      position: absolute;\n      border-width: 1px;\n      border-style: solid;\n      border-radius: 100%;\n      left: 0;\n      box-shadow: 0px 1px 3px ", ";\n      width: calc(", " - 1px);\n      height: calc(", " - 1px);\n      background-color: ", ";\n    }\n  }\n\n  > input:checked + span {\n    :before {\n      left: calc(100% - ", " - 1px);\n    }\n  }\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.spacings.s1;
 }, function (_ref5) {
@@ -15968,7 +16116,7 @@ var NavBar = styled.div(_templateObject$x || (_templateObject$x = _taggedTemplat
   return theme.colors.blue;
 });
 
-var _templateObject$y, _templateObject2$q, _templateObject3$l, _templateObject4$d, _templateObject5$b;
+var _templateObject$y, _templateObject2$q, _templateObject3$l, _templateObject4$e, _templateObject5$b;
 var Label$5 = styled.label(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: 17px;\n\n  ", ";\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n\n  ", "\n\n  > ", " {\n    ", "\n  }\n\n  :not(:hover) ", " {\n    height: 0;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
@@ -15984,7 +16132,7 @@ var Label$5 = styled.label(_templateObject$y || (_templateObject$y = _taggedTemp
 }, function (_ref3) {
   var disabled = _ref3.$disabled;
   if (!disabled) return;
-  return css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, LabelContainer$4, function (_ref4) {
   var required = _ref4.$required,
       viewMode = _ref4.$viewMode;
@@ -16287,7 +16435,7 @@ var Range = React__default.forwardRef(function (props, ref) {
 });
 Range.displayName = 'input';
 
-var _templateObject$E, _templateObject2$t, _templateObject3$n, _templateObject4$e, _templateObject5$c, _templateObject6$a, _templateObject7$a;
+var _templateObject$E, _templateObject2$t, _templateObject3$n, _templateObject4$f, _templateObject5$c, _templateObject6$a, _templateObject7$a;
 var LabelContainer$5 = styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
@@ -16302,7 +16450,7 @@ var Label$6 = styled.label(_templateObject2$t || (_templateObject2$t = _taggedTe
     return css(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
   }
 
-  return css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, function (_ref4) {
   var required = _ref4.required;
   if (!required) return;
@@ -16536,7 +16684,7 @@ var parse = function parse(value) {
   });
 };
 
-var _templateObject$F, _templateObject2$u, _templateObject3$o, _templateObject4$f, _templateObject5$d, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject10$7, _templateObject11$4, _templateObject12$3;
+var _templateObject$F, _templateObject2$u, _templateObject3$o, _templateObject4$g, _templateObject5$d, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject10$7, _templateObject11$5, _templateObject12$3;
 var RelativeContainer$5 = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  position: relative;\n  user-select: none;\n  min-width: 220px;\n\n  > input,\n  > label > input {\n    color: transparent;\n    background-color: transparent;\n    width: 1px;\n    height: 1px;\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    border: 0;\n    padding: 0;\n    overflow: hidden;\n    outline: none;\n    box-shadow: none;\n  }\n"])));
 var LabelContainer$6 = styled.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n  flex: 1;\n\n  :first-child {\n    text-align: left;\n  }\n  :not(:first-child) {\n    text-align: center;\n  }\n\n  ", "\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -16551,7 +16699,7 @@ var LabelContainer$6 = styled.div(_templateObject2$u || (_templateObject2$u = _t
 }, function (_ref4) {
   var onClick = _ref4.onClick;
   if (!onClick) return;
-  return css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
+  return css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
 var Container$6 = styled.div(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  white-space: nowrap;\n  gap: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n\n  width: 100%;\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref5) {
   var theme = _ref5.theme;
@@ -16586,7 +16734,7 @@ var Button$4 = styled.button(_templateObject9$8 || (_templateObject9$8 = _tagged
   if (!onClick) return;
   return css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
-var LabelText$1 = styled.label(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref12) {
+var LabelText$1 = styled.label(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref12) {
   var theme = _ref12.theme;
   return theme.spacings.s1;
 }, function (_ref13) {
@@ -16697,6 +16845,29 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
     ref: ref,
     readOnly: true
   }));
+  var options = [{
+    label: 'Hoje',
+    data: {
+      intervalType: 'day'
+    }
+  }, {
+    label: 'Semana',
+    data: {
+      intervalType: 'week'
+    }
+  }, {
+    label: 'Mês',
+    data: {
+      intervalType: 'month'
+    }
+  }, {
+    label: 'Personalizado',
+    data: {
+      intervalType: 'custom'
+    },
+    keepOpen: true,
+    caret: true
+  }];
   return React__default.createElement(RelativeContainer$5, {
     ref: useOnClickOut(function () {
       return setOpen(null);
@@ -16757,33 +16928,16 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
     references: {
       bottom: '35px'
     },
-    options: [{
-      label: 'Hoje',
-      onClick: function onClick() {
-        return setValue(intervalTypes.day.initial(props.min));
-      },
-      data: {}
-    }, {
-      label: 'Semana',
-      onClick: function onClick() {
-        return setValue(intervalTypes.week.initial(props.min));
-      },
-      data: {}
-    }, {
-      label: 'Mês',
-      onClick: function onClick() {
-        return setValue(intervalTypes.month.initial(props.min));
-      },
-      data: {}
-    }, {
-      label: 'Personalizado',
-      onClick: function onClick() {
-        return setOpen('calendar');
-      },
-      data: {},
-      keepOpen: true,
-      caret: true
-    }],
+    options: options,
+    onClickOption: function onClickOption(_index, _ref2) {
+      var intervalType = _ref2.intervalType;
+
+      if (intervalType === 'custom') {
+        setOpen('calendar');
+      } else {
+        setValue(intervalTypes[intervalType].initial(props.min));
+      }
+    },
     width: '165px',
     itemSpacing: 's3',
     bordered: true
@@ -16794,9 +16948,9 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
     open: open === 'calendar',
     initialValue: value,
     onSubmit: {
-      onClick: function onClick(_ref2) {
-        var start = _ref2[0],
-            end = _ref2[1];
+      onClick: function onClick(_ref3) {
+        var start = _ref3[0],
+            end = _ref3[1];
         if (start === null || end === null) return;
         setValue([start, end]);
         setOpen(null);
@@ -17433,7 +17587,7 @@ var Input$5 = Object.assign(Component$2, {
   getPhoneDetails: Phone.getPhoneDetails
 });
 
-var _templateObject$L, _templateObject2$x, _templateObject3$q, _templateObject4$g;
+var _templateObject$L, _templateObject2$x, _templateObject3$q, _templateObject4$h;
 var Container$7 = styled(AbsoluteContainer)(_templateObject$L || (_templateObject$L = _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;
@@ -17457,7 +17611,7 @@ var Title = styled.div(_templateObject3$q || (_templateObject3$q = _taggedTempla
   var getColor = _ref6.theme.getColor;
   return getColor('greyishBlue', 50);
 });
-var Item = styled.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  display: flex;\n  align-items: center;\n\n  :not(:last-child) {\n    border-bottom: 1px solid\n      ", ";\n  }\n\n  > div:nth-child(1) {\n    flex: 1;\n\n    > div:nth-child(1) {\n      ", "\n      color: ", ";\n    }\n    > div:nth-child(2) {\n      ", "\n    }\n  }\n  > div:nth-child(2) {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n"])), function (_ref7) {
+var Item = styled.div(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  display: flex;\n  align-items: center;\n\n  :not(:last-child) {\n    border-bottom: 1px solid\n      ", ";\n  }\n\n  > div:nth-child(1) {\n    flex: 1;\n\n    > div:nth-child(1) {\n      ", "\n      color: ", ";\n    }\n    > div:nth-child(2) {\n      ", "\n    }\n  }\n  > div:nth-child(2) {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n"])), function (_ref7) {
   var s1 = _ref7.theme.spacings.s1;
   return s1 + " " + s1 + " " + s1 + " 0";
 }, function (_ref8) {
@@ -17638,13 +17792,13 @@ var AppliedFilters = Object.assign(function (props) {
   Menu: AppliedFiltersMenu
 });
 
-var _templateObject$N, _templateObject2$z, _templateObject3$s, _templateObject4$h, _templateObject5$e, _templateObject6$c, _templateObject7$c, _templateObject8$a, _templateObject9$9, _templateObject10$8;
+var _templateObject$N, _templateObject2$z, _templateObject3$s, _templateObject4$i, _templateObject5$e, _templateObject6$c, _templateObject7$c, _templateObject8$a, _templateObject9$9, _templateObject10$8;
 var Container$9 = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: #fff;\n  border: 1px solid #d4d4d5;\n  border-radius: 4px;\n  border-left-width: 5px;\n  padding: 14px;\n  ", "\n  ", "\n    ", "\n  ", "\n\n  ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n"])), function (props) {
   return props.size === 'mini' && css(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 131px;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
+  return props.size === 'medium' && css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
 }, function (props) {
   return props.size === 'big' && css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n      width: 414px;\n      height: 324px;\n    "])));
 }, function (props) {
@@ -17774,8 +17928,7 @@ var getInstance = function getInstance(props) {
     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, {
+          return strCmp(option.label, value, {
             contain: true
           });
         });
@@ -17940,9 +18093,8 @@ var Submenu = function Submenu(props) {
 
   var optionsParser = function optionsParser(option) {
     return {
-      label: typeof option.label === 'string' ? option.label : option.label.element,
-      onClick: onClickOption,
-      data: {}
+      label: option.label,
+      data: option
     };
   };
 
@@ -17960,6 +18112,8 @@ var Submenu = function Submenu(props) {
     close: close,
     width: isDynamic ? '275px' : '160px',
     height: '261px',
+    onClickOption: onClickOption,
+    label: props.optionLabel,
     containerSpacing: {
       top: 's3',
       left: 's1',
@@ -18004,16 +18158,11 @@ var FiltersMenu = function FiltersMenu(props) {
 
   var items = props.items.map(function (item) {
     return {
-      label: typeof item.label === 'string' ? item.label : item.label.element,
+      label: item.label,
       delimiter: item.delimiter,
       keepOpen: true,
       caret: true,
-      onClick: function onClick(index) {
-        setActive(function (prev) {
-          return prev === index ? -1 : index;
-        });
-      },
-      data: {}
+      data: item
     };
   });
   var selected = active >= 0 && active < props.items.length ? props.items[active] : undefined;
@@ -18027,6 +18176,12 @@ var FiltersMenu = function FiltersMenu(props) {
     close: close,
     width: '160px',
     maxHeight: '261px',
+    onClickOption: function onClickOption(index) {
+      setActive(function (prev) {
+        return prev === index ? -1 : index;
+      });
+    },
+    label: props.filterLabel,
     containerSpacing: {
       top: 's1',
       left: 's1',
@@ -18044,6 +18199,7 @@ var FiltersMenu = function FiltersMenu(props) {
     }
   }, props.containerProps || {}), React__default.createElement(Submenu, {
     item: selected,
+    optionLabel: props.optionLabel && selected ? props.optionLabel[selected.name] : undefined,
     close: function close() {
       return setActive(-1);
     },
@@ -18058,7 +18214,7 @@ var Filters = Object.assign(function (props) {
       setAppliedFilters = props.setAppliedFilters,
       containerProps = props.containerProps,
       subContainerProps = props.subContainerProps;
-  var buttonProps = filterObject(props, ['items', 'setAppliedFilters']);
+  var buttonProps = filterObject(props, ['items', 'setAppliedFilters', 'filterLabel', 'optionLabel']);
   return React__default.createElement(Button$5, Object.assign({}, buttonProps, {
     gap: 's4',
     getContent: function getContent(open, close) {
@@ -18068,7 +18224,9 @@ var Filters = Object.assign(function (props) {
         setAppliedFilters: setAppliedFilters,
         items: items,
         containerProps: containerProps,
-        subContainerProps: subContainerProps
+        subContainerProps: subContainerProps,
+        filterLabel: props.filterLabel,
+        optionLabel: props.optionLabel
       }));
     }
   }), "Filtros");
@@ -18083,7 +18241,7 @@ var useContext$3 = function useContext() {
   return React__default.useContext(Provider$3);
 };
 
-var _templateObject$Q, _templateObject2$A, _templateObject3$t, _templateObject4$i, _templateObject5$f, _templateObject6$d, _templateObject7$d, _templateObject8$b, _templateObject9$a, _templateObject10$9, _templateObject11$5, _templateObject12$4, _templateObject13$2, _templateObject14$2, _templateObject15$2;
+var _templateObject$Q, _templateObject2$A, _templateObject3$t, _templateObject4$j, _templateObject5$f, _templateObject6$d, _templateObject7$d, _templateObject8$b, _templateObject9$a, _templateObject10$9, _templateObject11$6, _templateObject12$4, _templateObject13$2, _templateObject14$2, _templateObject15$2;
 var aligns = {
   self: {
     horizontal: {
@@ -18122,7 +18280,7 @@ var Col = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLi
   }
 
   var w = parseFloat(width) * 100 / 12;
-  return css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n      flex: 0 0 ", "%;\n      max-width: ", "%;\n      width: 100%;\n    "])), w, w);
+  return css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n      flex: 0 0 ", "%;\n      max-width: ", "%;\n      width: 100%;\n    "])), w, w);
 }, function (_ref2) {
   var spacing = _ref2.spacing;
   var padding = getSpacings(spacing === undefined ? 's1' : spacing);
@@ -18174,7 +18332,7 @@ var Col = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLi
   var bordered = _ref5.bordered,
       lightestGrey = _ref5.theme.colors.lightestGrey;
   if (!bordered) return;
-  return css(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
+  return css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
 }, function (_ref6) {
   var fontColor = _ref6.fontColor,
       theme = _ref6.theme;
@@ -18248,7 +18406,7 @@ var Grid$1 = React__default.forwardRef(function (props, ref) {
 });
 Grid$1.displayName = 'Grid';
 
-var _templateObject$S, _templateObject2$C, _templateObject3$v, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$e, _templateObject8$c, _templateObject9$b, _templateObject10$a;
+var _templateObject$S, _templateObject2$C, _templateObject3$v, _templateObject4$k, _templateObject5$g, _templateObject6$e, _templateObject7$e, _templateObject8$c, _templateObject9$b, _templateObject10$a;
 var horizontalAligns = {
   around: 'space-around',
   between: 'space-between',
@@ -18273,7 +18431,7 @@ var Row = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLi
 }, function (_ref3) {
   var horizontalAlign = _ref3.horizontalAlign;
   if (horizontalAlign === undefined) return;
-  return css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n      justify-content: ", ";\n    "])), horizontalAligns[horizontalAlign]);
+  return css(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n      justify-content: ", ";\n    "])), horizontalAligns[horizontalAlign]);
 }, function (_ref4) {
   var verticalAlign = _ref4.verticalAlign;
   if (verticalAlign === undefined) return;
@@ -18379,7 +18537,7 @@ var widths = {
   default: '642.5px'
 };
 
-var _templateObject$T, _templateObject2$D, _templateObject3$w, _templateObject4$k, _templateObject5$h, _templateObject6$f, _templateObject7$f, _templateObject8$d, _templateObject9$c, _templateObject10$b;
+var _templateObject$T, _templateObject2$D, _templateObject3$w, _templateObject4$l, _templateObject5$h, _templateObject6$f, _templateObject7$f, _templateObject8$d, _templateObject9$c, _templateObject10$b;
 var Background = styled.div(_templateObject$T || (_templateObject$T = _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);
@@ -18390,7 +18548,7 @@ var Header$5 = styled.div(_templateObject3$w || (_templateObject3$w = _taggedTem
       colors = _ref2$theme.colors,
       spacings = _ref2$theme.spacings,
       useTypography = _ref2$theme.useTypography;
-  return css(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", ";\n    padding: ", ";\n\n    ", "\n  "])), colors.lightestGrey, spacings.s4, useTypography('h1'));
+  return css(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", ";\n    padding: ", ";\n\n    ", "\n  "])), colors.lightestGrey, spacings.s4, useTypography('h1'));
 });
 var Footer$2 = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  ", "\n"])), function (_ref3) {
   var _ref3$theme = _ref3.theme,
@@ -18609,11 +18767,11 @@ var Modal$1 = Object.assign(Modal, {
   Audit: Audit
 });
 
-var _templateObject$X, _templateObject2$E, _templateObject3$x, _templateObject4$l, _templateObject5$i, _templateObject6$g, _templateObject7$g, _templateObject8$e, _templateObject9$d, _templateObject10$c, _templateObject11$6;
+var _templateObject$X, _templateObject2$E, _templateObject3$x, _templateObject4$m, _templateObject5$i, _templateObject6$g, _templateObject7$g, _templateObject8$e, _templateObject9$d, _templateObject10$c, _templateObject11$7;
 var Container$c = styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
 var Header$6 = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var HeaderImage = styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
-var HeaderContent = styled.div(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
+var HeaderContent = styled.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
 var MainContent = styled.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
 var HeaderLine = styled.div(_templateObject6$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;
@@ -18626,7 +18784,7 @@ var HeaderLine = styled.div(_templateObject6$g || (_templateObject6$g = _taggedT
 }, function (props) {
   return props.size === 'large' && css(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var MainLine = styled(HeaderLine)(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
+var MainLine = styled(HeaderLine)(_templateObject11$7 || (_templateObject11$7 = _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);
@@ -18661,7 +18819,7 @@ var Template1 = function Template1(props) {
   })));
 };
 
-var _templateObject$Y, _templateObject2$F, _templateObject3$y, _templateObject4$m, _templateObject5$j;
+var _templateObject$Y, _templateObject2$F, _templateObject3$y, _templateObject4$n, _templateObject5$j;
 var HeaderLine$1 = styled.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) {
   return props.height;
 }, function (props) {
@@ -18669,16 +18827,16 @@ var HeaderLine$1 = styled.div(_templateObject$Y || (_templateObject$Y = _taggedT
 }, function (props) {
   return props.size === 'small' && css(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && css(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
 
-var _templateObject$Z, _templateObject2$G, _templateObject3$z, _templateObject4$n, _templateObject5$k, _templateObject6$h, _templateObject7$h, _templateObject8$f;
+var _templateObject$Z, _templateObject2$G, _templateObject3$z, _templateObject4$o, _templateObject5$k, _templateObject6$h, _templateObject7$h, _templateObject8$f;
 var Container$d = styled.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
 var Template2Container = styled(Container$d)(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n  background: #fff;\n  border: 2px solid #ebebeb;\n"])));
 var Header$7 = styled.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var HeaderImage$1 = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
+var HeaderImage$1 = styled.div(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
 var HeaderContent$1 = styled.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
 var MainContent$1 = styled.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
 var MainLine$1 = styled(HeaderLine$1)(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
@@ -18737,14 +18895,14 @@ var Template3 = function Template3(props) {
   }));
 };
 
-var _templateObject$$, _templateObject2$I, _templateObject3$B, _templateObject4$o, _templateObject5$l, _templateObject6$i, _templateObject7$i, _templateObject8$g;
+var _templateObject$$, _templateObject2$I, _templateObject3$B, _templateObject4$p, _templateObject5$l, _templateObject6$i, _templateObject7$i, _templateObject8$g;
 var Container$f = styled.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
 var HeaderLine$3 = styled.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && css(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
@@ -18804,13 +18962,13 @@ var Template4 = function Template4(props) {
   }));
 };
 
-var _templateObject$10, _templateObject2$J, _templateObject3$C, _templateObject4$p, _templateObject5$m, _templateObject6$j, _templateObject7$j, _templateObject8$h, _templateObject9$e;
+var _templateObject$10, _templateObject2$J, _templateObject3$C, _templateObject4$q, _templateObject5$m, _templateObject6$j, _templateObject7$j, _templateObject8$h, _templateObject9$e;
 var Container$g = styled.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 746px;\n  height: 169px;\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n  padding: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 var Circle = styled.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n  width: 141px;\n  height: 141px;\n  background-color: #dddedf;\n  border-radius: 50%;\n"])));
 var HeaderLine$4 = styled.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
@@ -18852,11 +19010,11 @@ var Template5 = function Template5(props) {
   })));
 };
 
-var _templateObject$11, _templateObject2$K, _templateObject3$D, _templateObject4$q, _templateObject5$n, _templateObject6$k, _templateObject7$k, _templateObject8$i, _templateObject9$f;
+var _templateObject$11, _templateObject2$K, _templateObject3$D, _templateObject4$r, _templateObject5$n, _templateObject6$k, _templateObject7$k, _templateObject8$i, _templateObject9$f;
 var Container$h = styled.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #f5f5f5;\n"])));
 var Header$8 = styled.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n"])));
 var Footer$3 = styled.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-top: 1px solid #b1b1b3;\n  height: 50px;\n"])));
-var HeaderLine$5 = styled.div(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
+var HeaderLine$5 = styled.div(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
@@ -18895,13 +19053,13 @@ var Template6 = function Template6(props) {
   })));
 };
 
-var _templateObject$12, _templateObject2$L, _templateObject3$E, _templateObject4$r, _templateObject5$o, _templateObject6$l, _templateObject7$l, _templateObject8$j, _templateObject9$g, _templateObject10$d;
+var _templateObject$12, _templateObject2$L, _templateObject3$E, _templateObject4$s, _templateObject5$o, _templateObject6$l, _templateObject7$l, _templateObject8$j, _templateObject9$g, _templateObject10$d;
 var Container$i = styled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$9 = styled.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$6 = styled.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
@@ -18929,13 +19087,13 @@ var Template7 = function Template7(props) {
   })), React__default.createElement(Main$2, null, React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null)));
 };
 
-var _templateObject$13, _templateObject2$M, _templateObject3$F, _templateObject4$s, _templateObject5$p, _templateObject6$m, _templateObject7$m, _templateObject8$k, _templateObject9$h;
+var _templateObject$13, _templateObject2$M, _templateObject3$F, _templateObject4$t, _templateObject5$p, _templateObject6$m, _templateObject7$m, _templateObject8$k, _templateObject9$h;
 var Container$j = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$a = styled.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$7 = styled.div(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
@@ -18972,13 +19130,13 @@ var Template8 = function Template8(props) {
   })));
 };
 
-var _templateObject$14, _templateObject2$N, _templateObject3$G, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$n, _templateObject8$l, _templateObject9$i, _templateObject10$e;
+var _templateObject$14, _templateObject2$N, _templateObject3$G, _templateObject4$u, _templateObject5$q, _templateObject6$n, _templateObject7$n, _templateObject8$l, _templateObject9$i, _templateObject10$e;
 var Container$k = styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$b = styled.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$8 = styled.div(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
@@ -19011,13 +19169,13 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$4, null, React__default.createElement(Circle$2, null)));
 };
 
-var _templateObject$15, _templateObject2$O, _templateObject3$H, _templateObject4$u, _templateObject5$r, _templateObject6$o, _templateObject7$o, _templateObject8$m, _templateObject9$j, _templateObject10$f, _templateObject11$7;
+var _templateObject$15, _templateObject2$O, _templateObject3$H, _templateObject4$v, _templateObject5$r, _templateObject6$o, _templateObject7$o, _templateObject8$m, _templateObject9$j, _templateObject10$f, _templateObject11$8;
 var Container$l = styled.div(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$c = styled.div(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$9 = styled.div(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
@@ -19034,7 +19192,7 @@ var CustomLine$6 = styled(HeaderLine$9)(_templateObject8$m || (_templateObject8$
 });
 var GraphLine = styled(CustomLine$6)(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
 var Main$5 = styled.div(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  padding: 0 7px 72px 7px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  justify-content: center;\n"])));
-var Circle$3 = styled.div(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
+var Circle$3 = styled.div(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
 var Template10 = function Template10(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -19155,7 +19313,7 @@ var Placeholder = function Placeholder(props) {
   }
 };
 
-var _templateObject$16, _templateObject2$P, _templateObject3$I, _templateObject4$v, _templateObject5$s, _templateObject6$p, _templateObject7$p;
+var _templateObject$16, _templateObject2$P, _templateObject3$I, _templateObject4$w, _templateObject5$s, _templateObject6$p, _templateObject7$p;
 var Container$m = styled.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  span {\n    display: inline-block;\n    margin-left: 7px;\n    color: #000000cc;\n  }\n"])));
 var Progress = styled.div(_templateObject2$P || (_templateObject2$P = _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 + "%";
@@ -19165,7 +19323,7 @@ var Progress = styled.div(_templateObject2$P || (_templateObject2$P = _taggedTem
     return theme.colors.warningGray;
   });
 }, function (props) {
-  return props.type === 'info' && css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref2) {
+  return props.type === 'info' && css(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref2) {
     var theme = _ref2.theme;
     return theme.colors.blue;
   });
@@ -19190,7 +19348,7 @@ var ProgressBar = function ProgressBar(props) {
   return React__default.createElement(Container$m, null, React__default.createElement(Progress, Object.assign({}, props), React__default.createElement("div", null)), React__default.createElement("span", null, " ", props.value || '0', "%"));
 };
 
-var _templateObject$17, _templateObject2$Q, _templateObject3$J, _templateObject4$w, _templateObject5$t, _templateObject6$q, _templateObject7$q, _templateObject8$n, _templateObject9$k;
+var _templateObject$17, _templateObject2$Q, _templateObject3$J, _templateObject4$x, _templateObject5$t, _templateObject6$q, _templateObject7$q, _templateObject8$n, _templateObject9$k;
 var Container$n = styled.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
 var delimiters = {
   blue: ['blue'],
@@ -19224,7 +19382,7 @@ var Tabs = styled.ul(_templateObject2$Q || (_templateObject2$Q = _taggedTemplate
     return internal ? "1px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'grey']) : "2px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'blue']);
   }();
 
-  return css(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n\n      + div {\n        border: 1px solid ", ";\n        border-top-width: 0px;\n        border-radius: 0px 0px 2px 2px;\n        padding: ", ";\n      }\n    "])), border, theme.getColor.apply(theme, delimiters.grey), theme.spacings.s3);
+  return css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n\n      + div {\n        border: 1px solid ", ";\n        border-top-width: 0px;\n        border-radius: 0px 0px 2px 2px;\n        padding: ", ";\n      }\n    "])), border, theme.getColor.apply(theme, delimiters.grey), theme.spacings.s3);
 }, function (_ref3) {
   var theme = _ref3.theme,
       internal = _ref3.$internal;
@@ -19380,7 +19538,7 @@ var TextArea = function TextArea(props) {
   return React__default.createElement(Container$o, Object.assign({}, props));
 };
 
-var _templateObject$1a, _templateObject2$R, _templateObject3$K, _templateObject4$x, _templateObject5$u, _templateObject6$r;
+var _templateObject$1a, _templateObject2$R, _templateObject3$K, _templateObject4$y, _templateObject5$u, _templateObject6$r;
 var Container$p = styled.div(_templateObject$1a || (_templateObject$1a = _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) {
@@ -19388,7 +19546,7 @@ var Container$p = styled.div(_templateObject$1a || (_templateObject$1a = _tagged
 }, function (props) {
   return props.color === 'error' && css(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n      background-color: #fff6f6;\n      opacity: 1;\n      border-color: #973937;\n      h4 {\n        color: #973937;\n      }\n      p {\n        color: #973937;\n      }\n    "])));
 }, function (props) {
-  return props.color === 'warning' && css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n      background-color: #fffaf3;\n      opacity: 1;\n      border-color: #ccbea0;\n      h4 {\n        color: #7a4d05;\n      }\n      p {\n        color: #7a4d05cc;\n      }\n    "])));
+  return props.color === 'warning' && css(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n      background-color: #fffaf3;\n      opacity: 1;\n      border-color: #ccbea0;\n      h4 {\n        color: #7a4d05;\n      }\n      p {\n        color: #7a4d05cc;\n      }\n    "])));
 });
 var IconContainer$2 = styled.div(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 14px 14px 0 0;\n  margin: 0;\n"])));
 var IconContent = styled.div(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 13px 0 21px 28px;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  h4 {\n    margin-bottom: 7px;\n    font-size: 18p;\n  }\n  p {\n    margin: 0;\n    font-size: 14px;\n    max-width: 380px;\n  }\n"])));
@@ -19403,7 +19561,7 @@ 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$1b, _templateObject2$S, _templateObject3$L, _templateObject4$y, _templateObject5$v;
+var _templateObject$1b, _templateObject2$S, _templateObject3$L, _templateObject4$z, _templateObject5$v;
 var Image = styled.img(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
 var Container$q = styled.div(_templateObject2$S || (_templateObject2$S = _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;
@@ -19436,7 +19594,7 @@ var Dimmer = styled.div(_templateObject3$L || (_templateObject3$L = _taggedTempl
   var theme = _ref3.theme;
   return theme.getColor('greyishBlue', 50);
 });
-var Button$6 = styled(Button$1)(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
+var Button$6 = styled(Button$1)(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.getColor('white', 50);
 });