@mw-kit/mw-ui 1.0.17 → 1.2.0

package/dist/index.modern.js

@@ -48,14 +48,125 @@ function _taggedTemplateLiteralLoose(strings, raw) {
   return strings;
 }
 
+var colors = {
+  white: '#FFFFFF',
+  iceWhite: '#F9F8F8',
+  black: '#000000',
+  blue: '#3455AB',
+  lightBlue: '#2D9AFF',
+  darkestBlue: '#121B2E',
+  darkBlue: '#192338',
+  greyishBlue: '#263046',
+  darkSilver: '#525A6A',
+  silver: '#B2B2B2',
+  darkestGrey: '#989898',
+  darkGrey: '#949494',
+  grey: '#ADADAD',
+  lightGrey: '#C8C8C8',
+  lightestGrey: '#E2E2E3',
+  purple: '#8E66BB',
+  orange: '#FB8702',
+  yellow: '#FBCB01',
+  red: '#C31717',
+  darkestGreen: '#1E561F',
+  darkGreen: '#129105',
+  green: '#76B100',
+  lightGreen: '#66BB6A',
+  pink: '#E23851',
+  brown: '#9F3A38',
+  vanilla: '#CCBEA0',
+  bronze: '#7A4D05',
+  warningGray: '#E6E6E6',
+  warningYellow: '#FBCF30',
+  warningRed: '#EF5350',
+  floralWhite: '#FFFAF3',
+  snowWhite: '#FFF6F6',
+  milkWhite: '#FCFFF5'
+};
+var opacities = {
+  100: 'FF',
+  95: 'F2',
+  90: 'E6',
+  85: 'D9',
+  80: 'CC',
+  75: 'BF',
+  70: 'B3',
+  65: 'A6',
+  60: '99',
+  55: '8C',
+  50: '80',
+  45: '73',
+  40: '66',
+  35: '59',
+  30: '4D',
+  25: '40',
+  20: '33',
+  15: '26',
+  10: '1A',
+  5: '0D',
+  0: '00'
+};
+var spacings = {
+  s1: '7px',
+  s2: '8px',
+  s3: '14px',
+  s4: '21px',
+  s5: '28px',
+  s6: '35px'
+};
+var fonts = {
+  lato: '"Lato", sans-serif'
+};
+var typographies = {
+  h1: {
+    fontFamily: fonts.lato,
+    fontWeight: 'bold',
+    fontSize: '18px'
+  },
+  h2: {
+    fontFamily: fonts.lato,
+    fontWeight: 'bold',
+    fontSize: '16px'
+  },
+  h3: {
+    fontFamily: fonts.lato,
+    fontWeight: 'normal',
+    fontSize: '16px'
+  },
+  h4: {
+    fontFamily: fonts.lato,
+    fontWeight: 'bold',
+    fontSize: '14px'
+  },
+  h5: {
+    fontFamily: fonts.lato,
+    fontWeight: 'normal',
+    fontSize: '14px'
+  },
+  h6: {
+    fontFamily: fonts.lato,
+    fontWeight: 'normal',
+    fontSize: '13px'
+  },
+  p: {
+    fontFamily: fonts.lato,
+    fontWeight: 'normal',
+    fontSize: '14px'
+  }
+};
+
+var isKeyOf = function isKeyOf(object, key) {
+  return Object.prototype.hasOwnProperty.call(object, key);
+};
+
 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 isKeyOf = function isKeyOf(object, key) {
-  return Object.prototype.hasOwnProperty.call(object, key);
+var isString = function isString(value) {
+  return typeof value === 'string';
 };
 
 var filterObject = function filterObject(object, keys, inital) {
@@ -79,6 +190,39 @@ var isoStringToDate = function isoStringToDate(value) {
   var date = new Date(value.split('/').reverse().join('-') + ' 00:00:00');
   return isNaN(date.getTime()) ? null : date;
 };
+var getSpacings = function getSpacings(value, defaults) {
+  var d = {
+    top: 's1',
+    left: 's1',
+    bottom: 's1',
+    right: 's1'
+  };
+
+  if (defaults) {
+    if (typeof defaults === 'string') {
+      d.top = defaults;
+      d.left = defaults;
+      d.bottom = defaults;
+      d.right = defaults;
+    } else {
+      d = _extends({}, d, defaults);
+    }
+  }
+
+  var spacing = typeof value === 'string' ? {
+    top: value,
+    left: value,
+    bottom: value,
+    right: value
+  } : _extends({}, d, value);
+  var values = {
+    top: isKeyOf(spacings, spacing.top) ? spacings[spacing.top] : spacing.top,
+    left: isKeyOf(spacings, spacing.left) ? spacings[spacing.left] : spacing.left,
+    bottom: isKeyOf(spacings, spacing.bottom) ? spacings[spacing.bottom] : spacing.bottom,
+    right: isKeyOf(spacings, spacing.right) ? spacings[spacing.right] : spacing.right
+  };
+  return values.top + " " + values.right + " " + values.bottom + " " + values.left;
+};
 
 var _templateObject, _templateObject2, _templateObject3;
 var loader = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"])));
@@ -241,113 +385,6 @@ var Button$1 = function Button$1(props) {
   }));
 };
 
-var colors = {
-  white: '#FFFFFF',
-  iceWhite: '#F9F8F8',
-  black: '#000000',
-  blue: '#3455AB',
-  lightBlue: '#2D9AFF',
-  darkestBlue: '#121B2E',
-  darkBlue: '#192338',
-  greyishBlue: '#263046',
-  darkSilver: '#525A6A',
-  silver: '#B2B2B2',
-  darkestGrey: '#989898',
-  darkGrey: '#949494',
-  grey: '#ADADAD',
-  lightGrey: '#C8C8C8',
-  lightestGrey: '#E2E2E3',
-  purple: '#8E66BB',
-  orange: '#FB8702',
-  yellow: '#FBCB01',
-  red: '#C31717',
-  darkestGreen: '#1E561F',
-  darkGreen: '#129105',
-  green: '#76B100',
-  lightGreen: '#66BB6A',
-  pink: '#E23851',
-  brown: '#9F3A38',
-  vanilla: '#CCBEA0',
-  bronze: '#7A4D05',
-  warningGray: '#E6E6E6',
-  warningYellow: '#FBCF30',
-  warningRed: '#EF5350',
-  floralWhite: '#FFFAF3',
-  snowWhite: '#FFF6F6',
-  milkWhite: '#FCFFF5'
-};
-var opacities = {
-  100: 'FF',
-  95: 'F2',
-  90: 'E6',
-  85: 'D9',
-  80: 'CC',
-  75: 'BF',
-  70: 'B3',
-  65: 'A6',
-  60: '99',
-  55: '8C',
-  50: '80',
-  45: '73',
-  40: '66',
-  35: '59',
-  30: '4D',
-  25: '40',
-  20: '33',
-  15: '26',
-  10: '1A',
-  5: '0D',
-  0: '00'
-};
-var spacings = {
-  s1: '7px',
-  s2: '8px',
-  s3: '14px',
-  s4: '21px',
-  s5: '28px',
-  s6: '35px'
-};
-var fonts = {
-  lato: '"Lato", sans-serif'
-};
-var typographies = {
-  h1: {
-    fontFamily: fonts.lato,
-    fontWeight: 'bold',
-    fontSize: '18px'
-  },
-  h2: {
-    fontFamily: fonts.lato,
-    fontWeight: 'bold',
-    fontSize: '16px'
-  },
-  h3: {
-    fontFamily: fonts.lato,
-    fontWeight: 'normal',
-    fontSize: '16px'
-  },
-  h4: {
-    fontFamily: fonts.lato,
-    fontWeight: 'bold',
-    fontSize: '14px'
-  },
-  h5: {
-    fontFamily: fonts.lato,
-    fontWeight: 'normal',
-    fontSize: '14px'
-  },
-  h6: {
-    fontFamily: fonts.lato,
-    fontWeight: 'normal',
-    fontSize: '13px'
-  },
-  p: {
-    fontFamily: fonts.lato,
-    fontWeight: 'normal',
-    fontSize: '14px'
-  }
-};
-
 var _path;
 
 function _extends$1() {
@@ -11738,15 +11775,44 @@ var TextArea = function TextArea(props) {
   return React__default.createElement(Container, Object.assign({}, props));
 };
 
-var _templateObject$4, _templateObject2$3, _templateObject3$3;
-var Container$1 = styled.div(_templateObject$4 || (_templateObject$4 = _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 _templateObject$4;
+var EllipsisContainer = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+
+var EllipsisContainer$1 = function EllipsisContainer$1(props) {
+  var myProps = _extends({}, props);
+
+  var _onMouseOver = myProps.onMouseOver || function () {};
+
+  myProps.onMouseOver = function (event) {
+    _onMouseOver(event);
+
+    var target = event.target;
+
+    while (target && !('ellipsis' in target.dataset)) {
+      target = target.parentElement;
+    }
+
+    if (!target) return;
+
+    if (target.scrollWidth > target.offsetWidth) {
+      target.title = target.innerText;
+    } else target.removeAttribute('title');
+  };
+
+  return React__default.createElement(EllipsisContainer, Object.assign({}, myProps, {
+    "data-ellipsis": ''
+  }));
+};
+
+var _templateObject$5, _templateObject2$3, _templateObject3$3, _templateObject4$2;
+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 theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.spacings.s1;
 });
-var OverflowContainer = styled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  overflow-y: scroll;\n  overflow-y: overlay;\n  max-height: 100%;\n  width: 100%;\n\n  ", "\n\n  scrollbar-color: ", ";\n  scrollbar-width: auto;\n\n  ::-webkit-scrollbar {\n    width: 7px;\n  }\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  padding-right: calc(", " * 1.5);\n"])), function (_ref3) {
+var OverflowContainer = styled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  overflow-y: scroll;\n  overflow-y: overlay;\n  max-height: 100%;\n  width: 100%;\n\n  ", "\n\n  scrollbar-color: ", ";\n  scrollbar-width: auto;\n\n  ::-webkit-scrollbar {\n    width: 7px;\n  }\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  ", ";\n"])), function (_ref3) {
   var height = _ref3.height;
   if (!height) return;
   return css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), height);
