@mw-kit/mw-ui 1.3.1 → 1.6.0

package/dist/index.modern.js

@@ -1,5 +1,5 @@
 import 'semantic-ui-css/semantic.min.css';
-import React__default, { createElement, useState, useEffect, useCallback } from 'react';
+import React__default, { createElement, useState, useEffect, useImperativeHandle, useCallback } from 'react';
 import styled, { keyframes, css, createGlobalStyle, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import { Icon as Icon$1 } from 'semantic-ui-react';
 export * from 'semantic-ui-react';
@@ -161,16 +161,58 @@ var stripAccents = function stripAccents(value) {
 var isKeyOf = function isKeyOf(object, key) {
   return Object.prototype.hasOwnProperty.call(object, key);
 };
+var isObject = function isObject(value) {
+  return Object.prototype.toString.call(value) === '[object Object]';
+};
+var dateToIsoString = function dateToIsoString(date, time, fullYear, pattern) {
+  if (time === void 0) {
+    time = false;
+  }
+
+  if (fullYear === void 0) {
+    fullYear = true;
+  }
+
+  if (pattern === void 0) {
+    pattern = 'br';
+  }
+
+  var dateData = [date.getDate().toString().padStart(2, '0'), (date.getMonth() + 1).toString().padStart(2, '0'), date.getFullYear().toString().padStart(4, '0')];
+  if (fullYear === false) dateData[2] = dateData[2].substring(2, 4);
+
+  if (pattern === 'us') {
+    var tmp = dateData[0];
+    dateData[0] = dateData[2];
+    dateData[2] = tmp;
+  }
+
+  var dateStr = dateData.join('/');
+  if (!time) return dateStr;
+  var timeStr = [date.getHours().toString().padStart(2, '0'), date.getMinutes().toString().padStart(2, '0'), date.getSeconds().toString().padStart(2, '0')].join(':');
+  return [dateStr, timeStr].join(' ');
+};
 
 var notEmptyString = function notEmptyString(value) {
   return typeof value === 'string' && value.trim() !== '';
 };
-var isObject = function isObject(value) {
-  return Object.prototype.toString.call(value) === '[object Object]';
+var isBoolean = function isBoolean(value) {
+  return typeof value === 'boolean';
 };
 var isString = function isString(value) {
   return typeof value === 'string';
 };
+var isDateInstance = function isDateInstance(value) {
+  return value instanceof Date && !isNaN(value.valueOf());
+};
+var isDateEquals = function isDateEquals(x, y, time) {
+  if (time === void 0) {
+    time = true;
+  }
+
+  var xStr = dateToIsoString(x, time, true, 'us');
+  var yStr = dateToIsoString(y, time, true, 'us');
+  return xStr === yStr;
+};
 var strCmp = function strCmp(x, y, options) {
   if (options === void 0) {
     options = {};
@@ -215,13 +257,63 @@ var filterObject = function filterObject(object, keys, inital) {
   }, inital);
   return r;
 };
-var dateToIsoString = function dateToIsoString(date) {
-  return [date.getDate().toString().padStart(2, '0'), (date.getMonth() + 1).toString().padStart(2, '0'), date.getFullYear().toString().padStart(4, '0')].join('/');
-};
 var isoStringToDate = function isoStringToDate(value) {
   var date = new Date(value.split('/').reverse().join('-') + ' 00:00:00');
   return isNaN(date.getTime()) ? null : date;
 };
+var getWeekNumber = function getWeekNumber(value) {
+  var weekSunday = new Date(value);
+  weekSunday.setHours(0, 0, 0, 0);
+  weekSunday.setDate(weekSunday.getDate() - weekSunday.getUTCDay());
+  var yearStart = new Date(Date.UTC(weekSunday.getUTCFullYear(), 0, 1));
+  var weekNumber = Math.ceil(((weekSunday.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+  return [weekNumber, weekSunday.getUTCFullYear()];
+};
+var getMonthName = function getMonthName(value) {
+  var months = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
+  var monthName = months[value.getMonth()];
+  return monthName;
+};
+var getFirstWeek = function getFirstWeek(year) {
+  var today = new Date();
+  if (year !== undefined) today.setFullYear(year);else year = today.getFullYear();
+  var week = new Date(year + "-01-01 00:00:00");
+  week.setDate(week.getDate() - week.getUTCDay() - 7);
+  week.setHours(0, 0, 0, 0);
+
+  var _getWeekNumber = getWeekNumber(week),
+      weekYear = _getWeekNumber[1];
+
+  while (weekYear !== year) {
+    week.setDate(week.getDate() + 7);
+
+    var _getWeekNumber2 = getWeekNumber(week);
+
+    weekYear = _getWeekNumber2[1];
+  }
+
+  return week;
+};
+var getLastWeek = function getLastWeek(year) {
+  var today = new Date();
+  if (year !== undefined) today.setFullYear(year);else year = today.getFullYear();
+  var week = new Date(year + "-12-31 00:00:00");
+  week.setDate(week.getDate() - week.getUTCDay() + 6);
+  week.setHours(23, 59, 59, 0);
+
+  var _getWeekNumber3 = getWeekNumber(week),
+      weekYear = _getWeekNumber3[1];
+
+  while (weekYear !== year) {
+    week.setDate(week.getDate() - 7);
+
+    var _getWeekNumber4 = getWeekNumber(week);
+
+    weekYear = _getWeekNumber4[1];
+  }
+
+  return week;
+};
 var getSpacings = function getSpacings(value, defaults) {
   var d = {
     top: 's1',
@@ -255,6 +347,9 @@ var getSpacings = function getSpacings(value, defaults) {
   };
   return values.top + " " + values.right + " " + values.bottom + " " + values.left;
 };
+var keys = function keys(value) {
+  return Object.keys(value);
+};
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var loader = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"])));
@@ -264,15 +359,19 @@ var Loader = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateL
       bgColor = _ref.bgColor,
       color = _ref.color,
       theme = _ref.theme,
-      filled = _ref.filled;
+      filled = _ref.filled,
+      zIndex = _ref.zIndex;
   size = size || theme.spacings.s4;
   borderSize = borderSize || "calc(" + size + " * 0.0757)";
   color = color || 'blue';
   bgColor = bgColor || color;
   var beforeColor = isKeyOf(theme.colors, bgColor) ? theme.getColor(bgColor, 25) : color;
   var afterColor = isKeyOf(theme.colors, color) ? theme.getColor(color) : color;
-  var fill = !filled ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n          position: absolute;\n          left: 0;\n          top: 0;\n          background-color: ", ";\n          width: 100%;\n          height: 100%;\n        "])), theme.colors.white);
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      ", "\n\n      pointer-events: none;\n\n      ::before,\n      ::after {\n        position: absolute;\n        content: '';\n\n        top: calc(50% - ", " / 2);\n        left: calc(50% - ", " / 2);\n        width: ", ";\n        height: ", ";\n        border-radius: 50%;\n        border-width: ", ";\n        border-style: solid;\n      }\n\n      ::before {\n        border-color: ", ";\n      }\n\n      ::after {\n        animation: ", " 0.6s linear;\n        animation-iteration-count: infinite;\n        border-color: ", " transparent transparent;\n      }\n    "])), fill, size, size, size, size, borderSize, beforeColor, loader, afterColor);
+  var fill = !filled ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n          position: absolute;\n          left: 0;\n          top: 0;\n          background-color: ", ";\n          width: 100%;\n          height: 100%;\n        "])), function () {
+    var fillColor = !isString(filled) ? theme.colors.white : isKeyOf(theme.colors, filled) ? theme.getColor(filled) : filled;
+    return fillColor;
+  });
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      ", "\n\n      pointer-events: none;\n\n      z-index: ", ";\n\n      ::before,\n      ::after {\n        position: absolute;\n        content: '';\n\n        top: calc(50% - ", " / 2);\n        left: calc(50% - ", " / 2);\n        width: ", ";\n        height: ", ";\n        border-radius: 50%;\n        border-width: ", ";\n        border-style: solid;\n      }\n\n      ::before {\n        border-color: ", ";\n      }\n\n      ::after {\n        animation: ", " 0.6s linear;\n        animation-iteration-count: infinite;\n        border-color: ", " transparent transparent;\n      }\n    "])), fill, zIndex || 1, size, size, size, size, borderSize, beforeColor, loader, afterColor);
 });
 
 var sizes = {
@@ -11839,7 +11938,7 @@ var EllipsisContainer$1 = function EllipsisContainer$1(props) {
 };
 
 var _templateObject$5, _templateObject2$3, _templateObject3$3, _templateObject4$3;
-var Container$1 = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  padding-right: calc(", " / 2);\n  display: flex;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"])), function (_ref) {
+var Container$1 = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  padding-right: calc(", " / 2);\n  display: flex;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -11904,26 +12003,89 @@ var ScrollContainer = function ScrollContainer(props) {
       _onScroll2(event);
     }
   })), loading && React__default.createElement(Loader, {
-    filled: true
+    filled: true,
+    size: '43px',
+    borderSize: '2px'
   })), after);
 };
 
-var _templateObject$6, _templateObject2$4, _templateObject3$4, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var Transition = function Transition(props) {
+  var active = props.active,
+      mountDuration = props.mountDuration,
+      element = props.element;
+
+  var _useState = useState('first'),
+      render = _useState[0],
+      setRender = _useState[1];
+
+  useEffect(function () {
+    setRender(function (prev) {
+      return prev === 'first' && active === false ? 'unmounted' : false;
+    });
+    var timeoutId = active ? setTimeout(function () {
+      return setRender(true);
+    }) : setTimeout(function () {
+      return setRender('unmounted');
+    }, mountDuration);
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, [active]);
+  return isBoolean(render) ? element({
+    active: render,
+    mountDuration: mountDuration
+  }) : null;
+};
+
+var _templateObject$6, _templateObject2$4, _templateObject3$4;
+
+var useTransition = function useTransition(props, values) {
+  var active = props.active,
+      mountDuration = props.mountDuration;
+  var animation = {
+    enabled: css(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose([""]))),
+    disabled: css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose([""])))
+  };
+  var properties = [];
+  var durations = [];
+  var functions = [];
+  keys(props.properties).forEach(function (k) {
+    var config = props.properties[k];
+    if (config === undefined) return;
+    properties.push(k);
+    durations.push(config.duration && config.duration <= mountDuration ? config.duration : mountDuration);
+    functions.push(config.function || 'ease-in-out');
+
+    if (values[k].disabled) {
+      animation.disabled = animation.disabled.concat(k + ": " + values[k].disabled + ";");
+    }
+
+    if (values[k].enabled) {
+      animation.enabled = animation.enabled.concat(k + ": " + values[k].enabled + ";");
+    }
+  });
+  if (properties.length === 0) return;
+  return css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n    transition-property: ", ";\n    transition-duration: ", ";\n    transition-timing-function: ", ";\n    ", "\n  "])), properties.join(', '), durations.map(function (d) {
+    return d + "ms";
+  }).join(', '), functions.join(', '), animation[active ? 'enabled' : 'disabled']);
+};
+
+var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 var positions = {
   'top right': function topRight(_ref) {
     var bottom = _ref.bottom,
         left = _ref.left;
-    return css(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n    top: ", ";\n    left: ", ";\n  "])), bottom ? "calc(100% - " + bottom + ")" : 0, left || '100%');
+    return css(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n    top: ", ";\n    left: ", ";\n  "])), bottom ? "calc(100% - " + bottom + ")" : 0, left || '100%');
   },
   'top left': function topLeft(_ref2) {
     var bottom = _ref2.bottom,
         right = _ref2.right;
-    return css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n    top: ", ";\n    right: ", ";\n  "])), bottom ? "calc(100% - " + bottom + ")" : 0, right || '100%');
+    return css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n    top: ", ";\n    right: ", ";\n  "])), bottom ? "calc(100% - " + bottom + ")" : 0, right || '100%');
   },
   'bottom right': function bottomRight(_ref3) {
     var top = _ref3.top,
         left = _ref3.left;
-    return css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n    bottom: ", ";\n    left: ", ";\n  "])), top ? "calc(100% - " + top + ")" : 0, left || '100%');
+    return css(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n    bottom: ", ";\n    left: ", ";\n  "])), top ? "calc(100% - " + top + ")" : 0, left || '100%');
   },
   'bottom left': function bottomLeft(_ref4) {
     var top = _ref4.top,
@@ -11947,7 +12109,7 @@ var positions = {
     return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n    top: ", ";\n    left: 0;\n  "])), top || '100%');
   }
 };
-var Container$2 = styled.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  > div {\n    box-shadow: 0px 3px 6px ", ";\n    border: 1px solid ", ";\n  }\n\n  z-index: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  position: absolute;\n\n  ", "\n\n  ", "\n"])), function (_ref9) {
+var Container$2 = styled.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n\n  > div {\n    box-shadow: 0px 3px 6px ", ";\n    border: 1px solid ", ";\n    overflow: hidden;\n  }\n\n  z-index: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  position: absolute;\n\n  ", "\n\n  ", ";\n"])), function (_ref9) {
   var theme = _ref9.theme;
   return theme.useTypography('p');
 }, function (_ref10) {
@@ -11978,36 +12140,45 @@ var Container$2 = styled.div(_templateObject9$1 || (_templateObject9$1 = _tagged
 }, function (_ref17) {
   var position = _ref17.position,
       references = _ref17.references;
+
+  if (!position) {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        visibility: collapse;\n      "])));
+  }
+
   return positions[position](references || {});
-}, function (_ref18) {
-  var firstRender = _ref18.firstRender;
-  if (!firstRender) return;
-  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      visibility: hidden;\n    "])));
+}, function (props) {
+  var transition = props.transition;
+  if (transition === undefined) return;
+  return useTransition(transition, {
+    'max-width': {
+      disabled: '0px'
+    },
+    'max-height': {
+      disabled: '0px'
+    },
+    width: {
+      disabled: '0px'
+    },
+    height: {
+      disabled: '0px'
+    }
+  });
 });
 
-var AbsoluteContainer = function AbsoluteContainer(props) {
+var AbsoluteContainer = React__default.forwardRef(function (props, fowardedRef) {
+  var open = props.open;
   var center = props.center || {
     x: 50,
     y: 75
   };
   var axis = props.axis || 'y';
-  var defaultPosition = axis === 'y' ? 'right bottom' : 'top right';
-
-  var _useState = useState(props.position || defaultPosition),
-      position = _useState[0],
-      setPosition = _useState[1];
-
-  var _useState2 = useState(null),
-      ref = _useState2[0],
-      setRef = _useState2[1];
 
-  var _useState3 = useState(true),
-      firstRender = _useState3[0],
-      setFirstRender = _useState3[1];
+  var _useState = useState(null),
+      ref = _useState[0],
+      setRef = _useState[1];
 
-  useEffect(function () {
-    setFirstRender(false);
-    if (props.position || !ref) return;
+  var getPosition = function getPosition() {
+    if (!ref) return null;
     var width = window.innerWidth;
     var height = window.innerHeight;
 
@@ -12022,7 +12193,7 @@ var AbsoluteContainer = function AbsoluteContainer(props) {
       var xDirection = x > center.x ? 'left' : 'right';
       var yDirection = y > center.y ? 'top' : 'bottom';
       var newPosition = xDirection + " " + yDirection;
-      setPosition(newPosition);
+      return newPosition;
     } else {
       var _xDirection = x > center.x ? 'left' : 'right';
 
@@ -12030,19 +12201,57 @@ var AbsoluteContainer = function AbsoluteContainer(props) {
 
       var _newPosition = _yDirection + " " + _xDirection;
 
-      setPosition(_newPosition);
+      return _newPosition;
     }
+  };
+
+  var _useState2 = useState(props.position || getPosition),
+      position = _useState2[0],
+      setPosition = _useState2[1];
+
+  useImperativeHandle(fowardedRef, function () {
+    return ref;
+  });
+  useEffect(function () {
+    if (props.position) return;
+    setPosition(getPosition);
   }, [ref]);
   var htmlProps = filterObject(props, ['center', 'position', 'children']);
-  return React__default.createElement(Container$2, Object.assign({}, htmlProps, {
-    position: position,
-    ref: setRef,
-    firstRender: firstRender
-  }), React__default.createElement("div", null, props.children));
-};
+  var cssKeys = {
+    width: 'width',
+    'max-width': 'maxWidth',
+    height: 'height',
+    'max-height': 'maxHeight'
+  };
+
+  var propsTransition = _extends({
+    mountDuration: 500,
+    properties: keys(cssKeys).filter(function (k) {
+      var key = cssKeys[k];
+      return isKeyOf(props, key) && props[key] !== undefined;
+    }).reduce(function (prev, k) {
+      var _extends2;
+
+      return _extends({}, prev, (_extends2 = {}, _extends2[k] = {}, _extends2));
+    }, {})
+  }, props.transition || {});
+
+  return React__default.createElement(Transition, {
+    active: open,
+    mountDuration: propsTransition.mountDuration,
+    element: function element(transition) {
+      return React__default.createElement(Container$2, Object.assign({}, htmlProps, {
+        position: position,
+        ref: setRef,
+        transition: _extends({}, propsTransition, transition)
+      }), React__default.createElement("div", null, props.children));
+    }
+  });
+});
+AbsoluteContainer.displayName = 'AbsoluteContainer';
 
-var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$5, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2;
-var Option = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: ", ";\n  display: flex;\n\n  > :nth-child(1) {\n    flex: 1;\n  }\n\n  ", ";\n\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_ref) {
+var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2;
+var Option = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: ", ";\n  display: flex;\n\n  > :nth-child(1) {\n    flex: 1;\n  }\n\n  ", ";\n\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -12052,10 +12261,10 @@ var Option = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplat
   var disabled = _ref3.disabled;
 
   if (!disabled) {
-    return css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n        cursor: pointer;\n      "])));
+    return css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n        cursor: pointer;\n      "])));
   }
 
-  return css(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      opacity: 0.3;\n    "])));
+  return css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      opacity: 0.3;\n    "])));
 }, function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.iceWhite;
@@ -12097,119 +12306,58 @@ var Delimiter = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTe
   return theme.colors.greyishBlue;
 });
 
-var Menu = function Menu(props) {
+var MenuComponent = function MenuComponent(props, ref) {
   var _props = _extends({}, props),
-      open = _props.open,
       close = _props.close,
       options = _props.options,
       onScrollEnd = _props.onScrollEnd,
       before = _props.before,
       after = _props.after,
-      scrollHeight = _props.scrollHeight,
       scrollSpacing = _props.scrollSpacing,
       children = _props.children,
       loading = _props.loading,
       innerContent = _props.innerContent;
 
-  var _useState = useState(-1),
-      activeOption = _useState[0],
-      setActiveOption = _useState[1];
-
-  useEffect(function () {
-    setActiveOption(-1);
-  }, [options]);
-
-  var getSubmenu = function getSubmenu(index) {
-    if (index === -1 || options[index] === undefined) {
-      return;
-    }
-
-    var submenuProps = options[index].submenu;
-
-    if (!submenuProps) {
-      return;
-    }
-
-    return React__default.createElement(Menu, Object.assign({}, props, submenuProps, {
-      onScrollEnd: submenuProps.onScrollEnd,
-      axis: 'x',
-      open: true,
-      close: function close() {
-        return setActiveOption(-1);
-      }
-    }));
-  };
-
-  var absoluteContainerProps = filterObject(props, ['scrollSpacing', 'onScrollEnd', 'before', 'after', 'scrollHeight', 'open', 'close', 'options', 'loading', 'children'], {
+  var absoluteContainerProps = filterObject(props, ['scrollSpacing', 'onScrollEnd', 'before', 'after', 'close', 'options', 'loading', 'children'], {
     itemSpacing: 's1'
   });
-  if (!open) return React__default.createElement(React__default.Fragment, null);
-  return React__default.createElement(Container$3, Object.assign({}, absoluteContainerProps), React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollContainer, {
+  return React__default.createElement(Container$3, Object.assign({}, absoluteContainerProps, {
+    ref: ref
+  }), React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollContainer, {
     onScrollEnd: onScrollEnd,
     before: before,
     after: after,
     inner: innerContent,
-    height: scrollHeight,
     spacing: scrollSpacing,
     loading: loading
   }, options.map(function (option, index) {
     var _option = _extends({}, option),
         delimiter = _option.delimiter,
         keepOpen = _option.keepOpen,
-        submenu = _option.submenu,
         caret = _option.caret;
 
     var label = isString(option.label) ? {
       text: option.label,
       element: option.label
     } : option.label;
-    var closeMenu = keepOpen || submenu ? function () {} : close;
+    var closeMenu = keepOpen ? function () {} : close;
     var onClick;
     var disabled;
+    var rules = option.rules || [];
+    var rule = rules.find(function (rule) {
+      return !rule.rule(index);
+    });
 
-    if ('data' in option) {
-      var rules = option.rules || [];
-      var rule = rules.find(function (rule) {
-        return !rule.rule(index, option.data);
-      });
-
-      if (rule === undefined) {
-        var _onClick = option.onClick || function () {};
-
-        onClick = function onClick() {
-          setActiveOption(function (prev) {
-            return prev !== index ? index : -1;
-          });
+    if (rule === undefined) {
+      var _onClick = option.onClick || function () {};
 
-          _onClick(index, option.data);
+      onClick = function onClick() {
+        _onClick(index);
 
-          closeMenu();
-        };
-      } else {
-        disabled = true;
-      }
+        closeMenu();
+      };
     } else {
-      var _rules = option.rules || [];
-
-      var _rule = _rules.find(function (rule) {
-        return !rule.rule(index);
-      });
-
-      if (_rule === undefined) {
-        var _onClick2 = option.onClick || function () {};
-
-        onClick = function onClick() {
-          setActiveOption(function (prev) {
-            return prev !== index ? index : -1;
-          });
-
-          _onClick2(index);
-
-          closeMenu();
-        };
-      } else {
-        disabled = true;
-      }
+      disabled = true;
     }
 
     return React__default.createElement(React__default.Fragment, {
@@ -12217,16 +12365,18 @@ var Menu = function Menu(props) {
     }, React__default.createElement(Option, {
       onClick: onClick,
       disabled: disabled
-    }, isString(label.element) ? React__default.createElement(EllipsisContainer$1, null, label.element) : label.element, caret || submenu ? React__default.createElement(Icon, {
+    }, isString(label.element) ? React__default.createElement(EllipsisContainer$1, null, label.element) : label.element, caret ? React__default.createElement(Icon, {
       type: 'semantic',
       icon: 'caret right',
       width: '14px'
     }) : null), delimiter && React__default.createElement(Delimiter, null));
-  })), children, getSubmenu(activeOption)));
+  })), children));
 };
 
-var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$6, _templateObject5$5, _templateObject6$3;
-var Container$4 = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  div {\n    border-radius: 50%;\n    width: ", ";\n    height: ", ";\n\n    ", "\n\n    ", "\n    ", "\n      ", "\n      ", "\n  }\n\n  span {\n    display: inline-block;\n    margin-left: 8px;\n    color: ", ";\n  }\n"])), function (_ref) {
+var Menu = React__default.forwardRef(MenuComponent);
+
+var _templateObject$9, _templateObject2$7, _templateObject3$7, _templateObject4$6, _templateObject5$5, _templateObject6$3;
+var Container$4 = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  div {\n    border-radius: 50%;\n    width: ", ";\n    height: ", ";\n\n    ", "\n\n    ", "\n    ", "\n      ", "\n      ", "\n  }\n\n  span {\n    display: inline-block;\n    margin-left: 8px;\n    color: ", ";\n  }\n"])), function (_ref) {
   var props = _ref.props;
   return props.size === 'medium' ? '15px' : '6px';
 }, function (_ref2) {
@@ -12234,13 +12384,13 @@ var Container$4 = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTe
   return props.size === 'medium' ? '15px' : '6px';
 }, function (_ref3) {
   var props = _ref3.props;
-  return props.type === 'default' && css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref4) {
+  return props.type === 'default' && css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref4) {
     var theme = _ref4.theme;
     return theme.colors.warningGray;
   });
 }, function (_ref5) {
   var props = _ref5.props;
-  return props.type === 'info' && css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref6) {
+  return props.type === 'info' && css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref6) {
     var theme = _ref6.theme;
     return theme.colors.blue;
   });
@@ -12272,12 +12422,12 @@ var Indicator = function Indicator(props) {
   }, React__default.createElement("div", null), React__default.createElement("span", null, " ", props.description, " "));
 };
 
