npm - @mw-kit/mw-ui - Versions diffs - 1.7.25 → 1.7.29 - Mend

@mw-kit/mw-ui 1.7.25 → 1.7.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/index.js CHANGED Viewed

@@ -12113,43 +12113,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__default.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__default.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__default.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 styled.css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 });
-var Input = styled__default.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__default(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__default.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 styled.css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n          ", ";\n          opacity: 1;\n        "])), function (_ref6) {
-      var theme = _ref6.theme;
+    return styled.css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n          ", ";\n          opacity: 1;\n        "])), function (_ref7) {
+      var theme = _ref7.theme;
       return theme.useTypography('p');
     });
   }
-  return styled.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 styled.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 styled.css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n    "])), theme.spacings.s2, theme.spacings.s3);
+  return styled.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,
@@ -12160,73 +12190,76 @@ var Input = styled__default.input(_templateObject3$4 || (_templateObject3$4 = _t
   var theme = _ref10.theme,
       invalid = _ref10.invalid;
   var color = invalid ? theme.getColor('warningRed', 5) : theme.colors.white;
-  return styled.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 styled.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 styled.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 styled.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 styled.css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n      cursor: ", ";\n    "])), !onClick || disabled ? 'unset' : 'pointer');
+  if (readOnly || !onClick || disabled) return;
+  return styled.css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 });
-var Label = styled__default.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__default.div(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: ", ";\n"])), function (_ref13) {
+  var width = _ref13.width;
+  return width || '100%';
+});
+var Label = styled__default.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 styled.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 styled.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 styled.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 styled.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 styled.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 styled.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 styled.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__default.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__default.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 styled.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return styled.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);
   React.useEffect(function () {
@@ -12234,12 +12267,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;
@@ -12255,13 +12290,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 () {};
@@ -12350,27 +12384,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__default.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__default.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) {
@@ -12380,7 +12421,7 @@ var Checkmark = styled__default.div(_templateObject$5 || (_templateObject$5 = _t
   var theme = _ref3.theme;
   return theme.colors.blue;
 });
-var Label$1 = styled__default.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__default.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) {
@@ -12455,14 +12496,17 @@ var Label$1 = styled__default.label(_templateObject2$5 || (_templateObject2$5 =
       invalid = _ref11.invalid;
   if (!invalid) return;
   return styled.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 && styled.css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n        width: ", ";\n      "])), width);
 });
-var LabelContent = styled__default.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__default.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 styled.css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return styled.css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 var Checkbox = React__default.forwardRef(function (props, ref) {
@@ -12482,7 +12526,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
@@ -12528,35 +12573,6 @@ var inputTimeWidth = {
   withoutSeconds: '66px'
 };
-var _templateObject$6;
-var EllipsisContainer = styled__default.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__default.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;
@@ -12630,8 +12646,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, _templateObject10$2;
-var Option = styled__default.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  ", ";\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__default.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) {
@@ -12641,16 +12657,19 @@ var Option = styled__default.div(_templateObject$8 || (_templateObject$8 = _tagg
   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 styled.css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n        cursor: pointer;\n      "])));
   }
   return styled.css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      opacity: 0.3;\n    "])));
-}, function (_ref5) {
-  var border = _ref5.border,
-      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) {
@@ -12662,12 +12681,12 @@ var Option = styled__default.div(_templateObject$8 || (_templateObject$8 = _tagg
     var color = isKeyOf(theme.colors, cfg.color) ? theme.colors[cfg.color] : cfg.color;
     return styled.css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n          border-", "-width: ", ";\n          border-", "-style: ", ";\n          border-", "-color: ", ";\n        "])), pos, width, pos, style, pos, color);
   });
-}, function (_ref6) {
-  var theme = _ref6.theme;
+}, function (_ref7) {
+  var theme = _ref7.theme;
   return theme.colors.iceWhite;
 });
-var Container$2 = styled__default(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 (_ref7) {
-  var theme = _ref7.theme;
+var Container$2 = styled__default(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;
@@ -12676,11 +12695,11 @@ var Container$2 = styled__default(AbsoluteContainer)(_templateObject5$5 || (_tem
   tmp[1] = "calc(" + props.theme.spacings.s1 + " / 2)";
   spacing = tmp.join(' ');
   return styled.css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n          padding: ", ";\n        "])), spacing);
-}, function (_ref8) {
-  var bordered = _ref8.bordered;
+}, function (_ref9) {
+  var bordered = _ref9.bordered;
   if (!bordered) return;
-  return styled.css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          :not(:last-child) {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n      "])), Option, function (_ref9) {
-    var theme = _ref9.theme;
+  return styled.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) {
@@ -12695,11 +12714,11 @@ var Container$2 = styled__default(AbsoluteContainer)(_templateObject5$5 || (_tem
   });
   return styled.css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          padding: ", ";\n        }\n        ", " {\n          margin: ", ";\n        }\n      "])), Option, spacing, Delimiter, spacing);
 });
-var Delimiter = styled__default.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  border-bottom: 1px solid ", ";\n  margin: 14px;\n  width: calc(100% - 28px);\n"])), function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.useTypography('p');
-}, function (_ref11) {
+var Delimiter = styled__default.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 (_ref12) {
+  var theme = _ref12.theme;
   return theme.colors.greyishBlue;
 });
@@ -12731,12 +12750,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;
@@ -12747,9 +12763,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;
       });
@@ -12782,13 +12797,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,
       border: option.border
-    }, isString(label.element) ? React__default.createElement(EllipsisContainer$1, null, label.element) : label.element, caret ? React__default.createElement(Icon, {
+    }, React__default.createElement("div", null, React__default.createElement(LabelComponent, Object.assign({}, option))), caret ? React__default.createElement(Icon, {
       type: 'semantic',
       icon: 'caret right',
       width: '14px'
@@ -12908,7 +12931,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: {}
       };
     })
   }));
