plataforma-fundacao-componentes 2.26.5 → 2.26.6

package/dist/index.js

@@ -6,9 +6,9 @@ var reactTransitionGroup = require('react-transition-group');
 var chart_js = require('chart.js');
 var moment = _interopDefault(require('moment'));
 var DOMPurify = _interopDefault(require('dompurify'));
+var react = require('@floating-ui/react');
 var Sortable = _interopDefault(require('sortablejs'));
 var QR = _interopDefault(require('qrcode'));
-var react = require('@floating-ui/react');
 var html2canvas = _interopDefault(require('html2canvas'));
 var jspdf = require('jspdf');
 
@@ -145,37 +145,6 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   }
   return target;
 }
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
-  }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
 
 var getMergedClassNames = function getMergedClassNames(arr) {
   return arr.filter(function (el) {
@@ -246,34 +215,33 @@ var Interval = /*#__PURE__*/function () {
   };
   return Interval;
 }();
-var getParents = function getParents(anchor) {
-  if (!anchor) return [];
-  if (anchor.id === 'root' || !(anchor !== null && anchor !== void 0 && anchor.parentElement)) {
-    return [anchor];
-  }
-  return [anchor].concat(getParents(anchor.parentElement));
-};
 
+var _excluded = ["value", "hideCheck", "indefinido", "className"];
 var rootClassName$7 = 'percent-loader-icon';
-var PercentLoaderIcon = function PercentLoaderIcon(props) {
-  var _props$value2;
+var PercentLoaderIcon = function PercentLoaderIcon(_ref) {
+  var value = _ref.value,
+    hideCheck = _ref.hideCheck,
+    indefinido = _ref.indefinido,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var getStrokeDashOffset = function getStrokeDashOffset() {
-    var _props$value;
-    var v = props.indefinido ? '25' : (_props$value = props.value) != null ? _props$value : '';
+    var v = indefinido ? '25' : value != null ? value : '';
     return 264 - 264 * parseInt(String(v)) / 100;
   };
-  var _useState = React.useState(props.indefinido ? getStrokeDashOffset() : 264),
+  var _useState = React.useState(indefinido ? getStrokeDashOffset() : 264),
     sdo = _useState[0],
     setSdo = _useState[1];
   React.useEffect(function () {
     setSdo(getStrokeDashOffset());
-  }, [props.value, props.indefinido]);
-  return React__default.createElement("svg", {
-    className: getMergedClassNames([rootClassName$7, props.indefinido ? 'indefinido' : '']),
+  }, [value, indefinido]);
+  var classNames = useMergedClassNames([rootClassName$7, indefinido ? 'indefinido' : '', className]);
+  return React__default.createElement("svg", Object.assign({
+    className: classNames,
     viewBox: '0 0 100 100',
     fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
-  }, React__default.createElement("circle", {
+  }, props), React__default.createElement("circle", {
     cx: '50',
     cy: '50',
     r: '42'
@@ -283,12 +251,12 @@ var PercentLoaderIcon = function PercentLoaderIcon(props) {
     r: '42',
     strokeDashoffset: sdo,
     stroke: 'currentColor'
-  }), !props.indefinido && !props.hideCheck ? React__default.createElement("path", {
+  }), !indefinido && !hideCheck ? React__default.createElement("path", {
     d: 'M710.428,339.1l12.762,12.454,22.376-25.148',
     fill: 'none',
     strokeWidth: '5',
     strokeDasharray: '52',
-    strokeDashoffset: parseInt(String((_props$value2 = props.value) != null ? _props$value2 : '')) === 100 ? 0 : 52,
+    strokeDashoffset: parseInt(String(value != null ? value : '')) === 100 ? 0 : 52,
     stroke: 'currentColor'
   }) : undefined);
 };
@@ -869,12 +837,12 @@ var CreditIcon = function CreditIcon() {
   }));
 };
 
-var _excluded = ["className"];
+var _excluded$1 = ["className"];
 var rootClassName$A = 'icon-component';
 var InformationIcon = function InformationIcon(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var classNames = useMergedClassNames([rootClassName$A, className]);
   return React__default.createElement("svg", Object.assign({
     viewBox: '0 0 24 24',
@@ -1223,13 +1191,13 @@ var LinkIcon = function LinkIcon() {
   }));
 };
 
-var _excluded$1 = ["theme", "size", "className"];
+var _excluded$2 = ["theme", "size", "className"];
 var rootClassName$L = 'loader-three-dots';
 var ThreeDotsLoader = function ThreeDotsLoader(_ref) {
   var theme = _ref.theme,
     size = _ref.size,
     className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   return React__default.createElement("div", Object.assign({
     className: useMergedClassNames([rootClassName$L, className != null ? className : '', rootClassName$L + "-" + (theme != null ? theme : 'primary'), rootClassName$L + "-size-" + (size != null ? size : 3)])
   }, rest), React__default.createElement("div", null), React__default.createElement("div", null), React__default.createElement("div", null));
@@ -4630,14 +4598,14 @@ function Banner(props) {
   })));
 }
 
