@mw-kit/mw-ui 1.7.23 → 1.7.28

package/dist/index.modern.js

@@ -420,6 +420,14 @@ var getSpacings = function getSpacings(value, defaults) {
   };
   return values.top + " " + values.right + " " + values.bottom + " " + values.left;
 };
+var getBorder = function getBorder(config) {
+  return 'color' in config ? {
+    top: config,
+    left: config,
+    bottom: config,
+    right: config
+  } : config;
+};
 
 var Transition = function Transition(props) {
   var active = props.active,
@@ -12102,43 +12110,73 @@ var getMask = function getMask(mask) {
   };
 };
 
-var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15;
-var IconContainer = styled.button(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\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$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$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+var IconContainer = styled.button(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\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 onClick = _ref.onClick,
       disabled = _ref.disabled;
   if (!onClick || disabled) return;
   return css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 });
-var Input = styled.input(_templateObject3$4 || (_templateObject3$4 = _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  display: block;\n  width: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: 4px;\n\n  ", ";\n\n  box-shadow: none;\n  outline: none;\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
+var ChildrenContainer = styled(EllipsisContainer$1)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), function (_ref2) {
   var theme = _ref2.theme;
+  return theme.spacings.s1;
+});
+var Input = styled.input(_templateObject4$3 || (_templateObject4$3 = _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  display: block;\n  width: 100%;\n  box-sizing: border-box;\n\n  ", ";\n\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: 4px;\n\n  ", ";\n\n  box-shadow: none;\n  outline: none;\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
+  var theme = _ref3.theme;
   return theme.useTypography('p');
-}, function (_ref3) {
-  var theme = _ref3.theme,
-      invalid = _ref3.invalid;
-  return invalid ? theme.colors.warningRed : theme.colors.darkBlue;
 }, function (_ref4) {
   var theme = _ref4.theme,
       invalid = _ref4.invalid;
-  return invalid ? theme.colors.warningRed : theme.colors.darkGrey;
+  return invalid ? theme.colors.warningRed : theme.colors.darkBlue;
 }, function (_ref5) {
-  var placeholder = _ref5.placeholder;
+  var theme = _ref5.theme,
+      invalid = _ref5.invalid;
+  return invalid ? theme.colors.warningRed : theme.colors.darkGrey;
+}, function (_ref6) {
+  var placeholder = _ref6.placeholder;
 
   if (placeholder !== '••••••••') {
-    return css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n          ", ";\n          opacity: 1;\n        "])), function (_ref6) {
-      var theme = _ref6.theme;
+    return css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n          ", ";\n          opacity: 1;\n        "])), function (_ref7) {
+      var theme = _ref7.theme;
       return theme.useTypography('p');
     });
   }
 
-  return css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n        opacity: 0.5;\n        font-size: 14px;\n        letter-spacing: 0px;\n      "])));
-}, function (_ref7) {
-  var width = _ref7.width;
-  return width || '100%';
+  return css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n        opacity: 0.5;\n        font-size: 14px;\n        letter-spacing: 0px;\n      "])));
 }, function (_ref8) {
   var theme = _ref8.theme,
       paddingless = _ref8.paddingless;
   if (paddingless) return;
-  return css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n    "])), theme.spacings.s2, theme.spacings.s3);
+  return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      ~ ", " {\n        padding: ", " ", ";\n      }\n    "])), theme.spacings.s2, theme.spacings.s3, ChildrenContainer, theme.spacings.s2, theme.spacings.s3);
 }, function (_ref9) {
   var theme = _ref9.theme,
       invalid = _ref9.invalid,
@@ -12149,73 +12187,76 @@ var Input = styled.input(_templateObject3$4 || (_templateObject3$4 = _taggedTemp
   var theme = _ref10.theme,
       invalid = _ref10.invalid;
   var color = invalid ? theme.getColor('warningRed', 5) : theme.colors.white;
-  return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      /** google chrome blue background */\n      -webkit-box-shadow: 0 0 0px 1000px ", " inset !important;\n    "])), color, color);
+  return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      /** google chrome blue background */\n      -webkit-box-shadow: 0 0 0px 1000px ", " inset !important;\n    "])), color, color);
 }, function (_ref11) {
   var arrows = _ref11.arrows;
   if (arrows) return;
-  return css(_templateObject8$1 || (_templateObject8$1 = _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    "])));
+  return css(_templateObject9$1 || (_templateObject9$1 = _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    "])));
 }, function (_ref12) {
   var readOnly = _ref12.readOnly,
       onClick = _ref12.onClick,
       disabled = _ref12.disabled;
-  if (!readOnly) return;
-  return css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n      cursor: ", ";\n    "])), !onClick || disabled ? 'unset' : 'pointer');
+  if (readOnly || !onClick || disabled) return;
+  return css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 });
-var Label = styled.label(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n\n  ", "\n\n  > ", " {\n    bottom: ", ";\n  }\n\n  ", "\n"])), function (_ref13) {
-  var theme = _ref13.theme;
-  return theme.useTypography('p');
-}, function (_ref14) {
+var InputContainer = styled.div(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: ", ";\n"])), function (_ref13) {
+  var width = _ref13.width;
+  return width || '100%';
+});
+var Label = styled.label(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n\n  ", "\n\n  > ", " > ", " {\n    bottom: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref14) {
   var theme = _ref14.theme;
-  return theme.colors.greyishBlue;
+  return theme.useTypography('p');
 }, function (_ref15) {
-  var width = _ref15.width;
-  return width || '100%';
+  var theme = _ref15.theme;
+  return theme.colors.greyishBlue;
 }, function (_ref16) {
-  var disabled = _ref16.disabled;
+  var width = _ref16.width;
+  return width || '100%';
+}, function (_ref17) {
+  var disabled = _ref17.disabled;
   if (!disabled) return;
-  return css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
-}, IconContainer, function (_ref17) {
-  var theme = _ref17.theme,
-      paddingless = _ref17.paddingless;
-  return paddingless ? '2px' : "calc(" + theme.spacings.s2 + " + 1px)";
-}, function (_ref18) {
+  return css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+}, InputContainer, IconContainer, function (_ref18) {
   var theme = _ref18.theme,
-      icon = _ref18.icon,
       paddingless = _ref18.paddingless;
+  return paddingless ? '2px' : "calc(" + theme.spacings.s2 + " + 1px)";
+}, function (_ref19) {
+  var readOnly = _ref19.readOnly,
+      disabled = _ref19.disabled,
+      loading = _ref19.loading;
+  if (loading || readOnly || disabled) return;
+  return css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
+}, function (_ref20) {
+  var theme = _ref20.theme,
+      icon = _ref20.icon,
+      paddingless = _ref20.paddingless;
   if (!icon) return;
   var width = icon.width,
       position = icon.position;
   var padding = paddingless ? '0px' : theme.spacings.s3;
 
   if (position === 'right') {
-    return css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n        > ", " {\n          width: ", ";\n          right: calc(", " / 2);\n        }\n\n        > ", " {\n          padding-right: calc(", " + ", ");\n        }\n      "])), IconContainer, width, padding, Input, padding, width);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n        > ", " > ", " {\n          width: ", ";\n          right: calc(", " / 2);\n        }\n\n        > ", " > ", " {\n          padding-right: calc(", " + ", ");\n          ~ ", " {\n            padding-right: calc(", " + ", ");\n          }\n        }\n      "])), InputContainer, IconContainer, width, padding, InputContainer, Input, padding, width, ChildrenContainer, padding, width);
   }
 
-  return css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n      > ", " {\n        width: ", ";\n        left: calc(", " / 2);\n      }\n\n      > ", " {\n        padding-left: calc(", " + ", ");\n      }\n    "])), IconContainer, width, padding, Input, padding, width);
+  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      > ", " > ", " {\n        width: ", ";\n        left: calc(", " / 2);\n      }\n\n      > ", " > ", " {\n        padding-left: calc(", " + ", ");\n        ~ ", " {\n          padding-left: calc(", " + ", ");\n        }\n      }\n    "])), InputContainer, IconContainer, width, padding, InputContainer, Input, padding, width, ChildrenContainer, padding, width);
 });
-var LabelText = styled.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref19) {
-  var theme = _ref19.theme;
+var LabelText = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref21) {
+  var theme = _ref21.theme;
   return theme.spacings.s1;
-}, function (_ref20) {
-  var required = _ref20.required;
+}, function (_ref22) {
+  var required = _ref22.required;
   if (!required) return;
-  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Input$1 = React__default.forwardRef(function (props, ref) {
   var _props = _extends({}, props),
       label = _props.label,
-      required = _props.required,
-      invalid = _props.invalid,
-      disabled = _props.disabled,
       loading = _props.loading,
       clearable = _props.clearable,
       onPressEnter = _props.onPressEnter,
-      htmlDisabled = _props.htmlDisabled,
-      width = _props.width,
-      arrows = _props.arrows,
-      borderless = _props.borderless,
-      paddingless = _props.paddingless;
+      width = _props.width;
 
   var mask = getMask(props.mask);
   useEffect(function () {
@@ -12223,12 +12264,14 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
     var masked = mask(props.value);
     if (masked !== props.value) setValue(masked);
   }, [props.value]);
-  var intInvalid = invalid ? 1 : 0;
-  var intRequired = required ? 1 : 0;
-  var intDisabled = disabled ? 1 : 0;
-  var intArrows = arrows ? 1 : 0;
-  var intBorderless = borderless ? 1 : 0;
-  var intPaddingless = paddingless ? 1 : 0;
+  var intInvalid = props.invalid ? 1 : 0;
+  var intLoading = props.loading ? 1 : 0;
+  var intRequired = props.required ? 1 : 0;
+  var intDisabled = props.disabled ? 1 : 0;
+  var intReadOnly = props.readOnly ? 1 : 0;
+  var intArrows = props.arrows ? 1 : 0;
+  var intBorderless = props.borderless ? 1 : 0;
+  var intPaddingless = props.paddingless ? 1 : 0;
   var position;
   var iconWidth;
   var iconSubmit;
@@ -12244,13 +12287,12 @@ 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', 'inputWidth', 'arrows', 'borderless', 'paddingless'], {
+  var inputProps = filterObject(props, ['label', 'invalid', 'required', 'icon', 'mask', 'loading', 'clearable', 'setValue', 'onPressEnter', 'htmlDisabled', 'htmlReadOnly', 'width', 'inputWidth', 'arrows', 'borderless', 'paddingless', 'children'], {
     invalid: intInvalid,
     type: 'text',
     arrows: intArrows,
     borderless: intBorderless,
-    paddingless: intPaddingless,
-    width: props.inputWidth
+    paddingless: intPaddingless
   });
 
   var onChange = inputProps.onChange || function () {};
@@ -12339,27 +12381,34 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
     position: position,
     width: iconWidth || '24px'
   } : undefined;
-  if (htmlDisabled) inputProps.disabled = true;
+  if (props.htmlDisabled) inputProps.disabled = true;
+  if (props.htmlReadOnly) inputProps.readOnly = true;
   return React__default.createElement(Label, {
+    readOnly: intReadOnly,
     disabled: intDisabled,
+    loading: intLoading,
     invalid: intInvalid,
     paddingless: intPaddingless,
     icon: iconProps,
     width: width
   }, label && React__default.createElement(LabelText, {
     required: intRequired
-  }, label), React__default.createElement(Input, Object.assign({}, inputProps, {
+  }, label), React__default.createElement(InputContainer, {
+    width: props.inputWidth
+  }, React__default.createElement(Input, Object.assign({}, inputProps, {
     ref: ref
-  })), icon && React__default.createElement(IconContainer, {
+  })), props.children && React__default.createElement(ChildrenContainer, {
+    children: props.children
+  }), icon && React__default.createElement(IconContainer, {
     type: iconSubmit ? 'submit' : 'button',
     onClick: props.disabled ? undefined : iconOnClick
-  }, React__default.createElement(Icon, Object.assign({}, icon))));
+  }, React__default.createElement(Icon, Object.assign({}, icon)))));
 });
 Input$1.displayName = 'Input';
 