@@ -12951,7 +12975,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$3, _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__default.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__default.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;
@@ -13008,7 +13032,7 @@ var DayContainer = styled__default.button(_templateObject4$8 || (_templateObject
     return;
   }
-  return styled.css(_templateObject10$3 || (_templateObject10$3 = _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 styled.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__default(Indicator).attrs({
   size: 'mini'
@@ -13583,7 +13607,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$4, _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__default.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;
@@ -13655,7 +13679,7 @@ var Button = styled__default.button(_templateObject$e || (_templateObject$e = _t
   }
   if (['link', 'bordeless'].includes(appearance)) {
-    return styled.css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.getColor('blue', 50));
+    return styled.css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.getColor('blue', 50));
   }
   return styled.css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), theme.getColor(color || 'blue'));
@@ -14300,40 +14324,59 @@ var getOptions = function getOptions(props, options) {
   return options.map(function (option) {
     var value = option.value,
         onClick = option.onClick,
-        data = option.data;
-    var label = isString(option.label) ? {
-      text: option.label,
-      element: option.label
-    } : option.label;
-    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 === props.value ? '' : 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: value === props.value ? 'blue' : 'transparent'
+          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 : value;
+  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) {
@@ -14342,16 +14385,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() {};
-  return {
+  var selectedOption = getSelected(props.value, options);
+  var inputContent = selectedOption ? getInputContent(props, selectedOption) : props.value;
+  var parsed = {
     parsedOptions: parsedOptions,
     options: [options, setOptions],
-    input: {
-      value: inputValue
-    },
+    inputContent: inputContent,
     onReset: onReset,
     menu: {
       itemSpacing: 's3',
@@ -14367,6 +14409,11 @@ var useSelect = function useSelect(props) {
       }, children);
     }
   };
+  var onClear = props.onClear;
+  if (onClear) parsed.onClear = function () {
+    return onClear('');
+  };
+  return parsed;
 };
 var Provider$1 = React__default.createContext({});
@@ -14382,9 +14429,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);
   };
@@ -14454,7 +14499,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;
+      });
     });
   };
@@ -14479,128 +14526,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 = React.useState([]),
       options = _useState[0],
       setOptions = _useState[1];