-var _excluded$2 = ["icon", "label", "subtitle", "className"];
+var _excluded$3 = ["icon", "label", "subtitle", "className"];
 var rootClassName$1D = 'component-big-block-button';
 function BigBlockButton(_ref) {
   var icon = _ref.icon,
     label = _ref.label,
     subtitle = _ref.subtitle,
     className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   return React__default.createElement("button", Object.assign({}, props, {
     className: useMergedClassNames([rootClassName$1D, className])
   }), React__default.createElement("div", {
@@ -4660,44 +4628,55 @@ function BigBlockButton(_ref) {
   NotificationType["PrimaryDark"] = "primary-dark";
   NotificationType["PrimaryInvert"] = "primary-invert";
   NotificationType["Error"] = "error";
+  NotificationType["ErrorLight"] = "error-light";
   NotificationType["Default"] = "default";
   NotificationType["Disabled"] = "disabled";
 })(exports.NotificationType || (exports.NotificationType = {}));
 
+var _excluded$4 = ["className", "bordered", "position", "type", "verticalOuter", "horizontalOuter"];
 var rootClassName$1E = 'component-notification';
-function Notification(props) {
-  var getProps = function getProps() {
-    var p = {
-      className: getMergedClassNames([rootClassName$1E + "-outer", props.className])
-    };
-    return p;
-  };
+function Notification(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? exports.NotificationPosition.TopRight : _ref$position,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? exports.NotificationType.Error : _ref$type,
+    _ref$verticalOuter = _ref.verticalOuter,
+    verticalOuter = _ref$verticalOuter === void 0 ? 10 : _ref$verticalOuter,
+    _ref$horizontalOuter = _ref.horizontalOuter,
+    horizontalOuter = _ref$horizontalOuter === void 0 ? 10 : _ref$horizontalOuter,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  var classNames = useMergedClassNames([rootClassName$1E + "-outer", className]);
   var label = React.useMemo(function () {
-    if (!props.count) return 0;
-    if (props.count < 0) return '!';
+    if (props.count === true) return ' ';
+    if (props.count === false) return '';
+    if (typeof props.count === 'number') {
+      if (!props.count || !String(props.count)) return 0;
+      if (props.count < 0) return '!';
+    }
     return props.count;
   }, [props.count]);
-  return React__default.createElement("div", Object.assign({}, getProps()), props.children, React__default.createElement(reactTransitionGroup.CSSTransition, {
-    "in": !!label,
+  return React__default.createElement("div", {
+    className: classNames
+  }, props.children, React__default.createElement(reactTransitionGroup.CSSTransition, {
+    "in": Boolean(label),
     classNames: rootClassName$1E,
     timeout: 300,
     unmountOnExit: true
   }, React__default.createElement("div", {
-    className: rootClassName$1E + " " + rootClassName$1E + "-" + props.position + " " + rootClassName$1E + "-" + props.type,
+    "data-bordered": bordered,
+    className: rootClassName$1E + " " + rootClassName$1E + "-" + position + " " + rootClassName$1E + "-" + type,
     style: {
-      top: String(props.position).match(/top/) ? 0 - (props.verticalOuter || 0) + "px" : 'unset',
-      right: String(props.position).match(/right/) ? 0 - (props.horizontalOuter || 0) + "px" : 'unset',
-      left: String(props.position).match(/left/) ? 0 - (props.horizontalOuter || 0) + "px" : 'unset',
-      bottom: String(props.position).match(/bottom/) ? 0 - (props.verticalOuter || 0) + "px" : 'unset'
+      top: String(position).match(/top/) ? 0 - (verticalOuter || 0) + "px" : 'unset',
+      right: String(position).match(/right/) ? 0 - (horizontalOuter || 0) + "px" : 'unset',
+      left: String(position).match(/left/) ? 0 - (horizontalOuter || 0) + "px" : 'unset',
+      bottom: String(position).match(/bottom/) ? 0 - (verticalOuter || 0) + "px" : 'unset'
     }
   }, label)));
 }
-Notification.defaultProps = {
-  type: exports.NotificationType.Error,
-  position: exports.NotificationPosition.TopRight,
-  verticalOuter: 10,
-  horizontalOuter: 10
-};
 
 var rootClassName$1F = 'bottom-navigation';
 function BottomNavigation(props) {
@@ -4771,9 +4750,9 @@ BreadCrumb.defaultProps = {
   ButtonThemes["HeaderUserBold"] = "header-user-bold";
 })(exports.ButtonThemes || (exports.ButtonThemes = {}));
 
-var _excluded$3 = ["className", "theme", "w100", "leftIcon", "rightIcon", "mobileBottomPage", "loader", "loading", "children"];
+var _excluded$5 = ["className", "theme", "w100", "leftIcon", "rightIcon", "mobileBottomPage", "loader", "loading", "children"];
 var rootClassName$1H = 'component-button';
-function Button(_ref) {
+var Button = React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? exports.ButtonThemes.Primary : _ref$theme,
@@ -4784,7 +4763,7 @@ function Button(_ref) {
     loader = _ref.loader,
     loading = _ref.loading,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var handleClick = function handleClick(evt) {
     if (!props.disabled && !loading) {
       var _props$onClick;
@@ -4799,7 +4778,9 @@ function Button(_ref) {
       theme: theme === exports.ButtonThemes.Primary && !props.disabled ? 'secondary' : 'primary'
     }, loader != null ? loader : {})));
   }, [loader, props.disabled, theme]);
-  return React__default.createElement("button", Object.assign({}, props, {
+  return React__default.createElement("button", Object.assign({
+    ref: ref
+  }, props, {
     className: useMergedClassNames(['nunito', rootClassName$1H, className, rootClassName$1H + "-" + theme, w100 ? rootClassName$1H + "-w100" : '', mobileBottomPage ? rootClassName$1H + "-bottom-mobile" : '']),
     onClick: handleClick
   }), leftIcon && React__default.createElement("div", {
@@ -4809,7 +4790,8 @@ function Button(_ref) {
   }, children), rightIcon && React__default.createElement("div", {
     className: getMergedClassNames([rootClassName$1H + "-icon", rootClassName$1H + "-right-icon", loading ? rootClassName$1H + "-hide" : ''])
   }, rightIcon), loading ? loaderElement : undefined);
-}
+});
+Button.displayName = 'Button';
 var Button$1 = React.memo(Button);
 
 (function (FileTypes) {
@@ -5260,32 +5242,31 @@ function useCarouselBehaviour(props) {
   }))), handleChange];
 }
 
+var _excluded$6 = ["theme", "disabled", "icon", "onClick"];
 var rootClassName$1M = 'component-icon-button';
-function IconButton(props) {
-  var handleClick = function handleClick(evt) {
-    if (!props.disabled) {
-      var _props$onClick;
-      (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, evt);
+var IconButton = React.forwardRef(function (_ref, ref) {
+  var _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'primary' : _ref$theme,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? '-' : _ref$icon,
+    onClick = _ref.onClick,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  var handleClick = React.useCallback(function (evt) {
+    if (!disabled) {
+      onClick === null || onClick === void 0 ? void 0 : onClick(evt);
     }
-  };
-  var getProps = function getProps() {
-    var p = _extends({}, props, {
-      onClick: handleClick,
-      className: getMergedClassNames([rootClassName$1M, props.className, rootClassName$1M + "-" + props.theme])
-    });
-    delete p.icon;
-    delete p.children;
-    delete p.theme;
-    delete p.w100;
-    return p;
-  };
-  return React__default.createElement("button", Object.assign({}, getProps()), props.icon);
-}
-IconButton.defaultProps = {
-  theme: 'primary',
-  disabled: false,
-  icon: '-'
-};
+  }, [disabled, onClick]);
+  var classNames = useMergedClassNames([rootClassName$1M, props.className, rootClassName$1M + "-" + theme]);
+  return React__default.createElement("button", Object.assign({
+    ref: ref,
+    onClick: handleClick
+  }, props, {
+    className: classNames
+  }), icon);
+});
+IconButton.displayName = 'IconButton';
 var IconButton$1 = React.memo(IconButton);
 
 var rootClassName$1N = 'element-paginator';
@@ -7016,7 +6997,7 @@ MoneyByMonth.defaultProps = {
   CheckboxThemes["Blue"] = "blue";
 })(exports.CheckboxThemes || (exports.CheckboxThemes = {}));
 
-var _excluded$4 = ["value", "tag", "onChange", "theme", "className", "error", "type"];
+var _excluded$7 = ["value", "tag", "onChange", "theme", "className", "error", "type"];
 var rootClassName$1S = 'component-checkbox';
 function Checkbox(_ref) {
   var value = _ref.value,
@@ -7029,7 +7010,7 @@ function Checkbox(_ref) {
     error = _ref$error === void 0 ? false : _ref$error,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var handleClick = React.useCallback(function (evt) {
     if (!props.disabled) {
       onChange === null || onChange === void 0 ? void 0 : onChange(!value, evt);
@@ -7085,24 +7066,80 @@ Col.defaultProps = {
 };
 var Col$1 = React.memo(Col);
 
-var rootClassName$1U = 'component-container';
-function Container(props) {
-  var getProps = function getProps() {
-    var p = _extends({}, props, {
-      className: getMergedClassNames([rootClassName$1U, props.className, props.fluid ? 'fluid' : '', props.verticalPadding ? 'vertical-padding' : '', props.hasMobileButton ? 'has-mobile-button' : '', props.hasHeader ? 'has-header' : '', props.hasAdvancedHeader ? 'has-advanced-header' : '']),
-      style: _extends({}, props.style, {
-        position: props.position
-      })
-    });
-    delete p.position;
-    delete p.fluid;
-    delete p.verticalPadding;
-    delete p.hasMobileButton;
-    delete p.hasHeader;
-    delete p.hasAdvancedHeader;
-    return p;
+(function (OS) {
+  OS["Windows"] = "Windows";
+  OS["Linux"] = "Linux";
+  OS["MacOS"] = "MacOS";
+  OS["iOS"] = "iOS";
+  OS["Android"] = "Android";
+  OS["ChromeOS"] = "ChromeOS";
+  OS["Other"] = "Other";
+})(exports.OS || (exports.OS = {}));
+(function (Browser) {
+  Browser["Brave"] = "Brave";
+  Browser["Chrome"] = "Chrome";
+  Browser["Firefox"] = "Firefox";
+  Browser["Opera"] = "Opera";
+  Browser["Safari"] = "Safari";
+  Browser["Edge"] = "Edge";
+  Browser["IE"] = "IE";
+  Browser["Other"] = "Other";
+})(exports.Browser || (exports.Browser = {}));
+
+function useSystemInfo() {
+  var os = React.useMemo(function () {
+    if (/Android/i.test(navigator.userAgent)) return exports.OS.Android;
+    if (/iPhone/i.test(navigator.userAgent)) return exports.OS.iOS;
+    if (/Windows/i.test(navigator.userAgent)) return exports.OS.Windows;
+    if (/Linux/i.test(navigator.userAgent)) return exports.OS.Linux;
+    if (/CrOS/i.test(navigator.userAgent)) return exports.OS.ChromeOS;
+    if (/Macintosh/i.test(navigator.userAgent)) return exports.OS.MacOS;
+    return exports.OS.Other;
+  }, []);
+  var browser = React.useMemo(function () {
+    if (/Edge/i.test(navigator.userAgent)) return exports.Browser.Edge;
+    if (/Brave/i.test(navigator.userAgent)) return exports.Browser.Brave;
+    if (/CriOS/i.test(navigator.userAgent)) return exports.Browser.Chrome;
+    if (/Chrome/i.test(navigator.userAgent)) return exports.Browser.Chrome;
+    if (/Firefox/i.test(navigator.userAgent)) return exports.Browser.Firefox;
+    if (/Opera/i.test(navigator.userAgent)) return exports.Browser.Opera;
+    if (/Safari/i.test(navigator.userAgent)) return exports.Browser.Safari;
+    if (/Trident/i.test(navigator.userAgent)) return exports.Browser.IE;
+    if (/MSIE/i.test(navigator.userAgent)) return exports.Browser.IE;
+    return exports.Browser.Other;
+  }, []);
+  var isMobile = React.useMemo(function () {
+    return /Mobile/.test(navigator.userAgent);
+  }, []);
+  return {
+    os: os,
+    browser: browser,
+    isMobile: isMobile
   };
-  return React__default.createElement("div", Object.assign({}, getProps()), React__default.createElement("div", {
+}
+
+var _excluded$8 = ["position", "fluid", "verticalPadding", "hasMobileButton", "hasHeader", "hasAdvancedHeader", "className", "style"];
+var rootClassName$1U = 'component-container';
+function Container(_ref) {
+  var position = _ref.position,
+    fluid = _ref.fluid,
+    verticalPadding = _ref.verticalPadding,
+    hasMobileButton = _ref.hasMobileButton,
+    hasHeader = _ref.hasHeader,
+    hasAdvancedHeader = _ref.hasAdvancedHeader,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+  var mobile = useSystemInfo().isMobile;
+  var classNames = useMergedClassNames([rootClassName$1U, className, fluid ? 'fluid' : '', verticalPadding ? 'vertical-padding' : '', hasMobileButton ? 'has-mobile-button' : '', hasHeader ? 'has-header' : '', hasAdvancedHeader ? 'has-advanced-header' : '', mobile ? 'mobile' : '']);
+  return React__default.createElement("div", Object.assign({}, props, {
+    className: classNames,
+    style: _extends({
+      position: position
+    }, style)
+  }), React__default.createElement("div", {
     className: rootClassName$1U + "-insider"
   }, props.children));
 }
@@ -7115,7 +7152,7 @@ Container.defaultProps = {
 };
 var Container$1 = React.memo(Container);
 
-var _excluded$5 = ["control", "labelPosition", "labelGap", "label", "className"];
+var _excluded$9 = ["control", "labelPosition", "labelGap", "label", "className"];
 var rootClassName$1V = 'component-control-label';
 function ControlLabel(_ref) {
   var _control$props;
@@ -7124,7 +7161,7 @@ function ControlLabel(_ref) {
     labelGap = _ref.labelGap,
     label = _ref.label,
     className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var ref = React.useRef();
   return React__default.createElement("label", Object.assign({}, props, {
     className: getMergedClassNames([className, rootClassName$1V, labelPosition ? labelPosition : '', (_control$props = control.props) !== null && _control$props !== void 0 && _control$props.disabled ? 'disabled' : '']),
@@ -7356,7 +7393,7 @@ function DatePickerCalendar(props) {
 }
 var DatePickerCalendar$1 = React.memo(DatePickerCalendar);
 
-var _excluded$6 = ["language"];
+var _excluded$a = ["language"];
 var rootClassName$1X = 'component-date-picker';
 function DatePicker(_ref) {
   var _ref$language = _ref.language,
@@ -7366,7 +7403,7 @@ function DatePicker(_ref) {
       months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
       monthsAbrev: ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez']
     } : _ref$language,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var id = React.useMemo(function () {
     return "picker_" + getUniqueKey();
   }, []);
@@ -7504,11 +7541,11 @@ DatePicker.defaultProps = {
 };
 var DatePicker$1 = React.memo(DatePicker);
 
-var _excluded$7 = ["showLabel"];
+var _excluded$b = ["showLabel"];
 var rootClassName$1Y = 'component-doughnut';
 function Doughnut(_ref) {
   var showLabel = _ref.showLabel,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var _useProgressiveCount = useProgressiveCount(),
     val = _useProgressiveCount[0],
     setVal = _useProgressiveCount[1];
@@ -7573,6 +7610,96 @@ function DropdownItem(props) {
 }
 var DropdownItem$1 = React.memo(DropdownItem);
 
+function useFloatingPanel(_ref) {
+  var stateOpened = _ref.stateOpened,
+    _ref$matchWidth = _ref.matchWidth,
+    matchWidth = _ref$matchWidth === void 0 ? false : _ref$matchWidth,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 0 : _ref$offset,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
+    _ref$strategy = _ref.strategy,
+    strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy,
+    _ref$fallbackPlacemen = _ref.fallbackPlacements,
+    fallbackPlacements = _ref$fallbackPlacemen === void 0 ? ['top', 'bottom', 'right-start', 'right'] : _ref$fallbackPlacemen,
+    elements = _ref.elements;
+  var opened = stateOpened[0],
+    setOpened = stateOpened[1];
+  var _useState = React.useState(null),
+    maxHeight = _useState[0],
+    setMaxHeight = _useState[1];
+  var _useFloating = react.useFloating({
+      elements: elements,
+      open: opened,
+      onOpenChange: setOpened,
+      whileElementsMounted: react.autoUpdate,
+      transform: false,
+      placement: placement,
+      strategy: strategy,
+      middleware: [react.offset(offset), react.flip({
+        fallbackPlacements: fallbackPlacements
+      }), react.shift(), react.size({
+        apply: function apply(_ref2) {
+          var rects = _ref2.rects,
+            elements = _ref2.elements,
+            availableHeight = _ref2.availableHeight;
+          if (matchWidth) {
+            Object.assign(elements.floating.style, {
+              width: rects.reference.width + "px"
+            });
+          }
+          setMaxHeight(availableHeight);
+        }
+      })]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context;
+  var _useTransitionStyles = react.useTransitionStyles(context, {
+      duration: 250,
+      initial: function initial(_ref3) {
+        var side = _ref3.side;
+        return {
+          transform: ['top', 'bottom'].includes(side) ? 'translateY(10px)' : '',
+          opacity: 0
+        };
+      },
+      common: {
+        transform: 'translateY(0px)',
+        opacity: 1
+      }
+    }),
+    isMounted = _useTransitionStyles.isMounted,
+    styles = _useTransitionStyles.styles;
+  return {
+    panelRef: refs.setFloating,
+    panelStyles: _extends({}, floatingStyles, {
+      maxHeight: maxHeight
+    }, styles),
+    anchorRef: refs.setReference,
+    isMounted: isMounted
+  };
+}
+
+function useEvent(events) {
+  React.useLayoutEffect(function () {
+    events.forEach(function (_ref) {
+      var event = _ref.event,
+        handler = _ref.handler,
+        target = _ref.target;
+      (target != null ? target : document.body).addEventListener(event, handler);
+    });
+    return function () {
+      events.forEach(function (_ref2) {
+        var event = _ref2.event,
+          handler = _ref2.handler,
+          target = _ref2.target;
+        (target != null ? target : document.body).removeEventListener(event, handler);
+      });
+    };
+  }, [events]);
+}
+
 function useOutsideClick(refs, handler, options) {
   var _options3;
   if (options === void 0) {
@@ -7600,8 +7727,75 @@ function useOutsideClick(refs, handler, options) {
   }, [refs, handler, handleClickOutside, (_options3 = options) === null || _options3 === void 0 ? void 0 : _options3.events]);
 }
 
-var _excluded$8 = ["opened", "setOpened", "content", "closeOnEsc", "closeOnOutClick", "children", "panelProps"];
-var rootClassName$1_ = 'component-dropdown-menu';
+var _excluded$c = ["opened", "setOpened", "className", "statedAnchorRef", "matchWidth", "placement", "closeOnEsc", "closeOnOutClick", "style", "fallbackPlacements", "offset"];
+var rootClassName$1_ = 'floating-panel';
+function FloatingPanel(_ref) {
+  var opened = _ref.opened,
+    setOpened = _ref.setOpened,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    statedAnchorRef = _ref.statedAnchorRef,
+    matchWidth = _ref.matchWidth,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
+    _ref$closeOnEsc = _ref.closeOnEsc,
+    closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
+    _ref$closeOnOutClick = _ref.closeOnOutClick,
+    closeOnOutClick = _ref$closeOnOutClick === void 0 ? true : _ref$closeOnOutClick,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    _ref$fallbackPlacemen = _ref.fallbackPlacements,
+    fallbackPlacements = _ref$fallbackPlacemen === void 0 ? ['bottom', 'bottom-end', 'bottom-start', 'top', 'top-start', 'top-end', 'left', 'right'] : _ref$fallbackPlacemen,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 0 : _ref$offset,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  var _useState = React.useState(),
+    panelRef = _useState[0],
+    setPanelRef = _useState[1];
+  var _useFloatingPanel = useFloatingPanel({
+      stateOpened: [opened, setOpened],
+      strategy: 'fixed',
+      placement: placement,
+      fallbackPlacements: fallbackPlacements,
+      matchWidth: matchWidth,
+      elements: {
+        floating: panelRef,
+        reference: statedAnchorRef
+      },
+      offset: offset
+    }),
+    isMounted = _useFloatingPanel.isMounted,
+    panelStyles = _useFloatingPanel.panelStyles;
+  var classNames = useMergedClassNames([rootClassName$1_, className]);
+  useEvent([{
+    event: 'keydown',
+    handler: function handler(e) {
+      if (closeOnEsc && opened && 'key' in e && e.key === 'Escape') {
+        setOpened(false);
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }
+  }]);
+  useOutsideClick([{
+    current: panelRef != null ? panelRef : null
+  }, {
+    current: statedAnchorRef != null ? statedAnchorRef : null
+  }], function (isInside) {
+    if (closeOnOutClick && opened && !isInside) setOpened(false);
+  });
+  return React__default.createElement(react.FloatingPortal, null, isMounted && React__default.createElement("div", Object.assign({}, props, {
+    className: classNames,
+    ref: function ref(r) {
+      return setPanelRef(r);
+    },
+    style: _extends({}, style, panelStyles)
+  }), props.children));
+}
+var FloatingPanel$1 = React.memo(FloatingPanel);
+
+var _excluded$d = ["opened", "setOpened", "content", "closeOnEsc", "closeOnOutClick", "children", "panelProps", "removePadding"];
+var rootClassName$1$ = 'component-dropdown-menu';
 function DropdownMenu(_ref) {
   var _panelProps$className;
   var opened = _ref.opened,
@@ -7612,206 +7806,37 @@ function DropdownMenu(_ref) {
     children = _ref.children,
     _ref$panelProps = _ref.panelProps,
     panelProps = _ref$panelProps === void 0 ? {} : _ref$panelProps,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-  var id = React.useMemo(function () {
-    return props.id ? props.id : getUniqueKey();
-  }, [props.id]);
-  var _useState = React.useState(null),
-    inter = _useState[0],
-    setInter = _useState[1];
-  var wrapperRef = React.createRef();
-  var panelRef = React.createRef();
-  var interRef = React.useRef(inter);
-  interRef.current = inter;
-  React.useEffect(function () {
-    var current = interRef.current;
-    if (current) {
-      clearInterval(current);
-      setInter(null);
-    }
-    var position = function position() {
-      var painel = document.querySelector("#" + id + " ." + rootClassName$1_ + "-panel");
-      if (!painel) return;
-      var trigger = document.querySelector("#" + id + " ." + rootClassName$1_ + "-children > *");
-      var bound = trigger.getBoundingClientRect();
-      var pontoCentralX = bound.x + bound.width / 2;
-      var pontoCentralY = bound.y + bound.height / 2;
-      var windowHeight = window.innerHeight;
-      var windowWidth = window.innerWidth;
-      if (pontoCentralX < windowWidth / 2) {
-        painel.style.left = bound.x + "px";
-        if (pontoCentralY < windowHeight / 2) {
-          painel.style.top = bound.y + bound.height + "px";
-        } else {
-          painel.style.top = bound.y - painel.getBoundingClientRect().height + "px";
-        }
-      } else {
-        painel.style.right = windowWidth - bound.x - bound.width + "px";
-        if (pontoCentralY < windowHeight / 2) {
-          painel.style.top = bound.y + bound.height + "px";
-        } else {
-          painel.style.top = bound.y - painel.getBoundingClientRect().height + "px";
-        }
-      }
-    };
-    if (opened) {
-      position();
-      var _inter = setInterval(position, 100);
-      setInter(_inter);
-    }
-    return function () {
-      if (interRef.current) {
-        clearInterval(interRef.current);
-        setInter(null);
-      }
-    };
-  }, [opened]);
-  useOutsideClick([wrapperRef], function (isInside) {
-    if (closeOnOutClick && !isInside) {
-      setOpened(false);
-    }
-  });
-  React.useEffect(function () {
-    var onEscPress = function onEscPress(evt) {
-      if (evt.key === 'Escape') {
-        setOpened(false);
-      }
-    };
-    if (closeOnEsc) {
-      if (opened) {
-        document.addEventListener('keyup', onEscPress);
-      } else {
-        document.removeEventListener('keyup', onEscPress);
-      }
-    }
-    return function () {
-      document.removeEventListener('keyup', onEscPress);
-    };
-  }, [opened]);
-  return React__default.createElement("div", Object.assign({}, props, {
-    ref: wrapperRef,
-    id: id,
-    className: [rootClassName$1_, props.className || ''].join(' ')
-  }), React__default.createElement("div", {
-    className: rootClassName$1_ + "-children"
-  }, children), React__default.createElement(reactTransitionGroup.CSSTransition, {
-    "in": opened,
-    timeout: 300,
-    classNames: rootClassName$1_ + "-panel-fade",
-    unmountOnExit: true
-  }, React__default.createElement("div", Object.assign({
-    ref: panelRef
-  }, panelProps, {
-    className: [rootClassName$1_ + "-panel scroll-white", (_panelProps$className = panelProps === null || panelProps === void 0 ? void 0 : panelProps.className) != null ? _panelProps$className : ''].join(' ')
-  }), content)));
-}
-DropdownMenu.defaultProps = {
-  closeOnOutClick: true,
-  closeOnEsc: true
-};
-
-var rootClassName$1$ = 'floating-panel';
-function FloatingPanel(props) {
-  var id = React.useMemo(getUniqueKey, []);
-  var onClick = React.useCallback(function (evt) {
-    var wrapper = document.getElementById(id);
-    if (!wrapper) return;
-    if (!evt.composedPath().includes(wrapper)) {
-      props.setOpened(false);
-      evt.preventDefault();
-    }
-  }, [id, props]);
-  var onEsc = React.useCallback(function (evt) {
-    if (evt.key === 'Escape') {
-      evt.preventDefault();
-      evt.stopPropagation();
-      props.setOpened(false);
-    }
-  }, [props]);
-  var updatePosition = React.useCallback(function () {
-    var wrapper = document.getElementById(id);
-    if (!wrapper) return;
-    var computedStyle = wrapper.getBoundingClientRect();
-    var panel = document.querySelector("#" + id + " ." + rootClassName$1$);
-    if (!panel) return;
-    panel.style.top = computedStyle.top + computedStyle.height + "px";
-    panel.style.left = computedStyle.left + "px";
-  }, [id]);
-  var updateSize = React.useCallback(function () {
-    var _document$getElementB;
-    var anchor = (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.parentElement;
-    var panel = document.querySelector("#" + id + " ." + rootClassName$1$);
-    if (!panel || !anchor) return;
-    var computedStyle = window.getComputedStyle(anchor);
-    panel.style.width = computedStyle.width;
-  }, [id]);
-  React.useEffect(function () {
-    var wrapper = document.getElementById(id);
-    var scrollableElements = getParents(wrapper);
-    var positionAndSize = function positionAndSize() {
-      updatePosition();
-      updateSize();
-    };
-    var observer = new window.MutationObserver(positionAndSize);
-    var timeout;
-    if (props.opened) {
-      positionAndSize();
-      observer.observe(document.body, {
-        attributes: true,
-        childList: true,
-        characterData: true,
-        subtree: true
-      });
-      for (var _iterator = _createForOfIteratorHelperLoose(scrollableElements), _step; !(_step = _iterator()).done;) {
-        var el = _step.value;
-        el.addEventListener('scroll', updatePosition);
-      }
-      timeout = setTimeout(function () {
-        window.addEventListener('resize', positionAndSize);
-        document.addEventListener('keydown', onEsc);
-        document.addEventListener('click', onClick);
-      }, 300);
-    }
-    return function () {
-      if (timeout) clearTimeout(timeout);
-      if (props.opened) {
-        observer.disconnect();
-        document.removeEventListener('keydown', onEsc);
-        document.removeEventListener('click', onClick);
-        window.removeEventListener('resize', positionAndSize);
-        for (var _iterator2 = _createForOfIteratorHelperLoose(scrollableElements), _step2; !(_step2 = _iterator2()).done;) {
-          var _el = _step2.value;
-          _el.removeEventListener('scroll', updatePosition);
-        }
-      }
-    };
-  }, [props.opened]);
-  return React__default.createElement("div", {
-    id: id,
-    className: rootClassName$1$ + "-wrapper",
-    style: {
-      bottom: props.bottom
-    }
-  }, React__default.createElement(reactTransitionGroup.CSSTransition, {
-    "in": props.opened,
-    classNames: rootClassName$1$,
-    timeout: 300,
-    unmountOnExit: true
-  }, React__default.createElement("div", {
-    className: useMergedClassNames([rootClassName$1$, props.className, props.boxShadow ? 'shadow' : '', props.radiusStyle])
-  }, props.children)));
+    removePadding = _ref.removePadding,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  var _useState = React.useState(),
+    ref = _useState[0],
+    setRef = _useState[1];
+  var classNames = useMergedClassNames([rootClassName$1$ + "-panel scroll-white", removePadding ? 'no-padding' : '', (_panelProps$className = panelProps === null || panelProps === void 0 ? void 0 : panelProps.className) != null ? _panelProps$className : '']);
+  var anchorClassNames = useMergedClassNames([rootClassName$1$, props.className || '']);
+  return React__default.createElement(React.Fragment, null, React__default.createElement("div", Object.assign({}, props, {
+    ref: function ref(r) {
+      return setRef(r);
+    },
+    className: anchorClassNames
+  }), children), React__default.createElement(FloatingPanel$1, Object.assign({
+    statedAnchorRef: ref,
+    opened: opened != null ? opened : false,
+    setOpened: setOpened,
+    closeOnEsc: closeOnEsc,
+    closeOnOutClick: closeOnOutClick
+  }, panelProps), React__default.createElement("div", {
+    className: classNames
+  }, content)));
 }
-FloatingPanel.defaultProps = {
-  boxShadow: true,
-  radiusStyle: 'only-bottom'
-};
-var FloatingPanel$1 = React.memo(FloatingPanel);
 
 var rootClassName$20 = 'dropdown-selector';
 function DropdownSelector(props) {
   var _useState = React.useState(false),
     opened = _useState[0],
     setOpened = _useState[1];
+  var _useState2 = React.useState(null),
+    anchorRef = _useState2[0],
+    setAnchorRef = _useState2[1];
   var label = React.useMemo(function () {
     var _ref, _props$options$find$l, _props$options, _props$options$find;
     return (_ref = (_props$options$find$l = (_props$options = props.options) === null || _props$options === void 0 ? void 0 : (_props$options$find = _props$options.find(function (opt) {
@@ -7834,6 +7859,9 @@ function DropdownSelector(props) {
   return React__default.createElement("div", {
     className: useMergedClassNames([rootClassName$20 + "-wrapper", props.w100 ? 'w-100' : '', opened ? 'opened' : ''])
   }, React__default.createElement("button", {
+    ref: function ref(r) {
+      return setAnchorRef(r);
+    },
     className: useMergedClassNames([rootClassName$20, props.w100 ? 'w-100' : '', opened ? 'opened' : '']),
     onClick: function onClick() {
       setOpened(!opened);
@@ -7843,6 +7871,7 @@ function DropdownSelector(props) {
   }, label), React__default.createElement("div", {
     className: useMergedClassNames([rootClassName$20 + "-icon", opened ? 'opened' : ''])
   }, React__default.createElement(ChevronArrowDownIcon, null))), React__default.createElement(FloatingPanel$1, {
+    statedAnchorRef: anchorRef,
     opened: opened,
     setOpened: setOpened,
     className: rootClassName$20 + "-menu"
@@ -7982,7 +8011,7 @@ var Etapas$1 = React.memo(Etapas);
   EtiquetasStyle["Yellow"] = "yellow";
 })(exports.EtiquetasStyle || (exports.EtiquetasStyle = {}));
 
-var _excluded$9 = ["theme", "label", "icon", "fitContent"];
+var _excluded$e = ["theme", "label", "icon", "fitContent"];
 var rootClassName$22 = 'component-etiqueta';
 function Etiqueta(_ref) {
   var _ref$theme = _ref.theme,
@@ -7990,7 +8019,7 @@ function Etiqueta(_ref) {
     label = _ref.label,
     icon = _ref.icon,
     fitContent = _ref.fitContent,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   return React__default.createElement("div", Object.assign({}, props, {
     className: getMergedClassNames([rootClassName$22, theme, fitContent ? 'fit-content' : undefined])
   }), icon ? React__default.createElement("div", {
@@ -8359,22 +8388,54 @@ function FooterSicredi(props) {
 }
 var FooterSicredi$1 = React.memo(FooterSicredi);
 
+var _excluded$f = ["header", "footer"];
 var rootClassName$27 = 'full-height-container';
-function FullHeightContainer(props) {
+function FullHeightContainer(_ref) {
+  var header = _ref.header,
+    footer = _ref.footer,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+  var headerRef = React.createRef();
+  var contentRef = React.createRef();
+  var footerRef = React.createRef();
+  var mobile = useSystemInfo().isMobile;
+  React.useLayoutEffect(function () {
+    var observable = new ResizeObserver(function () {
+      if (contentRef.current && header && headerRef.current) {
+        var _headerRef$current;
+        contentRef.current.style.paddingTop = ((_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.getBoundingClientRect().height) + "px";
+      } else if (contentRef.current) {
+        contentRef.current.style.paddingTop = '';
+      }
+      if (contentRef.current && footer && footerRef.current) {
+        var _footerRef$current;
+        contentRef.current.style.paddingBottom = ((_footerRef$current = footerRef.current) === null || _footerRef$current === void 0 ? void 0 : _footerRef$current.getBoundingClientRect().height) + "px";
+      } else if (contentRef.current) {
+        contentRef.current.style.paddingBottom = '';
+      }
+    });
+    if (headerRef.current) {
+      observable.observe(headerRef.current);
+    }
+    if (footerRef.current) {
+      observable.observe(footerRef.current);
+    }
+    return function () {
+      observable.disconnect();
+    };
+  }, [headerRef, footerRef, contentRef, header, footer]);
   return React__default.createElement("div", {
     className: rootClassName$27
   }, React__default.createElement("div", {
-    className: rootClassName$27 + "-row-header"
-  }, props.header), React__default.createElement("div", {
-    className: getMergedClassNames([rootClassName$27 + "-row-content", props.verticalPadding ? 'vertical-padding' : '', props.horizontalPadding ? 'horizontal-padding' : ''])
-  }, props.children), props.fixedFooter ? React__default.createElement("div", {
-    className: rootClassName$27 + "-row-footer"
-  }, props.fixedFooter) : undefined);
-}
-FullHeightContainer.defaultProps = {
-  verticalPadding: true,
-  horizontalPadding: true
-};
+    className: rootClassName$27 + "-row-header",
+    ref: headerRef
+  }, header), React__default.createElement("div", {
+    ref: contentRef,
+    className: getMergedClassNames([rootClassName$27 + "-row-content", props.verticalPadding ? 'vertical-padding' : '', props.horizontalPadding ? 'horizontal-padding' : '', mobile ? 'mobile' : ''])
+  }, props.children), footer ? React__default.createElement("div", {
+    className: rootClassName$27 + "-row-footer",
+    ref: footerRef
+  }, footer) : undefined);
+}
 var FullHeightContainer$1 = React.memo(FullHeightContainer);
 
 (function (HeaderType) {
@@ -8465,7 +8526,7 @@ Information.defaultProps = {
 };
 
 var rootClassName$2b = 'component-input';
-function Input(props) {
+var Input = React.forwardRef(function (props, ref) {
   var getProps = function getProps() {
     var p = _extends({}, props, {
       id: props.id ? props.id + "-input" : undefined,
@@ -8490,7 +8551,8 @@ function Input(props) {
   }, !props.hideLabelAndHelperText && React__default.createElement("div", {
     className: rootClassName$2b + "-label nunito"
   }, props.label || ''), React__default.createElement("div", {
-    className: rootClassName$2b + "-input-container"
+    className: rootClassName$2b + "-input-container",
+    ref: ref
   }, React__default.createElement("input", Object.assign({}, getProps())), props.rightObject && React__default.createElement("div", {
     className: rootClassName$2b + "-right-object"
   }, props.rightObject)), !props.hideLabelAndHelperText && React__default.createElement("div", {
@@ -8500,7 +8562,8 @@ function Input(props) {
   }, props.helperText || ''), props.counter && React__default.createElement("div", {
     className: rootClassName$2b + "-counter"
   }, "" + String(props.value || '').length + (props.maxLength || props.maxLength === 0 ? "/" + props.maxLength : ''))));
-}
+});
+Input.displayName = 'Input';
 Input.defaultProps = {
   value: '',
   loading: false,
@@ -8572,90 +8635,46 @@ InputArea.defaultProps = {
 };
 var InputArea$1 = React.memo(InputArea);
 
+var _excluded$g = ["label", "opened", "setOpened", "closeOnOutClick", "closeOnEsc", "downloads"];
 var rootClassName$2d = 'component-item-dropdown-download';
-function ItemDropdownDownload(props) {
-  var id = React.useMemo(function () {
-    return props.id ? props.id : getUniqueKey();
-  }, [props.id]);
-  var filteredProps = React.useMemo(function () {
-    var p = _extends({}, props, {
-      className: getMergedClassNames([rootClassName$2d, props.className || '', props.opened ? 'opened' : 'closed']),
-      onClick: function onClick(event) {
-        if (typeof props.onClick === 'function') {
-          props.onClick(event);
-        }
-        if (typeof props.setOpened === 'function') {
-          props.setOpened(!props.opened);
-        }
-      }
-    });
-    delete p.label;
-    delete p.opened;
-    delete p.setOpened;
-    delete p.closeOnOutClick;
-    delete p.closeOnEsc;
-    delete p.downloads;
-    return p;
-  }, [props]);
-  React.useEffect(function () {
-    var onHandleClick = function onHandleClick(evt) {
-      if (evt.path) {
-        if (document.querySelector("#" + id + " ." + rootClassName$2d + "-panel.panel-fade-enter-done") && !evt.path.includes(document.querySelector("#" + id))) props.setOpened(false);
-      } else {
-        var aux = evt.target;
-        var deveFechar = true;
-        while (aux && aux.id !== 'root') {
-          if (aux && aux.id && aux.id === id && aux.classList.contains(rootClassName$2d + "-outer")) {
-            deveFechar = false;
-            break;
-          }
-          aux = aux.parentElement;
-        }
-        if (deveFechar) {
-          props.setOpened(false);
-        }
-      }
-    };
-    var onEscPress = function onEscPress(evt) {
-      if (evt.key === 'Escape') {
-        props.setOpened(false);
-      }
-    };
-    if (props.closeOnOutClick) {
-      if (props.opened) {
-        document.addEventListener('mousedown', onHandleClick);
-      } else {
-        document.removeEventListener('mousedown', onHandleClick);
+function ItemDropdownDownload(_ref) {
+  var label = _ref.label,
+    opened = _ref.opened,
+    setOpened = _ref.setOpened,
+    _ref$downloads = _ref.downloads,
+    downloads = _ref$downloads === void 0 ? [] : _ref$downloads,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+  var _useState = React.useState(null),
+    ref = _useState[0],
+    setRef = _useState[1];
+  var classNames = useMergedClassNames([rootClassName$2d, props.className || '', opened ? 'opened' : 'closed']);
+  return React__default.createElement(React.Fragment, null, React__default.createElement("button", Object.assign({}, props, {
+    ref: function ref(e) {
+      return setRef(e);
+    },
+    className: classNames,
+    onClick: function onClick(evt) {
+      if (typeof props.onClick === 'function') {
+        props.onClick(evt);
       }
-    }
-    if (props.closeOnEsc) {
-      if (props.opened) {
-        document.addEventListener('keyup', onEscPress);
-      } else {
-        document.removeEventListener('keyup', onEscPress);
+      if (typeof setOpened === 'function') {
+        setOpened(!opened);
       }
     }
-    return function () {
-      document.removeEventListener('mousedown', onHandleClick);
-      document.removeEventListener('click', onHandleClick);
-      document.removeEventListener('keyup', onEscPress);
-    };
-  }, [props.opened]);
-  return React__default.createElement("div", {
-    className: rootClassName$2d + "-outer",
-    id: id
-  }, React__default.createElement("button", Object.assign({}, filteredProps), React__default.createElement("div", {
+  }), React__default.createElement("div", {
     className: rootClassName$2d + "-label"
-  }, props.label), React__default.createElement("div", {
-    className: getMergedClassNames([rootClassName$2d + "-arrow", props.opened ? 'up' : 'down'])
-  }, React__default.createElement(ChevronArrowDownIcon, null))), React__default.createElement(reactTransitionGroup.CSSTransition, {
-    "in": props.opened,
-    timeout: 300,
-    classNames: 'panel-fade',
-    unmountOnExit: true
-  }, React__default.createElement("div", {
+  }, label), React__default.createElement("div", {
+    className: getMergedClassNames([rootClassName$2d + "-arrow", opened ? 'up' : 'down'])
+  }, React__default.createElement(ChevronArrowDownIcon, null))), React__default.createElement(FloatingPanel$1, {
+    matchWidth: true,
+    opened: opened,
+    setOpened: setOpened,
+    statedAnchorRef: ref,
+    placement: 'bottom',
+    fallbackPlacements: ['bottom', 'top', 'left', 'right'],
+    offset: 6,
     className: rootClassName$2d + "-panel"
-  }, props.downloads && props.downloads.length ? props.downloads.map(function (download, index) {
+  }, downloads === null || downloads === void 0 ? void 0 : downloads.map(function (download, index) {
     return React__default.createElement("button", {
       id: download.id || undefined,
       className: rootClassName$2d + "-item " + (download.loading ? 'loading' : ''),
@@ -8672,12 +8691,8 @@ function ItemDropdownDownload(props) {
     }, download.loading ? React__default.createElement(PercentLoaderIcon, {
       indefinido: true
     }) : React__default.createElement(CloudDownloadIcon, null)));
-  }) : undefined)));
+  })));
 }
-ItemDropdownDownload.defaultProps = {
-  closeOnOutClick: true,
-  closeOnEsc: true
-};
 var ItemDropdownDownload$1 = React.memo(ItemDropdownDownload);
 
 var rootClassName$2e = 'component-menu-item';
@@ -8948,7 +8963,7 @@ function useScreenSize() {
   return value;
 }
 
-var _excluded$a = ["className", "compenseColPaddingContent", "footer", "id", "mobileOn", "modalKey", "onClose", "preventEscExit", "preventMaskExit", "size", "tag", "title"];
+var _excluded$h = ["className", "compenseColPaddingContent", "footer", "id", "mobileOn", "modalKey", "onClose", "preventEscExit", "preventMaskExit", "size", "tag", "title"];
 var rootClassName$2g = 'component-modal';
 function Modal(_ref) {
   var className = _ref.className,
@@ -8962,7 +8977,7 @@ function Modal(_ref) {
     _ref$tag = _ref.tag,
     tag = _ref$tag === void 0 ? 'dialog' : _ref$tag,
     title = _ref.title,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   var _useScreenSize = useScreenSize(),
     rankedSize = _useScreenSize.rankedSize;
   var modalProps = React.useMemo(function () {
@@ -9135,7 +9150,7 @@ PageSubTitle.defaultProps = {
   text: ''
 };
 
-var _excluded$b = ["boundaryCount", "count", "currentPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "siblingCount", "maxLength"];
+var _excluded$i = ["boundaryCount", "count", "currentPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "siblingCount", "maxLength"];
 function usePagination(props) {
   var _ref;
   if (props === void 0) {
@@ -9159,7 +9174,7 @@ function usePagination(props) {
     _props$siblingCount = _props.siblingCount,
     siblingCount = _props$siblingCount === void 0 ? 1 : _props$siblingCount,
     maxLength = _props.maxLength,
-    other = _objectWithoutPropertiesLoose(_props, _excluded$b);
+    other = _objectWithoutPropertiesLoose(_props, _excluded$i);
   var isControlledRef = React.useRef(pageProp !== undefined);
   var _useState = React.useState(currentPage),
     pageCurrent = _useState[0],
@@ -9251,7 +9266,7 @@ var ThreeDots = function ThreeDots() {
   }));
 };
 
-var _excluded$c = ["page", "type", "selected"];
+var _excluded$j = ["page", "type", "selected"];
 var rootClassName$2k = 'pagination-component';
 var Pagination = function Pagination(props) {
   var _useScreenSize = useScreenSize(),
@@ -9377,7 +9392,7 @@ var Pagination = function Pagination(props) {
     var page = _ref2.page,
       type = _ref2.type,
       selected = _ref2.selected,
-      item = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+      item = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
     var children = null;
     if (type === 'start-ellipsis' || type === 'end-ellipsis') {
       children = React__default.createElement("li", {
@@ -9717,7 +9732,7 @@ var PreviaVideo$1 = React.memo(PreviaVideo);
   RadioButtonType["New"] = "new";
 })(exports.RadioButtonType || (exports.RadioButtonType = {}));
 
-var _excluded$d = ["onChange", "value", "className", "theme", "error", "type"];
+var _excluded$k = ["onChange", "value", "className", "theme", "error", "type"];
 var rootClassName$2o = 'component-radio-button';
 function RadioButton(_ref) {
   var onChange = _ref.onChange,
@@ -9730,7 +9745,7 @@ function RadioButton(_ref) {
     error = _ref$error === void 0 ? false : _ref$error,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   var classNames = useMergedClassNames([rootClassName$2o, theme, className]);
   return React__default.createElement("button", Object.assign({}, props, {
     type: type,
@@ -10081,25 +10096,23 @@ var Search$1 = React.memo(Search);
 
 var rootClassName$2r = 'component-select';
 function Select(props) {
-  var _props$options3;
-  var _useState = React.useState(getUniqueKey()),
-    id = _useState[0];
-  var _useState2 = React.useState(getUniqueKey()),
-    panelId = _useState2[0];
-  var _useState3 = React.useState(false),
-    panelOpened = _useState3[0],
-    setPanelOpened = _useState3[1];
-  var _useState4 = React.useState(''),
-    filterInput = _useState4[0],
-    setFilterInput = _useState4[1];
-  var _useState5 = React.useState(false),
-    fakeSelectFocused = _useState5[0],
-    setFakeSelectFocused = _useState5[1];
-  var _useState6 = React.useState(null),
-    inter = _useState6[0],
-    setInter = _useState6[1];
-  var interRef = React.useRef(inter);
-  interRef.current = inter;
+  var _props$options4;
+  var panelId = React.useMemo(function () {
+    return getUniqueKey();
+  }, []);
+  var _useState = React.useState(),
+    anchorRef = _useState[0],
+    setAnchorRef = _useState[1];
+  var wrapperRef = React.createRef();
+  var _useState2 = React.useState(false),
+    panelOpened = _useState2[0],
+    setPanelOpened = _useState2[1];
+  var _useState3 = React.useState(''),
+    filterInput = _useState3[0],
+    setFilterInput = _useState3[1];
+  var _useState4 = React.useState(false),
+    fakeSelectFocused = _useState4[0],
+    setFakeSelectFocused = _useState4[1];
   var getKey = function getKey(option) {
     if (option) {
       if (option.key) return option.key;
@@ -10107,93 +10120,6 @@ function Select(props) {
     }
     return getUniqueKey();
   };
-  React.useEffect(function () {
-    var func = function func(evt) {
-      var aux = evt.target;
-      var deveFechar = true;
-      while (aux && aux.id !== 'root') {
-        if (aux && aux.id && aux.id === id && aux.classList.contains(rootClassName$2r + "-outer")) {
-          deveFechar = false;
-          break;
-        }
-        aux = aux.parentElement;
-      }
-      if (deveFechar) {
-        setPanelOpened(false);
-      }
-    };
-    var onEsc = function onEsc(evt) {
-      if (evt.key === 'Escape') {
-        setPanelOpened(false);
-        evt.preventDefault();
-        evt.stopPropagation();
-      }
-    };
-    if (panelOpened) {
-      var _document, _document$querySelect;
-      document.addEventListener('keydown', onEsc);
-      document.addEventListener('click', func);
-      document.body.append(document.querySelector("#" + panelId));
-      (_document = document) === null || _document === void 0 ? void 0 : (_document$querySelect = _document.querySelector("#" + id)) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.append(document.querySelector("#" + panelId));
-    } else {
-      document.removeEventListener('keydown', onEsc);
-      document.removeEventListener('click', func);
-      setTimeout(function () {
-        return setFilterInput('');
-      }, 400);
-    }
-    return function () {
-      document.removeEventListener('keydown', onEsc);
-      document.removeEventListener('click', func);
-    };
-  }, [id, panelId, panelOpened]);
-  React.useEffect(function () {
-    if (interRef.current) {
-      clearInterval(interRef.current);
-      setInter(null);
-    }
-    var position = function position() {
-      var trigger = document.querySelector("#" + id);
-      var panel = document.querySelector("#" + panelId + ".panel-fade-enter-active, #" + panelId + ".panel-fade-enter-done, #" + panelId + ".panel-fade-exit-active");
-      if (!trigger || !panel) return;
-      var triggerBound = trigger.getBoundingClientRect();
-      panel.style.width = triggerBound.width + "px";
-      var windowHeight = window.innerHeight;
-      var panelHeight = panel.getBoundingClientRect().height;
-      var fitBottom = panelHeight + triggerBound.bottom < windowHeight;
-      var fitTop = triggerBound.top - panelHeight > 0;
-      if (fitBottom && !props.bottomPanel) {
-        panel.style.top = triggerBound.bottom - 16 + "px";
-        panel.style.left = 'unset';
-        panel.style.bottom = 'unset';
-        panel.style.borderRadius = '0 0 8px 8px';
-        panel.style.boxShadow = '0 0 2px 0 rgba(90, 100, 90, 0.3)';
-      } else if (fitTop && !props.bottomPanel) {
-        panel.style.top = triggerBound.top - panelHeight + "px";
-        panel.style.left = 'unset';
-        panel.style.bottom = 'unset';
-        panel.style.borderRadius = '8px';
-        panel.style.boxShadow = '0 0 2px 0 rgba(90, 100, 90, 0.3)';
-      } else {
-        panel.style.top = 'unset';
-        panel.style.left = '0';
-        panel.style.bottom = '0';
-        panel.style.width = '100%';
-        panel.style.borderRadius = '8px 8px 0 0';
-        panel.style.boxShadow = '0 -10px 0 5000px rgba(0, 0, 0, 0.5)';
-      }
-    };
-    if (panelOpened) {
-      position();
-      setInter(setInterval(position, 20));
-    }
-    return function () {
-      if (interRef.current) {
-        clearInterval(interRef.current);
-        setInter(null);
-      }
-    };
-  }, [panelOpened]);
   var opcoes = JSON.stringify(props.options);
   React.useEffect(function () {
     if (props.preSelectUniqueOption && props.options && props.options.length === 1) {
@@ -10208,7 +10134,7 @@ function Select(props) {
       }
     }
   }, [opcoes]);
-  var getRightObject = function getRightObject() {
+  var RightObject = React.useMemo(function () {
     return React__default.createElement("div", {
       className: rootClassName$2r + "-objects"
     }, props.clearButton && !props.readOnly && (props.multiple && props.value && Array.isArray(props.value) && props.value.length || !props.multiple && (props.value || props.value === 0 || props.value === false)) ? React__default.createElement(IconButton$1, {
@@ -10218,10 +10144,12 @@ function Select(props) {
       icon: React__default.createElement(CloseIcon, null),
       onClick: function onClick() {
         if (props.multiple) {
+          setPanelOpened(false);
           props.onChange([], {
             setPanelOpened: setPanelOpened
           });
         } else {
+          setPanelOpened(false);
           props.onChange(null, {
             setPanelOpened: setPanelOpened
           });
@@ -10236,16 +10164,17 @@ function Select(props) {
       },
       icon: React__default.createElement(ChevronArrowDownIcon, null)
     }));
-  };
+  }, [panelOpened, props]);
   var getInputProps = function getInputProps() {
     var _props$options;
     var p = _extends({}, props, {
       className: getMergedClassNames([rootClassName$2r, props.className]),
       forceFocus: fakeSelectFocused,
       readOnly: true,
-      rightObject: getRightObject(),
+      rightObject: RightObject,
       onClick: function onClick() {
-        var selectFake = document.querySelector("#" + id + " ." + rootClassName$2r + "-select-fake");
+        var _wrapperRef$current;
+        var selectFake = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelector("." + rootClassName$2r + "-select-fake");
         if (!props.multiple && isiPhone() && selectFake) {
           selectFake.focus();
         } else {
@@ -10253,7 +10182,8 @@ function Select(props) {
         }
       },
       onFocus: function onFocus(evt) {
-        var selectFake = document.querySelector("#" + id + " ." + rootClassName$2r + "-select-fake");
+        var _wrapperRef$current2;
+        var selectFake = (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.querySelector("." + rootClassName$2r + "-select-fake");
         if (!props.multiple && isiPhone() && selectFake) {
           selectFake.focus();
         } else {
@@ -10271,7 +10201,7 @@ function Select(props) {
             inputFilter.focus();
             evt.preventDefault();
           } else {
-            var firstOption = document.querySelector("#" + id + " ." + rootClassName$2r + "-options div");
+            var firstOption = document.querySelector("#" + panelId + " ." + rootClassName$2r + "-options div");
             if (firstOption) {
               firstOption.focus();
               evt.preventDefault();
@@ -10453,38 +10383,8 @@ function Select(props) {
       return getStringWithoutSpecialChar(op.label).toLowerCase().match(getStringWithoutSpecialChar(filterInput).toLowerCase());
     })) || [];
   }, [props.options, filterInput]);
-  return React__default.createElement("div", {
-    id: id,
-    className: rootClassName$2r + "-outer"
-  }, !props.multiple && isiPhone() && React__default.createElement("select", {
-    className: rootClassName$2r + "-select-fake",
-    value: props.value ? String(props.value) : '',
-    onChange: function onChange(evt) {
-      return props.onChange(evt.target.value, {
-        setPanelOpened: setPanelOpened
-      });
-    },
-    tabIndex: props.tabIndex,
-    onFocus: function onFocus() {
-      return setFakeSelectFocused(true);
-    },
-    onBlur: function onBlur() {
-      return setFakeSelectFocused(false);
-    }
-  }, React__default.createElement("option", {
-    value: '',
-    disabled: true
-  }, languageValues.components.select.single.fakeOption), (_props$options3 = props.options) === null || _props$options3 === void 0 ? void 0 : _props$options3.map(function (opt) {
-    return React__default.createElement("option", {
-      key: getKey(opt),
-      value: typeof opt.value !== 'string' ? String(opt.value) : opt.value
-    }, opt.label);
-  })), React__default.createElement(Input$1, Object.assign({}, getInputProps())), React__default.createElement(reactTransitionGroup.CSSTransition, {
-    "in": panelOpened,
-    timeout: 300,
-    classNames: 'panel-fade',
-    unmountOnExit: true,
-    onEnter: function onEnter() {
+  React.useLayoutEffect(function () {
+    if (panelOpened) {
       var panel = document.querySelector("#" + panelId);
       if (window.innerHeight < panel.getBoundingClientRect().bottom) {
         panel.style.top = 'unset';
@@ -10504,8 +10404,8 @@ function Select(props) {
             }, 50);
           }
         } else {
-          var _props$options4;
-          var elProps = (_props$options4 = props.options) === null || _props$options4 === void 0 ? void 0 : _props$options4.map(function (opt, index) {
+          var _props$options3;
+          var elProps = (_props$options3 = props.options) === null || _props$options3 === void 0 ? void 0 : _props$options3.map(function (opt, index) {
             return _extends({}, opt, {
               ind: index
             });
@@ -10522,13 +10422,52 @@ function Select(props) {
           }
         }
       }
-    },
-    onExit: function onExit() {
-      var inputElement = document.querySelector("#" + id + " input");
+    } else {
+      var _wrapperRef$current3;
+      var inputElement = (_wrapperRef$current3 = wrapperRef.current) === null || _wrapperRef$current3 === void 0 ? void 0 : _wrapperRef$current3.querySelector("input");
       if (inputElement && !isiPhone()) {
         inputElement.focus();
       }
     }
+  }, [panelOpened]);
+  return React__default.createElement("div", {
+    ref: wrapperRef,
+    className: rootClassName$2r + "-outer"
+  }, !props.multiple && isiPhone() && React__default.createElement("select", {
+    className: rootClassName$2r + "-select-fake",
+    value: props.value ? String(props.value) : '',
+    onChange: function onChange(evt) {
+      return props.onChange(evt.target.value, {
+        setPanelOpened: setPanelOpened
+      });
+    },
+    tabIndex: props.tabIndex,
+    onFocus: function onFocus() {
+      return setFakeSelectFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFakeSelectFocused(false);
+    }
+  }, React__default.createElement("option", {
+    value: '',
+    disabled: true
+  }, languageValues.components.select.single.fakeOption), (_props$options4 = props.options) === null || _props$options4 === void 0 ? void 0 : _props$options4.map(function (opt) {
+    return React__default.createElement("option", {
+      key: getKey(opt),
+      value: typeof opt.value !== 'string' ? String(opt.value) : opt.value
+    }, opt.label);
+  })), React__default.createElement(Input$1, Object.assign({}, getInputProps(), {
+    ref: function ref(r) {
+      return setAnchorRef(r);
+    }
+  })), React__default.createElement(FloatingPanel$1, {
+    statedAnchorRef: anchorRef,
+    opened: panelOpened,
+    setOpened: setPanelOpened,
+    matchWidth: true,
+    placement: 'bottom',
+    fallbackPlacements: ['top', 'left', 'right'],
+    offset: 1
   }, React__default.createElement("div", {
     id: panelId,
     className: rootClassName$2r + "-panel " + (props.multiple ? 'multiple' : '')
@@ -10543,7 +10482,7 @@ function Select(props) {
     hideLabelAndHelperText: true,
     onKeyDown: function onKeyDown(evt) {
       if (evt.key === 'Tab' && !evt.shiftKey || evt.key === 'ArrowDown') {
-        var el = document.querySelector("#" + id + " ." + rootClassName$2r + "-options div");
+        var el = document.querySelector("#" + panelId + " ." + rootClassName$2r + "-options div");
         if (el) {
           el.focus();
           evt.preventDefault();
@@ -10630,7 +10569,7 @@ Switch.defaultProps = {
   scale: 1
 };
 
-var _excluded$e = ["columns", "lines", "onSort", "confirmSort", "sortable", "upperHeader", "className"];
+var _excluded$l = ["columns", "lines", "onSort", "confirmSort", "sortable", "upperHeader", "className"];
 var rootClassName$2t = 'component-table';
 function TypedTable(props) {
   return React__default.createElement(Table, Object.assign({}, props));
@@ -10643,7 +10582,7 @@ function Table(_ref) {
     sortable = _ref.sortable,
     upperHeader = _ref.upperHeader,
     className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   var itemsId = React.useMemo(function () {
     return "table" + getUniqueKey();
   }, []);
@@ -11242,13 +11181,13 @@ function TextEditorColorPicker(props) {
   }, "OK")));
 }
 
-var _excluded$f = ["icon", "active"];
+var _excluded$m = ["icon", "active"];
 var rootClassName$2C = 'text-editor-header-button';
 function TextEditorHeaderButton(_ref) {
   var _props$className;
   var icon = _ref.icon,
     active = _ref.active,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   return React__default.createElement("button", Object.assign({
     className: getMergedClassNames([rootClassName$2C, active ? 'active' : '', (_props$className = props.className) != null ? _props$className : ''])
   }, props), icon);
@@ -11796,6 +11735,7 @@ var ToastManager = React.forwardRef(function (props, ref) {
       return a.id !== id;
     });
     setArrayOfToast(arr);
+    toasts.current = arr;
   };
   React.useImperativeHandle(ref, function () {
     return {
@@ -12104,7 +12044,7 @@ TopLoader.defaultProps = {
   })
 };
 
-var _excluded$g = ["className", "id", "mobileOn", "modalKey", "onClose", "preventEscExit", "preventMaskExit", "size", "tag", "urlVideo", "videoPlayerProps"];
+var _excluded$n = ["className", "id", "mobileOn", "modalKey", "onClose", "preventEscExit", "preventMaskExit", "size", "tag", "urlVideo", "videoPlayerProps"];
 var rootClassName$2M = 'video-modal';
 function VideoModal(_ref) {
   var _ref2;
@@ -12118,7 +12058,7 @@ function VideoModal(_ref) {
     tag = _ref$tag === void 0 ? 'dialog' : _ref$tag,
     urlVideo = _ref.urlVideo,
     videoPlayerProps = _ref.videoPlayerProps,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   var _useScreenSize = useScreenSize(),
     rankedSize = _useScreenSize.rankedSize;
   var handleClose = React.useCallback(function () {
@@ -12144,13 +12084,57 @@ VideoModal.defaultProps = {
   size: 'md'
 };
 
-var _excluded$h = ["className"];
+var _excluded$o = ["className"];
 var rootClassName$2N = 'icon-component';
-var MiniInformationIcon = function MiniInformationIcon(_ref) {
+function Bell16Icon(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   var classNames = useMergedClassNames([rootClassName$2N, className]);
+  return React__default.createElement("svg", Object.assign({
+    width: '16',
+    height: '16',
+    viewBox: '0 0 16 16',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+    className: classNames
+  }, props), React__default.createElement("path", {
+    fillRule: 'evenodd',
+    clipRule: 'evenodd',
+    d: 'M12.2013 8.544C12.2073 10.042 12.7943 11.453 13.8541 12.516C13.9653 12.626 14.0144 12.78 13.9964 12.931C14.0074 13.042 13.9913 13.158 13.9443 13.266C13.8441 13.515 13.6317 13.669 13.3112 13.678H10.4643C10.3832 14.971 9.31538 16 8.00014 16C6.6859 16 5.61808 14.971 5.53594 13.678H2.68308H2.67406C2.4016 13.678 2.15518 13.512 2.05201 13.252C1.99391 13.121 1.98589 12.973 2.02095 12.834C2.02095 12.716 2.06102 12.603 2.14717 12.516C3.20697 11.453 3.79397 10.042 3.79998 8.542L3.79898 6.082C3.79698 4.199 5.06814 2.543 6.89025 2.055C6.99342 2.029 7.05453 2.016 7.11864 2.003C7.23884 1.978 7.36906 1.966 7.49929 1.957V0.5C7.49929 0.224 7.72367 0 8.00014 0C8.27761 0 8.50099 0.224 8.50099 0.5V1.957C8.63222 1.966 8.76244 1.978 8.89066 2.005C8.94675 2.016 9.00786 2.029 9.06996 2.044C10.9331 2.543 12.2043 4.199 12.2023 6.083L12.2013 8.544ZM9.47866 13.178C9.47866 12.902 9.70304 12.678 9.97951 12.678H12.6571C11.7175 11.508 11.2056 10.066 11.1996 8.546L11.2006 6.082C11.2026 4.651 10.2359 3.392 8.85059 3.022L8.68731 2.984C8.61038 2.9673 8.53764 2.96176 8.46617 2.95631C8.45203 2.95523 8.43793 2.95416 8.42386 2.953L8.30165 2.945C8.28562 2.944 8.20449 2.931 8.18846 2.928L8.04321 2.917C8.02759 2.91815 7.99794 2.91798 7.97065 2.91781C7.95069 2.91769 7.93201 2.91758 7.921 2.918L7.57742 2.953C7.56222 2.95425 7.54698 2.9554 7.53173 2.95656C7.46158 2.96187 7.3911 2.96721 7.32198 2.982L7.18174 3.013C5.76533 3.392 4.79868 4.651 4.80069 6.081L4.80169 8.544C4.79568 10.066 4.28281 11.508 3.34421 12.678H6.02177C6.29824 12.678 6.52262 12.902 6.52262 13.178V13.525C6.52262 14.338 7.18575 15 8.00014 15C8.81553 15 9.47866 14.338 9.47866 13.525V13.178Z',
+    fill: 'currentColor'
+  }));
+}
+
+var _excluded$p = ["className"];
+var rootClassName$2O = 'icon-component';
+function BellIcon(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+  var classNames = useMergedClassNames([rootClassName$2O, className]);
+  return React__default.createElement("svg", Object.assign({
+    width: '24',
+    height: '24',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+    className: classNames
+  }, props), React__default.createElement("path", {
+    fillRule: 'evenodd',
+    clipRule: 'evenodd',
+    d: 'M20.8526 19.112C20.9707 19.229 21.0211 19.396 20.9919 19.555C21.01 19.693 20.9929 19.835 20.9343 19.967C20.8253 20.249 20.5095 20.431 20.2067 20.439H15.5633V20.469C15.5633 22.416 13.9648 24 12.0009 24C10.0359 24 8.43735 22.416 8.43735 20.469V20.439H3.78592H3.7728C3.46398 20.439 3.17434 20.244 3.05828 19.949C2.98965 19.793 2.98259 19.615 3.03204 19.448C3.02397 19.324 3.05626 19.203 3.1481 19.112C4.8365 17.432 5.77103 15.203 5.78112 12.833L5.7791 9.058C5.77607 6.292 7.65824 3.858 10.3558 3.141C10.4992 3.104 10.589 3.085 10.6778 3.067C10.8736 3.027 11.0653 3.011 11.2571 2.999L11.4256 2.986L11.4962 2.974V0.5C11.4962 0.223 11.7213 0 12.0009 0C12.2794 0 12.5055 0.223 12.5055 0.5V2.974C12.5103 2.97536 12.5146 2.97579 12.5191 2.97625C12.5212 2.97646 12.5234 2.97668 12.5256 2.977L12.7436 2.999C12.9354 3.011 13.1281 3.027 13.3169 3.066C13.4117 3.085 13.5015 3.104 13.5893 3.127C16.3425 3.858 18.2256 6.292 18.2226 9.059L18.2206 12.835C18.2307 15.203 19.1642 17.432 20.8526 19.112ZM14.5541 19.939C14.5541 19.663 14.7802 19.439 15.0587 19.439H19.7768C18.1277 17.622 17.2215 15.297 17.2114 12.836L17.2134 9.058C17.2164 6.743 15.6411 4.708 13.3835 4.108C13.2793 4.08031 13.2128 4.06599 13.1535 4.05324C13.1422 4.0508 13.1311 4.04841 13.1201 4.046C12.9782 4.01659 12.8431 4.00745 12.7094 3.99841C12.6976 3.99761 12.6858 3.99681 12.674 3.996L12.4883 3.982C12.4722 3.981 12.3551 3.963 12.3399 3.96L12.1906 3.946C12.0765 3.94 12.0412 3.935 12.0069 3.93C12.0059 3.93 12.0049 3.93025 12.0039 3.9305C12.0029 3.93075 12.0019 3.931 12.0009 3.931C11.9998 3.931 11.9988 3.93075 11.9978 3.9305C11.9968 3.93025 11.9958 3.93 11.9948 3.93L11.9912 3.93053C11.9581 3.93535 11.926 3.94004 11.8939 3.941C11.8898 3.941 11.7152 3.951 11.7122 3.952C11.6961 3.955 11.5316 3.98 11.5154 3.982L11.3277 3.996C11.316 3.9968 11.3042 3.99759 11.2925 3.99838C11.1581 4.00743 11.0245 4.01641 10.8927 4.044C10.8816 4.04635 10.8706 4.04864 10.8599 4.0509C10.7928 4.06495 10.7329 4.07749 10.6737 4.093C8.35964 4.708 6.78528 6.743 6.78831 9.057L6.79032 12.835C6.78023 15.297 5.87296 17.622 4.22492 19.439H8.94195C9.2215 19.439 9.44655 19.663 9.44655 19.939V20.469C9.44655 21.865 10.592 23 12.0009 23C13.4087 23 14.5541 21.865 14.5541 20.469V19.939Z',
+    fill: 'currentColor'
+  }));
+}
+
+var _excluded$q = ["className"];
+var rootClassName$2P = 'icon-component';
+var MiniInformationIcon = function MiniInformationIcon(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+  var classNames = useMergedClassNames([rootClassName$2P, className]);
   return React__default.createElement("svg", Object.assign({
     viewBox: '0 0 12 12',
     xmlns: 'http://www.w3.org/2000/svg',
@@ -12165,10 +12149,10 @@ var MiniInformationIcon = function MiniInformationIcon(_ref) {
   }));
 };
 
-var rootClassName$2O = 'icon-component';
+var rootClassName$2Q = 'icon-component';
 var PhonePlusIcon = function PhonePlusIcon() {
   return React__default.createElement("svg", {
-    className: rootClassName$2O,
+    className: rootClassName$2Q,
     viewBox: '0 0 24 24',
     fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
@@ -12179,7 +12163,22 @@ var PhonePlusIcon = function PhonePlusIcon() {
   }));
 };
 
-var rootClassName$2P = 'calendar-header';
+var rootClassName$2R = 'icon-component';
+var Settings16Icon = function Settings16Icon() {
+  return React__default.createElement("svg", {
+    className: rootClassName$2R,
+    viewBox: '0 0 16 16',
+    fill: 'currentColor',
+    xmlns: 'http://www.w3.org/2000/svg'
+  }, React__default.createElement("path", {
+    fillRule: 'evenodd',
+    clipRule: 'evenodd',
+    d: 'M14.5535 7.29484L15.6965 6.23441C16.0246 5.93023 16.0948 5.45145 15.8674 5.0719L14.5784 2.93093C14.3509 2.55121 13.8816 2.36878 13.4415 2.4906L11.8723 2.92191C11.4921 2.65989 11.0838 2.4382 10.6539 2.2604L10.2522 0.723412C10.1435 0.299985 9.74737 0.00210814 9.29151 5.77838e-06L6.71207 0C6.25442 0 5.85575 0.298948 5.74625 0.725421L5.32683 2.33479C4.94525 2.50579 4.58153 2.71205 4.2409 2.95044L2.55717 2.48922C2.11986 2.36756 1.6502 2.54913 1.42213 2.9299L0.134139 5.0711C-0.0951256 5.44811 -0.0252625 5.92954 0.303601 6.23449L1.592 7.43019C1.55527 7.80953 1.55528 8.19175 1.59201 8.57155L0.303725 9.76539C-0.0245352 10.0698 -0.0947095 10.5496 0.132619 10.9291L1.42167 13.0701C1.65117 13.4496 2.11865 13.6307 2.55691 13.5109L4.2405 13.0497C4.58094 13.2885 4.94474 13.495 5.32679 13.6662L5.74667 15.2782C5.85864 15.7036 6.25569 16 6.71207 16H9.28901C9.74555 16 10.1429 15.7012 10.2526 15.2761L10.653 13.7414C11.0829 13.5634 11.4915 13.3417 11.8712 13.0801L13.4414 13.5117C13.8799 13.633 14.3489 13.4514 14.5773 13.0721L15.8658 10.931C16.0937 10.5506 16.0235 10.0718 15.6954 9.76751L14.5535 8.70641C14.6089 8.23717 14.6089 7.76408 14.5535 7.29484ZM13.6937 12.5407L11.9097 12.0503C11.7491 12.0062 11.5762 12.0386 11.4447 12.1374C11.0153 12.46 10.5366 12.7195 10.0256 12.907C9.86672 12.9653 9.74748 13.0943 9.70618 13.2526L9.25027 15H6.74894L6.27665 13.1868C6.23677 13.0337 6.12389 12.9076 5.97214 12.8467C5.50605 12.6597 5.0692 12.4114 4.67408 12.1091C4.54235 12.0083 4.36796 11.9748 4.20595 12.0192L2.30633 12.5396L1.05444 10.4603L2.50121 9.11961C2.62046 9.0091 2.67779 8.85077 2.65562 8.69315C2.59098 8.23354 2.59098 7.76755 2.6556 7.30899C2.6778 7.15145 2.62059 6.99318 2.50149 6.88265L1.05546 5.54066L2.30673 3.46052L4.20595 3.98078C4.3677 4.02509 4.54181 3.99179 4.67348 3.89135C5.06945 3.5893 5.50662 3.34109 5.97214 3.15426C6.12387 3.09336 6.23674 2.96734 6.27663 2.81427L6.74945 1H9.25003L9.70727 2.74959C9.74865 2.90792 9.86799 3.0369 10.027 3.09512C10.5376 3.28213 11.0153 3.54126 11.4458 3.86464C11.5773 3.96344 11.7501 3.99579 11.9107 3.95166L13.6942 3.46144L14.9457 5.54005L13.6398 6.75159C13.518 6.86461 13.461 7.0274 13.4872 7.18804C13.5748 7.72699 13.5748 8.27401 13.4872 8.81297C13.4611 8.97346 13.5179 9.13612 13.6395 9.24913L14.9447 10.4619L13.6937 12.5407ZM7.99991 4.25049C10.159 4.25049 11.9091 5.92935 11.9091 8.00049C11.9091 10.0716 10.159 11.7505 7.99991 11.7505C5.84085 11.7505 4.09073 10.0716 4.09073 8.00049C4.09073 5.92935 5.84085 4.25049 7.99991 4.25049ZM7.99971 5.25049C6.41637 5.25049 5.13297 6.48163 5.13297 8.00049C5.13297 9.51935 6.41637 10.7505 7.99971 10.7505C9.58304 10.7505 10.8664 9.51935 10.8664 8.00049C10.8664 6.48163 9.58304 5.25049 7.99971 5.25049Z',
+    fill: 'currentColor'
+  }));
+};
+
+var rootClassName$2S = 'calendar-header';
 function CalendarHeader(props) {
   var size = useScreenSize();
   var days = React.useMemo(function () {
@@ -12189,16 +12188,16 @@ function CalendarHeader(props) {
     return props.language.daysOfWeek;
   }, [props.language.daysOfWeek, props.language.daysOfWeekAbrev, size]);
   return React__default.createElement("div", {
-    className: rootClassName$2P
+    className: rootClassName$2S
   }, days.map(function (d, i) {
     return React__default.createElement("div", {
-      className: rootClassName$2P + "-day",
+      className: rootClassName$2S + "-day",
       key: i
     }, d);
   }));
 }
 
-var rootClassName$2Q = 'evento-calendario';
+var rootClassName$2T = 'evento-calendario';
 function CalendarEvent(props) {
   var _useState = React.useState(props.forceExpanded || false),
     expanded = _useState[0],
@@ -12227,12 +12226,12 @@ function CalendarEvent(props) {
         return React__default.createElement(React.Fragment, null, "large");
       case 'medium':
         return React__default.createElement(React.Fragment, null, React__default.createElement("div", {
-          className: rootClassName$2Q + "-tipo",
+          className: rootClassName$2T + "-tipo",
           style: {
             borderColor: props.color
           }
         }, props.tipoEvento), React__default.createElement("div", {
-          className: rootClassName$2Q + "-label"
+          className: rootClassName$2T + "-label"
         }, React__default.createElement(reactTransitionGroup.CSSTransition, {
           "in": !props.forceExpanded && (!expanded || !props.expandedLabel),
           timeout: 300,
@@ -12242,26 +12241,26 @@ function CalendarEvent(props) {
           opened: props.forceExpanded || expanded && !!props.expandedLabel,
           animateOpacity: true
         }, React__default.createElement(React.Fragment, null, React__default.createElement("span", null, props.expandedLabel), React__default.createElement("div", {
-          className: rootClassName$2Q + "-date-label"
+          className: rootClassName$2T + "-date-label"
         }, props.expandedDate)))), React__default.createElement("div", {
-          className: rootClassName$2Q + "-modalidade"
+          className: rootClassName$2T + "-modalidade"
         }, React__default.createElement("div", {
-          className: rootClassName$2Q + "-icon"
+          className: rootClassName$2T + "-icon"
         }, props.icon), React__default.createElement("div", {
-          className: rootClassName$2Q + "-modalidade-label nunito"
+          className: rootClassName$2T + "-modalidade-label nunito"
         }, props.iconLabel)));
       case 'small':
       default:
         return React__default.createElement(React.Fragment, null, React__default.createElement("div", {
-          className: rootClassName$2Q + "-icon"
+          className: rootClassName$2T + "-icon"
         }, props.icon), React__default.createElement("div", {
-          className: rootClassName$2Q + "-label nunito"
+          className: rootClassName$2T + "-label nunito"
         }, props.tipoEvento, " | ", props.label));
     }
   }, [expanded, props.color, props.expandedDate, props.expandedLabel, props.forceExpanded, props.icon, props.iconLabel, props.label, props.size, props.tipoEvento]);
   return React__default.createElement("button", {
     ref: ref,
-    className: useMergedClassNames([rootClassName$2Q, props.size, props.borderStyle]),
+    className: useMergedClassNames([rootClassName$2T, props.size, props.borderStyle]),
     disabled: props.disabled,
     onClick: function onClick(evt) {
       if (typeof props.onClick === 'function') {
@@ -12287,10 +12286,10 @@ CalendarEvent.defaultProps = {
 };
 var CalendarEvent$1 = React.memo(CalendarEvent);
 
-var rootClassName$2R = 'calendar-chip';
+var rootClassName$2U = 'calendar-chip';
 function CalendarChip(props) {
   return React__default.createElement("button", {
-    className: useMergedClassNames([rootClassName$2R, 'nunito']),
+    className: useMergedClassNames([rootClassName$2U, 'nunito']),
     onClick: props.onClick,
     disabled: props.disabled,
     style: {
@@ -12305,11 +12304,11 @@ CalendarChip.defaultProps = {
 };
 var CalendarChip$1 = React.memo(CalendarChip);
 
-var rootClassName$2S = 'calendar-month-day';
+var rootClassName$2V = 'calendar-month-day';
 function CalendarMonthDay(props) {
   var _props$eventos, _props$eventos$length, _props$eventos2, _props$eventos$length2, _props$eventos3, _props$eventos4, _props$eventos4$slice;
   var classNames = React.useMemo(function () {
-    return getMergedClassNames([rootClassName$2S, props.pocket ? 'pocket' : '', props.isToday ? 'today' : '', props.disabled ? 'disabled' : '', props.highlightWeekends && (props.day.getDay() === 0 || props.day.getDay() === 6) ? 'highlight' : '']);
+    return getMergedClassNames([rootClassName$2V, props.pocket ? 'pocket' : '', props.isToday ? 'today' : '', props.disabled ? 'disabled' : '', props.highlightWeekends && (props.day.getDay() === 0 || props.day.getDay() === 6) ? 'highlight' : '']);
   }, [props.day, props.disabled, props.highlightWeekends, props.isToday, props.pocket]);
   var date = new Date();
   date.setDate(date.getDate() - 1);
@@ -12323,9 +12322,9 @@ function CalendarMonthDay(props) {
       }
     }
   }, React__default.createElement("div", {
-    className: rootClassName$2S + "-label-line"
+    className: rootClassName$2V + "-label-line"
   }, React__default.createElement("div", {
-    className: rootClassName$2S + "-day nunito",
+    className: rootClassName$2V + "-day nunito",
     onClick: function onClick(evt) {
       if (props.pocket && !props.disabled && typeof props.onPlusButtonClick === 'function') {
         props.onPlusButtonClick(props.day, evt);
@@ -12346,7 +12345,7 @@ function CalendarMonthDay(props) {
     },
     disabled: props.disabled
   }) : undefined)), !props.pocket ? React__default.createElement(React.Fragment, null, React__default.createElement("div", {
-    className: rootClassName$2S + "-eventos"
+    className: rootClassName$2V + "-eventos"
   }, (_props$eventos4 = props.eventos) === null || _props$eventos4 === void 0 ? void 0 : (_props$eventos4$slice = _props$eventos4.slice(0, 2)) === null || _props$eventos4$slice === void 0 ? void 0 : _props$eventos4$slice.map(function (e) {
     return React__default.createElement(CalendarEvent$1, Object.assign({
       key: e.id
@@ -12355,7 +12354,7 @@ function CalendarMonthDay(props) {
     }));
   })), props.showAddButton ? React__default.createElement("button", {
     disabled: props.disabledPrevAddButton ? props.day < date ? true : false : false,
-    className: rootClassName$2S + "-button",
+    className: rootClassName$2V + "-button",
     onClick: function onClick(evt) {
       if (typeof props.onAddButtonClick === 'function') {
         var _props$onAddButtonCli;
@@ -12367,7 +12366,7 @@ function CalendarMonthDay(props) {
 }
 var CalendarMonthDay$1 = React.memo(CalendarMonthDay);
 
-var rootClassName$2T = 'calendar-days';
+var rootClassName$2W = 'calendar-days';
 function CalendarDays(props) {
   var today = React.useMemo(function () {
     return new Date();
@@ -12385,7 +12384,7 @@ function CalendarDays(props) {
     return false;
   }, [props.referencia, props.disabledNextMonth, props.disabledPrevMonth]);
   return React__default.createElement("div", {
-    className: rootClassName$2T
+    className: rootClassName$2W
   }, days.map(function (d) {
     var _props$eventos;
     var k = "" + d.getFullYear() + getTwoNumbersIfNotTen(d.getMonth() + 1) + getTwoNumbersIfNotTen(d.getDate());
@@ -12410,8 +12409,8 @@ function CalendarDays(props) {
 }
 var CalendarDays$1 = React.memo(CalendarDays);
 
-var _excluded$i = ["language", "visao", "referencia"];
-var rootClassName$2U = 'calendar';
+var _excluded$r = ["language", "visao", "referencia"];
+var rootClassName$2X = 'calendar';
 function Calendar(_ref) {
   var _ref$language = _ref.language,
     language = _ref$language === void 0 ? ptbrCalendarLanguage : _ref$language,
@@ -12419,7 +12418,7 @@ function Calendar(_ref) {
     visao = _ref$visao === void 0 ? CalendarView.Mensal : _ref$visao,
     _ref$referencia = _ref.referencia,
     referencia = _ref$referencia === void 0 ? new Date() : _ref$referencia,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var id = React.useMemo(getUniqueKey, []);
   var _useState = React.useState(false),
     pocket = _useState[0],
@@ -12427,7 +12426,7 @@ function Calendar(_ref) {
   var pocketRef = React.useRef(pocket);
   pocketRef.current = pocket;
   var classNames = React.useMemo(function () {
-    return getMergedClassNames([rootClassName$2U, props.loading ? 'loading' : '']);
+    return getMergedClassNames([rootClassName$2X, props.loading ? 'loading' : '']);
   }, [props.loading]);
   var cbResize = React.useCallback(function (evt) {
     if (pocketRef.current) {
@@ -12503,7 +12502,7 @@ function FormattedText(text) {
   }));
 }
 
-var rootClassName$2V = 'scroll-arrow-overflow';
+var rootClassName$2Y = 'scroll-arrow-overflow';
 function ScrollArrowOverflow(props) {
   var ref = React.createRef();
   var atualRef = React.useRef(0);
@@ -12575,9 +12574,9 @@ function ScrollArrowOverflow(props) {
     };
   }, []);
   return React__default.createElement("div", {
-    className: useMergedClassNames([rootClassName$2V, props.arrows])
+    className: useMergedClassNames([rootClassName$2Y, props.arrows])
   }, React__default.createElement("div", {
-    className: rootClassName$2V + "-navigation"
+    className: rootClassName$2Y + "-navigation"
   }, React__default.createElement(IconButton$1, {
     disabled: start,
     icon: React__default.createElement(CircleArrowLeft, null),
@@ -12592,7 +12591,7 @@ function ScrollArrowOverflow(props) {
     }
   })), React__default.createElement("div", {
     ref: ref,
-    className: rootClassName$2V + "-overflow"
+    className: rootClassName$2Y + "-overflow"
   }, props.children));
 }
 ScrollArrowOverflow.defaultProps = {
@@ -12601,26 +12600,26 @@ ScrollArrowOverflow.defaultProps = {
 };
 var ScrollArrowOverflow$1 = React.memo(ScrollArrowOverflow);
 
-var rootClassName$2W = 'hour-events';
+var rootClassName$2Z = 'hour-events';
 function HourEvents(props) {
   var _props$language, _props$language2, _props$events, _props$events2, _props$language3, _props$events3;
   var _useState = React.useState(props.defaultOpened),
     opened = _useState[0],
     setOpened = _useState[1];
   return React__default.createElement("div", {
-    className: rootClassName$2W
+    className: rootClassName$2Z
   }, React__default.createElement("div", {
-    className: rootClassName$2W + "-first-line"
+    className: rootClassName$2Z + "-first-line"
   }, React__default.createElement("div", {
-    className: rootClassName$2W + "-hour"
+    className: rootClassName$2Z + "-hour"
   }, props.hour), React__default.createElement("div", {
-    className: rootClassName$2W + "-line"
+    className: rootClassName$2Z + "-line"
   }), !props.events || !props.events.length ? React__default.createElement("div", {
-    className: rootClassName$2W + "-no-events nunito"
+    className: rootClassName$2Z + "-no-events nunito"
   }, (_props$language = props.language) === null || _props$language === void 0 ? void 0 : _props$language.noEvent) : React__default.createElement("div", {
-    className: rootClassName$2W + "-counter nunito"
+    className: rootClassName$2Z + "-counter nunito"
   }, (_props$language2 = props.language) === null || _props$language2 === void 0 ? void 0 : _props$language2.events((_props$events = props.events) === null || _props$events === void 0 ? void 0 : _props$events.length))), (_props$events2 = props.events) !== null && _props$events2 !== void 0 && _props$events2.length ? React__default.createElement(React.Fragment, null, React__default.createElement("div", {
-    className: rootClassName$2W + "-toggle"
+    className: rootClassName$2Z + "-toggle"
   }, React__default.createElement(Button$1, {
     theme: exports.ButtonThemes.DefaultPrimary,
     onClick: function onClick() {
@@ -12655,7 +12654,7 @@ HourEvents.defaultProps = {
 };
 var HourEvents$1 = React.memo(HourEvents);
 
-var rootClassName$2X = 'inline-month-picker';
+var rootClassName$2_ = 'inline-month-picker';
 function InlineMonthPicker(props) {
   var _props$labelGen;
   var d = new Date(props.value.getTime());
@@ -12667,13 +12666,13 @@ function InlineMonthPicker(props) {
     }
   };
   return React__default.createElement("div", {
-    className: rootClassName$2X
+    className: rootClassName$2_
   }, React__default.createElement("div", {
-    className: rootClassName$2X + "-icon"
+    className: rootClassName$2_ + "-icon"
   }, React__default.createElement(CalendarCheckIcon, null)), React__default.createElement("div", {
-    className: rootClassName$2X + "-label"
+    className: rootClassName$2_ + "-label"
   }, (_props$labelGen = props.labelGen) === null || _props$labelGen === void 0 ? void 0 : _props$labelGen.call(props, props.value)), React__default.createElement("div", {
-    className: rootClassName$2X + "-actions"
+    className: rootClassName$2_ + "-actions"
   }, React__default.createElement(IconButton$1, {
     icon: React__default.createElement(ChevronArrowLeftIcon, null),
     onClick: function onClick() {
@@ -12699,7 +12698,113 @@ InlineMonthPicker.defaultProps = {
 };
 var InlineMonthPicker$1 = React.memo(InlineMonthPicker);
 
-var rootClassName$2Y = 'qrcode';
+var rootClassName$2$ = 'component-notification-panel';
+function NotificationPanel(_ref) {
+  var opened = _ref.opened,
+    setOpened = _ref.setOpened,
+    icon = _ref.children,
+    _ref$notifications = _ref.notifications,
+    notifications = _ref$notifications === void 0 ? [] : _ref$notifications,
+    title = _ref.title,
+    settingsButton = _ref.settingsButton,
+    loading = _ref.loading,
+    paginator = _ref.paginator;
+  var _useState = React.useState(null),
+    panelRef = _useState[0],
+    setPanelRef = _useState[1];
+  var _useState2 = React.useState(null),
+    anchorRef = _useState2[0],
+    setAnchorRef = _useState2[1];
+  var headerRef = React__default.createRef();
+  var footerRef = React__default.createRef();
+  var bodyRef = React__default.createRef();
+  React.useLayoutEffect(function () {
+    var _headerRef$current$cl, _headerRef$current, _footerRef$current$cl, _footerRef$current, _bodyRef$current;
+    var mh = panelRef === null || panelRef === void 0 ? void 0 : panelRef.style.maxHeight;
+    var headerHeight = (_headerRef$current$cl = (_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.clientHeight) != null ? _headerRef$current$cl : 0;
+    var footerHeight = (_footerRef$current$cl = (_footerRef$current = footerRef.current) === null || _footerRef$current === void 0 ? void 0 : _footerRef$current.clientHeight) != null ? _footerRef$current$cl : 0;
+    (_bodyRef$current = bodyRef.current) === null || _bodyRef$current === void 0 ? void 0 : _bodyRef$current.style.setProperty('max-height', mh && parseFloat(mh) > 20 ? parseFloat(mh) - headerHeight - footerHeight - 20 + "px" : '80vh');
+  }, [bodyRef, footerRef, headerRef, panelRef === null || panelRef === void 0 ? void 0 : panelRef.style.maxHeight]);
+  var _useFloatingPanel = useFloatingPanel({
+      stateOpened: [opened, setOpened],
+      elements: {
+        floating: panelRef,
+        reference: anchorRef
+      },
+      strategy: 'fixed',
+      matchWidth: false,
+      placement: 'bottom-end',
+      offset: 4
+    }),
+    isMounted = _useFloatingPanel.isMounted,
+    panelStyles = _useFloatingPanel.panelStyles;
+  useEvent([{
+    event: 'keydown',
+    handler: function handler(e) {
+      if (opened && 'key' in e && e.key === 'Escape') {
+        setOpened(false);
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }
+  }]);
+  useOutsideClick([{
+    current: panelRef
+  }, {
+    current: anchorRef
+  }], function (isInside) {
+    if (opened && !isInside) setOpened(false);
+  });
+  return React__default.createElement(React.Fragment, null, React__default.createElement("div", {
+    ref: function ref(e) {
+      return setAnchorRef(e);
+    }
+  }, icon), isMounted && React__default.createElement("div", {
+    ref: function ref(e) {
+      return setPanelRef(e);
+    },
+    className: rootClassName$2$,
+    style: _extends({}, panelStyles)
+  }, React__default.createElement("div", {
+    className: rootClassName$2$ + "-header",
+    ref: headerRef
+  }, React__default.createElement(Bell16Icon, {
+    className: rootClassName$2$ + "-header-icon"
+  }), React__default.createElement("div", {
+    className: rootClassName$2$ + "-header-title"
+  }, title), loading && React__default.createElement(PercentLoaderIcon, {
+    indefinido: true,
+    className: rootClassName$2$ + "-header-icon"
+  }), settingsButton), React__default.createElement("div", {
+    className: rootClassName$2$ + "-body scroll-white",
+    ref: bodyRef
+  }, notifications.map(function (n, i) {
+    return React__default.createElement("div", {
+      key: n.text + "-" + i,
+      className: rootClassName$2$ + "-noti",
+      onClick: n.onClick
+    }, React__default.createElement("div", {
+      className: rootClassName$2$ + "-noti-left"
+    }, React__default.createElement("div", {
+      className: rootClassName$2$ + "-noti-head"
+    }, n.alert && React__default.createElement("span", {
+      className: rootClassName$2$ + "-noti-alert"
+    }), React__default.createElement("div", {
+      className: rootClassName$2$ + "-noti-title"
+    }, n.title)), n.text && React__default.createElement("div", {
+      className: rootClassName$2$ + "-noti-text"
+    }, n.text), n.date && React__default.createElement("div", {
+      className: rootClassName$2$ + "-noti-date"
+    }, n.date)), React__default.createElement("div", {
+      className: rootClassName$2$ + "-noti-right"
+    }, React__default.createElement(CircleArrowRight, null)));
+  })), Boolean(paginator) && React__default.createElement("div", {
+    className: rootClassName$2$ + "-footer",
+    ref: footerRef
+  }, paginator)));
+}
+
+var rootClassName$30 = 'qrcode';
 function QRCode(props) {
   var ref = React.createRef();
   React.useEffect(function () {
@@ -12718,7 +12823,7 @@ function QRCode(props) {
     });
   }, [props, ref]);
   var className = React.useMemo(function () {
-    return getMergedClassNames([rootClassName$2Y, props.button ? 'button' : '']);
+    return getMergedClassNames([rootClassName$30, props.button ? 'button' : '']);
   }, [props.button]);
   return React__default.createElement("div", {
     className: className,
@@ -12739,10 +12844,10 @@ QRCode.defaultProps = {
 };
 var QRCode$1 = React.memo(QRCode);
 
-var rootClassName$2Z = 'icon-component';
+var rootClassName$31 = 'icon-component';
 var DecreaseIcon = function DecreaseIcon() {
   return React__default.createElement("svg", {
-    className: rootClassName$2Z,
+    className: rootClassName$31,
     viewBox: '0 0 24 24',
     xmlns: 'http://www.w3.org/2000/svg'
   }, React__default.createElement("path", {
@@ -12753,12 +12858,12 @@ var DecreaseIcon = function DecreaseIcon() {
   }));
 };
 
-var _excluded$j = ["type"];
-var rootClassName$2_ = 'component-table-left-checkbox-with-label';
+var _excluded$s = ["type"];
+var rootClassName$32 = 'component-table-left-checkbox-with-label';
 var LeftControlWithLabel = function LeftControlWithLabel(_ref) {
   var _props$spanProps2, _props$spanProps3;
   var type = _ref.type,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var style = React.useMemo(function () {
     var _props$spanProps$styl, _props$spanProps;
     var style = _extends({
@@ -12773,13 +12878,13 @@ var LeftControlWithLabel = function LeftControlWithLabel(_ref) {
     return style;
   }, [props.anchorLabelToCheckbox, props.disabled, props.justifyContent, props.removeUserSelect, props.spanProps]);
   return React__default.createElement("div", {
-    className: getMergedClassNames([rootClassName$2_, props.w100 ? 'w-100' : ''])
+    className: getMergedClassNames([rootClassName$32, props.w100 ? 'w-100' : ''])
   }, React__default.createElement("span", {
-    className: rootClassName$2_ + "-checkbox-wrapper",
+    className: rootClassName$32 + "-checkbox-wrapper",
     "tooltip-position": props['tooltip-position'],
     "tooltip-text": props['tooltip-text']
   }, type === 'addRemove' ? React__default.createElement(IconButton$1, {
-    className: getMergedClassNames([rootClassName$2_ + "-add-remove-button", props.value ? rootClassName$2_ + "-danger" : '']),
+    className: getMergedClassNames([rootClassName$32 + "-add-remove-button", props.value ? rootClassName$32 + "-danger" : '']),
     icon: props.value ? React__default.createElement(DecreaseIcon, null) : React__default.createElement(AddIcon, null),
     disabled: props.disabled,
     onClick: function onClick(evt) {
@@ -12793,7 +12898,7 @@ var LeftControlWithLabel = function LeftControlWithLabel(_ref) {
     onChange: props.onChange,
     theme: props.theme
   })), React__default.createElement("span", Object.assign({}, (_props$spanProps2 = props.spanProps) != null ? _props$spanProps2 : {}, {
-    className: getMergedClassNames([rootClassName$2_ + "-label-wrapper", ((_props$spanProps3 = props.spanProps) === null || _props$spanProps3 === void 0 ? void 0 : _props$spanProps3.className) || '']),
+    className: getMergedClassNames([rootClassName$32 + "-label-wrapper", ((_props$spanProps3 = props.spanProps) === null || _props$spanProps3 === void 0 ? void 0 : _props$spanProps3.className) || '']),
     style: style,
     onClick: function onClick(evt) {
       var _props$spanProps4, _props$spanProps4$onC;
@@ -12806,7 +12911,7 @@ var LeftControlWithLabel = function LeftControlWithLabel(_ref) {
   }), props.label));
 };
 
-var rootClassName$2$ = 'tooltip-element';
+var rootClassName$33 = 'tooltip-element';
 function TooltipElement(_ref) {
   var label = _ref.label,
     _ref$placement = _ref.placement,
@@ -12865,14 +12970,14 @@ function TooltipElement(_ref) {
     isMounted = _useTransitionStyles.isMounted,
     transitionStyles = _useTransitionStyles.styles;
   return React__default.createElement(React.Fragment, null, React__default.createElement("div", Object.assign({
-    className: rootClassName$2$ + "-reference",
+    className: rootClassName$33 + "-reference",
     ref: refs.setReference
   }, getReferenceProps(wrapperProps)), children), React__default.createElement(react.FloatingPortal, null, isMounted && React__default.createElement("div", Object.assign({
-    className: rootClassName$2$ + "-tooltip",
+    className: rootClassName$33 + "-tooltip",
     ref: refs.setFloating,
     style: _extends({}, floatingStyles, transitionStyles)
   }, getFloatingProps()), React__default.createElement("span", {
-    className: rootClassName$2$ + "-label"
+    className: rootClassName$33 + "-label"
   }, label), React__default.createElement(react.FloatingArrow, {
     ref: arrowRef,
     context: context,
@@ -12880,8 +12985,8 @@ function TooltipElement(_ref) {
   }))));
 }
 
-var _excluded$k = ["className", "variant", "color", "focus", "style", "alignment", "format", "dangerouslySetInnerHTML", "children"];
-var rootClassName$30 = 'typography';
+var _excluded$t = ["className", "variant", "color", "focus", "style", "alignment", "format", "dangerouslySetInnerHTML", "children"];
+var rootClassName$34 = 'typography';
 var Typography = React.forwardRef(function (_ref, ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
@@ -12900,8 +13005,8 @@ var Typography = React.forwardRef(function (_ref, ref) {
     } : _ref$format,
     dangerouslySetInnerHTML = _ref.dangerouslySetInnerHTML,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
-  var classNames = useMergedClassNames([rootClassName$30 + "-tp", focus ? rootClassName$30 + "-focus" : '', color, variant, className]);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+  var classNames = useMergedClassNames([rootClassName$34 + "-tp", focus ? rootClassName$34 + "-focus" : '', color, variant, className]);
   var tag = React.useMemo(function () {
     switch (variant) {
       case 'body':
@@ -43965,7 +44070,7 @@ function useHTMLShare() {
   };
 }
 
-var rootClassName$31 = 'comp-modal-manager';
+var rootClassName$35 = 'comp-modal-manager';
 var maskRootClassName$1 = 'component-modal-mask';
 var hackFocus$1 = function hackFocus() {
   var tmp = document.createElement('input');
@@ -44033,13 +44138,13 @@ function useModalManager() {
   return [React__default.createElement(React__default.Fragment, {
     key: 1
   }, React__default.createElement(reactTransitionGroup.TransitionGroup, {
-    className: rootClassName$31 + "-modals"
+    className: rootClassName$35 + "-modals"
   }, arrayOfModal.map(function (obj) {
     var _obj$props2, _obj$props3;
     var ModalComponent = React__default.createElement(obj.component, obj.props);
     return React__default.createElement(reactTransitionGroup.CSSTransition, {
       timeout: 300,
-      classNames: rootClassName$31 + "-mask",
+      classNames: rootClassName$35 + "-mask",
       key: (_obj$props2 = obj.props) === null || _obj$props2 === void 0 ? void 0 : _obj$props2.modalKey,
       unmountOnExit: true
     }, React__default.createElement(ModalMask, {
@@ -44310,7 +44415,7 @@ function useTimeElapsed(timeLeftInSeconds, callBackZero) {
   return timeToReturn;
 }
 
-var rootClassName$32 = 'comp-toast-manager';
+var rootClassName$36 = 'comp-toast-manager';
 var count$1 = 0;
 function useToastManager(props) {
   var _props$max;
@@ -44330,6 +44435,7 @@ function useToastManager(props) {
       return a.id !== id;
     });
     setArrayOfToast(arr);
+    toastsRef.current = arr;
   };
   var showToast = React.useCallback(function (toast) {
     var id = "toaster-" + count$1;
@@ -44355,17 +44461,17 @@ function useToastManager(props) {
     toastsRef.current = [];
   }, []);
   var classNames = React.useMemo(function () {
-    return getMergedClassNames([rootClassName$32 + "-toasts", rootClassName$32 + "-" + verticalPosition, rootClassName$32 + "-" + horizontalPosition, reverse ? rootClassName$32 + "-reverse" : '', animateSize ? rootClassName$32 + "-animate-size" : '']);
+    return getMergedClassNames([rootClassName$36 + "-toasts", rootClassName$36 + "-" + verticalPosition, rootClassName$36 + "-" + horizontalPosition, reverse ? rootClassName$36 + "-reverse" : '', animateSize ? rootClassName$36 + "-animate-size" : '']);
   }, [reverse, animateSize, horizontalPosition, verticalPosition]);
   React.useLayoutEffect(function () {
-    var wrapper = document.querySelector("." + rootClassName$32 + "-toasts");
+    var wrapper = document.querySelector("." + rootClassName$36 + "-toasts");
     if (wrapper && wrapper.childElementCount > 0) {
       var somaDasAlturas = 0;
       if (verticalPosition === 'top' && !reverse) {
         somaDasAlturas = 12;
         for (var i = 0; i < wrapper.children.length; i++) {
           var el = wrapper.children[i];
-          if (!el.classList.contains(rootClassName$32 + "-toast-exit")) {
+          if (!el.classList.contains(rootClassName$36 + "-toast-exit")) {
             el.style.transform = "translateY(" + somaDasAlturas + "px)";
             somaDasAlturas += el.getBoundingClientRect().height + 12;
           }
@@ -44373,7 +44479,7 @@ function useToastManager(props) {
       } else if (verticalPosition === 'top') {
         for (var _i = wrapper.children.length - 1; _i >= 0; _i--) {
           var _el = wrapper.children[_i];
-          if (!_el.classList.contains(rootClassName$32 + "-toast-exit")) {
+          if (!_el.classList.contains(rootClassName$36 + "-toast-exit")) {
             somaDasAlturas += _el.getBoundingClientRect().height + 12;
             _el.style.transform = "translateY(" + somaDasAlturas + "px)";
           }
@@ -44381,7 +44487,7 @@ function useToastManager(props) {
       } else if (verticalPosition === 'bottom' && !reverse) {
         for (var _i2 = 0; _i2 < wrapper.children.length; _i2++) {
           var _el2 = wrapper.children[_i2];
-          if (!_el2.classList.contains(rootClassName$32 + "-toast-exit")) {
+          if (!_el2.classList.contains(rootClassName$36 + "-toast-exit")) {
             somaDasAlturas += _el2.getBoundingClientRect().height + 12;
             _el2.style.transform = "translateY(-" + somaDasAlturas + "px)";
           }
@@ -44390,7 +44496,7 @@ function useToastManager(props) {
         somaDasAlturas = 12;
         for (var _i3 = wrapper.children.length - 1; _i3 >= 0; _i3--) {
           var _el3 = wrapper.children[_i3];
-          if (!_el3.classList.contains(rootClassName$32 + "-toast-exit")) {
+          if (!_el3.classList.contains(rootClassName$36 + "-toast-exit")) {
             _el3.style.transform = "translateY(-" + somaDasAlturas + "px)";
             somaDasAlturas += _el3.getBoundingClientRect().height + 12;
           }
@@ -44405,11 +44511,11 @@ function useToastManager(props) {
   }, arrayOfToast.map(function (toast) {
     return React__default.createElement(reactTransitionGroup.CSSTransition, {
       timeout: 300,
-      classNames: rootClassName$32 + "-toast",
+      classNames: rootClassName$36 + "-toast",
       key: toast.id,
       unmountOnExit: true
     }, React__default.createElement("div", {
-      className: rootClassName$32 + "-toastzin"
+      className: rootClassName$36 + "-toastzin"
     }, React__default.createElement(Toast, {
       theme: toast.theme,
       label: toast.label,
@@ -44437,7 +44543,7 @@ function useValidatedState(validation, initialValue) {
   return [value, setValue, validation(value)];
 }
 
-var _excluded$l = ["disabled", "language", "onConfirm", "showIcons"],
+var _excluded$u = ["disabled", "language", "onConfirm", "showIcons"],
   _excluded2 = ["disabled", "language", "onCancel", "onConfirm", "showIcons"],
   _excluded3 = ["disabled", "language", "onCancel", "onConfirm", "showIcons"];
 function AlertModal(_ref) {
@@ -44447,7 +44553,7 @@ function AlertModal(_ref) {
     onConfirm = _ref.onConfirm,
     _ref$showIcons = _ref.showIcons,
     showIcons = _ref$showIcons === void 0 ? true : _ref$showIcons,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var _useState = React.useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -44601,6 +44707,8 @@ exports.BackOfficeIcon = BackOfficeIcon;
 exports.Banner = Banner;
 exports.BarChartIcon = BarChartIcon;
 exports.BeeIcon = BeeIcon;
+exports.Bell16Icon = Bell16Icon;
+exports.BellIcon = BellIcon;
 exports.BigBlockButton = BigBlockButton;
 exports.BigPlayIcon = BigPlayIcon;
 exports.BoldIcon = BoldIcon;
@@ -44718,6 +44826,7 @@ exports.MoneyMonthLineChart = MoneyMonthLineChart;
 exports.NavigatorWithMouse = NavigatorWithMouse;
 exports.NotebookIcon = NotebookIcon;
 exports.Notification = Notification;
+exports.NotificationPanel = NotificationPanel;
 exports.OptionsIcon = OptionsIcon;
 exports.PageSubTitle = PageSubTitle;
 exports.PageTitle = PageTitle;
@@ -44746,6 +44855,7 @@ exports.ScrollArrowOverflow = ScrollArrowOverflow$1;
 exports.Search = Search$1;
 exports.SearchIcon = SearchIcon;
 exports.Select = Select$1;
+exports.Settings16Icon = Settings16Icon;
 exports.SettingsIcon = SettingsIcon;
 exports.SicrediLogo = SicrediLogo;
 exports.SquaresIcon = SquaresIcon;
@@ -44786,6 +44896,8 @@ exports.useCarouselBehaviour = useCarouselBehaviour;
 exports.useControlledTimer = useControlledTimer;
 exports.useDraggableContainer = useDraggableContainer;
 exports.useDropOpened = useDropOpened;
+exports.useEvent = useEvent;
+exports.useFloatingPanel = useFloatingPanel;
 exports.useHTMLShare = useHTMLShare;
 exports.useModalManager = useModalManager;
 exports.useOutsideClick = useOutsideClick;
@@ -44795,6 +44907,7 @@ exports.usePublicMenuList = usePublicMenuList;
 exports.useScreenSize = useScreenSize;
 exports.useScrollTo = useScrollTo;
 exports.useStorageState = useStorageState;
+exports.useSystemInfo = useSystemInfo;
 exports.useTimeElapsed = useTimeElapsed;
 exports.useToastManager = useToastManager;
 exports.useValidatedState = useValidatedState;