-var _templateObject$9, _templateObject2$7, _templateObject3$7, _templateObject4$7, _templateObject5$6, _templateObject6$4, _templateObject7$3;
-var Container$5 = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  span {\n    display: inline-block;\n    margin-left: 7px;\n    color: #000000cc;\n  }\n"])));
-var Progress = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  width: 64px;\n  height: 12px;\n  border: 1px solid #e4e4e4;\n  div {\n    width: ", ";\n    max-width: 64px;\n    height: 100%;\n    ", "\n\n    ", "\n    ", "\n      ", "\n      ", "\n  }\n"])), function (props) {
+var _templateObject$a, _templateObject2$8, _templateObject3$8, _templateObject4$7, _templateObject5$6, _templateObject6$4, _templateObject7$3;
+var Container$5 = styled.div(_templateObject$a || (_templateObject$a = _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$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  width: 64px;\n  height: 12px;\n  border: 1px solid #e4e4e4;\n  div {\n    width: ", ";\n    max-width: 64px;\n    height: 100%;\n    ", "\n\n    ", "\n    ", "\n      ", "\n      ", "\n  }\n"])), function (props) {
   return props.value + "%";
 }, function (props) {
-  return props.type === 'default' && css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref) {
+  return props.type === 'default' && css(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref) {
     var theme = _ref.theme;
     return theme.colors.warningGray;
   });
@@ -12342,13 +12492,13 @@ function SvgClose(props) {
   })));
 }
 
-var _templateObject$a, _templateObject2$8, _templateObject3$8, _templateObject4$8, _templateObject5$7, _templateObject6$5;
-var Container$6 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  display: block;\n  border-bottom-style: solid;\n\n  ", "\n"])), function (_ref) {
+var _templateObject$b, _templateObject2$9, _templateObject3$9, _templateObject4$8, _templateObject5$7, _templateObject6$5;
+var Container$6 = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  display: block;\n  border-bottom-style: solid;\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       internal = _ref.internal;
-  return css(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n    margin-bottom: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), theme.spacings.s2, internal ? '1px' : '2px', internal ? theme.getColor('lightestGrey', 50) : theme.colors.blue);
+  return css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n    margin-bottom: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), theme.spacings.s2, internal ? '1px' : '2px', internal ? theme.getColor('lightestGrey', 50) : theme.colors.blue);
 });