-var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2;
+var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2;
 var size = '17px';
-var Checkmark = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\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\n  /** if there is a label, it will be placed after this element */\n  + * {\n    flex: 1;\n  }\n"])), size, size, function (_ref) {
+var Checkmark = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  position: relative;\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\n  /** if there is a label, it will be placed after this element */\n  + * {\n    flex: 1;\n  }\n"])), size, size, function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white;
 }, function (_ref2) {
@@ -12369,7 +12418,7 @@ var Checkmark = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemp
   var theme = _ref3.theme;
   return theme.colors.blue;
 });
-var Label$1 = styled.label(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  display: flex;\n  align-items: center;\n\n  user-select: none;\n  min-height: ", ";\n  min-width: ", ";\n  gap: ", ";\n\n  > input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n  }\n\n  :hover ", " {\n    background-color: ", ";\n  }\n\n  > input:checked ~ ", " {\n    border-color: ", ";\n\n    :after {\n      width: 5px;\n      height: 9.5px;\n      border-width: 0 2px 2px 0;\n      left: 5px;\n      top: 1px;\n    }\n  }\n\n  ", ";\n"])), function (_ref4) {
+var Label$1 = styled.label(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  display: flex;\n  align-items: center;\n\n  user-select: none;\n  min-height: ", ";\n  min-width: ", ";\n  gap: ", ";\n\n  > input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n  }\n\n  :hover ", " {\n    background-color: ", ";\n  }\n\n  > input:checked ~ ", " {\n    border-color: ", ";\n\n    :after {\n      width: 5px;\n      height: 9.5px;\n      border-width: 0 2px 2px 0;\n      left: 5px;\n      top: 1px;\n    }\n  }\n\n  ", ";\n\n  ", "\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.useTypography('p');
 }, function (_ref5) {
@@ -12444,14 +12493,17 @@ var Label$1 = styled.label(_templateObject2$5 || (_templateObject2$5 = _taggedTe
       invalid = _ref11.invalid;
   if (!invalid) return;
   return css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n      ", ",\n      > input:checked ~ ", ", \n      > input:checked ~ ", ":after {\n        border-color: ", ";\n      }\n    "])), Checkmark, Checkmark, Checkmark, theme.colors.warningRed);
+}, function (_ref12) {
+  var width = _ref12.width;
+  return width && css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n        width: ", ";\n      "])), width);
 });
-var LabelContent = styled.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  ", "\n  line-height: 14px;\n  flex: 1;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref12) {
-  var theme = _ref12.theme;
+var LabelContent = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  ", "\n  line-height: 14px;\n  flex: 1;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref13) {
+  var theme = _ref13.theme;
   return theme.useTypography('p');
-}, function (_ref13) {
-  var required = _ref13.required;
+}, function (_ref14) {
+  var required = _ref14.required;
   if (!required) return;
-  return css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Checkbox = React__default.forwardRef(function (props, ref) {
@@ -12471,7 +12523,8 @@ var Checkbox = React__default.forwardRef(function (props, ref) {
     required: required ? 1 : 0,
     invalid: invalid ? 1 : 0,
     bordered: bordered ? 1 : 0,
-    padding: padding
+    padding: padding,
+    width: props.width
   }, React__default.createElement("input", Object.assign({}, htmlProps, {
     type: 'checkbox',
     ref: ref
@@ -12517,35 +12570,6 @@ var inputTimeWidth = {
   withoutSeconds: '66px'
 };
 
-var _templateObject$6;
-var EllipsisContainer = styled.div(_templateObject$6 || (_templateObject$6 = _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$7, _templateObject2$6, _templateObject3$6, _templateObject4$5;
 var Container$1 = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  padding-right: calc(", " / 2);\n  display: flex;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -12619,8 +12643,8 @@ var ScrollContainer = function ScrollContainer(props) {
   })), after);
 };
 
-var _templateObject$8, _templateObject2$7, _templateObject3$7, _templateObject4$6, _templateObject5$5, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$3;
-var Option = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: ", ";\n  color: ", ";\n  display: flex;\n\n  > :nth-child(1) {\n    flex: 1;\n  }\n\n  ", ";\n\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_ref) {
+var _templateObject$8, _templateObject2$7, _templateObject3$7, _templateObject4$6, _templateObject5$5, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3;
+var Option = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: ", ";\n  color: ", ";\n  display: flex;\n\n  > :nth-child(1) {\n    display: flex;\n    align-items: center;\n    gap: ", ";\n    flex: 1;\n  }\n\n  ", ";\n\n  ", ";\n\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -12630,19 +12654,36 @@ var Option = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplat
   var theme = _ref3.theme;
   return theme.colors.darkBlue;
 }, function (_ref4) {
-  var disabled = _ref4.disabled;
+  var theme = _ref4.theme;
+  return theme.spacings.s1;
+}, function (_ref5) {
+  var disabled = _ref5.disabled;
 
   if (!disabled) {
     return css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n        cursor: pointer;\n      "])));
   }
 
   return css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      opacity: 0.3;\n    "])));
-}, function (_ref5) {
-  var theme = _ref5.theme;
+}, function (_ref6) {
+  var border = _ref6.border,
+      theme = _ref6.theme;
+  if (!border) return;
+  var config = getBorder(border);
+  return keys(config).filter(function (k) {
+    return config[k] !== undefined;
+  }).map(function (pos) {
+    var cfg = config[pos];
+    var width = cfg.width || '1px';
+    var style = cfg.style || 'solid';
+    var color = isKeyOf(theme.colors, cfg.color) ? theme.colors[cfg.color] : cfg.color;
+    return css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n          border-", "-width: ", ";\n          border-", "-style: ", ";\n          border-", "-color: ", ";\n        "])), pos, width, pos, style, pos, color);
+  });
+}, function (_ref7) {
+  var theme = _ref7.theme;
   return theme.colors.iceWhite;
 });
-var Container$2 = styled(AbsoluteContainer)(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  > div {\n    display: flex;\n    width: 100%;\n\n    > div:nth-child(1) {\n      background-color: ", ";\n      border-radius: 4px;\n\n      ", "\n    }\n\n    ", "\n\n    ", "\n  }\n"])), function (_ref6) {
-  var theme = _ref6.theme;
+var Container$2 = styled(AbsoluteContainer)(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  > div {\n    display: flex;\n    width: 100%;\n\n    > div:nth-child(1) {\n      background-color: ", ";\n      border-radius: 4px;\n\n      ", "\n    }\n\n    ", "\n\n    ", "\n  }\n"])), function (_ref8) {
+  var theme = _ref8.theme;
   return theme.colors.white;
 }, function (props) {
   if (!props.containerSpacing) return;
@@ -12650,31 +12691,31 @@ var Container$2 = styled(AbsoluteContainer)(_templateObject4$6 || (_templateObje
   var tmp = spacing.split(' ');
   tmp[1] = "calc(" + props.theme.spacings.s1 + " / 2)";
   spacing = tmp.join(' ');
-  return css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n          padding: ", ";\n        "])), spacing);
-}, function (_ref7) {
-  var bordered = _ref7.bordered;
+  return css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n          padding: ", ";\n        "])), spacing);
+}, function (_ref9) {
+  var bordered = _ref9.bordered;
   if (!bordered) return;
-  return css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          :not(:last-child) {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n      "])), Option, function (_ref8) {
-    var theme = _ref8.theme;
+  return css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          :not(:last-child) {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n      "])), Option, function (_ref10) {
+    var theme = _ref10.theme;
     return theme.getColor('greyishBlue', 10);
   });
 }, function (props) {
   var theme = props.theme;
 
   if (!props.itemSpacing) {
-    return css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n          ", " {\n            margin: ", " 0px ", "\n              ", ";\n          }\n        "])), Delimiter, theme.spacings.s1, theme.spacings.s1, theme.spacings.s1);
+    return css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n          ", " {\n            margin: ", " 0px ", "\n              ", ";\n          }\n        "])), Delimiter, theme.spacings.s1, theme.spacings.s1, theme.spacings.s1);
   }
 
   var spacing = getSpacings(props.itemSpacing, {
     right: '0'
   });
-  return css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          padding: ", ";\n        }\n        ", " {\n          margin: ", ";\n        }\n      "])), Option, spacing, Delimiter, spacing);
+  return css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          padding: ", ";\n        }\n        ", " {\n          margin: ", ";\n        }\n      "])), Option, spacing, Delimiter, spacing);
 });
-var Delimiter = styled.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  border-bottom: 1px solid ", ";\n  margin: 14px;\n  width: calc(100% - 28px);\n"])), function (_ref9) {
-  var theme = _ref9.theme;
+var Delimiter = styled.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  border-bottom: 1px solid ", ";\n  margin: 14px;\n  width: calc(100% - 28px);\n"])), function (_ref11) {
+  var theme = _ref11.theme;
   return theme.useTypography('p');
-}, function (_ref10) {
-  var theme = _ref10.theme;
+}, function (_ref12) {
+  var theme = _ref12.theme;
   return theme.colors.greyishBlue;
 });
 
@@ -12706,12 +12747,9 @@ var MenuComponent = function MenuComponent(props, ref) {
     var _option = _extends({}, option),
         delimiter = _option.delimiter,
         keepOpen = _option.keepOpen,
-        caret = _option.caret;
+        caret = _option.caret,
+        data = _option.data;
 
-    var label = isString(option.label) ? {
-      text: option.label,
-      element: option.label
-    } : option.label;
     var closeMenu = keepOpen ? function () {} : close;
     var onClick;
     var disabled = option.disabled;
@@ -12722,9 +12760,8 @@ var MenuComponent = function MenuComponent(props, ref) {
     };
 
     if (!disabled) {
-      var rules = option.rules || [];
-      var rule = rules.map(function (rule) {
-        return rule(index, option.data, label);
+      var rule = (option.rules || []).map(function (rule) {
+        return rule(index, data);
       }).find(function (result) {
         return result !== true;
       });
@@ -12757,12 +12794,21 @@ var MenuComponent = function MenuComponent(props, ref) {
     }
 
     OptionContent.displayName = 'OptionContent';
+    var label = option.label;
+    var labelOptions = filterObject(option, ['onClick', 'label', 'rules']);
+    labelOptions.disabled = disabled;
+    var LabelComponent = typeof label === 'function' ? label : function () {
+      return React__default.createElement(React__default.Fragment, {
+        children: label
+      });
+    };
     return React__default.createElement(React__default.Fragment, {
       key: index
     }, React__default.createElement(OptionContent, null, React__default.createElement(Option, {
       onClick: onClick,
-      disabled: disabled
-    }, isString(label.element) ? React__default.createElement(EllipsisContainer$1, null, label.element) : label.element, caret ? React__default.createElement(Icon, {
+      disabled: disabled,
+      border: option.border
+    }, React__default.createElement("div", null, React__default.createElement(LabelComponent, Object.assign({}, option))), caret ? React__default.createElement(Icon, {
       type: 'semantic',
       icon: 'caret right',
       width: '14px'
@@ -12882,7 +12928,8 @@ var MonthPicker = function MonthPicker(props) {
         rules: [function () {
           var disabled = min !== undefined && (min.getFullYear() > year || min.getFullYear() === year && min.getMonth() > index) || max !== undefined && (max.getFullYear() < year || max.getFullYear() === year && max.getMonth() < index);
           return !disabled;
-        }]
+        }],
+        data: {}
       };
     })
   }));
@@ -12925,7 +12972,7 @@ var Indicator = function Indicator(props) {
   }, props)));
 };
 