@@ -11760,8 +11826,10 @@ var OverflowContainer = styled.div(_templateObject2$3 || (_templateObject2$3 = _
   var theme = _ref6.theme;
   return theme.colors.white;
 }, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.spacings.s1;
+  var spacing = _ref7.spacing,
+      theme = _ref7.theme;
+  var value = getSpacings(spacing || '0', '0').split(' ');
+  return css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n      padding: ", " calc(", " * 1.5) ", "\n        ", ";\n    "])), value[0], theme.spacings.s1, value[2], value[3]);
 });
 
 var ScrollContainer = function ScrollContainer(props) {
@@ -11802,11 +11870,11 @@ var ScrollContainer = function ScrollContainer(props) {
   })), after);
 };
 
-var _templateObject$5, _templateObject2$4, _templateObject3$4, _templateObject4$2, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject$6, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 var positions = {
   'top right': function topRight(_ref) {
     var left = _ref.left;
-    return css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n    top: 0;\n    left: ", ";\n  "])), left || '100%');
+    return css(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n    top: 0;\n    left: ", ";\n  "])), left || '100%');
   },
   'top left': function topLeft(_ref2) {
     var right = _ref2.right;
@@ -11818,7 +11886,7 @@ var positions = {
   },
   'bottom left': function bottomLeft(_ref4) {
     var right = _ref4.right;
-    return css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n    bottom: 0;\n    right: ", ";\n  "])), right || '100%');
+    return css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n    bottom: 0;\n    right: ", ";\n  "])), right || '100%');
   },
   'right top': function rightTop(_ref5) {
     var bottom = _ref5.bottom;
@@ -11837,7 +11905,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  box-shadow: 0px 3px 6px ", ";\n  border: 1px solid ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  position: absolute;\n  display: flex;\n\n  ", "\n\n  ", "\n"])), function (_ref9) {
+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 theme = _ref9.theme;
   return theme.useTypography('p');
 }, function (_ref10) {
@@ -11847,27 +11915,30 @@ var Container$2 = styled.div(_templateObject9$1 || (_templateObject9$1 = _tagged
   var theme = _ref11.theme;
   return theme.colors.lightestGrey;
 }, function (_ref12) {
-  var width = _ref12.width;
+  var zIndex = _ref12.zIndex;
+  return zIndex || 1;
+}, function (_ref13) {
+  var width = _ref13.width;
   if (!width) return;
   return css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), width);
-}, function (_ref13) {
-  var height = _ref13.height;
+}, function (_ref14) {
+  var height = _ref14.height;
   if (!height) return;
   return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), height);
-}, function (_ref14) {
-  var maxWidth = _ref14.maxWidth;
+}, function (_ref15) {
+  var maxWidth = _ref15.maxWidth;
   if (!maxWidth) return;
   return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      max-width: ", ";\n    "])), maxWidth);
-}, function (_ref15) {
-  var maxHeight = _ref15.maxHeight;
+}, function (_ref16) {
+  var maxHeight = _ref16.maxHeight;
   if (!maxHeight) return;
   return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      max-height: ", ";\n    "])), maxHeight);
-}, function (_ref16) {
-  var position = _ref16.position,
-      references = _ref16.references;
-  return positions[position](references || {});
 }, function (_ref17) {
-  var firstRender = _ref17.firstRender;
+  var position = _ref17.position,
+      references = _ref17.references;
+  return positions[position](references || {});
+}, function (_ref18) {
+  var firstRender = _ref18.firstRender;
   if (!firstRender) return;
   return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      visibility: hidden;\n    "])));
 });
@@ -11910,16 +11981,16 @@ var AbsoluteContainer = function AbsoluteContainer(props) {
     setPosition(newPosition);
     setFirstRender(false);
   }, [ref]);
-  var htmlProps = filterObject(props, ['center', 'position', 'disableAutoPosition']);
+  var htmlProps = filterObject(props, ['center', 'position', 'disableAutoPosition', 'children']);
   return React__default.createElement(Container$2, Object.assign({}, htmlProps, {
     position: position,
     ref: setRef,
     firstRender: firstRender
-  }));
+  }), React__default.createElement("div", null, props.children));
 };
 
-var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2;
-var Option = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: ", ";\n\n  ", ";\n\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_ref) {
+var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$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 theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -11937,13 +12008,13 @@ var Option = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplat
   var theme = _ref4.theme;
   return theme.colors.iceWhite;
 });