-  var _useState2 = React.useState(init),
-      inital = _useState2[0],
-      setInitial = _useState2[1];
-  var _useState3 = React.useState(init),
-      checked = _useState3[0],
-      setChecked = _useState3[1];
-  React.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 = React.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,
@@ -14616,6 +14630,9 @@ var useSelectMultiple = function useSelectMultiple(props) {
           checked: [checked, setChecked]
         })
       }, children);
+    },
+    onClear: function onClear() {
+      return props.setValue([]);
     }
   };
   return returnData;
@@ -14633,12 +14650,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 = React.useState(false),
       _loading = _useState[0],
@@ -14672,9 +14690,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 () {};
@@ -14759,7 +14775,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: {
@@ -14771,7 +14787,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() {
@@ -14779,7 +14798,7 @@ var Select = React__default.forwardRef(function (props, ref) {
     },
     options: parsedOptions,
     onScrollEnd: onScrollEnd,
-    width: '100%',
+    width: props.inputWidth || '100%',
     bordered: true,
     position: position,
     references: {
@@ -15042,7 +15061,7 @@ var countries = {
 var _templateObject$n, _templateObject2$i, _templateObject3$d;
 var IconContainer$1 = styled__default.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__default.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var Label$2 = styled__default.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__default.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) {
@@ -15121,15 +15140,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]
     };
   });
@@ -15373,7 +15393,7 @@ var LabelContainer$3 = styled__default.div(_templateObject$p || (_templateObject
   if (!required) return;
   return styled.css(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '*';\n      }\n    "])));
 });
-var Label$3 = styled__default.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__default.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) {
@@ -15436,7 +15456,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, {
@@ -15446,7 +15466,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$5, _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 = styled.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;
@@ -15461,7 +15481,7 @@ var bullet = styled.css(_templateObject$q || (_templateObject$q = _taggedTemplat
   return theme.getColor('black', 10);
 });
 var Input$2 = styled__default.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__default.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__default.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) {
@@ -15479,7 +15499,7 @@ var Label$4 = styled__default.label(_templateObject3$g || (_templateObject3$g =
   if (!required) return;
   return styled.css(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n        :after {\n          content: ' *';\n        }\n      "])));
 });
-var InputContainer = styled__default.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__default.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;
@@ -15490,14 +15510,14 @@ var InputContainer = styled__default.div(_templateObject6$9 || (_templateObject6
   return styled.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__default.div(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
-var LabelsContainer = styled__default.div(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n\n  ", "\n"])), function (_ref11) {
+var LabelsContainer = styled__default.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 styled.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 styled.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 styled.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 styled.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__default.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;
@@ -15514,7 +15534,7 @@ var Marker = styled__default.div(_templateObject15$1 || (_templateObject15$1 = _
   var bullet = _ref15.bullet,
       theme = _ref15.theme;
   if (!bullet) return;
-  return styled.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 styled.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) {
@@ -15632,13 +15652,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;
@@ -15670,7 +15690,7 @@ var LabelContainer$4 = styled__default.div(_templateObject$r || (_templateObject
   var theme = _ref.theme;
   return theme.useTypography('p');
 });
-var Label$5 = styled__default.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__default.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) {
@@ -15716,7 +15736,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
@@ -15908,7 +15928,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$6, _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__default.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__default.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;
@@ -15951,7 +15971,7 @@ var Button$4 = styled__default.button(_templateObject8$9 || (_templateObject8$9
   if (!onClick) return;
   return styled.css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
-var LabelText$1 = styled__default.label(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref10) {
+var LabelText$1 = styled__default.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) {
@@ -16114,22 +16134,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
     }],
@@ -16237,7 +16261,7 @@ var Input$4 = React__default.forwardRef(function (props, ref) {
 Input$4.displayName = 'Input';
 var _templateObject$u, _templateObject2$o;
-var Label$6 = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref) {
+var Label$7 = styled__default.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) {
@@ -16246,8 +16270,8 @@ var Label$6 = styled__default.div(_templateObject$u || (_templateObject$u = _tag
   return styled.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;
@@ -16285,7 +16309,7 @@ var Tag$1 = function Tag$1(props) {
 };
 var _templateObject$w, _templateObject2$p, _templateObject3$j;
-var Label$8 = styled__default.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__default.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) {
@@ -16351,10 +16375,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
@@ -16981,7 +17005,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$7;
+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__default.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' && styled.css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
 }, function (props) {
@@ -16999,7 +17023,7 @@ var Container$9 = styled__default.div(_templateObject$A || (_templateObject$A =
 }, function (props) {
   return props.borderType === 'danger' && styled.css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
 }, function (props) {
-  return props.borderType === 'none' && styled.css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
+  return props.borderType === 'none' && styled.css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
 });
 var _excluded$1 = ["children"];
@@ -17279,8 +17303,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: {}
     };
   };
@@ -17342,7 +17367,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,
@@ -17350,7 +17375,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;
@@ -17415,7 +17441,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$8, _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: {
@@ -17498,7 +17524,7 @@ var Col = styled__default.div(_templateObject$D || (_templateObject$D = _taggedT
   if (align.text !== undefined) {
     var _v4 = align.text;
-    styles.push(styled.css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n        text-align: ", ";\n      "])), _v4));
+    styles.push(styled.css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n        text-align: ", ";\n      "])), _v4));
   }
   return styles;
@@ -17574,7 +17600,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$9;
+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',
@@ -17649,7 +17675,7 @@ var Row = styled__default.div(_templateObject$F || (_templateObject$F = _taggedT
   if (!hover) return;
   var h = hover === true ? ['lightGrey', 50] : hover;
   var c = Array.isArray(h) ? theme.getColor.apply(theme, h) : theme.colors[h];
-  return styled.css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
+  return styled.css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
 });
 var Row$1 = function Row$1(props) {
@@ -17702,7 +17728,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$a;
+var _templateObject$G, _templateObject2$w, _templateObject3$q, _templateObject4$k, _templateObject5$h, _templateObject6$f, _templateObject7$f, _templateObject8$d, _templateObject9$d, _templateObject10$b;
 var Background = styled__default.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);
@@ -17735,7 +17761,7 @@ var Container$b = styled__default.div(_templateObject9$d || (_templateObject9$d
       customSize = _ref6.customSize,
       color = _ref6.color,
       inverted = _ref6.inverted;
-  return styled.css(_templateObject10$a || (_templateObject10$a = _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 styled.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"];
@@ -17932,7 +17958,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$b, _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__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
 var Header$6 = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var HeaderImage = styled__default.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
@@ -17947,7 +17973,7 @@ var HeaderLine = styled__default.div(_templateObject6$g || (_templateObject6$g =
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && styled.css(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && styled.css(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
 var MainLine = styled__default(HeaderLine)(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
@@ -18218,7 +18244,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$c;
+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__default.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__default.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__default.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) {
@@ -18240,7 +18266,7 @@ var CustomLine$3 = styled__default(HeaderLine$6)(_templateObject8$j || (_templat
   return props.color;
 });
 var Main$2 = styled__default.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__default.div(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n  width: 30px;\n  height: 30px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n  margin: 0 16px;\n"])));
+var Circle$1 = styled__default.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);
@@ -18295,7 +18321,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$d;
+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__default.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__default.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__default.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) {
@@ -18317,7 +18343,7 @@ var CustomLine$5 = styled__default(HeaderLine$8)(_templateObject8$l || (_templat
   return props.color;
 });
 var Main$4 = styled__default.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__default.div(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
+var Circle$2 = styled__default.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);
@@ -18334,7 +18360,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$e, _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__default.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__default.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__default.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) {
@@ -18356,7 +18382,7 @@ var CustomLine$6 = styled__default(HeaderLine$9)(_templateObject8$m || (_templat
   return props.color;
 });
 var GraphLine = styled__default(CustomLine$6)(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
-var Main$5 = styled__default.div(_templateObject10$e || (_templateObject10$e = _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__default.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__default.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) {