-var _templateObject$b, _templateObject2$a, _templateObject3$9, _templateObject4$8, _templateObject5$7, _templateObject6$5, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$2, _templateObject11$2;
+var _templateObject$b, _templateObject2$a, _templateObject3$9, _templateObject4$8, _templateObject5$7, _templateObject6$5, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$4, _templateObject11$2;
 var Footer = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  > button:last-child {\n    margin-left: auto;\n  }\n"])));
 var WeekContainer = styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n\n  :not(:first-child) {\n    border-top: 1px solid ", ";\n  }\n\n  > * {\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    width: 32px;\n    height: 32px;\n\n    color: ", ";\n    box-shadow: none;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n\n    border: 1px solid transparent;\n    :not(:last-child) {\n      border-right-color: ", ";\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -12982,7 +13029,7 @@ var DayContainer = styled.button(_templateObject4$8 || (_templateObject4$8 = _ta
     return;
   }
 
-  return css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '';\n        position: absolute;\n        top: -60%;\n        right: -60%;\n        width: 100%;\n        height: 100%;\n        background-color: ", ";\n        transform: rotate(45deg);\n      }\n    "])), theme.colors[appearance === 'active' ? 'white' : 'blue']);
+  return css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '';\n        position: absolute;\n        top: -60%;\n        right: -60%;\n        width: 100%;\n        height: 100%;\n        background-color: ", ";\n        transform: rotate(45deg);\n      }\n    "])), theme.colors[appearance === 'active' ? 'white' : 'blue']);
 });
 var DayIndicator = styled(Indicator).attrs({
   size: 'mini'
@@ -13557,7 +13604,7 @@ var getTimeProps = function getTimeProps(time, value) {
   });
 };
 