-var Container$3 = styled(AbsoluteContainer)(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n  > div:nth-child(1) {\n    background-color: ", ";\n    border-radius: 4px;\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref5) {
+var Container$3 = styled(AbsoluteContainer)(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n  > div {\n    > div:nth-child(1) {\n      background-color: ", ";\n      border-radius: 4px;\n    }\n\n    ", "\n\n    ", "\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.colors.white;
 }, function (_ref6) {
   var bordered = _ref6.bordered;
   if (!bordered) return;
-  return css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n      ", " {\n        :not(:last-child) {\n          border-bottom: 1px solid\n            ", ";\n        }\n      }\n    "])), Option, function (_ref7) {
+  return css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          :not(:last-child) {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n      "])), Option, function (_ref7) {
     var theme = _ref7.theme;
     return theme.getColor('greyishBlue', 10);
   });
@@ -11951,11 +12022,13 @@ var Container$3 = styled(AbsoluteContainer)(_templateObject4$3 || (_templateObje
   var theme = props.theme;
 
   if (!props.spacing) {
-    return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n        ", " {\n          margin: ", " 0px ", "\n            ", ";\n        }\n      "])), Delimiter, theme.spacings.s1, theme.spacings.s1, theme.spacings.s1);
+    return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n          ", " {\n            margin: ", " 0px ", "\n              ", ";\n          }\n        "])), Delimiter, theme.spacings.s1, theme.spacings.s1, theme.spacings.s1);
   }
 
-  var spacing = props.spacing;
-  return css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n      ", " {\n        padding: ", " 0px ", "\n          ", ";\n      }\n      ", " {\n        margin: ", " 0px ", "\n          ", ";\n      }\n    "])), Option, theme.spacings[spacing], theme.spacings[spacing], theme.spacings[spacing], Delimiter, theme.spacings[spacing], theme.spacings[spacing], theme.spacings[spacing]);
+  var spacing = getSpacings(props.spacing, {
+    right: '0'
+  });
+  return css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n        ", " {\n          padding: ", ";\n        }\n        ", " {\n          margin: ", ";\n        }\n      "])), Option, spacing, Delimiter, spacing);
 });
 var Delimiter = styled.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  border-bottom: 1px solid ", ";\n  margin: 14px;\n  width: calc(100% - 28px);\n"])), function (_ref8) {
   var theme = _ref8.theme;
@@ -11983,7 +12056,8 @@ var Menu = function Menu(props) {
       onScrollEnd = _props.onScrollEnd,
       before = _props.before,
       after = _props.after,
-      scrollHeight = _props.scrollHeight;
+      scrollHeight = _props.scrollHeight,
+      scrollSpacing = _props.scrollSpacing;
 
   var _useState = useState(-1),
       activeOption = _useState[0],
@@ -12000,11 +12074,13 @@ var Menu = function Menu(props) {
 
     var submenuProps = options[index].submenu;
 
-    if (submenuProps === undefined) {
+    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);
@@ -12028,14 +12104,19 @@ var Menu = function Menu(props) {
     onScrollEnd: onScrollEnd,
     before: before,
     after: after,
-    height: scrollHeight
+    height: scrollHeight,
+    spacing: scrollSpacing
   }, options.map(function (option, index) {
     var _option = _extends({}, option),
-        label = _option.label,
         delimiter = _option.delimiter,
-        keepOpen = _option.keepOpen;
-
-    var closeMenu = keepOpen ? function () {} : close;
+        keepOpen = _option.keepOpen,
+        submenu = _option.submenu;
+
+    var label = isString(option.label) ? {
+      text: option.label,
+      element: option.label
+    } : option.label;
+    var closeMenu = keepOpen || submenu ? function () {} : close;
     var onClick;
     var disabled;
 
@@ -12089,12 +12170,16 @@ var Menu = function Menu(props) {
     }, React__default.createElement(Option, {
       onClick: onClick,
       disabled: disabled
-    }, label), delimiter && React__default.createElement(Delimiter, null));
+    }, isString(label.element) ? React__default.createElement(EllipsisContainer$1, null, label.element) : label.element, submenu && React__default.createElement(Icon, {
+      type: 'semantic',
+      icon: 'caret right',
+      width: '14px'
+    })), delimiter && React__default.createElement(Delimiter, null));
   })), getSubmenu(activeOption));
 };
 
-var _templateObject$7, _templateObject2$6, _templateObject3$6, _templateObject4$4, _templateObject5$4, _templateObject6$3;
-var Container$4 = styled.div(_templateObject$7 || (_templateObject$7 = _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 _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$4, _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 props = _ref.props;
   return props.size === 'medium' ? '15px' : '6px';
 }, function (_ref2) {
@@ -12114,7 +12199,7 @@ var Container$4 = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTe
   });
 }, function (_ref7) {
   var props = _ref7.props;
-  return props.type === 'danger' && css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref8) {
+  return props.type === 'danger' && css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref8) {
     var theme = _ref8.theme;
     return theme.colors.warningRed;
   });
@@ -12140,8 +12225,8 @@ var Indicator = function Indicator(props) {
   }, React__default.createElement("div", null), React__default.createElement("span", null, " ", props.description, " "));
 };
 
-var _templateObject$8, _templateObject2$7, _templateObject3$7, _templateObject4$5, _templateObject5$5, _templateObject6$4, _templateObject7$3;
-var Container$5 = styled.div(_templateObject$8 || (_templateObject$8 = _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 _templateObject$9, _templateObject2$7, _templateObject3$7, _templateObject4$6, _templateObject5$5, _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) {
   return props.value + "%";
 }, function (props) {
@@ -12150,7 +12235,7 @@ var Progress = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTem
     return theme.colors.warningGray;
   });
 }, function (props) {
-  return props.type === 'info' && css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref2) {
+  return props.type === 'info' && css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref2) {
     var theme = _ref2.theme;
     return theme.colors.blue;
   });
@@ -12210,8 +12295,8 @@ function SvgClose(props) {
   })));
 }
 
-var _templateObject$9, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$5;
-var Container$6 = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  display: block;\n  border-bottom-style: solid;\n\n  ", "\n"])), function (_ref) {
+var _templateObject$a, _templateObject2$8, _templateObject3$8, _templateObject4$7, _templateObject5$6, _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 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);
@@ -12219,7 +12304,7 @@ var Container$6 = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTe
 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 theme = _ref2.theme,
       internal = _ref2.internal;
-  return css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n    height: ", ";\n    box-shadow: 0 0 10px 0 ", ";\n  "])), internal ? '41px' : '49px', theme.getColor('black', 10));
+  return css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n    height: ", ";\n    box-shadow: 0 0 10px 0 ", ";\n  "])), internal ? '41px' : '49px', theme.getColor('black', 10));
 });
 var Tab = styled.li(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 4px 4px 0 0;\n\n  svg {\n    transform: scale(calc(18 / 24));\n    stroke-width: 2px;\n  }\n\n  ", "\n"])), function (_ref3) {
   var theme = _ref3.theme,
@@ -12313,8 +12398,8 @@ var getMask = function getMask(mask) {
   };
 };
 