-var Tabs = styled.ul(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  list-style: none;\n  display: inline-flex;\n  gap: 1px;\n  padding: 0;\n  margin: 0;\n\n  ", "\n"])), function (_ref2) {
+var Tabs = styled.ul(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  list-style: none;\n  display: inline-flex;\n  gap: 1px;\n  padding: 0;\n  margin: 0;\n\n  ", "\n"])), function (_ref2) {
   var theme = _ref2.theme,
       internal = _ref2.internal;
   return css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n    height: ", ";\n    box-shadow: 0 0 10px 0 ", ";\n  "])), internal ? '41px' : '49px', theme.getColor('black', 10));
@@ -12445,17 +12595,17 @@ var getMask = function getMask(mask) {
   };
 };
 
-var _templateObject$b, _templateObject2$9, _templateObject3$9, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$2, _templateObject11$1, _templateObject12$1;
-var IconContainer = styled.button(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: calc(", " + 1px);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 17px;\n\n  background-color: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 0;\n\n  ", "\n"])), function (_ref) {
+var _templateObject$c, _templateObject2$a, _templateObject3$a, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$2, _templateObject11$1, _templateObject12$1;
+var IconContainer = styled.button(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: calc(", " + 1px);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 17px;\n\n  background-color: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 0;\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s2;
 }, function (_ref2) {
   var onClick = _ref2.onClick,
       disabled = _ref2.disabled;
   if (!onClick || disabled) return;
-  return css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
+  return css(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 });
-var Input = styled.input(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  line-height: 17px;\n\n  ::placeholder {\n    color: ", ";\n\n    line-height: 17px;\n\n    ", "\n  }\n\n  width: 100%;\n  box-sizing: border-box;\n\n  padding: ", ";\n\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: 4px;\n\n  background-color: ", ";\n\n  box-shadow: none;\n  outline: none;\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
+var Input = styled.input(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  line-height: 17px;\n\n  ::placeholder {\n    color: ", ";\n\n    line-height: 17px;\n\n    ", "\n  }\n\n  width: 100%;\n  box-sizing: border-box;\n\n  padding: ", ";\n\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: 4px;\n\n  background-color: ", ";\n\n  box-shadow: none;\n  outline: none;\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.useTypography('p');
 }, function (_ref4) {
@@ -12689,9 +12839,9 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
 });
 Input$1.displayName = 'Input';
 
-var _templateObject$c, _templateObject2$a, _templateObject3$a, _templateObject4$a, _templateObject5$9, _templateObject6$7, _templateObject7$5;
+var _templateObject$d, _templateObject2$b, _templateObject3$b, _templateObject4$a, _templateObject5$9, _templateObject6$7, _templateObject7$5;
 var width = '17px';
-var Checkmark = styled.span(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0px;\n  left: 0;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n\n  border-style: solid;\n  border-color: ", ";\n  border-width: 1px;\n  border-radius: 4px;\n\n  transition-property: border-color;\n  transition-duration: 0.25s;\n  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n\n  :after {\n    content: '';\n    position: absolute;\n\n    left: 50%;\n    top: 50%;\n    height: 0;\n    width: 0;\n\n    border-style: solid;\n    border-color: ", ";\n    border-width: 0;\n    transform: rotate(45deg);\n\n    transition-property: width height border-width top left;\n    transition-duration: 0.25s;\n    transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n  }\n"])), width, width, function (_ref) {
+var Checkmark = styled.span(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0px;\n  left: 0;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n\n  border-style: solid;\n  border-color: ", ";\n  border-width: 1px;\n  border-radius: 4px;\n\n  transition-property: border-color;\n  transition-duration: 0.25s;\n  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n\n  :after {\n    content: '';\n    position: absolute;\n\n    left: 50%;\n    top: 50%;\n    height: 0;\n    width: 0;\n\n    border-style: solid;\n    border-color: ", ";\n    border-width: 0;\n    transform: rotate(45deg);\n\n    transition-property: width height border-width top left;\n    transition-duration: 0.25s;\n    transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n  }\n"])), width, width, function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white;
 }, function (_ref2) {
@@ -12701,7 +12851,7 @@ var Checkmark = styled.span(_templateObject$c || (_templateObject$c = _taggedTem
   var theme = _ref3.theme;
   return theme.colors.blue;
 });
-var Label$1 = styled.label(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n\n  display: block;\n\n  ", "\n\n  ", "\n\n  > div {\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    padding-left: calc(", " + ", ");\n    user-select: none;\n    min-height: 17px;\n\n    > div:first-child {\n      display: inline-block;\n      ", "\n      line-height: 14px;\n\n      ", "\n    }\n\n    > input {\n      position: absolute;\n      opacity: 0;\n      height: 0;\n      width: 0;\n    }\n\n    :hover ", " {\n      background-color: ", ";\n    }\n\n    > input:checked ~ ", " {\n      border-color: ", ";\n\n      :after {\n        width: 5px;\n        height: 9.5px;\n        border-width: 0 2px 2px 0;\n        left: 5px;\n        top: 1px;\n      }\n    }\n\n    ", ";\n  }\n"])), function (_ref4) {
+var Label$1 = styled.label(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n\n  display: block;\n\n  ", "\n\n  ", "\n\n  > div {\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    padding-left: calc(", " + ", ");\n    user-select: none;\n    min-height: 17px;\n\n    > div:first-child {\n      display: inline-block;\n      ", "\n      line-height: 14px;\n\n      ", "\n    }\n\n    > input {\n      position: absolute;\n      opacity: 0;\n      height: 0;\n      width: 0;\n    }\n\n    :hover ", " {\n      background-color: ", ";\n    }\n\n    > input:checked ~ ", " {\n      border-color: ", ";\n\n      :after {\n        width: 5px;\n        height: 9.5px;\n        border-width: 0 2px 2px 0;\n        left: 5px;\n        top: 1px;\n      }\n    }\n\n    ", ";\n  }\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.useTypography('p');
 }, function (_ref5) {
@@ -12747,7 +12897,7 @@ var Label$1 = styled.label(_templateObject2$a || (_templateObject2$a = _taggedTe
     }
   }
 
-  return css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n    "])), _padding.top, _padding.left, _padding.right, _padding.bottom);
+  return css(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n    "])), _padding.top, _padding.left, _padding.right, _padding.bottom);
 }, function (_ref6) {
   var disabled = _ref6.disabled;
 
@@ -12854,7 +13004,8 @@ var _mask = function mask(v, seconds) {
 };
 
 var Time = React__default.forwardRef(function (props, ref) {
-  var seconds = props.seconds;
+  var value = props.value,
+      seconds = props.seconds;
 
   var _onKeyDown = props.onKeyDown || function () {};
 
@@ -12923,6 +13074,7 @@ var Time = React__default.forwardRef(function (props, ref) {
   var placeholder = props.placeholder === undefined ? seconds ? '––:––:––' : '––:––' : props.placeholder;
   return React__default.createElement(Input$1, Object.assign({}, props, {
     type: 'text',
+    value: _mask(value, seconds),
     placeholder: placeholder,
     mask: function mask(v) {
       return _mask(v, seconds);
@@ -12933,8 +13085,8 @@ var Time = React__default.forwardRef(function (props, ref) {
 });
 Time.displayName = 'Time';
 
-var _templateObject$d, _templateObject2$b, _templateObject3$b, _templateObject4$b, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$4, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1;
-var Container$7 = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  background-color: ", ";\n  padding: ", ";\n\n  > div:nth-child(1) {\n    border: 1px solid ", ";\n    margin-bottom: ", ";\n  }\n"])), function (_ref) {
+var _templateObject$e, _templateObject2$c, _templateObject3$c, _templateObject4$b, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$4, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1;
+var Container$7 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  background-color: ", ";\n  padding: ", ";\n\n  > div:nth-child(1) {\n    border: 1px solid ", ";\n    margin-bottom: ", ";\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white;
 }, function (_ref2) {
@@ -12947,11 +13099,11 @@ var Container$7 = styled.div(_templateObject$d || (_templateObject$d = _taggedTe
   var theme = _ref4.theme;
   return theme.spacings.s1;
 });
-var AbsoluteContainer$1 = styled(AbsoluteContainer)(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  > ", " {\n    padding: ", ";\n  }\n"])), Container$7, function (_ref5) {
+var AbsoluteContainer$1 = styled(AbsoluteContainer)(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  > ", " {\n    padding: ", ";\n  }\n"])), Container$7, function (_ref5) {
   var theme = _ref5.theme;
   return theme.spacings.s3 + " " + theme.spacings.s3 + " " + theme.spacings.s1 + " " + theme.spacings.s3;
 });
-var Footer = styled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var Footer = styled.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 var MonthContainer = styled.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  > div {\n    margin: ", " 0;\n  }\n"])), function (_ref6) {
   var theme = _ref6.theme;
   return theme.spacings.s1;
@@ -13074,8 +13226,7 @@ var Calendar = function Calendar(props) {
   var overlay = props.overlay,
       timeProps = props.time,
       notAbsolute = props.notAbsolute,
-      initalValue = props.initalValue,
-      references = props.references;
+      initalValue = props.initalValue;
 
   var _ref = props.value || useState(initalValue && !isNaN(initalValue.getTime()) ? initalValue : null),
       value = _ref[0],
@@ -13111,7 +13262,9 @@ var Calendar = function Calendar(props) {
     var h = value.getHours();
     var m = value.getMinutes();
     var s = value.getSeconds();
-    return [h, m, s].join(':');
+    return [h, m, s].map(function (v) {
+      return v.toString().padStart(2, '0');
+    }).join(':');
   }),
       time = _useState2[0],
       setTime = _useState2[1];
@@ -13263,16 +13416,17 @@ var Calendar = function Calendar(props) {
     type: 'button',
     content: 'Aplicar'
   })) : undefined);
-  return notAbsolute ? content : React__default.createElement(AbsoluteContainer$1, {
+  var absoluteContainerProps = filterObject(props, ['value', 'initalValue', 'max', 'min', 'overlay', 'time', 'onSubmit', 'invalid', 'notAbsolute', 'references']);
+  return notAbsolute ? content : React__default.createElement(AbsoluteContainer$1, Object.assign({
     axis: 'y',
-    references: references
-  }, content);
+    maxHeight: '322px'
+  }, absoluteContainerProps), content);
 };
 
 var JSDate = Date;
 
-var _templateObject$e;
-var RelativeContainer$1 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$f;
+var RelativeContainer$1 = styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 
 var isLeapYear = function isLeapYear(year) {
   if (year % 4 !== 0) return false;else if (year % 100 !== 0) return true;else if (year % 400 !== 0) return false;else return true;
@@ -13401,7 +13555,8 @@ var Date$1 = React__default.forwardRef(function (props, ref) {
     onKeyDown: onKeyDown,
     icon: icon,
     ref: ref
-  })), open && React__default.createElement(Calendar, {
+  })), React__default.createElement(Calendar, {
+    open: open,
     initalValue: value ? isoStringToDate(value) : undefined,
     onSubmit: {
       onClick: function onClick(date) {
@@ -13425,15 +13580,10 @@ var useContext = function useContext() {
   return React__default.useContext(Provider);
 };
 
-var _templateObject$f, _templateObject2$c, _templateObject3$c, _templateObject4$c;
-var RelativeContainer$2 = styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var HeaderContainer = styled.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$g, _templateObject2$d;
+var HeaderContainer = styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n    padding: ", " calc(", " * 0.75)\n      ", " ", ";\n  "])), theme.spacings.s3, theme.spacings.s3, theme.spacings.s1, theme.spacings.s3);
-});
-var SelectAllContainer = styled.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n  display: flex;\n  justify-content: space-between;\n"])), function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.spacings.s1;
+  return css(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n    padding: ", " calc(", " * 0.75)\n      ", " ", ";\n  "])), theme.spacings.s3, theme.spacings.s3, theme.spacings.s1, theme.spacings.s3);
 });
 
 var Header$1 = function Header() {
@@ -13443,52 +13593,21 @@ var Header$1 = function Header() {
     return React__default.createElement(React__default.Fragment, null);
   }
 
-  var _useState = useState(''),
-      search = _useState[0],
-      setSearch = _useState[1];
-
-  var _context$checked = context.checked,
-      checked = _context$checked[0],
-      setChecked = _context$checked[1],
-      _context$search = context.search,
-      searched = _context$search[0],
-      setSearched = _context$search[1],
-      loading = context.loading,
-      options = context.options;
-  useEffect(function () {
-    setSearch(searched);
-  }, [searched]);
-
-  var onClick = function onClick() {
-    setChecked(function (prev) {
-      return prev.length === options.length ? [] : options.map(function (option) {
-        return option.value;
-      });
-    });
-  };
-
-  var onSearch = function onSearch() {
-    setSearched(search);
-  };
-
-  var onClear = function onClear() {
-    setSearch('');
-    setSearched('');
-  };
-
-  return React__default.createElement(HeaderContainer, null, context.props.type === 'select-multiple' && context.props.selectAll && React__default.createElement(SelectAllContainer, null, React__default.createElement("b", null, "Selecionados (", checked.length, ")"), React__default.createElement(Button$1, {
-    type: 'button',
-    content: 'Selecionar todos',
-    appearance: 'link',
-    onClick: onClick,
-    color: 'darkBlue'
-  })), React__default.createElement(Input$1, {
+  var _context$search = context.search,
+      search = _context$search[0],
+      _context$searchInput = context.searchInput,
+      searchInput = _context$searchInput[0],
+      setSearchInput = _context$searchInput[1],
+      onClearSearch = context.onClearSearch,
+      onSearch = context.onSearch,
+      loading = context.loading;
+  return React__default.createElement(HeaderContainer, null, React__default.createElement(Input$1, {
     type: 'search',
     placeholder: 'Pesquisa',
-    setValue: setSearch,
-    value: search,
+    setValue: setSearchInput,
+    value: searchInput,
     onPressEnter: onSearch,
-    clearable: search !== '' && search === searched ? onClear : undefined,
+    clearable: searchInput !== '' && searchInput === search ? onClearSearch : undefined,
     icon: {
       icon: {
         type: 'feather',
@@ -13500,9 +13619,76 @@ var Header$1 = function Header() {
   }));
 };
 
+var getOptions = function getOptions(props, options) {
+  return options.map(function (option, index) {
+    var label = isString(option.label) ? {
+      text: option.label,
+      element: option.label
+    } : option.label;
+    var value = option.value,
+        onClick = option.onClick;
+    return {
+      label: label,
+      onClick: onClick ? function () {
+        onClick(index, {
+          label: label,
+          value: value
+        });
+      } : function () {
+        props.setValue(value);
+      }
+    };
+  });
+};
+
+var getInputValue = function getInputValue(value, options, parsedOptions) {
+  var selectedIndex = options.findIndex(function (option) {
+    return option.value === value;
+  });
+  var selected = parsedOptions[selectedIndex];
+  return selected ? selected.label.text : '';
+};
+
+var useSelect = function useSelect(props) {
+  var _useState = useState([]),
+      options = _useState[0],
+      setOptions = _useState[1];
+
+  var parsedOptions = getOptions(props, options);
+  var inputValue = getInputValue(props.value, options, parsedOptions);
+
+  var onReset = function onReset() {};
+
+  return {
+    parsedOptions: parsedOptions,
+    options: [options, setOptions],
+    input: {
+      value: inputValue
+    },
+    onReset: onReset,
+    menu: {
+      itemSpacing: 's3',
+      before: React__default.createElement(Header$1, null),
+      maxHeight: '180px'
+    },
+    getContext: function getContext(base, children) {
+      return React__default.createElement(Provider.Provider, {
+        value: _extends({}, base, {
+          props: props,
+          options: options
+        })
+      }, children);
+    }
+  };
+};
+
+var Provider$1 = React__default.createContext({});
+var useContext$1 = function useContext() {
+  return React__default.useContext(Provider$1);
+};
+
 var Footer$1 = function Footer() {
-  var context = useContext();
-  if (context.props.type !== 'select-multiple') return React__default.createElement(React__default.Fragment, null);
+  var context = useContext$1();
   var setValue = context.props.setValue,
       _context$checked = context.checked,
       checked = _context$checked[0],
@@ -13523,80 +13709,178 @@ var Footer$1 = function Footer() {
   });
 };
 
-var getOptions = function getOptions(props, options, checked, setChecked) {
-  if (props.type === 'select-multiple') {
-    return options.map(function (option) {
-      var label = isString(option.label) ? {
-        text: option.label,
-        element: option.label
-      } : option.label;
-      return {
-        label: {
-          text: label.text,
-          element: React__default.createElement(Checkbox, {
-            type: 'checkbox',
-            checked: checked.includes(option.value),
-            label: label.element,
-            onChange: function onChange(event) {
-              var isChecked = event.target.checked;
-              setChecked(function (prev) {
-                var newState = prev.filter(function (v) {
-                  return v !== option.value;
-                });
-                if (isChecked) newState.push(option.value);
-                return newState;
-              });
-            },
-            padding: {
-              top: 's3',
-              left: 's3',
-              right: 's3',
-              bottom: 's3'
-            }
-          })
-        },
-        onClick: function onClick() {},
-        data: {
-          value: option.value
-        },
-        keepOpen: true
-      };
-    });
+var _templateObject$h, _templateObject2$e, _templateObject3$d;
+var HeaderContainer$1 = styled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return css(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n    padding: ", " calc(", " * 0.75)\n      ", " ", ";\n  "])), theme.spacings.s3, theme.spacings.s3, theme.spacings.s1, theme.spacings.s3);
+});
+var SelectAllContainer = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n  display: flex;\n  justify-content: space-between;\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.spacings.s1;
+});
+
+var Header$2 = function Header() {
+  var context = useContext$1();
+
+  if (!context.props.search) {
+    return React__default.createElement(React__default.Fragment, null);
   }
 
+  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() {
+    setChecked(function (prev) {
+      return prev.length === options.length ? [] : options.map(function (option) {
+        return option.value;
+      });
+    });
+  };
+
+  return React__default.createElement(HeaderContainer$1, null, context.props.selectAll && React__default.createElement(SelectAllContainer, null, React__default.createElement("b", null, "Selecionados (", checked.length, ")"), React__default.createElement(Button$1, {
+    type: 'button',
+    content: 'Selecionar todos',
+    appearance: 'link',
+    onClick: onClick,
+    color: 'darkBlue'
+  })), 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
+    },
+    loading: loading
+  }));
+};
+
+var getOptions$1 = function getOptions(options, checked, setChecked) {
   return options.map(function (option) {
     var label = isString(option.label) ? {
       text: option.label,
       element: option.label
     } : option.label;
     return {
-      label: label,
-      onClick: option.onClick || function (_index, data) {
-        props.setValue(data.value);
+      label: {
+        text: label.text,
+        element: React__default.createElement(Checkbox, {
+          type: 'checkbox',
+          checked: checked.includes(option.value),
+          label: label.element,
+          onChange: function onChange(event) {
+            var isChecked = event.target.checked;
+            setChecked(function (prev) {
+              var newState = prev.filter(function (v) {
+                return v !== option.value;
+              });
+              if (isChecked) newState.push(option.value);
+              return newState;
+            });
+          },
+          padding: {
+            top: 's3',
+            left: 's3',
+            right: 's3',
+            bottom: 's3'
+          }
+        })
       },
-      data: {
-        value: option.value
-      }
+      keepOpen: true
     };
   });
 };
 
-var Select = React__default.forwardRef(function (props, ref) {
-  var position = props.position,
-      loader = props.loader,
-      type = props.type;
+var getInputValue$1 = function getInputValue(value) {
+  if (value.length < 1) return '';
+  return value.length > 1 ? "H\xE1 " + value.length + " sele\xE7\xF5es" : "H\xE1 " + value.length + " sele\xE7\xE3o";
+};
 
+var useSelectMultiple = function useSelectMultiple(props) {
   var _useState = useState([]),
       options = _useState[0],
       setOptions = _useState[1];
 
-  var _useState2 = useState(false),
-      _loading = _useState2[0],
-      setLoading = _useState2[1];
+  var _useState2 = useState([].concat(props.value)),
+      checked = _useState2[0],
+      setChecked = _useState2[1];
+
+  var parsedOptions = getOptions$1(options, checked, setChecked);
+  var inputValue = getInputValue$1(props.value);
+
+  var onReset = function onReset() {
+    setChecked([].concat(props.value));
+  };
+
+  var returnData = {
+    parsedOptions: parsedOptions,
+    options: [options, setOptions],
+    input: {
+      value: inputValue
+    },
+    onReset: onReset,
+    menu: {
+      itemSpacing: undefined,
+      before: React__default.createElement(Header$2, null),
+      after: React__default.createElement(Footer$1, null),
+      maxHeight: props.selectAll ? '269px' : '224px'
+    },
+    getContext: function getContext(base, children) {
+      return React__default.createElement(Provider$1.Provider, {
+        value: _extends({}, base, {
+          props: props,
+          options: options,
+          checked: [checked, setChecked]
+        })
+      }, children);
+    }
+  };
+  return returnData;
+};
+
+var _templateObject$i;
+var RelativeContainer$2 = styled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+
+var Select = React__default.forwardRef(function (props, ref) {
+  var position = props.position,
+      loader = props.loader;
+
+  var _ref = props.type === 'select-multiple' ? useSelectMultiple(props) : useSelect(props),
+      parsedOptions = _ref.parsedOptions,
+      inputValue = _ref.input.value,
+      _ref$options = _ref.options,
+      setOptions = _ref$options[1],
+      onReset = _ref.onReset,
+      menuProps = _ref.menu,
+      getContext = _ref.getContext;
+
+  var _useState = useState(false),
+      _loading = _useState[0],
+      setLoading = _useState[1];
+
+  var _useState2 = useState(''),
+      search = _useState2[0],
+      _setSearch = _useState2[1];
 
   var _useState3 = useState(''),
-      search = _useState3[0],
-      _setSearch = _useState3[1];
+      searchInput = _useState3[0],
+      setSearchInput = _useState3[1];
 
   var _useState4 = useState(1),
       page = _useState4[0],
@@ -13610,10 +13894,6 @@ var Select = React__default.forwardRef(function (props, ref) {
       open = _useState6[0],
       setOpen = _useState6[1];
 
-  var _useState7 = useState(Array.isArray(props.value) ? [].concat(props.value) : []),
-      checked = _useState7[0],
-      setChecked = _useState7[1];
-
   var loading = props.loading || _loading;
 
   var setSearch = function setSearch(value) {
@@ -13622,21 +13902,9 @@ var Select = React__default.forwardRef(function (props, ref) {
     setPage(1);
   };
 
-  var parsedOptions = getOptions(props, options, checked, setChecked);
-  var inputProps = filterObject(props, ['type', 'onScrollEnd', 'position', 'value']);
-
-  if (props.type === 'select-multiple') {
-    if (props.value.length > 0) {
-      inputProps.value = props.value.length > 1 ? "H\xE1 " + props.value.length + " sele\xE7\xF5es" : "H\xE1 " + props.value.length + " sele\xE7\xE3o";
-    } else {
-      inputProps.value = '';
-    }
-  } else {
-    var selected = parsedOptions.find(function (option) {
-      return option.data.value === props.value;
-    });
-    inputProps.value = selected ? selected.label.text : '';
-  }
+  var inputProps = filterObject(props, ['type', 'onScrollEnd', 'position', 'value'], {
+    value: inputValue
+  });
 
   var _onScrollEnd = props.onScrollEnd || function () {};
 
@@ -13686,17 +13954,28 @@ var Select = React__default.forwardRef(function (props, ref) {
   useEffect(function () {
     if (open) return;
     setSearch('');
-    if (Array.isArray(props.value)) setChecked([].concat(props.value));
+    onReset();
   }, [props.value, open]);
-  return React__default.createElement(Provider.Provider, {
-    value: {
-      props: props,
-      setOpen: setOpen,
-      checked: [checked, setChecked],
-      search: [search, setSearch],
-      loading: loading,
-      options: options
-    }
+  useEffect(function () {
+    setSearchInput(search);
+  }, [search]);
+
+  var onSearch = function onSearch() {
+    setSearch(searchInput);
+  };
+
+  var onClearSearch = function onClearSearch() {
+    setSearchInput('');
+    setSearch('');
+  };
+
+  return getContext({
+    setOpen: setOpen,
+    search: [search, setSearch],
+    searchInput: [searchInput, setSearchInput],
+    onSearch: onSearch,
+    onClearSearch: onClearSearch,
+    loading: loading
   }, React__default.createElement(RelativeContainer$2, {
     ref: useOnClickOut(function () {
       return setOpen(false);
@@ -13719,7 +13998,7 @@ var Select = React__default.forwardRef(function (props, ref) {
       }
     },
     ref: ref
-  })), React__default.createElement(Menu, {
+  })), React__default.createElement(Menu, Object.assign({}, menuProps, {
     open: open,
     close: function close() {
       return setOpen(false);
@@ -13728,20 +14007,21 @@ var Select = React__default.forwardRef(function (props, ref) {
     onScrollEnd: onScrollEnd,
     width: '100%',
     bordered: true,
-    itemSpacing: type === 'select-multiple' ? undefined : 's3',
     position: position,
     references: {
       bottom: '35px'
     },
-    before: React__default.createElement(Header$1, null),
-    after: React__default.createElement(Footer$1, null),
-    scrollHeight: props.search ? '135px' : '165px',
     loading: loading,
     center: props.center || {
       x: 50,
       y: 50
+    },
+    transition: {
+      properties: {
+        'max-height': {}
+      }
     }
-  })));
+  }))));
 });
 Select.displayName = 'Select';
 
@@ -13801,7 +14081,7 @@ Password.displayName = 'Password';
 
 var img = "flags~SpNmyrlX.png";
 
-var _templateObject$g, _templateObject2$d;
+var _templateObject$j, _templateObject2$f;
 var coordinates = {
   ar: {
     s1: '0px 0px',
@@ -13876,12 +14156,12 @@ var coordinates = {
     s6: '0px 0px'
   }
 };
-var Flag = styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose(["\n  background-image: url(", ");\n  background-size: auto 100%;\n\n  ", "\n"])), img, function (_ref) {
+var Flag = styled.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n  background-image: url(", ");\n  background-size: auto 100%;\n\n  ", "\n"])), img, function (_ref) {
   var iso = _ref.iso,
       width = _ref.width,
       theme = _ref.theme;
   width = width || 's4';
-  return css(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n      background-position: ", ";\n      width: ", ";\n      height: calc(", " / 1.4);\n    "])), coordinates[iso][width], theme.spacings[width], theme.spacings[width]);
+  return css(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n      background-position: ", ";\n      width: ", ";\n      height: calc(", " / 1.4);\n    "])), coordinates[iso][width], theme.spacings[width], theme.spacings[width]);
 });
 
 var countries = {
@@ -13985,10 +14265,10 @@ var countries = {
   }
 };
 
-var _templateObject$h, _templateObject2$e, _templateObject3$d;
-var IconContainer$1 = styled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  > i.icon {\n    margin-top: -1px;\n  }\n"])));
-var RelativeContainer$3 = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var Label$2 = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n  ", "\n\n  color: ", ";\n\n  display: flex;\n  gap: ", ";\n\n  > span {\n    color: ", ";\n  }\n"])), function (_ref) {
+var _templateObject$k, _templateObject2$g, _templateObject3$e;
+var IconContainer$1 = styled.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  > i.icon {\n    margin-top: -1px;\n  }\n"])));
+var RelativeContainer$3 = styled.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var Label$2 = styled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n  ", "\n\n  color: ", ";\n\n  display: flex;\n  gap: ", ";\n\n  > span {\n    color: ", ";\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -14077,10 +14357,9 @@ var Phone = React__default.forwardRef(function (props, ref) {
           iso: iso
         }), countries[iso].name, React__default.createElement("span", null, "+", countries[iso].ddi))
       },
-      onClick: function onClick(_index, country) {
-        setCountry(country);
-      },
-      data: countries[iso]
+      onClick: function onClick() {
+        setCountry(countries[iso]);
+      }
     };
   });
 
@@ -14140,14 +14419,19 @@ var Phone = React__default.forwardRef(function (props, ref) {
     width: '100%',
     maxHeight: '165px',
     bordered: true,
-    itemSpacing: 's3'
+    itemSpacing: 's3',
+    transition: {
+      properties: {
+        'max-height': {}
+      }
+    }
   }));
 });
 Phone.displayName = 'Phone';
 
-var _templateObject$i, _templateObject2$f, _templateObject3$e, _templateObject4$d, _templateObject5$b, _templateObject6$9;
-var RelativeContainer$4 = styled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  input {\n    color: transparent;\n  }\n"])));
-var Container$8 = styled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  width: calc(100% - 2px - ", ");\n  height: 33px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: ", ";\n  border-radius: 4px;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var _templateObject$l, _templateObject2$h, _templateObject3$f, _templateObject4$c, _templateObject5$b, _templateObject6$9;
+var RelativeContainer$4 = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  input {\n    color: transparent;\n  }\n"])));
+var Container$8 = styled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  width: calc(100% - 2px - ", ");\n  height: 33px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: ", ";\n  border-radius: 4px;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var iconWidth = _ref.iconWidth,
       theme = _ref.theme;
   return iconWidth + " - " + theme.spacings.s3;
@@ -14158,11 +14442,11 @@ var Container$8 = styled.div(_templateObject2$f || (_templateObject2$f = _tagged
   var invalid = _ref3.invalid,
       theme = _ref3.theme;
   if (!invalid) return;
-  return css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), theme.colors.warningRed);
+  return css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), theme.colors.warningRed);
 }, function (_ref4) {
   var disabled = _ref4.disabled;
   if (!disabled) return;
-  return css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return css(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 });
 var Button$3 = styled.button(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref5) {
   var onClick = _ref5.onClick;
@@ -14260,7 +14544,8 @@ var DatePicker = React__default.forwardRef(function (props, ref) {
     icon: 'chevron_right',
     color: props.invalid ? 'warningRed' : 'grey',
     strokeWidth: '3px'
-  }))), open && React__default.createElement(Calendar, {
+  }))), React__default.createElement(Calendar, {
+    open: open,
     initalValue: value ? isoStringToDate(value) : undefined,
     onSubmit: {
       onClick: function onClick(date) {
@@ -14278,22 +14563,22 @@ var DatePicker = React__default.forwardRef(function (props, ref) {
 });
 DatePicker.displayName = 'DatePicker';
 
-var _templateObject$j, _templateObject2$g, _templateObject3$f, _templateObject4$e, _templateObject5$c, _templateObject6$a, _templateObject7$7;
-var LabelContainer = styled.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
+var _templateObject$m, _templateObject2$i, _templateObject3$g, _templateObject4$d, _templateObject5$c, _templateObject6$a, _templateObject7$7;
+var LabelContainer = styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 });
-var Label$3 = styled.label(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n  position: relative;\n\n  ", "\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 (_ref2) {
+var Label$3 = styled.label(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n  position: relative;\n\n  ", "\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 (_ref2) {
   var theme = _ref2.theme;
   return theme.spacings.s1;
 }, function (_ref3) {
   var disabled = _ref3.disabled;
 
   if (!disabled) {
-    return css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
+    return css(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
   }
 
-  return css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, function (_ref4) {
   var required = _ref4.required;
   if (!required) return;
@@ -14356,8 +14641,8 @@ var Switch = function Switch(props) {
   })), React__default.createElement("span", null), label && React__default.createElement(LabelContainer, null, label));
 };
 
-var _templateObject$k, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$b, _templateObject7$8, _templateObject8$5, _templateObject9$5, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15, _templateObject16;
-var bullet = css(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: ", ";\n  height: ", ";\n  border-radius: 100%;\n  border-width: 1px;\n  border-style: solid;\n  background-color: ", ";\n  box-shadow: 0px 1px 3px ", ";\n"])), function (_ref) {
+var _templateObject$n, _templateObject2$j, _templateObject3$h, _templateObject4$e, _templateObject5$d, _templateObject6$b, _templateObject7$8, _templateObject8$5, _templateObject9$5, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15, _templateObject16;
+var bullet = css(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: ", ";\n  height: ", ";\n  border-radius: 100%;\n  border-width: 1px;\n  border-style: solid;\n  background-color: ", ";\n  box-shadow: 0px 1px 3px ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s4;
 }, function (_ref2) {
@@ -14370,8 +14655,8 @@ var bullet = css(_templateObject$k || (_templateObject$k = _taggedTemplateLitera
   var theme = _ref4.theme;
   return theme.getColor('black', 10);
 });
-var Input$2 = styled.input(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  background-color: transparent;\n  outline: none;\n  position: relative;\n  z-index: 3;\n  margin: 0;\n\n  :not(:disabled) {\n    cursor: pointer;\n  }\n\n  /** firefox */\n  ::-moz-range-thumb {\n    ", "\n  }\n  /** ie */\n  ::-ms-thumb {\n    ", "\n  }\n  /** chrome */\n  ::-webkit-slider-thumb {\n    ", "\n  }\n"])), bullet, bullet, bullet);
-var Label$4 = styled.label(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n\n  ", "\n\n  > div:first-child {\n    display: inline-block;\n    margin-bottom: ", ";\n\n    ", "\n  }\n"])), function (_ref5) {
+var Input$2 = styled.input(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  background-color: transparent;\n  outline: none;\n  position: relative;\n  z-index: 3;\n  margin: 0;\n\n  :not(:disabled) {\n    cursor: pointer;\n  }\n\n  /** firefox */\n  ::-moz-range-thumb {\n    ", "\n  }\n  /** ie */\n  ::-ms-thumb {\n    ", "\n  }\n  /** chrome */\n  ::-webkit-slider-thumb {\n    ", "\n  }\n"])), bullet, bullet, bullet);
+var Label$4 = styled.label(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n\n  ", "\n\n  > div:first-child {\n    display: inline-block;\n    margin-bottom: ", ";\n\n    ", "\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.useTypography('p');
 }, function (_ref6) {
@@ -14380,7 +14665,7 @@ var Label$4 = styled.label(_templateObject3$g || (_templateObject3$g = _taggedTe
 }, function (_ref7) {
   var disabled = _ref7.disabled;
   if (!disabled) return;
-  return css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.spacings.s1;
@@ -14449,13 +14734,19 @@ var getMarkers = function getMarkers(props) {
       var _max2 = _markers.length - 1;
 
       var _step2 = 1;
+
+      var value = _markers.findIndex(function (m) {
+        return m.value === props.value;
+      });
+
       return {
         min: _min2,
         max: _max2,
         step: _step2,
         strict: _strict,
         markers: _markers,
-        position: position
+        position: position,
+        value: value
       };
     }
 
@@ -14470,7 +14761,8 @@ var getMarkers = function getMarkers(props) {
       step: _step,
       strict: _strict,
       markers: _markers,
-      position: position
+      position: position,
+      value: props.value
     };
   }
 
@@ -14485,7 +14777,8 @@ var getMarkers = function getMarkers(props) {
     step: step,
     strict: strict,
     markers: [],
-    position: 'bottom'
+    position: 'bottom',
+    value: props.value
   };
 };
 
@@ -14504,11 +14797,11 @@ var Range = React__default.forwardRef(function (props, ref) {
       strict = _getMarkers.strict,
       markers = _getMarkers.markers,
       step = _getMarkers.step,
-      position = _getMarkers.position;
+      position = _getMarkers.position,
+      value = _getMarkers.value;
 
   var range = max - min;
   var percent = 100 / range;
-  var value = props.value !== undefined ? parseFloat("" + props.value) : min;
   var spans = value - min;
 
   if (value < min || value > max) {
@@ -14527,11 +14820,12 @@ var Range = React__default.forwardRef(function (props, ref) {
 
     _onChange(event, value);
   };
-  var inputProps = filterObject(props, ['label', 'minLabel', 'maxLabel', 'invalid', 'required', 'width', 'onChange', 'step'], {
+  var inputProps = filterObject(props, ['label', 'minLabel', 'maxLabel', 'invalid', 'required', 'width', 'onChange', 'step', 'value'], {
     min: min,
     max: max,
     step: step,
-    onChange: onChange
+    onChange: onChange,
+    value: value
   });
   return React__default.createElement(Label$4, {
     required: required ? 1 : 0,
@@ -14566,22 +14860,22 @@ var Range = React__default.forwardRef(function (props, ref) {
 });
 Range.displayName = 'input';
 
-var _templateObject$l, _templateObject2$i, _templateObject3$h, _templateObject4$g, _templateObject5$e, _templateObject6$c, _templateObject7$9;
-var LabelContainer$1 = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
+var _templateObject$o, _templateObject2$k, _templateObject3$i, _templateObject4$f, _templateObject5$e, _templateObject6$c, _templateObject7$9;
+var LabelContainer$1 = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 });
-var Label$5 = styled.label(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n\n  ", "\n\n  ", "\n\n", "\n\n  > input {\n    height: 0;\n    width: 0;\n  }\n\n  > span {\n    height: 17px;\n    width: 17px;\n    border-radius: 100%;\n    border-width: 1px;\n    border-style: solid;\n    background-color: ", ";\n    position: relative;\n    transition-property: border-color;\n    transition-duration: 0.5s;\n    transition-timing-function: ease-in-out;\n    :before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      height: 0;\n      width: 0;\n      border-radius: 100%;\n      transition-property: top, left, width, height, background-color;\n      transition-duration: 0.5s;\n      transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n    }\n  }\n  > input:checked + span {\n    :before {\n      top: calc(50% - 4.5px);\n      left: calc(50% - 4.5px);\n      height: 9px;\n      width: 9px;\n    }\n  }\n"])), function (_ref2) {
+var Label$5 = styled.label(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n\n  ", "\n\n  ", "\n\n", "\n\n  > input {\n    height: 0;\n    width: 0;\n    /* Chrome, Safari, Edge, Opera */\n    :-webkit-outer-spin-button,\n    :-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    /* Firefox */\n    -moz-appearance: none;\n  }\n\n  > span {\n    height: 17px;\n    width: 17px;\n    border-radius: 100%;\n    border-width: 1px;\n    border-style: solid;\n    background-color: ", ";\n    position: relative;\n    transition-property: border-color;\n    transition-duration: 0.5s;\n    transition-timing-function: ease-in-out;\n    :before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      height: 0;\n      width: 0;\n      border-radius: 100%;\n      transition-property: top, left, width, height, background-color;\n      transition-duration: 0.5s;\n      transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n    }\n  }\n  > input:checked + span {\n    :before {\n      top: calc(50% - 4.5px);\n      left: calc(50% - 4.5px);\n      height: 9px;\n      width: 9px;\n    }\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.spacings.s1;
 }, function (_ref3) {
   var disabled = _ref3.disabled;
 
   if (!disabled) {
-    return css(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
+    return css(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
   }
 
-  return css(_templateObject4$g || (_templateObject4$g = _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;
@@ -14626,187 +14920,691 @@ var RadioButton = function RadioButton(props) {
   })), React__default.createElement("span", null), label && React__default.createElement(LabelContainer$1, null, label));
 };
 
-var Input$3 = React__default.forwardRef(function (props, ref) {
-  switch (props.type) {
-    case 'date':
-      {
-        return React__default.createElement(Date$1, Object.assign({}, props, {
-          ref: ref
-        }));
-      }
-
-    case 'time':
-      {
-        return React__default.createElement(Time, Object.assign({}, props, {
-          ref: ref
-        }));
-      }
+var _templateObject$p;
+var Container$9 = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  background-color: ", ";\n  display: flex;\n  width: min-content;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.spacings.s1 + " " + theme.spacings.s1 + " 0px " + theme.spacings.s1;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.white;
+});
 
-    case 'checkbox':
-      {
-        return React__default.createElement(Checkbox, Object.assign({}, props, {
-          ref: ref
-        }));
-      }
+var CalendarInterval = function CalendarInterval(props) {
+  var time = props.time;
 
-    case 'select':
-      {
-        return React__default.createElement(Select, Object.assign({}, props, {
-          ref: ref
-        }));
-      }
+  var _ref = props.value && Array.isArray(props.value.start) ? props.value.start : useState(null),
+      start = _ref[0],
+      setStart = _ref[1];
 
-    case 'select-multiple':
-      {
-        return React__default.createElement(Select, Object.assign({}, props, {
-          ref: ref
-        }));
-      }
+  var _ref2 = props.value && Array.isArray(props.value.end) ? props.value.end : useState(null),
+      end = _ref2[0],
+      setEnd = _ref2[1];
 
-    case 'password':
-      {
-        return React__default.createElement(Password, Object.assign({}, props, {
-          ref: ref
-        }));
-      }
+  useEffect(function () {
+    if (!props.value) return;
 
-    case 'phone':
-      {
-        return React__default.createElement(Phone, Object.assign({}, props, {
-          ref: ref
-        }));
-      }
+    if (!Array.isArray(props.value.start)) {
+      setStart(props.value.start);
+    }
 
-    case 'datepicker':
-      {
-        return React__default.createElement(DatePicker, Object.assign({}, props, {
-          ref: ref
-        }));
-      }
+    if (!Array.isArray(props.value.end)) {
+      setEnd(props.value.end);
+    }
+  }, [props.value]);
 
-    case 'range':
-      {
-        return React__default.createElement(Range, Object.assign({}, props, {
-          ref: ref
-        }));
-      }
+  var _useState = useState(false),
+      startInvalid = _useState[0],
+      setStartInvalid = _useState[1];
 
-    case 'switch':
-      {
-        return React__default.createElement(Switch, Object.assign({}, props));
-      }
+  var _useState2 = useState(false),
+      endInvalid = _useState2[0],
+      setEndInvalid = _useState2[1];
 
-    case 'radio':
-      {
-        return React__default.createElement(RadioButton, Object.assign({}, props));
-      }
+  var min;
 
-    default:
-      {
-        return React__default.createElement(Input$1, Object.assign({}, props, {
-          ref: ref
-        }));
-      }
+  if (props.min) {
+    min = new Date(props.min.getTime());
   }
-});
-Input$3.displayName = 'Input';
 
-var Portal = function Portal(props) {
-  var id = props.id,
-      opened = props.opened,
-      children = props.children;
-  var portalRoot = document.createElement('div');
-  useEffect(function () {
-    if (opened) {
-      portalRoot.id = id + '-root';
-      document.body.appendChild(portalRoot);
-      return function () {
-        document.body.removeChild(portalRoot);
-      };
-    }
-  }, [opened]);
-  return opened ? createPortal(children, portalRoot) : null;
-};
+  var max;
 
-var heights = {
-  small: '356.4px',
-  medium: '549px',
-  large: '600px',
-  custom: '100%',
-  default: '356.4px'
-};
-var widths = {
-  small: '642.5px',
-  medium: '1010px',
-  large: '1095px',
-  custom: '100%',
-  default: '642.5px'
-};
+  if (props.max) {
+    max = new Date(props.max.getTime());
+  }
 
-var _templateObject$m, _templateObject2$j, _templateObject3$i, _templateObject4$h, _templateObject5$f, _templateObject6$d, _templateObject7$a, _templateObject8$6, _templateObject9$6, _templateObject10$5;
-var Background = styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  backdrop-filter: blur(3px);\n  background-color: ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.getColor('black', 25);
-});
-var Content = styled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"])));
-var Header$2 = styled.div(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  ", "\n"])), function (_ref2) {
-  var _ref2$theme = _ref2.theme,
-      colors = _ref2$theme.colors,
-      spacings = _ref2$theme.spacings,
-      useTypography = _ref2$theme.useTypography;
-  return css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", ";\n    padding: ", ";\n\n    ", "\n  "])), colors.lightestGrey, spacings.s4, useTypography('h1'));
-});
-var Footer$2 = styled.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  ", "\n"])), function (_ref3) {
-  var _ref3$theme = _ref3.theme,
-      spacings = _ref3$theme.spacings,
-      colors = _ref3$theme.colors;
-  return css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n    border-top: 1px solid ", ";\n    padding: ", ";\n  "])), colors.lightestGrey, spacings.s3);
-});
-var FooterMessage = styled.div(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n  max-width: 75%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  span {\n    font-size: 14px;\n    color: ", ";\n  }\n"])), function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.getColor('darkBlue', 75);
-});
-var FooterButtons = styled.div(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: ", ";\n"])), function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.spacings.s3;
-});
-var Container$9 = styled.div(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (_ref6) {
-  var theme = _ref6.theme,
-      size = _ref6.size,
-      customSize = _ref6.customSize,
-      color = _ref6.color,
-      inverted = _ref6.inverted;
-  return css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    box-shadow: 0 0 21px 7px ", ";\n\n    width: ", ";\n\n    height: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), theme.colors.white, theme.getColor('black', 15), size === 'custom' && customSize ? customSize.width || 'auto' : widths[size], size === 'custom' && customSize ? customSize.height || 'auto' : heights[size], Header$2, inverted ? theme.isDarkColor(color) : theme.colors[color], inverted ? theme.colors[color] : theme.isDarkColor(color));
-});
+  var minEnd;
 
-var _excluded$1 = ["children"];
+  if (start) {
+    minEnd = start;
 
-var Modal = function Modal(props) {
-  var openState = props.openState,
-      title = props.title,
-      size = props.size,
-      color = props.color,
-      inverted = props.inverted,
-      children = props.children,
-      content = props.content,
-      footer = props.footer,
-      footerMessage = props.footerMessage,
-      loading = props.loading,
-      closeOnEsc = props.closeOnEsc,
-      closeOnClickOutside = props.closeOnClickOutside,
-      customSize = props.customSize;
-  var open = openState[0],
-      setOpen = openState[1];
+    if (min) {
+      minEnd = start >= min ? start : min;
+    }
+  } else if (min) {
+    minEnd = min;
+  }
 
-  var onClickOutside = function onClickOutside(event) {
-    var _event$target$parentE;
+  var maxStart;
 
-    if (closeOnClickOutside && (_event$target$parentE = event.target.parentElement) !== null && _event$target$parentE !== void 0 && _event$target$parentE.id) {
-      setOpen(false);
-    }
-  };
+  if (end) {
+    maxStart = end;
 
-  useEffect(function () {
+    if (max) {
+      maxStart = end <= max ? end : max;
+    }
+  } else if (max) {
+    maxStart = max;
+  }
+
+  var _onSubmit = props.onSubmit || {};
+
+  var onSubmit = _extends({
+    disabled: startInvalid || endInvalid,
+    onClick: function onClick() {}
+  }, _onSubmit);
+
+  var absoluteContainerProps = filterObject(props, ['max', 'min', 'value', 'time', 'onSubmit']);
+  return React__default.createElement(AbsoluteContainer, Object.assign({
+    axis: 'y',
+    maxHeight: '329px'
+  }, absoluteContainerProps), React__default.createElement(Container$9, null, React__default.createElement(Calendar, {
+    open: true,
+    value: [start, setStart],
+    min: min,
+    max: maxStart,
+    overlay: {
+      type: 'after',
+      value: end
+    },
+    time: time,
+    invalid: [startInvalid, setStartInvalid],
+    notAbsolute: true
+  }), React__default.createElement(Calendar, {
+    open: true,
+    value: [end, setEnd],
+    min: minEnd,
+    max: max,
+    overlay: {
+      type: 'before',
+      value: start
+    },
+    time: time,
+    invalid: [endInvalid, setEndInvalid],
+    notAbsolute: true,
+    onSubmit: {
+      onClick: function onClick() {
+        return onSubmit.onClick(start, end);
+      },
+      disabled: onSubmit.disabled
+    }
+  })));
+};
+
+var validate = function validate(_ref, min, max) {
+  var start = _ref[0],
+      end = _ref[1];
+  if (min && start < min) return false;
+  if (max && end > max) return false;
+  return true;
+};
+var intervalTypes = {
+  day: {
+    label: function label(prev) {
+      var today = new Date();
+      today.setHours(0, 0, 0, 0);
+      if (isDateEquals(today, prev[0])) return 'Hoje';
+      return dateToIsoString(prev[0], false, false);
+    },
+    initial: function initial(base) {
+      if (!base) base = new Date();
+      var start = new Date(base);
+      start.setHours(0, 0, 0, 0);
+      var end = new Date(base);
+      end.setHours(23, 59, 59, 0);
+      return [start, end];
+    },
+    increment: function increment(prev) {
+      return prev.map(function (d) {
+        var tmp = new Date(d);
+        tmp.setDate(tmp.getDate() + 1);
+        return tmp;
+      });
+    },
+    decrement: function decrement(prev) {
+      return prev.map(function (d) {
+        var tmp = new Date(d);
+        tmp.setDate(tmp.getDate() - 1);
+        return tmp;
+      });
+    }
+  },
+  week: {
+    label: function label(prev) {
+      var _getWeekNumber = getWeekNumber(prev[0]),
+          weekNumber = _getWeekNumber[0];
+
+      return weekNumber + "\xAA Semana";
+    },
+    initial: function initial(base) {
+      if (!base) base = new Date();
+      var start = new Date(base);
+      start.setDate(start.getDate() - start.getUTCDay());
+      start.setHours(0, 0, 0, 0);
+      var end = new Date(base);
+      end.setDate(start.getDate() - start.getUTCDay() + 6);
+      end.setHours(23, 59, 59, 0);
+      return [start, end];
+    },
+    increment: function increment(prev) {
+      return prev.map(function (d) {
+        var tmp = new Date(d);
+        tmp.setDate(tmp.getDate() + 7);
+        return tmp;
+      });
+    },
+    decrement: function decrement(prev) {
+      return prev.map(function (d) {
+        var tmp = new Date(d);
+        tmp.setDate(tmp.getDate() - 7);
+        return tmp;
+      });
+    },
+    getMinMax: function getMinMax(min, max) {
+      var firstWeek = getFirstWeek();
+      var lastWeek = getLastWeek();
+      if (!min || min < firstWeek) min = firstWeek;
+      if (!max || max > lastWeek) max = lastWeek;
+      return {
+        min: min,
+        max: max
+      };
+    }
+  },
+  month: {
+    label: function label(prev) {
+      var monthName = getMonthName(prev[0]);
+      var year = prev[0].getFullYear();
+      return monthName + "/" + year;
+    },
+    initial: function initial(base) {
+      if (!base) base = new Date();
+      var start = new Date(base);
+      start.setDate(1);
+      start.setHours(0, 0, 0, 0);
+      var end = new Date(base);
+      end.setMonth(end.getMonth() + 1);
+      end.setDate(0);
+      end.setHours(23, 59, 59, 0);
+      return [start, end];
+    },
+    increment: function increment(prev) {
+      var start = new Date(prev[0]);
+      start.setDate(1);
+      start.setMonth(start.getMonth() + 1);
+      var end = new Date(start);
+      end.setMonth(end.getMonth() + 1);
+      end.setDate(0);
+      end.setHours(23, 59, 59, 0);
+      return [start, end];
+    },
+    decrement: function decrement(prev) {
+      var start = new Date(prev[0]);
+      start.setDate(1);
+      start.setMonth(start.getMonth() - 1);
+      var end = new Date(start);
+      end.setMonth(end.getMonth() - 1);
+      end.setDate(0);
+      end.setHours(23, 59, 59, 0);
+      return [start, end];
+    }
+  },
+  custom: {
+    label: function label(prev) {
+      var start = dateToIsoString(prev[0], false, false);
+      var end = dateToIsoString(prev[1], false, false);
+      return start + " - " + end;
+    },
+    initial: function initial(base) {
+      if (!base) base = new Date();
+      return [base, base];
+    }
+  }
+};
+var identify = function identify(value) {
+  var start = value[0],
+      end = value[1];
+  var isoStart = dateToIsoString(start);
+  var isoEnd = dateToIsoString(end);
+
+  if (isoStart === isoEnd) {
+    var _intervalTypes$day$in = intervalTypes.day.initial(start),
+        expectedStart = _intervalTypes$day$in[0],
+        expectedEnd = _intervalTypes$day$in[1];
+
+    if (isDateEquals(start, expectedStart) && isDateEquals(end, expectedEnd)) {
+      return 'day';
+    }
+  }
+
+  if (start.getUTCDay() === 0) {
+    var _intervalTypes$week$i = intervalTypes.week.initial(start),
+        _expectedStart = _intervalTypes$week$i[0],
+        _expectedEnd = _intervalTypes$week$i[1];
+
+    if (isDateEquals(start, _expectedStart) && isDateEquals(end, _expectedEnd)) {
+      return 'week';
+    }
+  }
+
+  if (start.getDate() === 1) {
+    var _intervalTypes$month$ = intervalTypes.month.initial(start),
+        _expectedStart2 = _intervalTypes$month$[0],
+        _expectedEnd2 = _intervalTypes$month$[1];
+
+    if (isDateEquals(start, _expectedStart2) && isDateEquals(end, _expectedEnd2)) {
+      return 'month';
+    }
+  }
+
+  return 'custom';
+};
+var parse = function parse(value) {
+  return value.map(function (v) {
+    return new Date(v);
+  });
+};
+
+var _templateObject$q, _templateObject2$l, _templateObject3$j, _templateObject4$g, _templateObject5$f, _templateObject6$d;
+var RelativeContainer$5 = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  > :nth-child(1) input {\n    color: transparent;\n  }\n"])));
+var Container$a = styled.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  width: calc(100% - 2px - ", ");\n  height: 33px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: ", ";\n  border-radius: 4px;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var iconWidth = _ref.iconWidth,
+      theme = _ref.theme;
+  return iconWidth + " - " + theme.spacings.s3;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.spacings.s2 + " 0 " + theme.spacings.s2 + " " + theme.spacings.s3;
+}, function (_ref3) {
+  var invalid = _ref3.invalid,
+      theme = _ref3.theme;
+  if (!invalid) return;
+  return css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), theme.colors.warningRed);
+}, function (_ref4) {
+  var disabled = _ref4.disabled;
+  if (!disabled) return;
+  return css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+});
+var Button$4 = styled.button(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref5) {
+  var onClick = _ref5.onClick;
+  if (!onClick) return;
+  return css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
+});
+
+var DatePicker$1 = React__default.forwardRef(function (props, ref) {
+  var value = parse(props.value);
+  var disabled = props.disabled || props.loading;
+
+  var _useState = useState(null),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var _useState2 = useState('day'),
+      intervalType = _useState2[0],
+      setIntervalType = _useState2[1];
+
+  var config = intervalTypes[intervalType];
+
+  var _ref = config.getMinMax ? config.getMinMax(props.min, props.max) : props,
+      min = _ref.min,
+      max = _ref.max;
+
+  var setValue = function setValue(newValue) {
+    var parsed = newValue.map(function (v) {
+      return dateToIsoString(v, true, true, 'us');
+    });
+    props.setValue(parsed);
+  };
+
+  useEffect(function () {
+    if (min && max && min > max) {
+      throw Error('Min prop must be less than Max');
+    }
+
+    if (props.value.some(function (v) {
+      return v === '';
+    })) {
+      setValue(intervalTypes.day.initial(min));
+      return;
+    }
+
+    var value = parse(props.value);
+
+    if (value.some(function (v) {
+      return !isDateInstance(v);
+    }) || !validate(value, min, max)) {
+      setValue(intervalTypes.day.initial(min));
+      return;
+    }
+
+    var newIntervalType = identify(value);
+    setIntervalType(newIntervalType);
+  }, [props.value, min, max]);
+  var inputProps = filterObject(props, ['min', 'max']);
+
+  var getArrowProps = function getArrowProps(key) {
+    var func = config[key];
+
+    if (func === undefined) {
+      return {
+        disabled: true
+      };
+    }
+
+    var nextValue = func(value);
+
+    if (!validate(nextValue, min, max)) {
+      return {
+        disabled: true
+      };
+    }
+
+    return {
+      onClick: function onClick() {
+        return setValue(nextValue);
+      }
+    };
+  };
+
+  var incrementProps = getArrowProps('increment');
+  var decrementProps = getArrowProps('decrement');
+  var invalid = props.invalid || !validate(value, min, max);
+  return React__default.createElement(RelativeContainer$5, {
+    ref: useOnClickOut(function () {
+      return setOpen(null);
+    })
+  }, React__default.createElement(Input$1, Object.assign({}, inputProps, {
+    type: 'text',
+    ref: ref,
+    icon: {
+      icon: {
+        type: 'feather',
+        icon: 'calendar',
+        width: '24px'
+      },
+      position: 'right',
+      onClick: function onClick() {
+        return setOpen(function (prev) {
+          return prev === null ? 'menu' : null;
+        });
+      }
+    },
+    invalid: invalid,
+    htmlDisabled: true
+  })), React__default.createElement(Container$a, {
+    iconWidth: '24px',
+    invalid: props.invalid ? 1 : 0,
+    disabled: props.disabled ? 1 : 0
+  }, React__default.createElement(Button$4, Object.assign({
+    type: 'button'
+  }, decrementProps, {
+    disabled: disabled || decrementProps.disabled
+  }), React__default.createElement(Icon, {
+    type: 'feather',
+    icon: 'chevron_left',
+    color: props.invalid ? 'warningRed' : 'grey',
+    strokeWidth: '3px'
+  })), React__default.createElement("div", null, value.some(function (v) {
+    return !isDateInstance(v);
+  }) ? '' : config.label(value)), React__default.createElement(Button$4, Object.assign({
+    type: 'button'
+  }, incrementProps, {
+    disabled: disabled || incrementProps.disabled
+  }), React__default.createElement(Icon, {
+    type: 'feather',
+    icon: 'chevron_right',
+    color: props.invalid ? 'warningRed' : 'grey',
+    strokeWidth: '3px'
+  }))), React__default.createElement(Menu, {
+    open: open === 'menu',
+    close: function close() {
+      return setOpen(null);
+    },
+    options: [{
+      label: 'Hoje',
+      onClick: function onClick() {
+        return setValue(intervalTypes.day.initial(min));
+      }
+    }, {
+      label: 'Semana',
+      onClick: function onClick() {
+        return setValue(intervalTypes.week.initial(min));
+      }
+    }, {
+      label: 'Mês',
+      onClick: function onClick() {
+        return setValue(intervalTypes.month.initial(min));
+      }
+    }, {
+      label: 'Personalizado',
+      onClick: function onClick() {
+        return setOpen('calendar');
+      },
+      keepOpen: true,
+      caret: true
+    }],
+    width: '165px',
+    itemSpacing: 's3',
+    bordered: true
+  }), React__default.createElement(CalendarInterval, {
+    open: open === 'calendar',
+    value: {
+      start: value[0],
+      end: value[1]
+    },
+    onSubmit: {
+      onClick: function onClick(start, end) {
+        if (start === null || end === null) return;
+        setValue([start, end]);
+        setOpen(null);
+      }
+    },
+    min: min,
+    max: max,
+    references: {
+      bottom: '35px'
+    },
+    time: {}
+  }));
+});
+DatePicker$1.displayName = 'DatePicker';
+
+var Input$3 = React__default.forwardRef(function (props, ref) {
+  switch (props.type) {
+    case 'date':
+      {
+        return React__default.createElement(Date$1, Object.assign({}, props, {
+          ref: ref
+        }));
+      }
+
+    case 'time':
+      {
+        return React__default.createElement(Time, Object.assign({}, props, {
+          ref: ref
+        }));
+      }
+
+    case 'checkbox':
+      {
+        return React__default.createElement(Checkbox, Object.assign({}, props, {
+          ref: ref
+        }));
+      }
+
+    case 'select':
+      {
+        return React__default.createElement(Select, Object.assign({}, props, {
+          ref: ref
+        }));
+      }
+
+    case 'select-multiple':
+      {
+        return React__default.createElement(Select, Object.assign({}, props, {
+          ref: ref
+        }));
+      }
+
+    case 'password':
+      {
+        return React__default.createElement(Password, Object.assign({}, props, {
+          ref: ref
+        }));
+      }
+
+    case 'phone':
+      {
+        return React__default.createElement(Phone, Object.assign({}, props, {
+          ref: ref
+        }));
+      }
+
+    case 'datepicker':
+      {
+        return React__default.createElement(DatePicker, Object.assign({}, props, {
+          ref: ref
+        }));
+      }
+
+    case 'range':
+      {
+        return React__default.createElement(Range, Object.assign({}, props, {
+          ref: ref
+        }));
+      }
+
+    case 'switch':
+      {
+        return React__default.createElement(Switch, Object.assign({}, props));
+      }
+
+    case 'radio':
+      {
+        return React__default.createElement(RadioButton, Object.assign({}, props));
+      }
+
+    case 'date-interval-picker':
+      {
+        return React__default.createElement(DatePicker$1, Object.assign({}, props, {
+          ref: ref
+        }));
+      }
+
+    default:
+      {
+        return React__default.createElement(Input$1, Object.assign({}, props, {
+          ref: ref
+        }));
+      }
+  }
+});
+Input$3.displayName = 'Input';
+
+var Portal = function Portal(props) {
+  var id = props.id,
+      opened = props.opened,
+      children = props.children;
+  var portalRoot = document.createElement('div');
+  useEffect(function () {
+    if (opened) {
+      portalRoot.id = id + '-root';
+      document.body.appendChild(portalRoot);
+      return function () {
+        document.body.removeChild(portalRoot);
+      };
+    }
+  }, [opened]);
+  return opened ? createPortal(children, portalRoot) : null;
+};
+
+var heights = {
+  small: '356.4px',
+  medium: '549px',
+  large: '600px',
+  custom: '100%',
+  default: '356.4px'
+};
+var widths = {
+  small: '642.5px',
+  medium: '1010px',
+  large: '1095px',
+  custom: '100%',
+  default: '642.5px'
+};
+
+var _templateObject$r, _templateObject2$m, _templateObject3$k, _templateObject4$h, _templateObject5$g, _templateObject6$e, _templateObject7$a, _templateObject8$6, _templateObject9$6, _templateObject10$5;
+var Background = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  backdrop-filter: blur(3px);\n  background-color: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.getColor('black', 25);
+});
+var Content = styled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"])));
+var Header$3 = styled.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  ", "\n"])), function (_ref2) {
+  var _ref2$theme = _ref2.theme,
+      colors = _ref2$theme.colors,
+      spacings = _ref2$theme.spacings,
+      useTypography = _ref2$theme.useTypography;
+  return css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", ";\n    padding: ", ";\n\n    ", "\n  "])), colors.lightestGrey, spacings.s4, useTypography('h1'));
+});
+var Footer$2 = styled.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  ", "\n"])), function (_ref3) {
+  var _ref3$theme = _ref3.theme,
+      spacings = _ref3$theme.spacings,
+      colors = _ref3$theme.colors;
+  return css(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n    border-top: 1px solid ", ";\n    padding: ", ";\n  "])), colors.lightestGrey, spacings.s3);
+});
+var FooterMessage = styled.div(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n  max-width: 75%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  span {\n    font-size: 14px;\n    color: ", ";\n  }\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.getColor('darkBlue', 75);
+});
+var FooterButtons = styled.div(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: ", ";\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.spacings.s3;
+});
+var Container$b = styled.div(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (_ref6) {
+  var theme = _ref6.theme,
+      size = _ref6.size,
+      customSize = _ref6.customSize,
+      color = _ref6.color,
+      inverted = _ref6.inverted;
+  return css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    box-shadow: 0 0 21px 7px ", ";\n\n    width: ", ";\n\n    height: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), theme.colors.white, theme.getColor('black', 15), size === 'custom' && customSize ? customSize.width || 'auto' : widths[size], size === 'custom' && customSize ? customSize.height || 'auto' : heights[size], Header$3, inverted ? theme.isDarkColor(color) : theme.colors[color], inverted ? theme.colors[color] : theme.isDarkColor(color));
+});
+
+var _excluded$1 = ["children"];
+
+var Modal = function Modal(props) {
+  var openState = props.openState,
+      title = props.title,
+      size = props.size,
+      color = props.color,
+      inverted = props.inverted,
+      children = props.children,
+      content = props.content,
+      footer = props.footer,
+      footerMessage = props.footerMessage,
+      loading = props.loading,
+      closeOnEsc = props.closeOnEsc,
+      closeOnClickOutside = props.closeOnClickOutside,
+      customSize = props.customSize;
+  var open = openState[0],
+      setOpen = openState[1];
+
+  var onClickOutside = function onClickOutside(event) {
+    var _event$target$parentE;
+
+    if (closeOnClickOutside && (_event$target$parentE = event.target.parentElement) !== null && _event$target$parentE !== void 0 && _event$target$parentE.id) {
+      setOpen(false);
+    }
+  };
+
+  useEffect(function () {
     var onEscDown = function onEscDown(event) {
       if (closeOnEsc && event.key === 'Escape') {
         event.preventDefault();
@@ -14827,12 +15625,12 @@ var Modal = function Modal(props) {
     id: 'modal'
   }, React__default.createElement(Background, {
     onClick: onClickOutside
-  }, React__default.createElement(Container$9, {
+  }, React__default.createElement(Container$b, {
     size: size || 'small',
     color: color || 'blue',
     inverted: +(inverted || false),
     customSize: customSize
-  }, React__default.createElement(Header$2, null, title), React__default.createElement(Content, null, loading ? React__default.createElement(Loader, {
+  }, React__default.createElement(Header$3, null, title), React__default.createElement(Content, null, loading ? React__default.createElement(Loader, {
     color: 'blue',
     size: "calc(" + _size + " * 0.1454)",
     borderSize: '3px'
@@ -14852,8 +15650,8 @@ var Modal = function Modal(props) {
   }))))));
 };
 
-var _templateObject$n;
-var Content$1 = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$s;
+var Content$1 = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -14890,8 +15688,8 @@ var ConfirmDelete = function ConfirmDelete(props) {
   }, React__default.createElement(Content$1, null, children || content));
 };
 
-var _templateObject$o;
-var Content$2 = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$t;
+var Content$2 = styled.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -14931,8 +15729,8 @@ var ConfirmSuccess = function ConfirmSuccess(props) {
   }, React__default.createElement(Content$2, null, children || content));
 };
 
-var _templateObject$p;
-var Content$3 = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$u;
+var Content$3 = styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -14967,177 +15765,72 @@ var Audit = function Audit(props) {
   }, React__default.createElement(Content$3, null, children || content));
 };
 
-var Modal$1 = Modal;
-Modal$1.ConfirmDelete = ConfirmDelete;
-Modal$1.ConfirmEdit = ConfirmSuccess;
-Modal$1.Audit = Audit;
+var Modal$1 = Object.assign(Modal, {
+  ConfirmDelete: ConfirmDelete,
+  ConfirmEdit: ConfirmSuccess,
+  Audit: Audit
+});
 
-var _templateObject$q, _templateObject2$k, _templateObject3$j, _templateObject4$i, _templateObject5$g, _templateObject6$e, _templateObject7$b, _templateObject8$7, _templateObject9$7, _templateObject10$6;
-var Container$a = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: #fff;\n  border: 1px solid #d4d4d5;\n  border-radius: 4px;\n  border-left-width: 5px;\n  padding: 14px;\n  ", "\n  ", "\n    ", "\n  ", "\n\n  ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n"])), function (props) {
-  return props.size === 'mini' && css(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
+var _templateObject$v, _templateObject2$n, _templateObject3$l, _templateObject4$i, _templateObject5$h, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$7, _templateObject10$6;
+var Container$c = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: #fff;\n  border: 1px solid #d4d4d5;\n  border-radius: 4px;\n  border-left-width: 5px;\n  padding: 14px;\n  ", "\n  ", "\n    ", "\n  ", "\n\n  ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n"])), function (props) {
+  return props.size === 'mini' && css(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 131px;\n    "])));
+  return props.size === 'small' && css(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 131px;\n    "])));
 }, function (props) {
   return props.size === 'medium' && css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
 }, function (props) {
-  return props.size === 'big' && css(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n      width: 414px;\n      height: 324px;\n    "])));
+  return props.size === 'big' && css(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n      width: 414px;\n      height: 324px;\n    "])));
 }, function (props) {
-  return props.borderType === 'info' && css(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n      border-left-color: #4d6dbe;\n    "])));
+  return props.borderType === 'info' && css(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n      border-left-color: #4d6dbe;\n    "])));
 }, function (props) {
   return props.borderType === 'success' && css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n      border-left-color: #66bb6a;\n    "])));
 }, function (props) {
-  return props.borderType === 'warning' && css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n      border-left-color: #fbcb01;\n    "])));
-}, function (props) {
-  return props.borderType === 'danger' && css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
-}, function (props) {
-  return props.borderType === 'none' && css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
-});
-
-var _excluded$2 = ["children"];
-
-var Card = function Card(_ref) {
-  var children = _ref.children,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-
-  return React__default.createElement(Container$a, Object.assign({}, rest), children);
-};
-
-var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$j, _templateObject5$h, _templateObject6$f;
-var Container$b = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  border-radius: 4px;\n  width: ", ";\n  height: 88px;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", "\n\n  ", "\n\n    ", "\n\n  svg {\n    cursor: pointer;\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 13px;\n    height: 13px;\n  }\n"])), function (props) {
-  return props.size === 'large' ? '837px' : '460px';
-}, function (props) {
-  return props.color === 'success' && css(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n      background-color: #fcfff5;\n      opacity: 1;\n      border-color: #a8c599;\n      h4 {\n        color: #1e561f;\n      }\n      p {\n        color: #1e561fcc;\n      }\n    "])));
-}, 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$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n      background-color: #fffaf3;\n      opacity: 1;\n      border-color: #ccbea0;\n      h4 {\n        color: #7a4d05;\n      }\n      p {\n        color: #7a4d05cc;\n      }\n    "])));
-});
-var IconContainer$2 = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 14px 14px 0 0;\n  margin: 0;\n"])));
-var IconContent = styled.div(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 13px 0 21px 28px;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  h4 {\n    margin-bottom: 7px;\n    font-size: 18p;\n  }\n  p {\n    margin: 0;\n    font-size: 14px;\n    max-width: 380px;\n  }\n"])));
-
-var Toast = function Toast(props) {
-  return React__default.createElement(Container$b, Object.assign({}, props), React__default.createElement(IconContainer$2, null, React__default.createElement(Icon, {
-    type: 'feather',
-    icon: 'x',
-    onClick: function onClick() {
-      return props.handlClose();
-    }
-  })), React__default.createElement(IconContent, null, React__default.createElement("h4", null, props.title), React__default.createElement("p", null, " ", props.description)));
-};
-
-var _templateObject$s;
-var Container$c = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  background-color: ", ";\n  display: flex;\n  width: min-content;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.spacings.s1 + " " + theme.spacings.s1 + " 0px " + theme.spacings.s1;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.colors.white;
-});
-
-var CalendarInterval = function CalendarInterval(props) {
-  var time = props.time,
-      references = props.references;
-
-  var _ref = props.value ? props.value.start : useState(null),
-      start = _ref[0],
-      setStart = _ref[1];
-
-  var _ref2 = props.value ? props.value.end : useState(null),
-      end = _ref2[0],
-      setEnd = _ref2[1];
-
-  var _useState = useState(false),
-      startInvalid = _useState[0],
-      setStartInvalid = _useState[1];
-
-  var _useState2 = useState(false),
-      endInvalid = _useState2[0],
-      setEndInvalid = _useState2[1];
-
-  var min;
-
-  if (props.min) {
-    min = new Date(props.min.getTime());
-  }
-
-  var max;
-
-  if (props.max) {
-    max = new Date(props.max.getTime());
-  }
-
-  var minEnd;
-
-  if (start) {
-    minEnd = start;
-
-    if (min) {
-      minEnd = start >= min ? start : min;
-    }
-  } else if (min) {
-    minEnd = min;
-  }
-
-  var maxStart;
-
-  if (end) {
-    maxStart = end;
-
-    if (max) {
-      maxStart = end <= max ? end : max;
-    }
-  } else if (max) {
-    maxStart = max;
-  }
-
-  var _onSubmit = props.onSubmit || {};
-
-  var onSubmit = _extends({
-    disabled: startInvalid || endInvalid,
-    onClick: function onClick() {}
-  }, _onSubmit);
-
-  return React__default.createElement(AbsoluteContainer, {
-    axis: 'y',
-    references: references
-  }, React__default.createElement(Container$c, null, React__default.createElement(Calendar, {
-    value: [start, setStart],
-    min: min,
-    max: maxStart,
-    overlay: {
-      type: 'after',
-      value: end
-    },
-    time: time,
-    invalid: [startInvalid, setStartInvalid],
-    notAbsolute: true
-  }), React__default.createElement(Calendar, {
-    value: [end, setEnd],
-    min: minEnd,
-    max: max,
-    overlay: {
-      type: 'before',
-      value: start
-    },
-    time: time,
-    invalid: [endInvalid, setEndInvalid],
-    notAbsolute: true,
-    onSubmit: {
-      onClick: function onClick() {
-        return onSubmit.onClick(start, end);
-      },
-      disabled: onSubmit.disabled
+  return props.borderType === 'warning' && css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n      border-left-color: #fbcb01;\n    "])));
+}, function (props) {
+  return props.borderType === 'danger' && css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
+}, function (props) {
+  return props.borderType === 'none' && css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
+});
+
+var _excluded$2 = ["children"];
+
+var Card = function Card(_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+  return React__default.createElement(Container$c, Object.assign({}, rest), children);
+};
+
+var _templateObject$w, _templateObject2$o, _templateObject3$m, _templateObject4$j, _templateObject5$i, _templateObject6$g;
+var Container$d = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  border-radius: 4px;\n  width: ", ";\n  height: 88px;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", "\n\n  ", "\n\n    ", "\n\n  svg {\n    cursor: pointer;\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 13px;\n    height: 13px;\n  }\n"])), function (props) {
+  return props.size === 'large' ? '837px' : '460px';
+}, function (props) {
+  return props.color === 'success' && css(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n      background-color: #fcfff5;\n      opacity: 1;\n      border-color: #a8c599;\n      h4 {\n        color: #1e561f;\n      }\n      p {\n        color: #1e561fcc;\n      }\n    "])));
+}, function (props) {
+  return props.color === 'error' && css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n      background-color: #fff6f6;\n      opacity: 1;\n      border-color: #973937;\n      h4 {\n        color: #973937;\n      }\n      p {\n        color: #973937;\n      }\n    "])));
+}, function (props) {
+  return props.color === 'warning' && css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n      background-color: #fffaf3;\n      opacity: 1;\n      border-color: #ccbea0;\n      h4 {\n        color: #7a4d05;\n      }\n      p {\n        color: #7a4d05cc;\n      }\n    "])));
+});
+var IconContainer$2 = styled.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 14px 14px 0 0;\n  margin: 0;\n"])));
+var IconContent = styled.div(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 13px 0 21px 28px;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  h4 {\n    margin-bottom: 7px;\n    font-size: 18p;\n  }\n  p {\n    margin: 0;\n    font-size: 14px;\n    max-width: 380px;\n  }\n"])));
+
+var Toast = function Toast(props) {
+  return React__default.createElement(Container$d, Object.assign({}, props), React__default.createElement(IconContainer$2, null, React__default.createElement(Icon, {
+    type: 'feather',
+    icon: 'x',
+    onClick: function onClick() {
+      return props.handlClose();
     }
-  })));
+  })), React__default.createElement(IconContent, null, React__default.createElement("h4", null, props.title), React__default.createElement("p", null, " ", props.description)));
 };
 
-var _templateObject$t, _templateObject2$m, _templateObject3$l, _templateObject4$k, _templateObject5$i, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$8, _templateObject10$7, _templateObject11$4;
-var Container$d = styled.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
-var Header$3 = styled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var HeaderImage = styled.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
+var _templateObject$x, _templateObject2$p, _templateObject3$n, _templateObject4$k, _templateObject5$j, _templateObject6$h, _templateObject7$c, _templateObject8$8, _templateObject9$8, _templateObject10$7, _templateObject11$4;
+var Container$e = styled.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
+var Header$4 = styled.div(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var HeaderImage = styled.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
 var HeaderContent = styled.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
-var MainContent = styled.div(_templateObject5$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) {
+var MainContent = styled.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
+var HeaderLine = styled.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && css(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
@@ -15152,7 +15845,7 @@ var MainLine = styled(HeaderLine)(_templateObject11$4 || (_templateObject11$4 =
 
 var Template1 = function Template1(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
-  return React__default.createElement(Container$d, null, React__default.createElement(Header$3, null, React__default.createElement(HeaderImage, null), React__default.createElement(HeaderContent, null, React__default.createElement(HeaderLine, {
+  return React__default.createElement(Container$e, null, React__default.createElement(Header$4, null, React__default.createElement(HeaderImage, null), React__default.createElement(HeaderContent, null, React__default.createElement(HeaderLine, {
     size: 'medium',
     height: '9px',
     color: '#E6E6E6'
@@ -15183,32 +15876,32 @@ var Template1 = function Template1(props) {
   })));
 };
 
-var _templateObject$u, _templateObject2$n, _templateObject3$m, _templateObject4$l, _templateObject5$j;
-var HeaderLine$1 = styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
+var _templateObject$y, _templateObject2$q, _templateObject3$o, _templateObject4$l, _templateObject5$k;
+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) {
-  return props.size === 'mini' && css(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && css(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
 
-var _templateObject$v, _templateObject2$o, _templateObject3$n, _templateObject4$m, _templateObject5$k, _templateObject6$h, _templateObject7$d, _templateObject8$9;
-var Container$e = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
-var Template2Container = styled(Container$e)(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  background: #fff;\n  border: 2px solid #ebebeb;\n"])));
-var Header$4 = styled.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var _templateObject$z, _templateObject2$r, _templateObject3$p, _templateObject4$m, _templateObject5$l, _templateObject6$i, _templateObject7$d, _templateObject8$9;
+var Container$f = 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$f)(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  background: #fff;\n  border: 2px solid #ebebeb;\n"])));
+var Header$5 = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var HeaderImage$1 = styled.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
-var HeaderContent$1 = styled.div(_templateObject5$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 HeaderContent$1 = styled.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
+var MainContent$1 = styled.div(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
 var MainLine$1 = styled(HeaderLine$1)(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
 var HeaderLine$2 = styled(HeaderLine$1)(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose([""])));
 
 var Template2 = function Template2(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
-  return React__default.createElement(Template2Container, null, React__default.createElement(Header$4, null, React__default.createElement(HeaderImage$1, null), React__default.createElement(HeaderContent$1, null, React__default.createElement(HeaderLine$2, {
+  return React__default.createElement(Template2Container, null, React__default.createElement(Header$5, null, React__default.createElement(HeaderImage$1, null), React__default.createElement(HeaderContent$1, null, React__default.createElement(HeaderLine$2, {
     size: 'mini',
     height: '9px',
     color: '#E6E6E6'
@@ -15227,10 +15920,10 @@ var Template2 = function Template2(props) {
   })));
 };
 
-var _templateObject$w, _templateObject2$p, _templateObject3$o;
-var Container$f = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
-var Template3Container = styled(Container$f)(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose([""])));
-var Template3Line = styled(HeaderLine$1)(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n  background-color: #dadada;\n  height: ", ";\n"])), function (props) {
+var _templateObject$A, _templateObject2$s, _templateObject3$q;
+var Container$g = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var Template3Container = styled(Container$g)(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose([""])));
+var Template3Line = styled(HeaderLine$1)(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n  background-color: #dadada;\n  height: ", ";\n"])), function (props) {
   return props.height;
 });
 
@@ -15259,20 +15952,20 @@ var Template3 = function Template3(props) {
   }));
 };
 
-var _templateObject$x, _templateObject2$q, _templateObject3$p, _templateObject4$n, _templateObject5$l, _templateObject6$i, _templateObject7$e, _templateObject8$a;
-var Container$g = styled.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
-var HeaderLine$3 = styled.div(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
+var _templateObject$B, _templateObject2$t, _templateObject3$r, _templateObject4$n, _templateObject5$m, _templateObject6$j, _templateObject7$e, _templateObject8$a;
+var Container$h = styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var HeaderLine$3 = styled.div(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var Template4Container = styled(Container$g)(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n"])));
+var Template4Container = styled(Container$h)(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n"])));
 var CustomLine = styled(HeaderLine$3)(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
   return props.width;
 }, function (props) {
@@ -15326,17 +16019,17 @@ var Template4 = function Template4(props) {
   }));
 };
 
-var _templateObject$y, _templateObject2$r, _templateObject3$q, _templateObject4$o, _templateObject5$m, _templateObject6$j, _templateObject7$f, _templateObject8$b, _templateObject9$9;
-var Container$h = styled.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 746px;\n  height: 169px;\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n  padding: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
-var Circle = styled.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  width: 141px;\n  height: 141px;\n  background-color: #dddedf;\n  border-radius: 50%;\n"])));
-var HeaderLine$4 = styled.div(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
+var _templateObject$C, _templateObject2$u, _templateObject3$s, _templateObject4$o, _templateObject5$n, _templateObject6$k, _templateObject7$f, _templateObject8$b, _templateObject9$9;
+var Container$i = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 746px;\n  height: 169px;\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n  padding: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+var Circle = styled.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n  width: 141px;\n  height: 141px;\n  background-color: #dddedf;\n  border-radius: 50%;\n"])));
+var HeaderLine$4 = styled.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && css(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
@@ -15351,7 +16044,7 @@ var MainContent$2 = styled.div(_templateObject9$9 || (_templateObject9$9 = _tagg
 
 var Template5 = function Template5(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
-  return React__default.createElement(Container$h, null, React__default.createElement(Circle, null), React__default.createElement(MainContent$2, null, React__default.createElement(CustomLine$1, {
+  return React__default.createElement(Container$i, null, React__default.createElement(Circle, null), React__default.createElement(MainContent$2, null, React__default.createElement(CustomLine$1, {
     width: '406px',
     height: '16px',
     color: '#DDDEDF',
@@ -15374,16 +16067,16 @@ var Template5 = function Template5(props) {
   })));
 };
 
-var _templateObject$z, _templateObject2$s, _templateObject3$r, _templateObject4$p, _templateObject5$n, _templateObject6$k, _templateObject7$g, _templateObject8$c, _templateObject9$a;
-var Container$i = styled.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  width: 395px;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #f5f5f5;\n"])));
-var Header$5 = styled.div(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n"])));
-var Footer$3 = styled.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-top: 1px solid #b1b1b3;\n  height: 50px;\n"])));
+var _templateObject$D, _templateObject2$v, _templateObject3$t, _templateObject4$p, _templateObject5$o, _templateObject6$l, _templateObject7$g, _templateObject8$c, _templateObject9$a;
+var Container$j = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  width: 395px;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #f5f5f5;\n"])));
+var Header$6 = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n"])));
+var Footer$3 = styled.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-top: 1px solid #b1b1b3;\n  height: 50px;\n"])));
 var HeaderLine$5 = styled.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && css(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
@@ -15399,7 +16092,7 @@ var CustomLine$2 = styled(HeaderLine$5)(_templateObject9$a || (_templateObject9$
 
 var Template6 = function Template6(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
-  return React__default.createElement(Container$i, null, React__default.createElement(Header$5, null, React__default.createElement(CustomLine$2, {
+  return React__default.createElement(Container$j, null, React__default.createElement(Header$6, null, React__default.createElement(CustomLine$2, {
     width: '274px',
     height: '10px',
     color: '#EBEBEB',
@@ -15417,17 +16110,17 @@ var Template6 = function Template6(props) {
   })));
 };
 
-var _templateObject$A, _templateObject2$t, _templateObject3$s, _templateObject4$q, _templateObject5$o, _templateObject6$l, _templateObject7$h, _templateObject8$d, _templateObject9$b, _templateObject10$8;
-var Container$j = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
-var Header$6 = styled.div(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
-var HeaderLine$6 = styled.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
+var _templateObject$E, _templateObject2$w, _templateObject3$u, _templateObject4$q, _templateObject5$p, _templateObject6$m, _templateObject7$h, _templateObject8$d, _templateObject9$b, _templateObject10$8;
+var Container$k = styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
+var Header$7 = styled.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
+var HeaderLine$6 = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && css(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && css(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
@@ -15443,7 +16136,7 @@ var Circle$1 = styled.div(_templateObject10$8 || (_templateObject10$8 = _taggedT
 
 var Template7 = function Template7(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
-  return React__default.createElement(Container$j, null, React__default.createElement(Header$6, null, React__default.createElement(CustomLine$3, {
+  return React__default.createElement(Container$k, null, React__default.createElement(Header$7, null, React__default.createElement(CustomLine$3, {
     width: '89px',
     height: '10px',
     color: '#EBEBEB',
@@ -15451,17 +16144,17 @@ var Template7 = function Template7(props) {
   })), React__default.createElement(Main, null, React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null)));
 };
 
-var _templateObject$B, _templateObject2$u, _templateObject3$t, _templateObject4$r, _templateObject5$p, _templateObject6$m, _templateObject7$i, _templateObject8$e, _templateObject9$c;
-var Container$k = styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
-var Header$7 = styled.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
-var HeaderLine$7 = styled.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
+var _templateObject$F, _templateObject2$x, _templateObject3$v, _templateObject4$r, _templateObject5$q, _templateObject6$n, _templateObject7$i, _templateObject8$e, _templateObject9$c;
+var Container$l = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
+var Header$8 = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
+var HeaderLine$7 = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && css(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
@@ -15476,7 +16169,7 @@ var Main$1 = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTempl
 
 var Template8 = function Template8(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
-  return React__default.createElement(Container$k, null, React__default.createElement(Header$7, null, React__default.createElement(CustomLine$4, {
+  return React__default.createElement(Container$l, null, React__default.createElement(Header$8, null, React__default.createElement(CustomLine$4, {
     width: '89px',
     height: '10px',
     color: '#EBEBEB',
@@ -15494,17 +16187,17 @@ var Template8 = function Template8(props) {
   })));
 };
 
-var _templateObject$C, _templateObject2$v, _templateObject3$u, _templateObject4$s, _templateObject5$q, _templateObject6$n, _templateObject7$j, _templateObject8$f, _templateObject9$d, _templateObject10$9;
-var Container$l = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
-var Header$8 = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
-var HeaderLine$8 = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
+var _templateObject$G, _templateObject2$y, _templateObject3$w, _templateObject4$s, _templateObject5$r, _templateObject6$o, _templateObject7$j, _templateObject8$f, _templateObject9$d, _templateObject10$9;
+var Container$m = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
+var Header$9 = styled.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
+var HeaderLine$8 = styled.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && css(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
@@ -15520,7 +16213,7 @@ var Circle$2 = styled.div(_templateObject10$9 || (_templateObject10$9 = _taggedT
 
 var Template8$1 = function Template8(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
-  return React__default.createElement(Container$l, null, React__default.createElement(Header$8, null, React__default.createElement(CustomLine$5, {
+  return React__default.createElement(Container$m, null, React__default.createElement(Header$9, null, React__default.createElement(CustomLine$5, {
     width: '89px',
     height: '10px',
     color: '#EBEBEB',
@@ -15533,17 +16226,17 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$2, null, React__default.createElement(Circle$2, null)));
 };
 
-var _templateObject$D, _templateObject2$w, _templateObject3$v, _templateObject4$t, _templateObject5$r, _templateObject6$o, _templateObject7$k, _templateObject8$g, _templateObject9$e, _templateObject10$a, _templateObject11$5;
-var Container$m = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
-var Header$9 = styled.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
-var HeaderLine$9 = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
+var _templateObject$H, _templateObject2$z, _templateObject3$x, _templateObject4$t, _templateObject5$s, _templateObject6$p, _templateObject7$k, _templateObject8$g, _templateObject9$e, _templateObject10$a, _templateObject11$5;
+var Container$n = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
+var Header$a = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
+var HeaderLine$9 = styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && css(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
@@ -15560,7 +16253,7 @@ var Circle$3 = styled.div(_templateObject11$5 || (_templateObject11$5 = _taggedT
 
 var Template10 = function Template10(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
-  return React__default.createElement(Container$m, null, React__default.createElement(Header$9, null, React__default.createElement(CustomLine$6, {
+  return React__default.createElement(Container$n, null, React__default.createElement(Header$a, null, React__default.createElement(CustomLine$6, {
     width: '89px',
     height: '10px',
     color: '#EBEBEB',
@@ -15677,9 +16370,9 @@ var Placeholder = function Placeholder(props) {
   }
 };
 
-var _templateObject$E, _templateObject2$x, _templateObject3$w, _templateObject4$u, _templateObject5$s;
-var Image = styled.img(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
-var Container$n = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n\n  &,\n  ", " {\n    width: ", ";\n\n    height: ", ";\n  }\n"])), Image, function (_ref) {
+var _templateObject$I, _templateObject2$A, _templateObject3$y, _templateObject4$u, _templateObject5$t;
+var Image = styled.img(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
+var Container$o = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n\n  &,\n  ", " {\n    width: ", ";\n\n    height: ", ";\n  }\n"])), Image, function (_ref) {
   var width = _ref.width;
 
   switch (typeof width) {
@@ -15706,15 +16399,15 @@ var Container$n = styled.div(_templateObject2$x || (_templateObject2$x = _tagged
       return 'auto';
   }
 });
-var Dimmer = styled.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: opacity 0.5s;\n  cursor: pointer;\n\n  :hover {\n    opacity: 1;\n  }\n"])), function (_ref3) {
+var Dimmer = styled.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: opacity 0.5s;\n  cursor: pointer;\n\n  :hover {\n    opacity: 1;\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.getColor('greyishBlue', 50);
 });
-var Button$4 = styled(Button$1)(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
+var Button$5 = styled(Button$1)(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.getColor('white', 50);
 });
-var ModalContent = styled.div(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n\n  img {\n    max-height: 100%;\n    max-width: 100%;\n  }\n"])));
+var ModalContent = styled.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n\n  img {\n    max-height: 100%;\n    max-width: 100%;\n  }\n"])));
 
 var _excluded$3 = ["src", "defaultClickOptions"];
 
@@ -15726,14 +16419,14 @@ var Zoom = function Zoom(props) {
       modalOpened = _useState[0],
       setModalOpened = _useState[1];
 
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$n, Object.assign({}, imgProps, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$o, Object.assign({}, imgProps, {
     onClick: function onClick() {
       return setModalOpened(true);
     }
   }), React__default.createElement(Image, {
     src: src,
     alt: 'zoom'
-  }), React__default.createElement(Dimmer, null, React__default.createElement(Button$4, {
+  }), React__default.createElement(Dimmer, null, React__default.createElement(Button$5, {
     content: 'Zoom',
     color: 'white',
     onClick: function onClick() {
@@ -15750,8 +16443,8 @@ var Zoom = function Zoom(props) {
   }))));
 };
 
-var _templateObject$F;
-var Container$o = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n\n  > div:nth-child(1) {\n    ", "\n    color: ", ";\n  }\n"])), function (_ref) {
+var _templateObject$J;
+var Container$p = styled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n\n  > div:nth-child(1) {\n    ", "\n    color: ", ";\n  }\n"])), function (_ref) {
   var _ref$theme$spacings = _ref.theme.spacings,
       s1 = _ref$theme$spacings.s1,
       s3 = _ref$theme$spacings.s3;
@@ -15767,15 +16460,13 @@ var Container$o = styled.div(_templateObject$F || (_templateObject$F = _taggedTe
   return getColor('greyishBlue', 50);
 });
 
-var Header$a = function Header(props) {
+var Header$b = function Header(props) {
   var title = props.title,
       _props$search = props.search,
       searched = _props$search[0],
       _setSearched = _props$search[1],
       allowEmptySearch = props.allowEmptySearch,
-      withSearch = props.withSearch,
-      _props$touched = props.touched,
-      setTouched = _props$touched[1];
+      withSearch = props.withSearch;
 
   var _useState = useState(''),
       search = _useState[0],
@@ -15785,8 +16476,6 @@ var Header$a = function Header(props) {
     if (value === '') return;
 
     _setSearched(value);
-
-    setTouched(true);
   };
   useEffect(function () {
     setSearch(searched);
@@ -15801,7 +16490,7 @@ var Header$a = function Header(props) {
     setSearched('');
   };
 
-  return React__default.createElement(Container$o, null, React__default.createElement("div", null, isString(title) ? title : title.element), withSearch && React__default.createElement(Input$3, {
+  return React__default.createElement(Container$p, null, React__default.createElement("div", null, isString(title) ? title : title.element), withSearch && React__default.createElement(Input$3, {
     type: 'search',
     placeholder: 'Pesquisa',
     setValue: setSearch,
@@ -15818,8 +16507,8 @@ var Header$a = function Header(props) {
   }));
 };
 
-var _templateObject$G;
-var EmptyMessage = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  padding: 0 20px;\n  color: ", ";\n  text-align: center;\n  margin: auto;\n  width: 100%;\n"])), function (_ref) {
+var _templateObject$K;
+var EmptyMessage = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  padding: 0 20px;\n  color: ", ";\n  text-align: center;\n  margin: auto;\n  width: 100%;\n"])), function (_ref) {
   var lightGrey = _ref.theme.colors.lightGrey;
   return lightGrey;
 });
@@ -15827,6 +16516,35 @@ var EmptyMessage = styled.div(_templateObject$G || (_templateObject$G = _taggedT
 var getInstance = function getInstance(props) {
   var item = props.item;
 
+  if (!item) {
+    return {
+      open: false,
+      isDynamic: false,
+      itemSpacing: 's3',
+      label: {
+        element: '',
+        text: ''
+      },
+      getOptions: function () {
+        try {
+          return Promise.resolve({
+            options: [],
+            lastPage: true
+          });
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      }
+    };
+  }
+
+  var open = true;
+  var allowEmptySearch = item.allowEmptySearch;
+  var label = isString(item.label) ? {
+    element: item.label,
+    text: item.label
+  } : item.label;
+
   if (Array.isArray(item.options)) {
     var intialOptions = [].concat(item.options);
 
@@ -15848,6 +16566,11 @@ var getInstance = function getInstance(props) {
     };
 
     return {
+      open: open,
+      isDynamic: false,
+      itemSpacing: item.optionSpacing || 's1',
+      label: label,
+      allowEmptySearch: allowEmptySearch,
       getOptions: _getOptions
     };
   }
@@ -15868,6 +16591,11 @@ var getInstance = function getInstance(props) {
   };
 
   return {
+    open: open,
+    isDynamic: true,
+    itemSpacing: item.optionSpacing || 's3',
+    label: label,
+    allowEmptySearch: allowEmptySearch,
     getOptions: getOptions
   };
 };
@@ -15876,9 +16604,13 @@ var Submenu = function Submenu(props) {
   var item = props.item,
       close = props.close,
       setAppliedFilters = props.setAppliedFilters;
-  var isDynamic = !Array.isArray(item.options);
 
   var _getInstance = getInstance(props),
+      open = _getInstance.open,
+      isDynamic = _getInstance.isDynamic,
+      itemSpacing = _getInstance.itemSpacing,
+      label = _getInstance.label,
+      allowEmptySearch = _getInstance.allowEmptySearch,
       getOptions = _getInstance.getOptions;
 
   var _useState = useState([]),
@@ -15901,15 +16633,8 @@ var Submenu = function Submenu(props) {
       loading = _useState5[0],
       setLoading = _useState5[1];
 
-  var _useState6 = useState(false),
-      touched = _useState6[0],
-      setTouched = _useState6[1];
-
-  var setSearch = function setSearch(value) {
-    _setSearch(value);
-
-    setPage(1);
-  };
+  var _useState6 = useState(true),
+      setFirstRender = _useState6[1];
 
   var onSearch = useCallback(function () {
     try {
@@ -15924,27 +16649,38 @@ var Submenu = function Submenu(props) {
       return Promise.reject(e);
     }
   }, [item, search, page]);
+
+  var setSearch = function setSearch(value, force) {
+    if (force === void 0) {
+      force = true;
+    }
+
+    var changed = search !== value || page !== 1;
+
+    _setSearch(value);
+
+    setPage(1);
+    if (force && changed === false) onSearch();
+  };
+
   useEffect(function () {
     setOptions([]);
-    setSearch('');
-    setTouched(false);
+    setSearch('', false);
+    setFirstRender(true);
   }, [item]);
   useEffect(function () {
-    if (isDynamic && !touched) {
-      setLoading(false);
-      return;
-    }
-
-    setLoading(true);
-    var timeoutId = setTimeout(function () {
-      return onSearch();
-    }, 250);
-    return function () {
-      return clearTimeout(timeoutId);
-    };
-  }, [touched, onSearch]);
+    setFirstRender(function (firstRender) {
+      if (!item || isDynamic && firstRender) {
+        setLoading(false);
+      } else {
+        setLoading(true);
+        onSearch();
+      }
 
-  var onClickOption = function onClickOption(index) {
+      return false;
+    });
+  }, [onSearch]);
+  var onClickOption = item ? function (index) {
     var option = options[index];
     setAppliedFilters(function (prev) {
       var newState = [].concat(prev);
@@ -15961,10 +16697,7 @@ var Submenu = function Submenu(props) {
       newState.push({
         name: item.name,
         labels: {
-          filter: isString(item.label) ? {
-            text: item.label,
-            element: item.label
-          } : item.label,
+          filter: label,
           option: isString(option.label) ? {
             text: option.label,
             element: option.label
@@ -15974,14 +16707,11 @@ var Submenu = function Submenu(props) {
       });
       return newState;
     });
-  };
+  } : undefined;
 
   var optionsParser = function optionsParser(option) {
     return {
       label: option.label,
-      data: {
-        value: option.value
-      },
       onClick: onClickOption
     };
   };
@@ -15993,9 +16723,8 @@ var Submenu = function Submenu(props) {
     });
   };
 
-  var itemSpacing = item.optionSpacing || isDynamic ? 's3' : 's1';
   return React__default.createElement(Menu, {
-    open: true,
+    open: open,
     axis: 'x',
     options: options.map(optionsParser),
     close: close,
@@ -16013,11 +16742,10 @@ var Submenu = function Submenu(props) {
       bottom: itemSpacing
     },
     bordered: isDynamic,
-    before: React__default.createElement(Header$a, {
-      title: item.label,
+    before: React__default.createElement(Header$b, {
+      title: label,
       search: [search, setSearch],
-      touched: [touched, setTouched],
-      allowEmptySearch: item.allowEmptySearch,
+      allowEmptySearch: allowEmptySearch,
       withSearch: isDynamic
     }),
     loading: loading,
@@ -16026,12 +16754,20 @@ var Submenu = function Submenu(props) {
         return React__default.createElement(React__default.Fragment, null, "Nenhum resultado foi encontrado");
       }
 
-      return React__default.createElement(React__default.Fragment, null, "Utilize a busca para pesquisar por ", React__default.createElement("br", null), isString(item.label) ? item.label : item.label.text);
-    }()) : undefined
+      return React__default.createElement(React__default.Fragment, null, "Utilize a busca para pesquisar por ", React__default.createElement("br", null), label.text);
+    }()) : undefined,
+    transition: {
+      properties: {
+        width: {}
+      }
+    }
   });
 };
 
-var FilterMenu = function FilterMenu(props) {
+var Filters = function Filters(props) {
+  var open = props.open,
+      close = props.close;
+
   var _useState = useState(-1),
       active = _useState[0],
       setActive = _useState[1];
@@ -16049,11 +16785,15 @@ var FilterMenu = function FilterMenu(props) {
       }
     };
   });
-  var selected = active >= 0 && active < props.items.length ? props.items[active] : null;
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Menu, {
-    open: props.open,
+  var selected = active >= 0 && active < props.items.length ? props.items[active] : undefined;
+  useEffect(function () {
+    if (open) return;
+    setActive(-1);
+  }, [open]);
+  return React__default.createElement(Menu, {
+    open: open,
     options: items,
-    close: props.close,
+    close: close,
     width: '160px',
     height: '261px',
     containerSpacing: {
@@ -16065,15 +16805,418 @@ var FilterMenu = function FilterMenu(props) {
       top: 's1',
       left: 's1',
       bottom: 's1'
+    },
+    transition: {
+      properties: {
+        width: {}
+      }
     }
-  }, selected && React__default.createElement(Submenu, {
+  }, React__default.createElement(Submenu, {
     item: selected,
     close: function close() {
       return setActive(-1);
     },
     setAppliedFilters: props.setAppliedFilters
-  })));
+  }));
+};
+
+var _templateObject$L, _templateObject2$B, _templateObject3$z, _templateObject4$v;
+var Container$q = styled(AbsoluteContainer)(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  > div {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n\n    > div {\n      padding: ", ";\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n  }\n"])), function (_ref) {
+  var s3 = _ref.theme.spacings.s3;
+  return s3 + " 0 " + s3 + " " + s3;
+});
+var Header$c = styled.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  padding: ", ";\n  > div {\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (_ref2) {
+  var s3 = _ref2.theme.spacings.s3;
+  return s3;
+}, function (_ref3) {
+  var s3 = _ref3.theme.spacings.s3;
+  return "0 " + s3 + " " + s3 + " 0";
+});
+var Title = styled.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  ", "\n  color: ", ";\n"])), function (_ref4) {
+  var useTypography = _ref4.theme.useTypography;
+  return useTypography('p', {
+    fontWeight: 'bold'
+  });
+}, function (_ref5) {
+  var getColor = _ref5.theme.getColor;
+  return getColor('greyishBlue', 50);
+});
+var Item = styled.div(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  display: flex;\n  align-items: center;\n\n  :not(:last-child) {\n    border-bottom: 1px solid\n      ", ";\n  }\n\n  > div:nth-child(1) {\n    flex: 1;\n\n    > div:nth-child(1) {\n      ", "\n      color: ", ";\n    }\n    > div:nth-child(2) {\n      ", "\n    }\n  }\n  > div:nth-child(2) {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n"])), function (_ref6) {
+  var s1 = _ref6.theme.spacings.s1;
+  return s1 + " " + s1 + " " + s1 + " 0";
+}, function (_ref7) {
+  var getColor = _ref7.theme.getColor;
+  return getColor('greyishBlue', 25);
+}, function (_ref8) {
+  var useTypography = _ref8.theme.useTypography;
+  return useTypography('p');
+}, function (_ref9) {
+  var getColor = _ref9.theme.getColor;
+  return getColor('greyishBlue', 50);
+}, function (_ref10) {
+  var useTypography = _ref10.theme.useTypography;
+  return useTypography('p');
+});
+
+var AppliedFilters = function AppliedFilters(props) {
+  var open = props.open,
+      close = props.close,
+      _props$appliedFilters = props.appliedFilters,
+      appliedFilters = _props$appliedFilters[0],
+      setAppliedFilters = _props$appliedFilters[1];
+
+  var _useState = useState(''),
+      search = _useState[0],
+      setSearch = _useState[1];
+
+  var _useState2 = useState(''),
+      searched = _useState2[0],
+      setSearched = _useState2[1];
+
+  useEffect(function () {
+    setSearch('');
+    setSearched('');
+  }, [open]);
+
+  var onClear = function onClear() {
+    setAppliedFilters([]);
+    close();
+  };
+
+  var onSubmitSearch = function onSubmitSearch() {
+    setSearched(search);
+  };
+
+  var onClearSearch = function onClearSearch() {
+    setSearch('');
+    setSearched('');
+  };
+
+  var onRemove = function onRemove(name) {
+    setAppliedFilters(function (prev) {
+      return prev.filter(function (e) {
+        return e.name !== name;
+      });
+    });
+  };
+
+  return React__default.createElement(Container$q, {
+    open: open,
+    width: '275px',
+    height: '261px',
+    transition: {
+      properties: {
+        height: {}
+      }
+    }
+  }, React__default.createElement("div", null, React__default.createElement(Header$c, null, React__default.createElement("div", null, React__default.createElement(Title, null, "Filtros Aplicados"), React__default.createElement(Button$1, {
+    type: 'button',
+    onClick: onClear,
+    appearance: 'link'
+  }, "Limpar Todos")), React__default.createElement(Input$3, {
+    type: 'search',
+    placeholder: 'Pesquisar',
+    setValue: setSearch,
+    value: search,
+    onPressEnter: onSubmitSearch,
+    icon: {
+      icon: {
+        type: 'feather',
+        icon: 'search'
+      },
+      onClick: onSubmitSearch
+    },
+    clearable: search !== '' && search === searched ? onClearSearch : undefined
+  })), React__default.createElement(ScrollContainer, null, appliedFilters.filter(function (_ref) {
+    var _ref$labels = _ref.labels,
+        filter = _ref$labels.filter.text,
+        option = _ref$labels.option.text;
+    return strCmp(filter, searched, {
+      contain: true
+    }) || strCmp(option, searched, {
+      contain: true
+    });
+  }).map(function (_ref2, index) {
+    var _ref2$labels = _ref2.labels,
+        filter = _ref2$labels.filter.element,
+        option = _ref2$labels.option.element,
+        name = _ref2.name;
+    return React__default.createElement(Item, {
+      key: index
+    }, React__default.createElement("div", null, React__default.createElement("div", null, filter), React__default.createElement("div", null, option)), React__default.createElement("div", null, React__default.createElement(Icon, {
+      type: 'feather',
+      icon: 'minus_circle',
+      width: '12px',
+      height: '12px',
+      color: 'darkSilver',
+      onClick: function onClick() {
+        return onRemove(name);
+      }
+    })));
+  }))));
+};
+
+var Provider$2 = React__default.createContext({
+  cols: {}
+});
+var useContext$2 = function useContext() {
+  return React__default.useContext(Provider$2);
+};
+
+var _templateObject$M, _templateObject2$C, _templateObject3$A, _templateObject4$w, _templateObject5$u, _templateObject6$q, _templateObject7$l, _templateObject8$h, _templateObject9$f, _templateObject10$b, _templateObject11$6, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$1;
+var aligns = {
+  self: {
+    horizontal: {
+      center: 'center',
+      left: 'flex-start',
+      right: 'flex-end'
+    },
+    vertical: {
+      center: 'center',
+      top: 'flex-start',
+      bottom: 'flex-end'
+    }
+  },
+  content: {
+    horizontal: {
+      around: 'space-around',
+      between: 'space-between',
+      center: 'center',
+      left: 'flex-start',
+      right: 'flex-end'
+    },
+    vertical: {
+      center: 'center',
+      top: 'flex-start',
+      bottom: 'flex-end'
+    }
+  }
+};
+var Col = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n\n  ", "\n\n  padding: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var width = _ref.width;
+
+  if (width === undefined) {
+    return css(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n        flex-basis: 0;\n        flex-grow: 1;\n        max-width: 100%;\n        width: 100%;\n      "])));
+  } else if (width === 'auto') {
+    return css(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n        flex: 0 0 auto;\n        width: auto;\n        max-width: none;\n      "])));
+  }
+
+  var w = parseFloat(width) * 100 / 12;
+  return css(_templateObject4$w || (_templateObject4$w = _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);
+  return padding;
+}, function (_ref3) {
+  var spacingAround = _ref3.spacingAround;
+  if (spacingAround) return;
+  return css(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n      :first-child {\n        padding-left: 0;\n      }\n      :last-child {\n        padding-right: 0;\n      }\n    "])));
+}, function (_ref4) {
+  var align = _ref4.align;
+  if (align === undefined) return;
+  var styles = [];
+
+  if (align.self !== undefined) {
+    if (align.self.horizontal !== undefined) {
+      var v = align.self.horizontal;
+      var a = aligns.self.horizontal;
+      styles.push(css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n          justify-self: ", ";\n        "])), a[v]));
+    }
+
+    if (align.self.vertical !== undefined) {
+      var _v = align.self.vertical;
+      var _a = aligns.self.vertical;
+      styles.push(css(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n          align-self: ", ";\n        "])), _a[_v]));
+    }
+  }
+
+  if (align.content !== undefined) {
+    if (align.content.horizontal !== undefined) {
+      var _v2 = align.content.horizontal;
+      var _a2 = aligns.content.horizontal;
+      styles.push(css(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n          justify-content: ", ";\n        "])), _a2[_v2]));
+    }
+
+    if (align.content.vertical !== undefined) {
+      var _v3 = align.content.vertical;
+      var _a3 = aligns.content.vertical;
+      styles.push(css(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n          align-items: ", ";\n        "])), _a3[_v3]));
+    }
+  }
+
+  if (align.text !== undefined) {
+    var _v4 = align.text;
+    styles.push(css(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n        text-align: ", ";\n      "])), _v4));
+  }
+
+  return styles;
+}, function (_ref5) {
+  var bordered = _ref5.bordered,
+      lightestGrey = _ref5.theme.colors.lightestGrey;
+  if (!bordered) return;
+  return css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
+}, function (_ref6) {
+  var fontColor = _ref6.fontColor,
+      theme = _ref6.theme;
+  if (fontColor === undefined) return;
+  var c = Array.isArray(fontColor) ? theme.getColor.apply(theme, fontColor) : theme.colors[fontColor];
+  return css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), c);
+}, function (_ref7) {
+  var backgroundColor = _ref7.backgroundColor,
+      theme = _ref7.theme;
+  if (backgroundColor === undefined) return;
+  var c = Array.isArray(backgroundColor) ? theme.getColor.apply(theme, backgroundColor) : theme.colors[backgroundColor];
+  return css(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), c);
+}, function (_ref8) {
+  var hover = _ref8.hover,
+      theme = _ref8.theme;
+  if (!hover) return;
+  var h = hover === true ? ['lightGrey', 50] : hover;
+  var c = Array.isArray(h) ? theme.getColor.apply(theme, h) : theme.colors[h];
+  return css(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
+}, function (_ref9) {
+  var pointer = _ref9.pointer;
+  if (!pointer) return;
+  return css(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
+});
+
+var Col$1 = function Col$1(props) {
+  var context = useContext$2();
+
+  var _props = _extends({}, context.cols, props);
+
+  var colProps = filterObject(_props, ['ellipsis', 'children']);
+  return React__default.createElement(Col, Object.assign({}, colProps), _props.ellipsis ? React__default.createElement(EllipsisContainer$1, null, _props.children) : _props.children);
+};
+
+var Provider$3 = React__default.createContext({
+  rows: {},
+  cols: {}
+});
+var useContext$3 = function useContext() {
+  return React__default.useContext(Provider$3);
+};
+
+var _templateObject$N, _templateObject2$D, _templateObject3$B;
+var Grid = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var spacing = _ref.spacing;
+  if (spacing === undefined) return;
+  var padding = getSpacings(spacing);
+  return css(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), padding);
+}, function (_ref2) {
+  var borderless = _ref2.borderless,
+      lightestGrey = _ref2.theme.colors.lightestGrey;
+  if (borderless) return;
+  return css(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n      border: 1px solid ", ";\n    "])), lightestGrey);
+});
+
+var Grid$1 = function Grid$1(props) {
+  var cols = props.cols || {};
+  var rows = props.rows || {};
+  var gridProps = filterObject(props, ['cols', 'rows']);
+  return React__default.createElement(Provider$3.Provider, {
+    value: {
+      rows: rows,
+      cols: cols
+    }
+  }, React__default.createElement(Grid, Object.assign({}, gridProps)));
+};
+
+var _templateObject$O, _templateObject2$E, _templateObject3$C, _templateObject4$x, _templateObject5$v, _templateObject6$r, _templateObject7$m, _templateObject8$i, _templateObject9$g, _templateObject10$c;
+var horizontalAligns = {
+  around: 'space-around',
+  between: 'space-between',
+  center: 'center',
+  left: 'start',
+  right: 'end'
 };
+var verticalAligns = {
+  center: 'center',
+  top: 'start',
+  bottom: 'end'
+};
+var Row = styled.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  color: ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var spacing = _ref.spacing;
+  if (spacing === undefined) return;
+  var padding = getSpacings(spacing);
+  return css(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), padding);
+}, function (_ref2) {
+  var spacingAround = _ref2.spacingAround;
+  if (spacingAround) return;
+  return css(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n      :first-child {\n        padding-top: 0;\n      }\n      :last-child {\n        padding-bottom: 0;\n      }\n    "])));
+}, function (_ref3) {
+  var horizontalAlign = _ref3.horizontalAlign;
+  if (horizontalAlign === undefined) return;
+  return css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n      justify-content: ", ";\n    "])), horizontalAligns[horizontalAlign]);
+}, function (_ref4) {
+  var verticalAlign = _ref4.verticalAlign;
+  if (verticalAlign === undefined) return;
+  return css(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n      align-items: ", ";\n    "])), verticalAligns[verticalAlign]);
+}, function (_ref5) {
+  var striped = _ref5.striped,
+      backgroundColor = _ref5.backgroundColor,
+      theme = _ref5.theme;
+
+  if (backgroundColor !== undefined) {
+    var c = Array.isArray(backgroundColor) ? theme.getColor.apply(theme, backgroundColor) : theme.colors[backgroundColor];
+    return css(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), c);
+  }
+
+  if (striped === undefined) {
+    return css(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), theme.colors.white);
+  }
+
+  var config = striped === true ? {
+    even: ['lightestGrey', 50]
+  } : striped;
+  var colors = Object.keys(config).reduce(function (prev, key) {
+    var _extends2;
+
+    var c = config[key];
+    if (c === undefined) return prev;
+    return _extends({}, prev, (_extends2 = {}, _extends2[key] = Array.isArray(c) ? theme.getColor.apply(theme, c) : theme.colors[c], _extends2));
+  }, {
+    even: theme.colors.white,
+    odd: theme.colors.white
+  });
+  return css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n      :nth-child(even) {\n        background-color: ", ";\n      }\n      :nth-child(odd) {\n        background-color: ", ";\n      }\n    "])), colors.even, colors.odd);
+}, function (_ref6) {
+  var fontColor = _ref6.fontColor,
+      theme = _ref6.theme;
+  if (fontColor === undefined) return theme.getColor('black', 80);
+  var c = Array.isArray(fontColor) ? theme.getColor.apply(theme, fontColor) : theme.colors[fontColor];
+  return c;
+}, function (_ref7) {
+  var borderless = _ref7.borderless,
+      lightestGrey = _ref7.theme.colors.lightestGrey;
+  if (borderless) return;
+  return css(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-bottom: 1px solid ", ";\n      }\n    "])), lightestGrey);
+}, function (_ref8) {
+  var hover = _ref8.hover,
+      theme = _ref8.theme;
+  if (!hover) return;
+  var h = hover === true ? ['lightGrey', 50] : hover;
+  var c = Array.isArray(h) ? theme.getColor.apply(theme, h) : theme.colors[h];
+  return css(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
+});
+
+var Row$1 = function Row$1(props) {
+  var context = useContext$3();
+
+  var cols = _extends({}, props.cols || {}, context.cols);
+
+  var rowProps = filterObject(props, ['cols'], _extends({}, context.rows));
+  return React__default.createElement(Provider$2.Provider, {
+    value: {
+      cols: cols
+    }
+  }, React__default.createElement(Row, Object.assign({}, rowProps)));
+};
+
+var Grid$2 = Object.assign(Grid$1, {
+  Row: Row$1,
+  Col: Col$1
+});
 
 var theme = {
   sizes: sizes,
@@ -16084,14 +17227,14 @@ var theme$1 = {
   button: theme
 };
 
-var _templateObject$H;
-var FontStyles = createGlobalStyle(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n"])));
+var _templateObject$P;
+var FontStyles = createGlobalStyle(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n"])));
 
 var Globals = function Globals() {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(FontStyles, null));
 };
 
-var _templateObject$I;
+var _templateObject$Q;
 
 var getColor$1 = function getColor(color, opacity) {
   if (opacity === void 0) {
@@ -16101,12 +17244,16 @@ var getColor$1 = function getColor(color, opacity) {
   return "" + colors[color] + opacities[opacity];
 };
 
-var useTypography = function useTypography(typography) {
+var useTypography = function useTypography(typography, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
   var _typographies$typogra = typographies[typography],
       fontFamily = _typographies$typogra.fontFamily,
       fontWeight = _typographies$typogra.fontWeight,
       fontSize = _typographies$typogra.fontSize;
-  return css(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n  "])), fontFamily, fontWeight, fontSize);
+  return css(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n  "])), fontFamily, options.fontWeight || fontWeight, fontSize);
 };
 
 var isDarkColor = function isDarkColor(color, ifDark, ifLight) {
@@ -16143,5 +17290,5 @@ var ThemeProvider = function ThemeProvider(props) {
   }, React__default.createElement(Globals, null), props.children);
 };
 
-export { AbsoluteContainer as MwAbsoluteContainer, Button$1 as MwButton, CalendarInterval as MwCalendarInterval, Card as MwCard, Calendar as MwDatePicker, EllipsisContainer$1 as MwEllipsisContainer, FilterMenu as MwFilterMenu, Icon as MwIcon, Indicator as MwIndicator, Input$3 as MwInput, Loader as MwLoader, Menu as MwMenu, Modal$1 as MwModal, Placeholder as MwPlaceholder, ProgressBar as MwProgressBar, ScrollContainer as MwScrollContainer, Tabs$1 as MwTabs, TextArea as MwTextArea, Toast as MwToast, Zoom as MwZoom, ThemeProvider };
+export { AbsoluteContainer as MwAbsoluteContainer, AppliedFilters as MwAppliedFilters, Button$1 as MwButton, CalendarInterval as MwCalendarInterval, Card as MwCard, Calendar as MwDatePicker, EllipsisContainer$1 as MwEllipsisContainer, Filters as MwFilters, Grid$2 as MwGrid, Icon as MwIcon, Indicator as MwIndicator, Input$3 as MwInput, Loader as MwLoader, Menu as MwMenu, Modal$1 as MwModal, Placeholder as MwPlaceholder, ProgressBar as MwProgressBar, ScrollContainer as MwScrollContainer, Tabs$1 as MwTabs, TextArea as MwTextArea, Toast as MwToast, Transition as MwTransition, Zoom as MwZoom, ThemeProvider, useTransition as useMwTransition };
 //# sourceMappingURL=index.modern.js.map