-var _templateObject$e, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$6, _templateObject8$6, _templateObject9$6, _templateObject10$3, _templateObject11$3, _templateObject12$2;
+var _templateObject$e, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$6, _templateObject8$6, _templateObject9$6, _templateObject10$5, _templateObject11$3, _templateObject12$2;
 var Button = styled.button(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  padding: 0\n    ", ";\n  font-family: 'Lato', sans-serif;\n  font-weight: ", ";\n  border-radius: 4px;\n  position: relative;\n  user-select: none;\n\n  ", ";\n\n  ", ";\n\n  color: ", ";\n\n  :disabled {\n    ", "\n  }\n\n  :hover {\n    cursor: ", ";\n\n    ", "\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       appearance = _ref.appearance;
@@ -13629,7 +13676,7 @@ var Button = styled.button(_templateObject$e || (_templateObject$e = _taggedTemp
   }
 
   if (['link', 'bordeless'].includes(appearance)) {
-    return css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.getColor('blue', 50));
+    return css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.getColor('blue', 50));
   }
 
   return css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), theme.getColor(color || 'blue'));
@@ -14272,37 +14319,61 @@ var Header$1 = function Header() {
 
 var getOptions = function getOptions(props, options) {
   return options.map(function (option) {
-    var label = isString(option.label) ? {
-      text: option.label,
-      element: option.label
-    } : option.label;
     var value = option.value,
         onClick = option.onClick,
-        data = option.data;
-    return {
-      label: label,
-      onClick: onClick ? function (index, _option, event) {
-        onClick(index, {
-          label: label,
+        rules = option.rules,
+        disabled = option.disabled;
+    var selected = option.value === props.value;
+
+    var data = _extends({}, option.data, {
+      selected: selected,
+      value: value
+    });
+
+    var LabelComponent = option.label;
+    var parsed = {
+      label: typeof LabelComponent !== 'function' ? LabelComponent : function (_ref) {
+        var disabled = _ref.disabled;
+        return React__default.createElement(LabelComponent, Object.assign({}, {
           value: value,
-          data: data
-        }, event);
-      } : function () {
-        props.setValue(value, option);
+          data: data,
+          disabled: disabled
+        }));
       },
-      data: data,
-      disabled: option.disabled,
-      rules: option.rules
+      onClick: onClick || function () {
+        props.setValue(selected ? '' : value, option.data);
+      },
+      disabled: disabled,
+      rules: rules,
+      border: {
+        left: {
+          color: selected ? 'blue' : 'transparent'
+        }
+      },
+      data: data
     };
+    return parsed;
   });
 };
 
-var getInputValue = function getInputValue(value, options, parsedOptions) {
+var getSelected = function getSelected(value, options) {
   var selectedIndex = options.findIndex(function (option) {
     return option.value === value;
   });
-  var selected = parsedOptions[selectedIndex];
-  return selected ? selected.label.text : '';
+  if (selectedIndex === -1) return null;
+  var selected = options[selectedIndex];
+  return selected;
+};
+
+var getInputContent = function getInputContent(props, selectedOption) {
+  if (typeof selectedOption.label !== 'function') return selectedOption.label;
+  var LabelComponent = selectedOption.label;
+  return React__default.createElement(LabelComponent, {
+    data: _extends({}, selectedOption.data),
+    value: selectedOption.value,
+    disabled: props.disabled || props.loading,
+    mode: 'placeholder'
+  });
 };
 
 var useSelect = function useSelect(props) {
@@ -14311,16 +14382,15 @@ var useSelect = function useSelect(props) {
       setOptions = _useState[1];
 
   var parsedOptions = getOptions(props, options);
-  var inputValue = getInputValue(props.value, options, parsedOptions);
 
   var onReset = function onReset() {};
 
+  var selectedOption = getSelected(props.value, options);
+  var inputContent = selectedOption ? getInputContent(props, selectedOption) : props.value;
   return {
     parsedOptions: parsedOptions,
     options: [options, setOptions],
-    input: {
-      value: inputValue
-    },
+    inputContent: inputContent,
     onReset: onReset,
     menu: {
       itemSpacing: 's3',
@@ -14334,6 +14404,9 @@ var useSelect = function useSelect(props) {
           options: options
         })
       }, children);
+    },
+    onClear: function onClear() {
+      return props.onClear('');
     }
   };
 };
@@ -14351,9 +14424,7 @@ var Footer$1 = function Footer() {
       setOpen = context.setOpen;
 
   var onClick = function onClick() {
-    setValue(checked.map(function (c) {
-      return c.value;
-    }), [].concat(checked));
+    setValue([].concat(checked));
     setOpen(false);
   };
 
@@ -14423,7 +14494,9 @@ var Header$2 = function Header() {
 
   var onClick = function onClick() {
     setChecked(function (prev) {
-      return prev.length === options.length ? [] : [].concat(options);
+      return prev.length === options.length ? [] : options.map(function (o) {
+        return o.value;
+      });
     });
   };
 
@@ -14448,128 +14521,95 @@ var Header$2 = function Header() {
   }));
 };
 
-var getOptions$1 = function getOptions(options, checked, setChecked) {
+var Label$2 = function Label(props) {
+  var context = useContext$1();
+  var _context$checked = context.checked,
+      checked = _context$checked[0],
+      setChecked = _context$checked[1];
+  var _props$option$data = props.option.data,
+      disabled = _props$option$data.disabled,
+      value = _props$option$data.value;
+  var LabelComponent = props.label;
+  return React__default.createElement(Checkbox, {
+    type: 'checkbox',
+    checked: checked.findIndex(function (e) {
+      return e === value;
+    }) !== -1,
+    label: typeof LabelComponent !== 'function' ? LabelComponent : React__default.createElement(LabelComponent, Object.assign({}, props.option)),
+    disabled: disabled,
+    onChange: function onChange(event) {
+      var isChecked = event.target.checked;
+      setChecked(function (prev) {
+        var newState = prev.filter(function (v) {
+          return v !== value;
+        });
+        if (isChecked) newState.push(value);
+        return newState;
+      });
+    },
+    padding: {
+      top: 's3',
+      left: 's3',
+      right: 's3',
+      bottom: 's3'
+    },
+    width: '100%'
+  });
+};
+
+var getOptions$1 = function getOptions(options) {
   return options.map(function (option) {
-    var label = isString(option.label) ? {
-      text: option.label,
-      element: option.label
-    } : option.label;
-    var value = option.value,
-        onClick = option.onClick,
-        data = option.data;
-    return {
-      label: {
-        text: label.text,
-        element: React__default.createElement(Checkbox, {
-          type: 'checkbox',
-          checked: checked.findIndex(function (e) {
-            return e.value === option.value;
-          }) !== -1,
-          label: label.element,
-          disabled: option.disabled,
-          onChange: function onChange(event) {
-            var isChecked = event.target.checked;
-            setChecked(function (prev) {
-              var newState = prev.filter(function (v) {
-                return v.value !== option.value;
-              });
-              if (isChecked) newState.push(_extends({}, option));
-              return newState;
-            });
-          },
-          padding: {
-            top: 's3',
-            left: 's3',
-            right: 's3',
-            bottom: 's3'
-          }
-        })
+    var _label = option.label,
+        value = option.value,
+        onClick = option.onClick;
+    var data = {
+      data: option.data,
+      value: value
+    };
+    var parsed = {
+      label: function label(option) {
+        return React__default.createElement(Label$2, {
+          option: _extends({}, data, {
+            disabled: option.disabled
+          }),
+          label: _label
+        });
       },
-      onClick: onClick ? function (index, _option, event) {
-        onClick(index, {
-          label: label,
-          value: value,
-          data: data
-        }, event);
-      } : undefined,
+      onClick: onClick,
       data: data,
       disabled: option.disabled,
       rules: option.rules,
       keepOpen: true
     };
+    return parsed;
   });
 };
 
-var getInputValue$1 = function getInputValue(value) {
+var getInputContent$1 = function getInputContent(value) {
   if (value.length < 1) return '';
   return value.length > 1 ? "H\xE1 " + value.length + " sele\xE7\xF5es" : "H\xE1 " + value.length + " sele\xE7\xE3o";
 };
 
 var useSelectMultiple = function useSelectMultiple(props) {
-  var init = function init() {
-    if (props.value.length) return [];
-    return typeof props.value[0] === 'string' ? [].concat(props.value).map(function (value) {
-      return {
-        value: value,
-        label: value
-      };
-    }) : [].concat(props.value);
-  };
-
   var _useState = useState([]),
       options = _useState[0],
       setOptions = _useState[1];
 
-  var _useState2 = useState(init),
-      inital = _useState2[0],
-      setInitial = _useState2[1];
-
-  var _useState3 = useState(init),
-      checked = _useState3[0],
-      setChecked = _useState3[1];
-
-  useEffect(function () {
-    var getOption = function getOption(def, options, prev) {
-      var index = options.findIndex(function (o) {
-        return o.value === def.value;
-      });
-      if (index !== -1) return _extends({}, options[index]);else {
-        var _index = prev.findIndex(function (o) {
-          return o.value === def.value;
-        });
-
-        if (_index !== -1) return _extends({}, prev[_index]);
-      }
-      return def;
-    };
+  var _useState2 = useState([].concat(props.value)),
+      checked = _useState2[0],
+      setChecked = _useState2[1];
 
-    var mapper = function mapper(prev) {
-      return props.value.length > 0 && typeof props.value[0] === 'string' ? props.value.map(function (value) {
-        return getOption({
-          value: value,
-          label: value
-        }, options, prev);
-      }) : props.value.map(function (value) {
-        return getOption(value, options, prev);
-      });
-    };
-
-    setInitial(mapper);
-    setChecked(mapper);
-  }, [props.value, options]);
-  var parsedOptions = getOptions$1(options, checked, setChecked);
-  var inputValue = getInputValue$1(props.value);
+  var parsedOptions = getOptions$1(options);
+  var inputContent = getInputContent$1(props.value);
 
   var onReset = function onReset() {
-    setChecked([].concat(inital));
+    setChecked([].concat(props.value));
   };
 
   var returnData = {
     parsedOptions: parsedOptions,
     options: [options, setOptions],
-    input: {
-      value: inputValue
-    },
+    inputContent: inputContent,
     onReset: onReset,
     menu: {
       itemSpacing: undefined,
@@ -14585,6 +14625,9 @@ var useSelectMultiple = function useSelectMultiple(props) {
           checked: [checked, setChecked]
         })
       }, children);
+    },
+    onClear: function onClear() {
+      return props.setValue([]);
     }
   };
   return returnData;
@@ -14602,12 +14645,13 @@ var Select = React__default.forwardRef(function (props, ref) {
 
   var _ref = props.type === 'select-multiple' ? useSelectMultiple(props) : useSelect(props),
       parsedOptions = _ref.parsedOptions,
-      inputValue = _ref.input.value,
+      inputContent = _ref.inputContent,
       _ref$options = _ref.options,
       setOptions = _ref$options[1],
       onReset = _ref.onReset,
       menuProps = _ref.menu,
-      getContext = _ref.getContext;
+      getContext = _ref.getContext,
+      onClear = _ref.onClear;
 
   var _useState = useState(false),
       _loading = _useState[0],
@@ -14641,9 +14685,7 @@ var Select = React__default.forwardRef(function (props, ref) {
     setPage(1);
   };
 
-  var inputProps = filterObject(props, ['type', 'onScrollEnd', 'position', 'value'], {
-    value: inputValue
-  });
+  var inputProps = filterObject(props, ['type', 'onScrollEnd', 'position', 'value']);
 
   var _onScrollEnd = props.onScrollEnd || function () {};
 
@@ -14728,7 +14770,7 @@ var Select = React__default.forwardRef(function (props, ref) {
     width: props.width
   }, React__default.createElement(Input$1, Object.assign({}, inputProps, {
     type: 'search',
-    readOnly: true,
+    htmlReadOnly: true,
     onClick: onClick,
     loading: loading,
     icon: {
@@ -14740,7 +14782,10 @@ var Select = React__default.forwardRef(function (props, ref) {
       },
       onClick: onClick
     },
-    ref: ref
+    ref: ref,
+    clearable: props.value.length > 0 ? onClear : undefined,
+    placeholder: props.value.length === 0 ? props.placeholder : undefined,
+    children: inputContent
   })), React__default.createElement(Menu, Object.assign({}, menuProps, {
     open: open,
     close: function close() {
@@ -14748,7 +14793,7 @@ var Select = React__default.forwardRef(function (props, ref) {
     },
     options: parsedOptions,
     onScrollEnd: onScrollEnd,
-    width: '100%',
+    width: props.inputWidth || '100%',
     bordered: true,
     position: position,
     references: {
@@ -15011,7 +15056,7 @@ var countries = {
 var _templateObject$n, _templateObject2$i, _templateObject3$d;
 var IconContainer$1 = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  > i.icon {\n    margin-top: -1px;\n  }\n"])));
 var RelativeContainer$3 = styled.div(_templateObject2$i || (_templateObject2$i = _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 Label$3 = 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;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -15090,15 +15135,16 @@ var Component = React__default.forwardRef(function (props, ref) {
 
   var options = Object.keys(countries).map(function (iso) {
     return {
-      label: {
-        text: countries[iso].name,
-        element: React__default.createElement(Label$2, null, React__default.createElement(Flag, {
+      label: function label(option) {
+        var country = option.data;
+        return React__default.createElement(Label$3, null, React__default.createElement(Flag, {
           iso: iso
-        }), countries[iso].name, React__default.createElement("span", null, "+", countries[iso].ddi))
+        }), country.name, React__default.createElement("span", null, "+", country.ddi));
       },
       onClick: function onClick() {
         setCountry(countries[iso]);
-      }
+      },
+      data: countries[iso]
     };
   });
 
@@ -15342,7 +15388,7 @@ var LabelContainer$3 = styled.div(_templateObject$p || (_templateObject$p = _tag
   if (!required) return;
   return css(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '*';\n      }\n    "])));
 });
-var Label$3 = styled.label(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n  position: relative;\n  align-items: center;\n\n  ", "\n\n  ", "\n\n  > input {\n    position: absolute;\n    height: 0%;\n    width: 0%;\n    opacity: 0;\n  }\n\n  > span {\n    position: relative;\n    width: 50px;\n    height: calc(", " + 1px);\n    background-color: ", ";\n    border-radius: 20px;\n    transition-property: background-color;\n    transition-duration: 0.4s;\n    transition-timing-function: ease-in-out;\n    box-sizing: content-box;\n    :before {\n      content: '';\n      transition-property: left;\n      transition-duration: 0.4s;\n      transition-timing-function: ease-in-out;\n      position: absolute;\n      border-width: 1px;\n      border-style: solid;\n      border-radius: 100%;\n      left: 0;\n      box-shadow: 0px 1px 3px ", ";\n      width: calc(", " - 1px);\n      height: calc(", " - 1px);\n      background-color: ", ";\n    }\n  }\n\n  > input:checked + span {\n    :before {\n      left: calc(100% - ", " - 1px);\n    }\n  }\n"])), function (_ref3) {
+var Label$4 = styled.label(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n  position: relative;\n  align-items: center;\n\n  ", "\n\n  ", "\n\n  > input {\n    position: absolute;\n    height: 0%;\n    width: 0%;\n    opacity: 0;\n  }\n\n  > span {\n    position: relative;\n    width: 50px;\n    height: calc(", " + 1px);\n    background-color: ", ";\n    border-radius: 20px;\n    transition-property: background-color;\n    transition-duration: 0.4s;\n    transition-timing-function: ease-in-out;\n    box-sizing: content-box;\n    :before {\n      content: '';\n      transition-property: left;\n      transition-duration: 0.4s;\n      transition-timing-function: ease-in-out;\n      position: absolute;\n      border-width: 1px;\n      border-style: solid;\n      border-radius: 100%;\n      left: 0;\n      box-shadow: 0px 1px 3px ", ";\n      width: calc(", " - 1px);\n      height: calc(", " - 1px);\n      background-color: ", ";\n    }\n  }\n\n  > input:checked + span {\n    :before {\n      left: calc(100% - ", " - 1px);\n    }\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.spacings.s1;
 }, function (_ref4) {
@@ -15405,7 +15451,7 @@ var Switch = function Switch(props) {
   };
   var htmlProps = filterObject(props, ['label', 'invalid', 'required', 'htmlDisabled', 'labelProps']);
   htmlProps.disabled = props.disabled || props.htmlDisabled;
-  return React__default.createElement(Label$3, Object.assign({}, props.labelProps || {}, {
+  return React__default.createElement(Label$4, Object.assign({}, props.labelProps || {}, {
     disabled: disabled ? 1 : 0,
     invalid: invalid ? 1 : 0
   }), label.label && React__default.createElement(LabelContainer$3, {
@@ -15415,7 +15461,7 @@ var Switch = function Switch(props) {
   })), React__default.createElement("span", null), label.after && React__default.createElement(LabelContainer$3, null, label.after));
 };
 
-var _templateObject$q, _templateObject2$l, _templateObject3$g, _templateObject4$d, _templateObject5$b, _templateObject6$9, _templateObject7$9, _templateObject8$8, _templateObject9$8, _templateObject10$4, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16;
+var _templateObject$q, _templateObject2$l, _templateObject3$g, _templateObject4$d, _templateObject5$b, _templateObject6$9, _templateObject7$9, _templateObject8$8, _templateObject9$8, _templateObject10$6, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16$1;
 var bullet = css(_templateObject$q || (_templateObject$q = _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;
@@ -15430,7 +15476,7 @@ var bullet = css(_templateObject$q || (_templateObject$q = _taggedTemplateLitera
   return theme.getColor('black', 10);
 });
 var Input$2 = styled.input(_templateObject2$l || (_templateObject2$l = _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  line-height: 19px;\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 Label$5 = styled.label(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: 19px;\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n\n  ", "\n\n  > div:first-child {\n    display: inline-block;\n    margin-bottom: ", ";\n\n    ", "\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.useTypography('p');
 }, function (_ref6) {
@@ -15448,7 +15494,7 @@ var Label$4 = styled.label(_templateObject3$g || (_templateObject3$g = _taggedTe
   if (!required) return;
   return css(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n        :after {\n          content: ' *';\n        }\n      "])));
 });
-var InputContainer = styled.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  gap: 6px;\n\n  > div {\n    position: relative;\n  }\n\n  ", "\n"])), function (_ref10) {
+var InputContainer$1 = styled.div(_templateObject6$9 || (_templateObject6$9 = _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;
 
@@ -15459,14 +15505,14 @@ var InputContainer = styled.div(_templateObject6$9 || (_templateObject6$9 = _tag
   return css(_templateObject8$8 || (_templateObject8$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.warningRed, Input$2, theme.colors.warningRed, theme.colors.warningRed, theme.colors.warningRed);
 });
 var MinMaxLabelContainer = styled.div(_templateObject9$8 || (_templateObject9$8 = _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 LabelsContainer = styled.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n\n  ", "\n"])), function (_ref11) {
   var position = _ref11.position;
 
   if (position === 'bottom') {
-    return css(_templateObject11$4 || (_templateObject11$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$4 || (_templateObject11$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$1, Marker, MinMaxLabelContainer);
   }
 
-  return css(_templateObject12$3 || (_templateObject12$3 = _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$3 || (_templateObject12$3 = _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$1, Marker, MinMaxLabelContainer);
 });
 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;
@@ -15483,7 +15529,7 @@ var Marker = styled.div(_templateObject15$1 || (_templateObject15$1 = _taggedTem
   var bullet = _ref15.bullet,
       theme = _ref15.theme;
   if (!bullet) return;
-  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));
+  return css(_templateObject16$1 || (_templateObject16$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));
 });
 
 var getMarkers = function getMarkers(props) {
@@ -15601,13 +15647,13 @@ var Range = React__default.forwardRef(function (props, ref) {
     onChange: onChange,
     value: value
   });
-  return React__default.createElement(Label$4, {
+  return React__default.createElement(Label$5, {
     required: required ? 1 : 0,
     disabled: disabled ? 1 : 0,
     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, {
+  }, minLabel && React__default.createElement(MinMaxLabelContainer, null, minLabel), React__default.createElement(InputContainer$1, {
     invalid: invalid ? 1 : 0
   }, markers.length > 0 && React__default.createElement(MarkersContainer, null, markers.map(function (marker, index) {
     var z = markers.length - 2;
@@ -15639,7 +15685,7 @@ var LabelContainer$4 = styled.div(_templateObject$r || (_templateObject$r = _tag
   var theme = _ref.theme;
   return theme.useTypography('p');
 });
-var Label$5 = styled.label(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n\n  ", "\n\n  ", "\n\n", "\n\n  > input {\n    height: 0;\n    width: 0;\n    /* Chrome, Safari, Edge, Opera */\n    :-webkit-outer-spin-button,\n    :-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    /* Firefox */\n    -moz-appearance: none;\n  }\n\n  > span {\n    height: 17px;\n    width: 17px;\n    border-radius: 100%;\n    border-width: 1px;\n    border-style: solid;\n    background-color: ", ";\n    position: relative;\n    transition-property: border-color;\n    transition-duration: 0.5s;\n    transition-timing-function: ease-in-out;\n    :before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      height: 0;\n      width: 0;\n      border-radius: 100%;\n      transition-property: top, left, width, height, background-color;\n      transition-duration: 0.5s;\n      transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n    }\n  }\n  > input:checked + span {\n    :before {\n      top: calc(50% - 4.5px);\n      left: calc(50% - 4.5px);\n      height: 9px;\n      width: 9px;\n    }\n  }\n"])), function (_ref2) {
+var Label$6 = styled.label(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n\n  ", "\n\n  ", "\n\n", "\n\n  > input {\n    height: 0;\n    width: 0;\n    /* Chrome, Safari, Edge, Opera */\n    :-webkit-outer-spin-button,\n    :-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    /* Firefox */\n    -moz-appearance: none;\n  }\n\n  > span {\n    height: 17px;\n    width: 17px;\n    border-radius: 100%;\n    border-width: 1px;\n    border-style: solid;\n    background-color: ", ";\n    position: relative;\n    transition-property: border-color;\n    transition-duration: 0.5s;\n    transition-timing-function: ease-in-out;\n    :before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      height: 0;\n      width: 0;\n      border-radius: 100%;\n      transition-property: top, left, width, height, background-color;\n      transition-duration: 0.5s;\n      transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n    }\n  }\n  > input:checked + span {\n    :before {\n      top: calc(50% - 4.5px);\n      left: calc(50% - 4.5px);\n      height: 9px;\n      width: 9px;\n    }\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.spacings.s1;
 }, function (_ref3) {
@@ -15685,7 +15731,7 @@ var RadioButton = function RadioButton(props) {
       required = props.required,
       invalid = props.invalid;
   var htmlProps = filterObject(props, ['label', 'invalid', 'required']);
-  return React__default.createElement(Label$5, {
+  return React__default.createElement(Label$6, {
     disabled: disabled ? 1 : 0,
     required: required ? 1 : 0,
     invalid: invalid ? 1 : 0
@@ -15877,7 +15923,7 @@ var parse = function parse(value) {
   });
 };
 
-var _templateObject$s, _templateObject2$n, _templateObject3$i, _templateObject4$f, _templateObject5$d, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$9, _templateObject10$5, _templateObject11$5;
+var _templateObject$s, _templateObject2$n, _templateObject3$i, _templateObject4$f, _templateObject5$d, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$9, _templateObject10$7, _templateObject11$5;
 var RelativeContainer$5 = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  position: relative;\n  user-select: none;\n  min-width: 220px;\n\n  > input,\n  > label > input {\n    color: transparent;\n    background-color: transparent;\n    width: 1px;\n    height: 1px;\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    border: 0;\n    padding: 0;\n    overflow: hidden;\n    outline: none;\n    box-shadow: none;\n  }\n"])));
 var LabelContainer$5 = styled.div(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n  flex: 1;\n  text-align: center;\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -15920,7 +15966,7 @@ var Button$4 = styled.button(_templateObject8$9 || (_templateObject8$9 = _tagged
   if (!onClick) return;
   return css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
-var LabelText$1 = styled.label(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref10) {
+var LabelText$1 = styled.label(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref10) {
   var theme = _ref10.theme;
   return theme.spacings.s1;
 }, function (_ref11) {
@@ -16083,22 +16129,26 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
       label: 'Hoje',
       onClick: function onClick() {
         return setValue(intervalTypes.day.initial(props.min));
-      }
+      },
+      data: {}
     }, {
       label: 'Semana',
       onClick: function onClick() {
         return setValue(intervalTypes.week.initial(props.min));
-      }
+      },
+      data: {}
     }, {
       label: 'Mês',
       onClick: function onClick() {
         return setValue(intervalTypes.month.initial(props.min));
-      }
+      },
+      data: {}
     }, {
       label: 'Personalizado',
       onClick: function onClick() {
         return setOpen('calendar');
       },
+      data: {},
       keepOpen: true,
       caret: true
     }],
@@ -16206,7 +16256,7 @@ var Input$4 = React__default.forwardRef(function (props, ref) {
 Input$4.displayName = 'Input';
 
 var _templateObject$u, _templateObject2$o;
-var Label$6 = styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref) {
+var Label$7 = styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s1;
 }, function (_ref2) {
@@ -16215,8 +16265,8 @@ var Label$6 = styled.div(_templateObject$u || (_templateObject$u = _taggedTempla
   return css(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
-var Label$7 = function Label(props) {
-  return props.children ? React__default.createElement(Label$6, Object.assign({}, props)) : null;
+var Label$8 = function Label(props) {
+  return props.children ? React__default.createElement(Label$7, Object.assign({}, props)) : null;
 };
 
 var _templateObject$v;
@@ -16254,7 +16304,7 @@ var Tag$1 = function Tag$1(props) {
 };
 
 var _templateObject$w, _templateObject2$p, _templateObject3$j;
-var Label$8 = styled.label(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n\n  ", "\n"])), function (_ref) {
+var Label$9 = styled.label(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -16320,10 +16370,10 @@ var Tags = React__default.forwardRef(function (props, ref) {
     setValue([].concat(prev));
   };
 
-  return React__default.createElement(Label$8, {
+  return React__default.createElement(Label$9, {
     disabled: props.disabled,
     width: props.width
-  }, React__default.createElement(Label$7, {
+  }, React__default.createElement(Label$8, {
     required: props.required
   }, props.label), React__default.createElement(TagContainer, {
     invalid: props.invalid
@@ -16950,7 +17000,7 @@ var AppliedFilters = Object.assign(function (props) {
   Menu: AppliedFiltersMenu
 });
 
-var _templateObject$A, _templateObject2$s, _templateObject3$m, _templateObject4$h, _templateObject5$e, _templateObject6$c, _templateObject7$c, _templateObject8$a, _templateObject9$a, _templateObject10$6;
+var _templateObject$A, _templateObject2$s, _templateObject3$m, _templateObject4$h, _templateObject5$e, _templateObject6$c, _templateObject7$c, _templateObject8$a, _templateObject9$a, _templateObject10$8;
 var Container$9 = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: #fff;\n  border: 1px solid #d4d4d5;\n  border-radius: 4px;\n  border-left-width: 5px;\n  padding: 14px;\n  ", "\n  ", "\n    ", "\n  ", "\n\n  ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n"])), function (props) {
   return props.size === 'mini' && css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
 }, function (props) {
@@ -16968,7 +17018,7 @@ var Container$9 = styled.div(_templateObject$A || (_templateObject$A = _taggedTe
 }, function (props) {
   return props.borderType === 'danger' && css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
 }, function (props) {
-  return props.borderType === 'none' && css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
+  return props.borderType === 'none' && css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
 });
 
 var _excluded$1 = ["children"];
@@ -17248,8 +17298,9 @@ var Submenu = function Submenu(props) {
 
   var optionsParser = function optionsParser(option) {
     return {
-      label: option.label,
-      onClick: onClickOption
+      label: typeof option.label === 'string' ? option.label : option.label.element,
+      onClick: onClickOption,
+      data: {}
     };
   };
 
@@ -17311,7 +17362,7 @@ var FiltersMenu = function FiltersMenu(props) {
 
   var items = props.items.map(function (item) {
     return {
-      label: item.label,
+      label: typeof item.label === 'string' ? item.label : item.label.element,
       delimiter: item.delimiter,
       keepOpen: true,
       caret: true,
@@ -17319,7 +17370,8 @@ var FiltersMenu = function FiltersMenu(props) {
         setActive(function (prev) {
           return prev === index ? -1 : index;
         });
-      }
+      },
+      data: {}
     };
   });
   var selected = active >= 0 && active < props.items.length ? props.items[active] : undefined;
@@ -17384,7 +17436,7 @@ var useContext$2 = function useContext() {
   return React__default.useContext(Provider$2);
 };
 
-var _templateObject$D, _templateObject2$t, _templateObject3$n, _templateObject4$i, _templateObject5$f, _templateObject6$d, _templateObject7$d, _templateObject8$b, _templateObject9$b, _templateObject10$7, _templateObject11$6, _templateObject12$4, _templateObject13$3, _templateObject14$3, _templateObject15$2;
+var _templateObject$D, _templateObject2$t, _templateObject3$n, _templateObject4$i, _templateObject5$f, _templateObject6$d, _templateObject7$d, _templateObject8$b, _templateObject9$b, _templateObject10$9, _templateObject11$6, _templateObject12$4, _templateObject13$3, _templateObject14$3, _templateObject15$2;
 var aligns = {
   self: {
     horizontal: {
@@ -17467,7 +17519,7 @@ var Col = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLi
 
   if (align.text !== undefined) {
     var _v4 = align.text;
-    styles.push(css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n        text-align: ", ";\n      "])), _v4));
+    styles.push(css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n        text-align: ", ";\n      "])), _v4));
   }
 
   return styles;
@@ -17543,7 +17595,7 @@ var Grid$1 = function Grid$1(props) {
   }, React__default.createElement(Grid, Object.assign({}, gridProps)));
 };
 
-var _templateObject$F, _templateObject2$v, _templateObject3$p, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$e, _templateObject8$c, _templateObject9$c, _templateObject10$8;
+var _templateObject$F, _templateObject2$v, _templateObject3$p, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$e, _templateObject8$c, _templateObject9$c, _templateObject10$a;
 var horizontalAligns = {
   around: 'space-around',
   between: 'space-between',
@@ -17618,7 +17670,7 @@ var Row = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLi
   if (!hover) return;
   var h = hover === true ? ['lightGrey', 50] : hover;
   var c = Array.isArray(h) ? theme.getColor.apply(theme, h) : theme.colors[h];
-  return css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
+  return css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
 });
 
 var Row$1 = function Row$1(props) {
@@ -17671,7 +17723,7 @@ var widths = {
   default: '642.5px'
 };
 
-var _templateObject$G, _templateObject2$w, _templateObject3$q, _templateObject4$k, _templateObject5$h, _templateObject6$f, _templateObject7$f, _templateObject8$d, _templateObject9$d, _templateObject10$9;
+var _templateObject$G, _templateObject2$w, _templateObject3$q, _templateObject4$k, _templateObject5$h, _templateObject6$f, _templateObject7$f, _templateObject8$d, _templateObject9$d, _templateObject10$b;
 var Background = styled.div(_templateObject$G || (_templateObject$G = _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);
@@ -17704,7 +17756,7 @@ var Container$b = styled.div(_templateObject9$d || (_templateObject9$d = _tagged
       customSize = _ref6.customSize,
       color = _ref6.color,
       inverted = _ref6.inverted;
-  return css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    box-shadow: 0 0 21px 7px ", ";\n\n    width: ", ";\n\n    height: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), theme.colors.white, theme.getColor('black', 15), size === 'custom' && customSize ? customSize.width || 'auto' : widths[size], size === 'custom' && customSize ? customSize.height || 'auto' : heights[size], Header$5, inverted ? theme.isDarkColor(color) : theme.colors[color], inverted ? theme.colors[color] : theme.isDarkColor(color));
+  return css(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    box-shadow: 0 0 21px 7px ", ";\n\n    width: ", ";\n\n    height: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), theme.colors.white, theme.getColor('black', 15), size === 'custom' && customSize ? customSize.width || 'auto' : widths[size], size === 'custom' && customSize ? customSize.height || 'auto' : heights[size], Header$5, inverted ? theme.isDarkColor(color) : theme.colors[color], inverted ? theme.colors[color] : theme.isDarkColor(color));
 });
 
 var _excluded$2 = ["children"];
@@ -17901,7 +17953,7 @@ var Modal$1 = Object.assign(Modal, {
   Audit: Audit
 });
 
-var _templateObject$K, _templateObject2$x, _templateObject3$r, _templateObject4$l, _templateObject5$i, _templateObject6$g, _templateObject7$g, _templateObject8$e, _templateObject9$e, _templateObject10$a, _templateObject11$7;
+var _templateObject$K, _templateObject2$x, _templateObject3$r, _templateObject4$l, _templateObject5$i, _templateObject6$g, _templateObject7$g, _templateObject8$e, _templateObject9$e, _templateObject10$c, _templateObject11$7;
 var Container$c = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
 var Header$6 = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var HeaderImage = styled.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
@@ -17916,7 +17968,7 @@ var HeaderLine = styled.div(_templateObject6$g || (_templateObject6$g = _taggedT
 }, function (props) {
   return props.size === 'medium' && css(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
 var MainLine = styled(HeaderLine)(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
 
@@ -18187,7 +18239,7 @@ var Template6 = function Template6(props) {
   })));
 };
 
-var _templateObject$R, _templateObject2$E, _templateObject3$y, _templateObject4$r, _templateObject5$o, _templateObject6$l, _templateObject7$l, _templateObject8$j, _templateObject9$h, _templateObject10$b;
+var _templateObject$R, _templateObject2$E, _templateObject3$y, _templateObject4$r, _templateObject5$o, _templateObject6$l, _templateObject7$l, _templateObject8$j, _templateObject9$h, _templateObject10$d;
 var Container$i = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$9 = styled.div(_templateObject2$E || (_templateObject2$E = _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$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
@@ -18209,7 +18261,7 @@ var CustomLine$3 = styled(HeaderLine$6)(_templateObject8$j || (_templateObject8$
   return props.color;
 });
 var Main$2 = styled.div(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n  margin: 10px 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-evenly;\n"])));
-var Circle$1 = styled.div(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n  width: 30px;\n  height: 30px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n  margin: 0 16px;\n"])));
+var Circle$1 = styled.div(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n  width: 30px;\n  height: 30px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n  margin: 0 16px;\n"])));
 
 var Template7 = function Template7(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -18264,7 +18316,7 @@ var Template8 = function Template8(props) {
   })));
 };
 
-var _templateObject$T, _templateObject2$G, _templateObject3$A, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$n, _templateObject8$l, _templateObject9$j, _templateObject10$c;
+var _templateObject$T, _templateObject2$G, _templateObject3$A, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$n, _templateObject8$l, _templateObject9$j, _templateObject10$e;
 var Container$k = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$b = styled.div(_templateObject2$G || (_templateObject2$G = _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$A || (_templateObject3$A = _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) {
@@ -18286,7 +18338,7 @@ var CustomLine$5 = styled(HeaderLine$8)(_templateObject8$l || (_templateObject8$
   return props.color;
 });
 var Main$4 = styled.div(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  padding: 14px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
-var Circle$2 = styled.div(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
+var Circle$2 = styled.div(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
 var Template8$1 = function Template8(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -18303,7 +18355,7 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$4, null, React__default.createElement(Circle$2, null)));
 };
 
-var _templateObject$U, _templateObject2$H, _templateObject3$B, _templateObject4$u, _templateObject5$r, _templateObject6$o, _templateObject7$o, _templateObject8$m, _templateObject9$k, _templateObject10$d, _templateObject11$8;
+var _templateObject$U, _templateObject2$H, _templateObject3$B, _templateObject4$u, _templateObject5$r, _templateObject6$o, _templateObject7$o, _templateObject8$m, _templateObject9$k, _templateObject10$f, _templateObject11$8;
 var Container$l = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$c = styled.div(_templateObject2$H || (_templateObject2$H = _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$B || (_templateObject3$B = _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) {
@@ -18325,7 +18377,7 @@ var CustomLine$6 = styled(HeaderLine$9)(_templateObject8$m || (_templateObject8$
   return props.color;
 });
 var GraphLine = styled(CustomLine$6)(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
-var Main$5 = styled.div(_templateObject10$d || (_templateObject10$d = _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 Main$5 = styled.div(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  padding: 0 7px 72px 7px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  justify-content: center;\n"])));
 var Circle$3 = styled.div(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
 var Template10 = function Template10(props) {