-var _templateObject$a, _templateObject2$9, _templateObject3$9, _templateObject4$7, _templateObject5$7, _templateObject6$6, _templateObject7$4, _templateObject8$3, _templateObject9$2, _templateObject10$2;
-var IconContainer = styled.button(_templateObject$a || (_templateObject$a = _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$b, _templateObject2$9, _templateObject3$9, _templateObject4$8, _templateObject5$7, _templateObject6$6, _templateObject7$4, _templateObject8$3, _templateObject9$2, _templateObject10$2, _templateObject11$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 theme = _ref.theme;
   return theme.spacings.s2;
 }, function (_ref2) {
@@ -12323,7 +12408,7 @@ var IconContainer = styled.button(_templateObject$a || (_templateObject$a = _tag
   if (!onClick || disabled) return;
   return css(_templateObject2$9 || (_templateObject2$9 = _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"])), function (_ref3) {
+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"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.useTypography('p');
 }, function (_ref4) {
@@ -12338,7 +12423,7 @@ var Input = styled.input(_templateObject3$9 || (_templateObject3$9 = _taggedTemp
   var placeholder = _ref6.placeholder;
 
   if (placeholder !== '••••••••') {
-    return css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n          ", ";\n          opacity: 1;\n        "])), function (_ref7) {
+    return css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n          ", ";\n          opacity: 1;\n        "])), function (_ref7) {
       var theme = _ref7.theme;
       return theme.useTypography('p');
     });
@@ -12356,49 +12441,53 @@ var Input = styled.input(_templateObject3$9 || (_templateObject3$9 = _taggedTemp
   var theme = _ref10.theme,
       invalid = _ref10.invalid;
   return invalid ? theme.getColor('warningRed', 5) : theme.colors.white;
+}, function (_ref11) {
+  var arrows = _ref11.arrows;
+  if (arrows) return;
+  return css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\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: textfield;\n    "])));
 });
-var Label = styled.label(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n\n  ", "\n\n  > div:first-child {\n    display: inline-block;\n    margin-bottom: ", ";\n\n    ", "\n  }\n\n  ", "\n"])), function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.useTypography('p');
-}, function (_ref12) {
+var Label = styled.label(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n\n  ", "\n\n  > div:first-child {\n    display: inline-block;\n    margin-bottom: ", ";\n\n    ", "\n  }\n\n  ", "\n"])), function (_ref12) {
   var theme = _ref12.theme;
-  return theme.colors.greyishBlue;
+  return theme.useTypography('p');
 }, function (_ref13) {
-  var width = _ref13.width;
-  return width || '100%';
+  var theme = _ref13.theme;
+  return theme.colors.greyishBlue;
 }, function (_ref14) {
-  var disabled = _ref14.disabled;
-  if (!disabled) return;
-  return css(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  var width = _ref14.width;
+  return width || '100%';
 }, function (_ref15) {
-  var theme = _ref15.theme;
-  return theme.spacings.s1;
+  var disabled = _ref15.disabled;
+  if (!disabled) return;
+  return css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, function (_ref16) {
-  var required = _ref16.required;
-  if (!required) return;
-  return css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n        :after {\n          content: ' *';\n        }\n      "])));
+  var theme = _ref16.theme;
+  return theme.spacings.s1;
 }, function (_ref17) {
-  var icon = _ref17.icon;
+  var required = _ref17.required;
+  if (!required) return;
+  return css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n        :after {\n          content: ' *';\n        }\n      "])));
+}, function (_ref18) {
+  var icon = _ref18.icon;
   if (!icon) return;
   var width = icon.width,
       position = icon.position;
 
   if (position === 'right') {
-    return css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n        > ", " {\n          width: ", ";\n          right: calc(", " / 2);\n        }\n\n        > ", " {\n          padding-right: calc(", " + ", ");\n        }\n      "])), IconContainer, width, function (_ref18) {
-      var theme = _ref18.theme;
-      return theme.spacings.s3;
-    }, Input, function (_ref19) {
+    return css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n        > ", " {\n          width: ", ";\n          right: calc(", " / 2);\n        }\n\n        > ", " {\n          padding-right: calc(", " + ", ");\n        }\n      "])), IconContainer, width, function (_ref19) {
       var theme = _ref19.theme;
       return theme.spacings.s3;
+    }, Input, function (_ref20) {
+      var theme = _ref20.theme;
+      return theme.spacings.s3;
     }, width);
   }
 
-  return css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n      > ", " {\n        width: ", ";\n        left: calc(", " / 2);\n      }\n\n      > ", " {\n        padding-left: calc(", " + ", ");\n      }\n    "])), IconContainer, width, function (_ref20) {
-    var theme = _ref20.theme;
-    return theme.spacings.s3;
-  }, Input, function (_ref21) {
+  return css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n      > ", " {\n        width: ", ";\n        left: calc(", " / 2);\n      }\n\n      > ", " {\n        padding-left: calc(", " + ", ");\n      }\n    "])), IconContainer, width, function (_ref21) {
     var theme = _ref21.theme;
     return theme.spacings.s3;
+  }, Input, function (_ref22) {
+    var theme = _ref22.theme;
+    return theme.spacings.s3;
   }, width);
 });
 
@@ -12412,12 +12501,14 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
       clearable = _props.clearable,
       onPressEnter = _props.onPressEnter,
       htmlDisabled = _props.htmlDisabled,
-      width = _props.width;
+      width = _props.width,
+      arrows = _props.arrows;
 
   var mask = getMask(props.mask);
-  var intInvalid = invalid === undefined ? undefined : invalid ? 1 : 0;
-  var intRequired = required === undefined ? undefined : required ? 1 : 0;
-  var intDisabled = disabled === undefined ? undefined : disabled ? 1 : 0;
+  var intInvalid = invalid ? 1 : 0;
+  var intRequired = required ? 1 : 0;
+  var intDisabled = disabled ? 1 : 0;
+  var intArrows = arrows ? 1 : 0;
   var position;
   var iconWidth;
   var iconSubmit;
@@ -12433,9 +12524,10 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
     iconOnClick = props.icon.onClick;
   }
 
-  var inputProps = filterObject(props, ['label', 'invalid', 'required', 'icon', 'mask', 'loading', 'clearable', 'setValue', 'onPressEnter', 'htmlDisabled', 'width'], {
+  var inputProps = filterObject(props, ['label', 'invalid', 'required', 'icon', 'mask', 'loading', 'clearable', 'setValue', 'onPressEnter', 'htmlDisabled', 'width', 'arrows'], {
     invalid: intInvalid,
-    type: 'text'
+    type: 'text',
+    arrows: intArrows
   });
 
   var onChange = inputProps.onChange || function () {};
@@ -12544,9 +12636,9 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
 });
 Input$1.displayName = 'Input';
 
-var _templateObject$b, _templateObject2$a, _templateObject3$a, _templateObject4$8, _templateObject5$8, _templateObject6$7, _templateObject7$5;
+var _templateObject$c, _templateObject2$a, _templateObject3$a, _templateObject4$9, _templateObject5$8, _templateObject6$7, _templateObject7$5;
 var width = '17px';
-var Checkmark = styled.span(_templateObject$b || (_templateObject$b = _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$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0px;\n  left: 0;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n\n  border-style: solid;\n  border-color: ", ";\n  border-width: 1px;\n  border-radius: 4px;\n\n  transition-property: border-color;\n  transition-duration: 0.25s;\n  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n\n  :after {\n    content: '';\n    position: absolute;\n\n    left: 50%;\n    top: 50%;\n    height: 0;\n    width: 0;\n\n    border-style: solid;\n    border-color: ", ";\n    border-width: 0;\n    transform: rotate(45deg);\n\n    transition-property: width height border-width top left;\n    transition-duration: 0.25s;\n    transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n  }\n"])), width, width, function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white;
 }, function (_ref2) {
@@ -12607,7 +12699,7 @@ var Label$1 = styled.label(_templateObject2$a || (_templateObject2$a = _taggedTe
   var disabled = _ref6.disabled;
 
   if (!disabled) {
-    return css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n        cursor: pointer;\n      "])));
+    return css(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n        cursor: pointer;\n      "])));
   }
 
   return css(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
@@ -12788,8 +12880,8 @@ var Time = React__default.forwardRef(function (props, ref) {
 });
 Time.displayName = 'Time';
 
-var _templateObject$c, _templateObject2$b, _templateObject3$b, _templateObject4$9, _templateObject5$9, _templateObject6$8, _templateObject7$6, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1;
-var Container$7 = styled.div(_templateObject$c || (_templateObject$c = _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$d, _templateObject2$b, _templateObject3$b, _templateObject4$a, _templateObject5$9, _templateObject6$8, _templateObject7$6, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$1, _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 theme = _ref.theme;
   return theme.colors.white;
 }, function (_ref2) {
@@ -12807,7 +12899,7 @@ var AbsoluteContainer$1 = styled(AbsoluteContainer)(_templateObject2$b || (_temp
   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 MonthContainer = styled.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  > div {\n    margin: ", " 0;\n  }\n"])), function (_ref6) {
+var MonthContainer = styled.div(_templateObject4$a || (_templateObject4$a = _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;
 });
@@ -12848,7 +12940,7 @@ var DayContainer = styled.button(_templateObject8$4 || (_templateObject8$4 = _ta
     return css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n\n        :not(:disabled) {\n          background-color: ", ";\n        }\n      "])), theme.colors.white, theme.getColor('blue', 30));
   }
 
-  return css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), theme.colors.white);
+  return css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), theme.colors.white);
 }, function (_ref16) {
   var theme = _ref16.theme;
   return theme.colors.silver;
@@ -13126,8 +13218,8 @@ var Calendar = function Calendar(props) {
 
 var JSDate = Date;
 
-var _templateObject$d;
-var RelativeContainer = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$e;
+var RelativeContainer = styled.div(_templateObject$e || (_templateObject$e = _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;
@@ -13280,13 +13372,13 @@ var useContext = function useContext() {
   return React__default.useContext(Provider);
 };
 
-var _templateObject$e, _templateObject2$c, _templateObject3$c, _templateObject4$a;
-var RelativeContainer$1 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$f, _templateObject2$c, _templateObject3$c, _templateObject4$b;
+var RelativeContainer$1 = 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 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$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n  display: flex;\n  justify-content: space-between;\n"])), function (_ref2) {
+var SelectAllContainer = styled.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n  display: flex;\n  justify-content: space-between;\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.spacings.s1;
 });
@@ -13294,52 +13386,53 @@ var SelectAllContainer = styled.div(_templateObject4$a || (_templateObject4$a =
 var Header$1 = function Header() {
   var context = useContext();
 
-  if (!context.props.search && !context.props.multiple) {
+  var _useState = useState(''),
+      search = _useState[0],
+      setSearch = _useState[1];
+
+  if (!context.props.loader) {
     return React__default.createElement(React__default.Fragment, null);
   }
 
-  var _useState = useState(''),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var _context$props = context.props,
-      search = _context$props.search,
-      options = _context$props.options,
+  var options = context.props.options,
       checked = context.checked,
-      setChecked = context.setChecked;
+      setChecked = context.setChecked,
+      searched = context.searched,
+      setSearched = context.setSearched,
+      setPage = context.setPage;
 
   var onClick = function onClick() {
-    return setChecked(function (prev) {
+    setChecked(function (prev) {
       return prev.length === options.length ? [] : options.map(function (option) {
         return option.value;
       });
     });
   };
 
+  var onSearch = function onSearch() {
+    setSearched(search);
+    setPage(1);
+  };
+
   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'
-  })), search && React__default.createElement(Input$1, {
+  })), React__default.createElement(Input$1, {
     type: 'search',
     placeholder: 'Pesquisa',
-    onChange: function onChange(event) {
-      return setValue(event.target.value);
-    },
-    value: value,
-    onPressEnter: function onPressEnter() {
-      return search(value);
-    },
+    setValue: setSearch,
+    value: search,
+    onPressEnter: onSearch,
+    clearable: search !== '' && search === searched,
     icon: {
       icon: {
         type: 'feather',
         icon: 'search'
       },
-      onClick: function onClick() {
-        return search(value);
-      }
+      onClick: onSearch
     }
   }));
 };
@@ -13369,28 +13462,35 @@ var Footer$1 = function Footer() {
 var getOptions = function getOptions(props, checked, setChecked) {
   if (props.type === 'select-multiple') {
     return props.options.map(function (option) {
+      var label = isString(option.label) ? {
+        text: option.label,
+        element: option.label
+      } : option.label;
       return {
-        label: React__default.createElement(Checkbox, {
-          type: 'checkbox',
-          checked: checked.includes(option.value),
-          label: option.label,
-          onChange: function onChange(event) {
-            var isChecked = event.target.checked;
-            setChecked(function (prev) {
-              var newState = prev.filter(function (v) {
-                return v !== option.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;
               });
-              if (isChecked) newState.push(option.value);
-              return newState;
-            });
-          },
-          padding: {
-            top: 's3',
-            left: 's3',
-            right: 's3',
-            bottom: 's3'
-          }
-        }),
+            },
+            padding: {
+              top: 's3',
+              left: 's3',
+              right: 's3',
+              bottom: 's3'
+            }
+          })
+        },
         onClick: function onClick() {},
         data: {
           value: option.value
@@ -13401,8 +13501,12 @@ var getOptions = function getOptions(props, checked, setChecked) {
   }
 
   return props.options.map(function (option) {
+    var label = isString(option.label) ? {
+      text: option.label,
+      element: option.label
+    } : option.label;
     return {
-      label: option.label,
+      label: label,
       onClick: option.onClick || function (_index, data) {
         props.setValue(data.value);
       },
@@ -13414,36 +13518,98 @@ var getOptions = function getOptions(props, checked, setChecked) {
 };
 
 var Select = React__default.forwardRef(function (props, ref) {
-  var onScrollEnd = props.onScrollEnd,
-      position = props.position,
+  var position = props.position,
       disableAutoPosition = props.disableAutoPosition,
-      search = props.search,
+      loader = props.loader,
       type = props.type;
 
-  var _useState2 = useState(false),
-      open = _useState2[0],
-      setOpen = _useState2[1];
+  var _useState = useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
+
+  var _useState2 = useState(''),
+      searched = _useState2[0],
+      setSearched = _useState2[1];
+
+  var _useState3 = useState(1),
+      page = _useState3[0],
+      setPage = _useState3[1];
 
-  var _useState3 = useState(Array.isArray(props.value) ? [].concat(props.value) : []),
-      checked = _useState3[0],
-      setChecked = _useState3[1];
+  var _useState4 = useState(false),
+      lastPage = _useState4[0],
+      setLastPage = _useState4[1];
+
+  var _useState5 = useState(false),
+      open = _useState5[0],
+      setOpen = _useState5[1];
+
+  var _useState6 = useState(Array.isArray(props.value) ? [].concat(props.value) : []),
+      checked = _useState6[0],
+      setChecked = _useState6[1];
 
   var options = getOptions(props, checked, setChecked);
-  var inputProps = filterObject(props, ['type', 'onScrollEnd', 'options', 'position', 'disableAutoPosition']);
+  var inputProps = filterObject(props, ['type', 'onScrollEnd', 'options', 'position', 'disableAutoPosition', '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 = options.find(function (option) {
+      return option.data.value === props.value;
+    });
+    inputProps.value = selected ? selected.label.text : '';
   }
 
+  var _onScrollEnd = props.onScrollEnd || function () {};
+
+  var onScrollEnd = function onScrollEnd() {
+    if (!lastPage) {
+      setPage(function (prev) {
+        return prev + 1;
+      });
+    }
+
+    _onScrollEnd();
+  };
+
+  var onSubmit = useCallback(function () {
+    try {
+      if (!props.loader) return Promise.resolve();
+      setLoading(true);
+      return Promise.resolve(props.loader(searched, page)).then(function (optionsResult) {
+        if (Array.isArray(optionsResult)) {
+          props.setOptions(page === 1 ? optionsResult : function (prev) {
+            return prev.concat(optionsResult);
+          });
+          setLastPage(true);
+        } else {
+          props.setOptions(page === 1 ? optionsResult.options : function (prev) {
+            return prev.concat(optionsResult.options);
+          });
+          setLastPage(optionsResult.lastPage);
+        }
+
+        setLoading(false);
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [searched, page]);
+  useEffect(function () {
+    onSubmit();
+  }, [onSubmit]);
   return React__default.createElement(Provider.Provider, {
     value: {
       props: props,
-      open: open,
       setOpen: setOpen,
       checked: checked,
-      setChecked: setChecked
+      setPage: setPage,
+      setChecked: setChecked,
+      searched: searched,
+      setSearched: setSearched
     }
   }, React__default.createElement(RelativeContainer$1, {
     ref: useOnClickOut(function () {
@@ -13457,6 +13623,7 @@ var Select = React__default.forwardRef(function (props, ref) {
         return !prev;
       });
     },
+    loading: props.loading || loading,
     icon: {
       position: 'right',
       icon: {
@@ -13483,7 +13650,7 @@ var Select = React__default.forwardRef(function (props, ref) {
     },
     before: React__default.createElement(Header$1, null),
     after: React__default.createElement(Footer$1, null),
-    scrollHeight: search ? '135px' : '165px'
+    scrollHeight: loader ? '135px' : '165px'
   })));
 });
 Select.displayName = 'Select';
@@ -13544,7 +13711,7 @@ Password.displayName = 'Password';
 
 var img = "flags~SpNmyrlX.png";
 
-var _templateObject$f, _templateObject2$d;
+var _templateObject$g, _templateObject2$d;
 var coordinates = {
   ar: {
     s1: '0px 0px',
@@ -13619,7 +13786,7 @@ var coordinates = {
     s6: '0px 0px'
   }
 };
-var Flag = styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n  background-image: url(", ");\n  background-size: auto 100%;\n\n  ", "\n"])), img, function (_ref) {
+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 iso = _ref.iso,
       width = _ref.width,
       theme = _ref.theme;
@@ -13728,8 +13895,8 @@ var countries = {
   }
 };
 
-var _templateObject$g, _templateObject2$e, _templateObject3$d;
-var IconContainer$1 = styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  > i.icon {\n    margin-top: -1px;\n  }\n"])));
+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$2 = 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 theme = _ref.theme;
@@ -13814,9 +13981,12 @@ var Phone = React__default.forwardRef(function (props, ref) {
   }, [value]);
   var options = Object.keys(countries).map(function (iso) {
     return {
-      label: React__default.createElement(Label$2, null, React__default.createElement(Flag, {
-        iso: iso
-      }), countries[iso].name, React__default.createElement("span", null, "+", countries[iso].ddi)),
+      label: {
+        text: countries[iso].name,
+        element: React__default.createElement(Label$2, null, React__default.createElement(Flag, {
+          iso: iso
+        }), countries[iso].name, React__default.createElement("span", null, "+", countries[iso].ddi))
+      },
       onClick: function onClick(_index, country) {
         setCountry(country);
       },
@@ -13885,8 +14055,8 @@ var Phone = React__default.forwardRef(function (props, ref) {
 });
 Phone.displayName = 'Phone';
 
-var _templateObject$h, _templateObject2$f, _templateObject3$e, _templateObject4$b, _templateObject5$a, _templateObject6$9;
-var RelativeContainer$3 = styled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  input {\n    color: transparent;\n  }\n"])));
+var _templateObject$i, _templateObject2$f, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$9;
+var RelativeContainer$3 = 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 iconWidth = _ref.iconWidth,
       theme = _ref.theme;
@@ -13902,7 +14072,7 @@ var Container$8 = styled.div(_templateObject2$f || (_templateObject2$f = _tagged
 }, function (_ref4) {
   var disabled = _ref4.disabled;
   if (!disabled) return;
-  return css(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return css(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 });
 var Button$3 = styled.button(_templateObject5$a || (_templateObject5$a = _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;
@@ -14018,8 +14188,8 @@ var DatePicker = React__default.forwardRef(function (props, ref) {
 });
 DatePicker.displayName = 'DatePicker';
 
-var _templateObject$i, _templateObject2$g, _templateObject3$f, _templateObject4$c, _templateObject5$b, _templateObject6$a, _templateObject7$7;
-var LabelContainer = styled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
+var _templateObject$j, _templateObject2$g, _templateObject3$f, _templateObject4$d, _templateObject5$b, _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 theme = _ref.theme;
   return theme.useTypography('p');
 });
@@ -14033,7 +14203,7 @@ var Label$3 = styled.label(_templateObject2$g || (_templateObject2$g = _taggedTe
     return css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
   }
 
-  return css(_templateObject4$c || (_templateObject4$c = _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;
@@ -14096,8 +14266,8 @@ var Switch = function Switch(props) {
   })), React__default.createElement("span", null), label && React__default.createElement(LabelContainer, null, label));
 };
 
-var _templateObject$j, _templateObject2$h, _templateObject3$g, _templateObject4$d, _templateObject5$c, _templateObject6$b, _templateObject7$8, _templateObject8$5, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$1;
-var bullet = css(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: ", ";\n  height: ", ";\n  border-radius: 100%;\n  border: 1px solid ", ";\n  background-color: ", ";\n  box-shadow: 0px 1px 3px ", ";\n"])), function (_ref) {
+var _templateObject$k, _templateObject2$h, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$8, _templateObject8$5, _templateObject9$4, _templateObject10$4, _templateObject11$3, _templateObject12$2, _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 theme = _ref.theme;
   return theme.spacings.s4;
 }, function (_ref2) {
@@ -14105,64 +14275,66 @@ var bullet = css(_templateObject$j || (_templateObject$j = _taggedTemplateLitera
   return theme.spacings.s4;
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.colors.lightestGrey;
+  return theme.colors.white;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.colors.white;
-}, function (_ref5) {
-  var theme = _ref5.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 (_ref6) {
-  var theme = _ref6.theme;
+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 theme = _ref5.theme;
   return theme.useTypography('p');
-}, function (_ref7) {
-  var width = _ref7.width;
+}, function (_ref6) {
+  var width = _ref6.width;
   return width || '100%';
-}, function (_ref8) {
-  var disabled = _ref8.disabled;
+}, function (_ref7) {
+  var disabled = _ref7.disabled;
   if (!disabled) return;
-  return css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
-}, function (_ref9) {
-  var theme = _ref9.theme;
+  return css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+}, function (_ref8) {
+  var theme = _ref8.theme;
   return theme.spacings.s1;
-}, function (_ref10) {
-  var required = _ref10.required;
+}, function (_ref9) {
+  var required = _ref9.required;
   if (!required) return;
   return css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n        :after {\n          content: ' *';\n        }\n      "])));
 });
-var InputContainer = styled.div(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  gap: 6px;\n\n  > div {\n    position: relative;\n  }\n"])));
-var MinMaxLabelContainer = styled.div(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
-var LabelsContainer = styled.div(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n\n  ", "\n"])), function (_ref11) {
+var InputContainer = styled.div(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  gap: 6px;\n\n  > div {\n    position: relative;\n  }\n\n  ", "\n"])), function (_ref10) {
+  var theme = _ref10.theme,
+      invalid = _ref10.invalid;
+
+  if (!invalid) {
+    return css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n        ", " > span {\n          background-color: ", ";\n        }\n\n        ", " {\n          /** firefox */\n          ::-moz-range-thumb {\n            border-color: ", ";\n          }\n          /** ie */\n          ::-ms-thumb {\n            border-color: ", ";\n          }\n          /** chrome */\n          ::-webkit-slider-thumb {\n            border-color: ", ";\n          }\n        }\n      "])), SelectedArea, theme.colors.blue, Input$2, theme.colors.lightestGrey, theme.colors.lightestGrey, theme.colors.lightestGrey);
+  }
+
+  return css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n      ", " > span {\n        background-color: ", ";\n      }\n\n      ", " {\n        /** firefox */\n        ::-moz-range-thumb {\n          border-color: ", ";\n        }\n        /** ie */\n        ::-ms-thumb {\n          border-color: ", ";\n        }\n        /** chrome */\n        ::-webkit-slider-thumb {\n          border-color: ", ";\n        }\n      }\n    "])), SelectedArea, theme.colors.warningRed, Input$2, theme.colors.warningRed, theme.colors.warningRed, theme.colors.warningRed);
+});
+var MinMaxLabelContainer = styled.div(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
+var LabelsContainer = styled.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n\n  ", "\n"])), function (_ref11) {
   var position = _ref11.position;
 
   if (position === 'bottom') {
-    return css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex-direction: column-reverse;\n        }\n\n        ", " {\n          :after {\n            bottom: calc(100% + 10.5px);\n          }\n        }\n\n        ", " {\n          align-items: start;\n        }\n      "])), InputContainer, Marker, MinMaxLabelContainer);
+    return css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex-direction: column-reverse;\n        }\n\n        ", " {\n          :after {\n            bottom: calc(100% + 10.5px);\n          }\n        }\n\n        ", " {\n          align-items: start;\n        }\n      "])), InputContainer, Marker, MinMaxLabelContainer);
   }
 
-  return css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n      ", " {\n        flex-direction: column;\n      }\n\n      ", " {\n        :after {\n          top: calc(100% + 8px);\n        }\n      }\n\n      ", " {\n        align-items: end;\n      }\n    "])), InputContainer, Marker, MinMaxLabelContainer);
+  return css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n      ", " {\n        flex-direction: column;\n      }\n\n      ", " {\n        :after {\n          top: calc(100% + 8px);\n        }\n      }\n\n      ", " {\n        align-items: end;\n      }\n    "])), InputContainer, Marker, MinMaxLabelContainer);
 });
-var SelectedArea = styled.div(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n\n  height: 3px;\n  width: 100%;\n  position: absolute;\n  bottom: calc(50% - 2px);\n  left: 0;\n  display: flex;\n  z-index: 1;\n\n  > span {\n    width: ", "%;\n    display: block;\n    box-sizing: border-box;\n    background-color: ", ";\n    height: 100%;\n  }\n"])), function (_ref12) {
+var SelectedArea = styled.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n\n  height: 3px;\n  width: 100%;\n  position: absolute;\n  bottom: calc(50% - 2px);\n  left: 0;\n  display: flex;\n  z-index: 1;\n\n  > span {\n    width: ", "%;\n    display: block;\n    box-sizing: border-box;\n    height: 100%;\n  }\n"])), function (_ref12) {
   var theme = _ref12.theme;
   return theme.getColor('greyishBlue', 10);
 }, function (_ref13) {
   var percent = _ref13.percent;
   return percent;
-}, function (_ref14) {
-  var theme = _ref14.theme,
-      invalid = _ref14.invalid;
-  return theme.colors[invalid ? 'warningRed' : 'blue'];
 });
-var MarkersContainer = styled.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n  height: 17px;\n"])));
-var Marker = styled.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  width: 40px;\n  text-align: center;\n  left: ", ";\n  z-index: 2;\n\n  :first-child {\n    left: 0;\n    text-align: left;\n\n    :after {\n      left: 0;\n    }\n  }\n  :last-child {\n    right: 0;\n    left: unset;\n    text-align: right;\n\n    :after {\n      right: 0;\n      left: unset;\n    }\n  }\n\n  ", "\n"])), function (_ref15) {
-  var left = _ref15.left;
+var MarkersContainer = styled.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n  height: 17px;\n"])));
+var Marker = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  width: 40px;\n  text-align: center;\n  left: ", ";\n  z-index: 2;\n\n  :first-child {\n    left: 0;\n    text-align: left;\n\n    :after {\n      left: 0;\n    }\n  }\n  :last-child {\n    right: 0;\n    left: unset;\n    text-align: right;\n\n    :after {\n      right: 0;\n      left: unset;\n    }\n  }\n\n  ", "\n"])), function (_ref14) {
+  var left = _ref14.left;
   return left;
-}, function (_ref16) {
-  var bullet = _ref16.bullet,
-      theme = _ref16.theme;
+}, function (_ref15) {
+  var bullet = _ref15.bullet,
+      theme = _ref15.theme;
   if (!bullet) return;
-  return css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '';\n        position: absolute;\n        left: calc(50% - 5px);\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n        border: 1px solid ", ";\n        background-color: ", ";\n        box-shadow: 0px 1px 3px ", ";\n      }\n    "])), theme.colors.lightestGrey, theme.colors.white, theme.getColor('black', 10));
+  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '';\n        position: absolute;\n        left: calc(50% - 5px);\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n        border: 1px solid ", ";\n        background-color: ", ";\n        box-shadow: 0px 1px 3px ", ";\n      }\n    "])), theme.colors.lightestGrey, theme.colors.white, theme.getColor('black', 10));
 });
 
 var getMarkers = function getMarkers(props) {
@@ -14277,7 +14449,9 @@ var Range = React__default.forwardRef(function (props, ref) {
     width: width
   }, React__default.createElement("div", null, label), React__default.createElement(LabelsContainer, {
     position: position
-  }, minLabel && React__default.createElement(MinMaxLabelContainer, null, minLabel), React__default.createElement(InputContainer, null, markers.length > 0 && React__default.createElement(MarkersContainer, null, markers.map(function (marker, index) {
+  }, minLabel && React__default.createElement(MinMaxLabelContainer, null, minLabel), React__default.createElement(InputContainer, {
+    invalid: invalid ? 1 : 0
+  }, markers.length > 0 && React__default.createElement(MarkersContainer, null, markers.map(function (marker, index) {
     var z = markers.length - 2;
     if (z < markers.length - 1) z = markers.length - 1;
     var y = 20 / z;
@@ -14293,8 +14467,7 @@ var Range = React__default.forwardRef(function (props, ref) {
   })), React__default.createElement("div", null, React__default.createElement(Input$2, Object.assign({
     ref: ref
   }, inputProps)), React__default.createElement(SelectedArea, {
-    percent: percent,
-    invalid: invalid ? 1 : 0
+    percent: percent
   }, Array(spans).fill(1).map(function (_value, index) {
     return React__default.createElement("span", {
       key: index
@@ -14303,8 +14476,8 @@ var Range = React__default.forwardRef(function (props, ref) {
 });
 Range.displayName = 'input';
 
-var _templateObject$k, _templateObject2$i, _templateObject3$h, _templateObject4$e, _templateObject5$d, _templateObject6$c, _templateObject7$9;
-var LabelContainer$1 = styled.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
+var _templateObject$l, _templateObject2$i, _templateObject3$h, _templateObject4$f, _templateObject5$d, _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 theme = _ref.theme;
   return theme.useTypography('p');
 });
@@ -14318,7 +14491,7 @@ var Label$5 = styled.label(_templateObject2$i || (_templateObject2$i = _taggedTe
     return css(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
   }
 
-  return css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, function (_ref4) {
   var required = _ref4.required;
   if (!required) return;
@@ -14480,8 +14653,8 @@ var widths = {
   default: '642.5px'
 };
 
-var _templateObject$l, _templateObject2$j, _templateObject3$i, _templateObject4$f, _templateObject5$e, _templateObject6$d, _templateObject7$a, _templateObject8$6, _templateObject9$5, _templateObject10$5;
-var Background = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  backdrop-filter: blur(3px);\n  background-color: ", ";\n"])), function (_ref) {
+var _templateObject$m, _templateObject2$j, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$d, _templateObject7$a, _templateObject8$6, _templateObject9$5, _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);
 });
@@ -14491,7 +14664,7 @@ var Header$2 = styled.div(_templateObject3$i || (_templateObject3$i = _taggedTem
       colors = _ref2$theme.colors,
       spacings = _ref2$theme.spacings,
       useTypography = _ref2$theme.useTypography;
-  return css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", ";\n    padding: ", ";\n\n    ", "\n  "])), colors.lightestGrey, spacings.s4, useTypography('h1'));
+  return css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", ";\n    padding: ", ";\n\n    ", "\n  "])), colors.lightestGrey, spacings.s4, useTypography('h1'));
 });
 var Footer$2 = styled.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  ", "\n"])), function (_ref3) {
   var _ref3$theme = _ref3.theme,
@@ -14589,8 +14762,8 @@ var Modal = function Modal(props) {
   }))))));
 };
 
-var _templateObject$m;
-var Content$1 = styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$n;
+var Content$1 = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -14627,8 +14800,8 @@ var ConfirmDelete = function ConfirmDelete(props) {
   }, React__default.createElement(Content$1, null, children || content));
 };
 
-var _templateObject$n;
-var Content$2 = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$o;
+var Content$2 = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -14668,8 +14841,8 @@ var ConfirmSuccess = function ConfirmSuccess(props) {
   }, React__default.createElement(Content$2, null, children || content));
 };
 
-var _templateObject$o;
-var Content$3 = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$p;
+var Content$3 = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -14709,13 +14882,13 @@ Modal$1.ConfirmDelete = ConfirmDelete;
 Modal$1.ConfirmEdit = ConfirmSuccess;
 Modal$1.Audit = Audit;
 
-var _templateObject$p, _templateObject2$k, _templateObject3$j, _templateObject4$g, _templateObject5$f, _templateObject6$e, _templateObject7$b, _templateObject8$7, _templateObject9$6, _templateObject10$6;
-var Container$a = styled.div(_templateObject$p || (_templateObject$p = _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) {
+var _templateObject$q, _templateObject2$k, _templateObject3$j, _templateObject4$h, _templateObject5$f, _templateObject6$e, _templateObject7$b, _templateObject8$7, _templateObject9$6, _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    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 131px;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
+  return props.size === 'medium' && css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
 }, function (props) {
   return props.size === 'big' && css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n      width: 414px;\n      height: 324px;\n    "])));
 }, function (props) {
@@ -14739,15 +14912,15 @@ var Card = function Card(_ref) {
   return React__default.createElement(Container$a, Object.assign({}, rest), children);
 };
 
-var _templateObject$q, _templateObject2$l, _templateObject3$k, _templateObject4$h, _templateObject5$g, _templateObject6$f;
-var Container$b = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  border-radius: 4px;\n  width: ", ";\n  height: 88px;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", "\n\n  ", "\n\n    ", "\n\n  svg {\n    cursor: pointer;\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 13px;\n    height: 13px;\n  }\n"])), function (props) {
+var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$i, _templateObject5$g, _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$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n      background-color: #fffaf3;\n      opacity: 1;\n      border-color: #ccbea0;\n      h4 {\n        color: #7a4d05;\n      }\n      p {\n        color: #7a4d05cc;\n      }\n    "])));
+  return props.color === 'warning' && css(_templateObject4$i || (_templateObject4$i = _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$g || (_templateObject5$g = _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"])));
@@ -14762,8 +14935,8 @@ var Toast = function Toast(props) {
   })), React__default.createElement(IconContent, null, React__default.createElement("h4", null, props.title), React__default.createElement("p", null, " ", props.description)));
 };
 
-var _templateObject$r;
-var Container$c = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  background-color: ", ";\n  display: flex;\n  width: min-content;\n"])), function (_ref) {
+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) {
@@ -14868,11 +15041,11 @@ var CalendarInterval = function CalendarInterval(props) {
   })));
 };
 
-var _templateObject$s, _templateObject2$m, _templateObject3$l, _templateObject4$i, _templateObject5$h, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$7, _templateObject10$7, _templateObject11$3;
-var Container$d = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
+var _templateObject$t, _templateObject2$m, _templateObject3$l, _templateObject4$j, _templateObject5$h, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$7, _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 HeaderContent = styled.div(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
+var HeaderContent = styled.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
 var MainContent = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
 var HeaderLine = styled.div(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
@@ -14885,7 +15058,7 @@ var HeaderLine = styled.div(_templateObject6$g || (_templateObject6$g = _taggedT
 }, function (props) {
   return props.size === 'large' && css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var MainLine = styled(HeaderLine)(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
+var MainLine = styled(HeaderLine)(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
 
 var Template1 = function Template1(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -14920,24 +15093,24 @@ var Template1 = function Template1(props) {
   })));
 };
 
-var _templateObject$t, _templateObject2$n, _templateObject3$m, _templateObject4$j, _templateObject5$i;
-var HeaderLine$1 = styled.div(_templateObject$t || (_templateObject$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$u, _templateObject2$n, _templateObject3$m, _templateObject4$k, _templateObject5$i;
+var HeaderLine$1 = styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && css(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && css(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
 
-var _templateObject$u, _templateObject2$o, _templateObject3$n, _templateObject4$k, _templateObject5$j, _templateObject6$h, _templateObject7$d, _templateObject8$9;
-var Container$e = styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var _templateObject$v, _templateObject2$o, _templateObject3$n, _templateObject4$l, _templateObject5$j, _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 HeaderImage$1 = styled.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
+var HeaderImage$1 = styled.div(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
 var HeaderContent$1 = styled.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
 var MainContent$1 = styled.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
 var MainLine$1 = styled(HeaderLine$1)(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
@@ -14964,8 +15137,8 @@ var Template2 = function Template2(props) {
   })));
 };
 
-var _templateObject$v, _templateObject2$p, _templateObject3$o;
-var Container$f = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+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) {
   return props.height;
@@ -14996,14 +15169,14 @@ var Template3 = function Template3(props) {
   }));
 };
 
-var _templateObject$w, _templateObject2$q, _templateObject3$p, _templateObject4$l, _templateObject5$k, _templateObject6$i, _templateObject7$e, _templateObject8$a;
-var Container$g = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var _templateObject$x, _templateObject2$q, _templateObject3$p, _templateObject4$m, _templateObject5$k, _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) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && css(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
@@ -15063,13 +15236,13 @@ var Template4 = function Template4(props) {
   }));
 };
 
-var _templateObject$x, _templateObject2$r, _templateObject3$q, _templateObject4$m, _templateObject5$l, _templateObject6$j, _templateObject7$f, _templateObject8$b, _templateObject9$8;
-var Container$h = styled.div(_templateObject$x || (_templateObject$x = _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 _templateObject$y, _templateObject2$r, _templateObject3$q, _templateObject4$n, _templateObject5$l, _templateObject6$j, _templateObject7$f, _templateObject8$b, _templateObject9$8;
+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) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
@@ -15111,11 +15284,11 @@ var Template5 = function Template5(props) {
   })));
 };
 
-var _templateObject$y, _templateObject2$s, _templateObject3$r, _templateObject4$n, _templateObject5$m, _templateObject6$k, _templateObject7$g, _templateObject8$c, _templateObject9$9;
-var Container$i = styled.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  width: 395px;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #f5f5f5;\n"])));
+var _templateObject$z, _templateObject2$s, _templateObject3$r, _templateObject4$o, _templateObject5$m, _templateObject6$k, _templateObject7$g, _templateObject8$c, _templateObject9$9;
+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 HeaderLine$5 = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
+var HeaderLine$5 = styled.div(_templateObject4$o || (_templateObject4$o = _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$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
@@ -15154,13 +15327,13 @@ var Template6 = function Template6(props) {
   })));
 };
 
-var _templateObject$z, _templateObject2$t, _templateObject3$s, _templateObject4$o, _templateObject5$n, _templateObject6$l, _templateObject7$h, _templateObject8$d, _templateObject9$a, _templateObject10$8;
-var Container$j = styled.div(_templateObject$z || (_templateObject$z = _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 _templateObject$A, _templateObject2$t, _templateObject3$s, _templateObject4$p, _templateObject5$n, _templateObject6$l, _templateObject7$h, _templateObject8$d, _templateObject9$a, _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) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
@@ -15188,13 +15361,13 @@ 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$A, _templateObject2$u, _templateObject3$t, _templateObject4$p, _templateObject5$o, _templateObject6$m, _templateObject7$i, _templateObject8$e, _templateObject9$b;
-var Container$k = 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 _templateObject$B, _templateObject2$u, _templateObject3$t, _templateObject4$q, _templateObject5$o, _templateObject6$m, _templateObject7$i, _templateObject8$e, _templateObject9$b;
+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) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
@@ -15231,13 +15404,13 @@ var Template8 = function Template8(props) {
   })));
 };
 
-var _templateObject$B, _templateObject2$v, _templateObject3$u, _templateObject4$q, _templateObject5$p, _templateObject6$n, _templateObject7$j, _templateObject8$f, _templateObject9$c, _templateObject10$9;
-var Container$l = styled.div(_templateObject$B || (_templateObject$B = _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 _templateObject$C, _templateObject2$v, _templateObject3$u, _templateObject4$r, _templateObject5$p, _templateObject6$n, _templateObject7$j, _templateObject8$f, _templateObject9$c, _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) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
@@ -15270,13 +15443,13 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$2, null, React__default.createElement(Circle$2, null)));
 };
 
-var _templateObject$C, _templateObject2$w, _templateObject3$v, _templateObject4$r, _templateObject5$q, _templateObject6$o, _templateObject7$k, _templateObject8$g, _templateObject9$d, _templateObject10$a, _templateObject11$4;
-var Container$m = 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 _templateObject$D, _templateObject2$w, _templateObject3$v, _templateObject4$s, _templateObject5$q, _templateObject6$o, _templateObject7$k, _templateObject8$g, _templateObject9$d, _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) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
@@ -15293,7 +15466,7 @@ var CustomLine$6 = styled(HeaderLine$9)(_templateObject8$g || (_templateObject8$
 });
 var GraphLine = styled(CustomLine$6)(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
 var Main$3 = styled.div(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  padding: 0 7px 72px 7px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  justify-content: center;\n"])));
-var Circle$3 = styled.div(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
+var Circle$3 = styled.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
 var Template10 = function Template10(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -15414,6 +15587,79 @@ var Placeholder = function Placeholder(props) {
   }
 };
 
+var _templateObject$E, _templateObject2$x, _templateObject3$w, _templateObject4$t, _templateObject5$r;
+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 width = _ref.width;
+
+  switch (typeof width) {
+    case 'string':
+      return width;
+
+    case 'number':
+      return width + "px";
+
+    default:
+      return 'auto';
+  }
+}, function (_ref2) {
+  var height = _ref2.height;
+
+  switch (typeof height) {
+    case 'string':
+      return height;
+
+    case 'number':
+      return height + "px";
+
+    default:
+      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 theme = _ref3.theme;
+  return theme.getColor('greyishBlue', 50);
+});
+var Button$4 = styled(Button$1)(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.getColor('white', 50);
+});
+var ModalContent = styled.div(_templateObject5$r || (_templateObject5$r = _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"];
+
+var Zoom = function Zoom(props) {
+  var src = props.src,
+      imgProps = _objectWithoutPropertiesLoose(props, _excluded$3);
+
+  var _useState = useState(false),
+      modalOpened = _useState[0],
+      setModalOpened = _useState[1];
+
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$n, 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, {
+    content: 'Zoom',
+    color: 'white',
+    onClick: function onClick() {
+      return setModalOpened(true);
+    }
+  }))), React__default.createElement(Modal$1, {
+    openState: [modalOpened, setModalOpened],
+    size: 'large',
+    title: 'Zoom',
+    closeOnClickOutside: true
+  }, React__default.createElement(ModalContent, null, React__default.createElement("img", {
+    src: src,
+    alt: 'zoom'
+  }))));
+};
+
 var theme = {
   sizes: sizes,
   fontSizes: fontSizes
@@ -15423,14 +15669,14 @@ var theme$1 = {
   button: theme
 };
 
-var _templateObject$D;
-var FontStyles = createGlobalStyle(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n"])));
+var _templateObject$F;
+var FontStyles = createGlobalStyle(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n"])));
 
 var Globals = function Globals() {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(FontStyles, null));
 };
 
-var _templateObject$E;
+var _templateObject$G;
 
 var getColor$1 = function getColor(color, opacity) {
   if (opacity === void 0) {
@@ -15445,7 +15691,7 @@ var useTypography = function useTypography(typography) {
       fontFamily = _typographies$typogra.fontFamily,
       fontWeight = _typographies$typogra.fontWeight,
       fontSize = _typographies$typogra.fontSize;
-  return css(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n  "])), fontFamily, fontWeight, fontSize);
+  return css(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n  "])), fontFamily, fontWeight, fontSize);
 };
 
 var isDarkColor = function isDarkColor(color, ifDark, ifLight) {
@@ -15482,5 +15728,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, 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, ThemeProvider };
+export { AbsoluteContainer as MwAbsoluteContainer, Button$1 as MwButton, CalendarInterval as MwCalendarInterval, Card as MwCard, Calendar as MwDatePicker, EllipsisContainer$1 as MwEllipsisContainer, 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 };
 //# sourceMappingURL=index.modern.js.map