@startlibs/components 1.0.0-alpha-8e → 1.0.0-alpha-8b.2

package/lib/index.js

@@ -18,32 +18,30 @@ var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass')
 var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
 var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
-var reactRouterDom = require('react-router-dom');
+var router = require('@reach/router');
+var _assign = _interopDefault(require('lodash/fp/assign'));
 var core = require('@startlibs/core');
 var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
-var _assign = _interopDefault(require('lodash/fp/assign'));
 var _get = _interopDefault(require('lodash/fp/get'));
 var _objectSpread = _interopDefault(require('@babel/runtime/helpers/objectSpread'));
 var _uniqueId = _interopDefault(require('lodash/fp/uniqueId'));
 var _max = _interopDefault(require('lodash/fp/max'));
 var _identity = _interopDefault(require('lodash/fp/identity'));
 var _isString = _interopDefault(require('lodash/fp/isString'));
-var _without = _interopDefault(require('lodash/fp/without'));
 var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
 var _isObject = _interopDefault(require('lodash/fp/isObject'));
-require('@startlibs/components');
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
-var _isFunction = _interopDefault(require('lodash/fp/isFunction'));
 var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
 var _set = _interopDefault(require('lodash/fp/set'));
 var _pullAt = _interopDefault(require('lodash/fp/pullAt'));
 var _map = _interopDefault(require('lodash/fp/map'));
 var ReactDOM = _interopDefault(require('react-dom'));
+var reactHotLoader = require('react-hot-loader');
+var _isFunction = _interopDefault(require('lodash/fp/isFunction'));
 var reactIs = require('react-is');
 var mitt = _interopDefault(require('mitt'));
-require('lodash/fp');
 var _typeof = _interopDefault(require('@babel/runtime/helpers/typeof'));
-var createEmotion = _interopDefault(require('create-emotion'));
+var _without = _interopDefault(require('lodash/fp/without'));
 
 var IconComponent =
 /*#__PURE__*/
@@ -113,20 +111,19 @@ var Icon = styled__default(styled.withTheme(IconComponent)).withConfig({
   displayName: "Icon",
   componentId: "wsq54u-0"
 })(["font-family:'", "' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;", ""], function (props) {
-  var _props$theme;
-
-  return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.iconFont;
+  return props.theme.iconFont;
 }, function (props) {
   return props.clickable && "\n    cursor: pointer;\n    &:hover {\n      opacity: 0.85;\n    }\n  ";
 });
 
-var Link = reactRouterDom.Link;
+// import {Link as RouterLink} from 'react-router-dom'
+var Link = router.Link;
 
 var Loading = styled__default.div.withConfig({
   displayName: "Loading",
   componentId: "sc-5t5spc-0"
-})(["z-index:1;", " border-style:solid;border-radius:50%;flex-shrink:0;width:", "px;height:", "px;border-width:", "px;animation:spin 0.6s linear infinite;", " @keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}"], function (props) {
-  return props.white ? styled.css(["border-color:rgba(255,255,255,0.4);border-top-color:", ";"], props.color || 'rgba(255,255,255,0.9)') : styled.css(["border-color:rgba(0,0,0,0.1);border-color:", ";border-top-color:", ";"], props.color ? polished.transparentize(0.85, props.color) : polished.transparentize(0.85, utils.getColor("main")(props)), props.color || utils.getColor("main"));
+})(["z-index:1;", " border-style:solid;border-radius:50%;flex-shrink:0;width:", "px;height:", "px;border-width:", "px;animation:spin 1s linear infinite;", " @keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}"], function (props) {
+  return props.white ? "\n      border-color: rgba(255,255,255,0.4);\n      border-top-color: ".concat(props.color || 'rgba(255,255,255,0.9)', ";\n    ") : "\n      border-color: rgba(0,0,0,0.1);\n      border-top-color: ".concat(props.color || props.theme.colors.main, ";\n    ");
 }, function (props) {
   return props.size || 26;
 }, function (props) {
@@ -182,7 +179,6 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
       alpha = _ref.alpha,
       success = _ref.success,
       alert = _ref.alert,
-      warning = _ref.warning,
       highlight = _ref.highlight,
       light = _ref.light,
       hover = _ref.hover,
@@ -196,7 +192,6 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
       dashed = _ref.dashed,
       textOnly = _ref.textOnly,
       isLoading = _ref.isLoading,
-      isLoadingIcon = _ref.isLoadingIcon,
       dark = _ref.dark,
       _ref$innerAs = _ref.innerAs,
       Wrapper = _ref$innerAs === void 0 ? 'button' : _ref$innerAs,
@@ -211,7 +206,7 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
       concealed = _ref.concealed,
       concealedModule = _ref.concealedModule,
       buttonRef = _ref.buttonRef,
-      props = _objectWithoutProperties(_ref, ["type", "locked", "color", "alpha", "success", "alert", "warning", "highlight", "light", "hover", "white", "icon", "onlyIcon", "small", "withDropdown", "onlyDropdown", "outline", "dashed", "textOnly", "isLoading", "isLoadingIcon", "dark", "innerAs", "className", "children", "rounded", "tabIndex", "focused", "noFocus", "colorSet", "concealed", "concealedModule", "buttonRef"]);
+      props = _objectWithoutProperties(_ref, ["type", "locked", "color", "alpha", "success", "alert", "highlight", "light", "hover", "white", "icon", "onlyIcon", "small", "withDropdown", "onlyDropdown", "outline", "dashed", "textOnly", "isLoading", "dark", "innerAs", "className", "children", "rounded", "tabIndex", "focused", "noFocus", "colorSet", "concealed", "concealedModule", "buttonRef"]);
 
   return React__default.createElement(Wrapper, _extends({
     ref: ref || buttonRef,
@@ -220,16 +215,12 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
     type: Wrapper === 'button' ? type : ''
   }, props), icon && React__default.createElement(Icon, {
     icon: icon
-  }), isLoadingIcon && React__default.createElement(Loading, {
-    white: !light && !outline && !dashed && !white,
-    size: small ? '10' : '18',
-    borderWidth: small ? '2' : '3'
   }), (withDropdown || onlyDropdown) && !locked && React__default.createElement(DropdownIcon, {
     icon: "arrow-down"
   }), locked && React__default.createElement(LockIcon, {
     icon: "lock"
   }), children, isLoading && React__default.createElement(Loading, {
-    white: !light && !outline && !dashed && !white,
+    white: !outline || !dashed || !white,
     absolute: true,
     size: small && '16',
     borderWidth: small && '3'
@@ -237,7 +228,7 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
 })).withConfig({
   displayName: "Button",
   componentId: "qe54pl-1"
-})(["vertical-align:top;border:0;font-size:12px;border-radius:", ";background:", ";color:white;min-width:8rem;font-weight:500;display:inline-block;line-height:16px;text-align:center;padding:10px 1.25rem;outline:none;cursor:pointer;position:relative;text-decoration:none;user-select:none;flex-shrink:0;:hover{background:", ";}:active{background:", ";}", " ", " + .styled-button{margin-left:1rem;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
+})(["vertical-align:top;border:0;font-size:12px;border-radius:", ";background:", ";color:white;min-width:8rem;font-weight:500;display:inline-block;line-height:16px;text-align:center;padding:10px 1.25rem;outline:none;cursor:pointer;position:relative;text-decoration:none;user-select:none;flex-shrink:0;:hover{background:", ";}:active{background:", ";}", " ", " + .styled-button{margin-left:1rem;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
   return props.rounded ? '100px' : '6px';
 }, utils.getColor, function (props) {
   return polished.darken(0.05, utils.getColor(props, true));
@@ -249,20 +240,12 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
   return !props.noFocus && !props.isLoading && styled.css([":focus{", "}", ""], focus, function (props) {
     return props.focused && focus;
   });
-}, function (props) {
-  return props.hasErrors && styled.css([":after{content:'';pointer-events:none;position:absolute;top:-4px;right:-4px;left:-4px;bottom:-4px;border-radius:", ";border:3px solid ", ";}"], function (props) {
-    return props.rounded ? '100px' : '9px';
-  }, function (props) {
-    return polished.transparentize(0.7, utils.getColor("alert")(props));
-  });
 }, function (props) {
   return props.icon && styled.css(["display:inline-flex;align-items:center;justify-content:center;min-width:3rem;min-height:3rem;", "{font-size:23px;margin-right:8px;margin-left:-4px;pointer-events:none;line-height:0;}"], Icon);
 }, function (props) {
   return props.onlyIcon && styled.css(["padding:0;", "{margin:0;}"], Icon);
 }, function (props) {
   return props.small && styled.css(["font-size:12px;padding:4px 1rem;min-width:2rem;min-height:2rem;", " ", ""], props.icon && styled.css(["", "{font-size:18px;margin-right:5px;margin-left:-5px;line-height:0.9;}"], Icon), props.onlyIcon && styled.css(["padding:0;", "{margin:0;}"], Icon));
-}, function (props) {
-  return props.big && styled.css(["font-size:14px;padding:13px 1.75rem;min-height:42px;"]);
 }, function (props) {
   return props.withDropdown && styled.css(["padding-right:2.25rem;text-align:left;"]);
 }, function (props) {
@@ -273,24 +256,6 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
   }, function (props) {
     return polished.darken(0.08, utils.getColor('bluishGray')(props));
   });
-}, function (props) {
-  return props.lightAlert && styled.css(["background:", ";color:", ";:hover{background:", ";}:active{background:", ";}"], function (props) {
-    return polished.transparentize(0.88, utils.getColor("alert")(props));
-  }, utils.getColor('alert'), function (props) {
-    return polished.transparentize(0.85, utils.getColor("alert")(props));
-  }, function (props) {
-    return polished.transparentize(0.82, utils.getColor("alert")(props));
-  });
-}, function (props) {
-  return props.lightWarning && styled.css(["background:", ";color:", ";:hover{background:", ";}:active{background:", ";}"], function (props) {
-    return polished.transparentize(0.84, polished.darken(0.05, utils.getColor('warning')(props)));
-  }, function (props) {
-    return polished.darken(0.05, utils.getColor('warning')(props));
-  }, function (props) {
-    return polished.transparentize(0.78, polished.darken(0.05, utils.getColor('warning')(props)));
-  }, function (props) {
-    return polished.transparentize(0.76, polished.darken(0.05, utils.getColor('warning')(props)));
-  });
 }, function (props) {
   return (props.outline || props.dashed || props.textOnly) && styled.css(["color:", ";background:none;", ",", "{color:", ";}:before{content:'';border:1px ", " ", ";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:", ";pointer-events:none;}:hover{background-color:rgba(0,0,0,0.05);}:active{background-color:rgba(0,0,0,0.08);}:focus{:before{box-shadow:0 0 0 2px rgba(0,0,0,0.1);", "}:after{content:none;}}"], props.white ? 'white' : props.highlight ? utils.getColor('main') : 'rgba(0,0,0,0.6)', Icon, DropdownIcon, props.white ? 'white' : props.highlight ? utils.getColor('main') : 'rgba(0,0,0,0.5)', props.outline ? 'solid' : props.dashed ? 'dashed' : '', props.white ? 'white' : props.highlight ? utils.getColor('main') : 'rgba(0,0,0,0.35)', props.rounded ? '100px' : '6px', props.textOnly && 'content: none;');
 }, function (props) {
@@ -299,8 +264,6 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
   return props.white && !props.outline && !props.dashed && styled.css(["color:", ";background:#FFFFFF;:hover{background:", ";}:active{background:", ";}"], utils.getColor('main'), polished.darken(0.05, '#FFFFFF'), polished.darken(0.08, '#FFFFFF'));
 }, function (props) {
   return props.isLoading && styled.css(["color:transparent !important;pointer-events:none;", "{visibility:hidden;}"], Icon);
-}, function (props) {
-  return props.isLoadingIcon && styled.css(["pointer-events:none;", "{visibility:hidden;}", "{left:10px;position:absolute;}"], Icon, Loading);
 }, utils.media.mobile(_templateObject2(), function (props) {
   return !props.small && !props.onlyIcon && styled.css(["padding:13px 1.5rem;font-size:13px;"]);
 }, function (props) {
@@ -327,29 +290,13 @@ Button.Link = function (props) {
   }));
 };
 
-var OnClickLoadingButton = function OnClickLoadingButton(_ref) {
-  var _onClick = _ref.onClick,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["onClick", "children"]);
-
-  var loading = core.useToggle();
-  return React__default.createElement(Button, _extends({
-    isLoading: loading.isOpen
-  }, props, {
-    onClick: function onClick(e) {
-      return loading.wait(_onClick(e));
-    }
-  }), children);
-};
-
 var TextButton = styled__default(function (_ref) {
   var className = _ref.className,
       isLoading = _ref.isLoading,
-      alert = _ref.alert,
       children = _ref.children,
       _ref$innerAs = _ref.innerAs,
       Wrapper = _ref$innerAs === void 0 ? 'div' : _ref$innerAs,
-      props = _objectWithoutProperties(_ref, ["className", "isLoading", "alert", "children", "innerAs"]);
+      props = _objectWithoutProperties(_ref, ["className", "isLoading", "children", "innerAs"]);
 
   return React__default.createElement(Wrapper, _extends({
     className: className
@@ -360,10 +307,8 @@ var TextButton = styled__default(function (_ref) {
 }).withConfig({
   displayName: "TextButton",
   componentId: "sc-1eydmhc-0"
-})(["display:inline-block;font-weight:500;font-size:13px;color:", ";cursor:pointer;text-decoration:none;:hover,:active{color:", ";}", "{display:inline-block;margin-left:0.25rem;vertical-align:-3px;}", " & ~ &{margin-left:1rem;}"], function (props) {
-  return props.alert ? utils.getColor('alert') : utils.getColor('main');
-}, function (props) {
-  return props.alert ? polished.darken(0.1, utils.getColor("alert")(props)) : polished.darken(0.1, utils.getColor("main")(props));
+})(["display:inline-block;font-weight:500;font-size:13px;color:", ";cursor:pointer;text-decoration:none;:hover,:active{color:", ";}", "{display:inline-block;margin-left:0.25rem;vertical-align:-3px;}", ""], utils.getColor('main'), function (props) {
+  return polished.darken(0.1, utils.getColor("main")(props));
 }, Loading, function (props) {
   return props.nowrap && "\n    white-space: nowrap;\n  ";
 });
@@ -431,12 +376,10 @@ function (_React$Component) {
         error = e.toString();
       }
 
-      if (!/bot|spider|crawl/i.test(window.navigator.userAgent)) {
-        utils.postFetcher("/log/errorBoundary", {
-          error: error,
-          info: info
-        });
-      }
+      utils.postFetcher("/log/errorBoundary", {
+        error: error,
+        info: info
+      });
     }
   }, {
     key: "render",
@@ -744,10 +687,9 @@ var hasClientRectChanged = function hasClientRectChanged(oldSnap, newSnap) {
 
 var getClientRectAnimation = function getClientRectAnimation(oldSnap, newSnap) {
   var _ref5 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-      skipTransform = _ref5.skipTransform,
-      smallJumpFix = _ref5.smallJumpFix;
+      skipTransform = _ref5.skipTransform;
 
-  if (oldSnap && newSnap && hasClientRectChanged(oldSnap, newSnap)) {
+  if (hasClientRectChanged(oldSnap, newSnap)) {
     var _oldSnap$parentStyle, _newSnap$parentStyle, _oldSnap$parentStyle2, _newSnap$parentStyle2;
 
     var node = newSnap.domNode;
@@ -770,17 +712,17 @@ var getClientRectAnimation = function getClientRectAnimation(oldSnap, newSnap) {
           paddingBottom = _window$getComputedSt4.paddingBottom;
 
       finalPadding = 'padding-bottom:' + paddingBottom + ';';
-      heightFix = "padding-bottom: ".concat(sumWithPx(deltaHeight, paddingBottom) + (smallJumpFix || 0), ";");
+      heightFix = "padding-bottom: ".concat(sumWithPx(deltaHeight, paddingBottom));
     }
 
-    var overflowFix = scrollHeight > clientHeight || scrollWidth > clientWidth ? "overflow: hidden;" : "";
+    var overflowFix = scrollHeight > clientHeight || scrollWidth > clientWidth ? "overflow: hidden" : "";
     var transform = (left !== 0 || top !== 0) && !skipTransform ? "transform: translate(".concat(left, "px,").concat(top, "px);") : '';
     var parentPaddingTopDelta = (parseInt((_oldSnap$parentStyle = oldSnap.parentStyle) === null || _oldSnap$parentStyle === void 0 ? void 0 : _oldSnap$parentStyle.paddingTop) || 0) - (parseInt((_newSnap$parentStyle = newSnap.parentStyle) === null || _newSnap$parentStyle === void 0 ? void 0 : _newSnap$parentStyle.paddingTop) || 0);
     var parentPaddingBottomDelta = (parseInt((_oldSnap$parentStyle2 = oldSnap.parentStyle) === null || _oldSnap$parentStyle2 === void 0 ? void 0 : _oldSnap$parentStyle2.paddingBottom) || 0) - (parseInt((_newSnap$parentStyle2 = newSnap.parentStyle) === null || _newSnap$parentStyle2 === void 0 ? void 0 : _newSnap$parentStyle2.paddingBottom) || 0);
     var oldMarginTop = (parseInt(oldSnap.marginTop) || 0) + parentPaddingTopDelta;
     var oldMarginBottom = (parseInt(oldSnap.marginBottom) || 0) + parentPaddingBottomDelta;
     var oldTransform = node.style.transform;
-    return [utils.oneWayAnimation("\n        ".concat(transform, "\n        ").concat(heightFix, "\n        ").concat(overflowFix, "\n        margin-top: ").concat(oldMarginTop, "px;\n        margin-bottom: ").concat(oldMarginBottom, "px;\n        width: ").concat(oldSnap.width, "px;\n        height: ").concat(Math.max(0, oldSnap.height + (smallJumpFix || 0)), "px;\n        "), "\n        ".concat(finalPadding, "\n        ").concat(oldTransform ? "transform:".concat(oldTransform, ";") : '', "\n        ").concat(overflowFix, "\n        margin-top:").concat(parseInt(newSnap.marginTop) || 0, "px;\n        margin-bottom:").concat(parseInt(newSnap.marginBottom) || 0, "px;\n        width: ").concat(newSnap.width, "px;\n        height: ").concat(Math.max(0, newSnap.height + (smallJumpFix || 0)), "px;\n        "))];
+    return [utils.oneWayAnimation("\n        ".concat(transform, "\n        ").concat(heightFix, "\n        ").concat(overflowFix, "\n        margin-top: ").concat(oldMarginTop, "px;\n        margin-bottom: ").concat(oldMarginBottom, "px;\n        width: ").concat(oldSnap.width, "px;\n        height: ").concat(oldSnap.height, "px;\n        "), "\n        ".concat(finalPadding, "\n        ").concat(oldTransform ? "transform:".concat(oldTransform) : '', "\n        ").concat(overflowFix, "\n        margin-top:").concat(newSnap.marginTop || 0, "px;\n        margin-bottom:").concat(newSnap.marginBottom || 0, "px;\n        width: ").concat(newSnap.width, "px;\n        height: ").concat(newSnap.height, "px;\n        "))];
   } else {
     return [];
   }
@@ -1341,11 +1283,7 @@ var fixPosition = function fixPosition(query, fn) {
 };
 
 var openLayers = 0;
-var fakedScrollTop = 0;
-var isFakeScrolled = function isFakeScrolled() {
-  return openLayers > 0 && fakedScrollTop > 0;
-};
-var removeWindowScroll = function removeWindowScroll(opening, keepDisabledScroll) {
+var removeWindowScroll = function removeWindowScroll(opening) {
   if (opening) {
     openLayers = Math.max(openLayers + 1, 1);
 
@@ -1363,11 +1301,6 @@ var removeWindowScroll = function removeWindowScroll(opening, keepDisabledScroll
   var finishReset = function finishReset(marginRight, scrollTop) {
     // body.style.paddingRight = marginRight + 'px'
     window.scroll(window.scrollLeft || window.scrollX || 0, scrollTop);
-
-    if (keepDisabledScroll) {
-      return;
-    }
-
     fixPosition('.navbar,.JS-fix-dialog-scroll', function (n) {
       if (opening) {
         var _window$getComputedSt = window.getComputedStyle(n),
@@ -1399,29 +1332,15 @@ var removeWindowScroll = function removeWindowScroll(opening, keepDisabledScroll
 
   if (opening) {
     var scrollTop = window.pageYOffset;
-    fakedScrollTop = scrollTop;
-
-    if (keepDisabledScroll) {
-      body.style.overflowY = 'scroll';
-    } else {
-      body.style.overflow = 'hidden';
-    }
-
+    body.style.overflow = 'hidden';
     var marginRight = body.offsetWidth - bodyWidth;
     body.style.position = 'fixed';
     body.style.top = -scrollTop + "px";
     body.style.left = '0';
-
-    if (!keepDisabledScroll) {
-      body.style.right = marginRight + 'px';
-    } else {
-      body.style.right = '0';
-    }
-
+    body.style.right = marginRight + 'px';
     finishReset(marginRight, scrollTop);
   } else {
-    fakedScrollTop = 0; // setTimeout(() => {
-
+    // setTimeout(() => {
     var _scrollTop = parseInt(body.style.top);
 
     body.style.overflow = '';
@@ -1601,9 +1520,9 @@ var DialogContainer = React.forwardRef(function (_ref, forwardedRef) {
   };
 
   var checkKey = function checkKey(e) {
-    var _e$target, _e$target$className, _e$target2;
+    var _e$target, _e$target$className;
 
-    if (!isTop() || skipKeys || ((_e$target = e.target) === null || _e$target === void 0 ? void 0 : (_e$target$className = _e$target.className) === null || _e$target$className === void 0 ? void 0 : _e$target$className.indexOf("JS-dialog-skip-evts")) >= 0 || ((_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.closest(".JS-dialog-skip-evts"))) return;
+    if (!isTop() || skipKeys || ((_e$target = e.target) === null || _e$target === void 0 ? void 0 : (_e$target$className = _e$target.className) === null || _e$target$className === void 0 ? void 0 : _e$target$className.indexOf("JS-dialog-skip-evts")) >= 0) return;
 
     if (modal.current && e.shiftKey && e.keyCode === 9 && modal.current.querySelector('[tabindex]') === document.activeElement) {
       e.preventDefault();
@@ -1798,7 +1717,7 @@ var fixDoubledLastMarginBottom = function fixDoubledLastMarginBottom(children) {
     return processChild(children, 0);
   }
 
-  while ((!children[last] || children[last] && children[last].type && children[last].type.displayName === "Errors") && last > 0) {
+  while (!children[last] || children[last] && children[last].type && children[last].type.displayName === "Errors") {
     last--;
   }
 
@@ -1890,192 +1809,8 @@ var LoadingDiv = function LoadingDiv(_ref2) {
   }, children) : children);
 };
 
-var TOP_TRIGGER = function TOP_TRIGGER(posInfo, refInfo) {
-  // Started sticking.
-  if (posInfo.bottom < refInfo.top) {
-    return true;
-  } // Stopped sticking.
-
-
-  if (posInfo.bottom >= refInfo.top && posInfo.bottom < refInfo.bottom) {
-    return false;
-  }
-};
-
-var BOTTOM_TRIGGER = function BOTTOM_TRIGGER(posInfo, refInfo) {
-  // Started sticking.
-  if (posInfo.top > refInfo.bottom) {
-    return true;
-  }
-
-  if (posInfo.top <= refInfo.bottom && posInfo.top > refInfo.top) {
-    return false;
-  }
-};
-
-var SentinelStyle = styled__default.div.withConfig({
-  displayName: "willUseIsSticky__SentinelStyle",
-  componentId: "sc-1nsyca-0"
-})(["position:absolute;visibility:hidden;height:1px;width:1px;", ""], function (props) {
-  return props.addCss;
-});
-var willUseIsSticky = function willUseIsSticky() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var _willUseSharedCallbac = core.willUseSharedCallback(),
-      _willUseSharedCallbac2 = _slicedToArray(_willUseSharedCallbac, 2),
-      useRegister = _willUseSharedCallbac2[0],
-      onChange = _willUseSharedCallbac2[1];
-
-  var _willUseSharedState = core.willUseSharedState(),
-      _willUseSharedState2 = _slicedToArray(_willUseSharedState, 3),
-      useSharedIsSticky = _willUseSharedState2[0],
-      setSharedIsSticky = _willUseSharedState2[2];
-
-  var createObserver = function createObserver(root) {
-    return window.IntersectionObserver ? new window.IntersectionObserver(function (records, observer) {
-      var _iteratorNormalCompletion = true;
-      var _didIteratorError = false;
-      var _iteratorError = undefined;
-
-      try {
-        for (var _iterator = records[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          var record = _step.value;
-          var targetInfo = record.boundingClientRect;
-          var rootBoundsInfo = record.rootBounds;
-
-          if (!rootBoundsInfo) {
-            return;
-          }
-
-          onChange(targetInfo, rootBoundsInfo, record.target, record.isIntersecting);
-        }
-      } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator.return != null) {
-            _iterator.return();
-          }
-        } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
-          }
-        }
-      }
-    }, _objectSpread({
-      root: root
-    }, options)) : {
-      observe: _identity,
-      unobserve: _identity
-    };
-  };
-
-  var observerMap = new Map();
-
-  var getObserver = function getObserver() {
-    var root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var result = observerMap.get(root);
-
-    if (result) {
-      return result;
-    }
-
-    var observer = createObserver(root);
-    observerMap.set(root, observer);
-    return observer;
-  };
-
-  var activeObserved = [];
-
-  var resetObservers = function resetObservers() {
-    var root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var observer = getObserver(root);
-    activeObserved.forEach(function (observed) {
-      observer.unobserve(observed);
-      observer.observe(observed);
-    });
-  };
-
-  var WithIsSticky = React__default.forwardRef(function (_ref, ref) {
-    var className = _ref.className,
-        id = _ref.id,
-        css = _ref.css,
-        children = _ref.children,
-        bottom = _ref.bottom,
-        root = _ref.root,
-        intersection = _ref.intersection,
-        onChange = _ref.onChange;
-    var ensuredRef = core.useEnsureRef(ref);
-
-    var _useState = React.useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        isSticky = _useState2[0],
-        setIsSticky = _useState2[1];
-
-    useRegister(function (posInfo, refInfo, target, isIntersecting) {
-      if (ensuredRef.current === target) {
-        var value = intersection ? isIntersecting : bottom ? BOTTOM_TRIGGER(posInfo, refInfo) : TOP_TRIGGER(posInfo, refInfo);
-
-        if (value !== undefined) {
-          setIsSticky(value);
-          utils.callIfFunction(onChange, value);
-
-          if (!id) {
-            setSharedIsSticky(value);
-          } else if (value) {
-            setSharedIsSticky(id);
-          }
-        }
-      }
-    });
-    React.useEffect(function () {
-      setIsSticky(false);
-      getObserver(utils.callIfFunction(root)).observe(ensuredRef.current);
-      activeObserved = activeObserved.concat(ensuredRef.current);
-      return function () {
-        // observer.unobserve(ref.current)
-        activeObserved = _without([ensuredRef.current], activeObserved);
-      };
-    }, []);
-
-    var renderSentinel = function renderSentinel() {
-      var css = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-      return React__default.createElement(SentinelStyle, {
-        addCss: css,
-        className: className,
-        ref: ensuredRef
-      });
-    };
-
-    return children ? children(renderSentinel, isSticky) : renderSentinel(css);
-  });
-  return [WithIsSticky, useSharedIsSticky, resetObservers];
-};
-
-function _templateObject10() {
-  var data = _taggedTemplateLiteral(["\n    padding: 1.5rem 1.5rem 1.5rem;\n    max-width: 100%;\n    ", ";\n  "]);
-
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = _taggedTemplateLiteral(["\n    padding: 1.5rem 1.5rem 0;\n    margin: -1.5rem;\n  "]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
 function _templateObject8() {
-  var data = _taggedTemplateLiteral(["\n    padding: 1.5rem;\n    margin: -1.5rem;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding: 1.5rem 1.5rem 1.5rem;\n    max-width: 100%;\n    ", ";\n  "]);
 
   _templateObject8 = function _templateObject8() {
     return data;
@@ -2085,7 +1820,7 @@ function _templateObject8() {
 }
 
 function _templateObject7() {
-  var data = _taggedTemplateLiteral(["\n      ", " {\n        min-width: unset;\n        padding-left: 1rem;\n        padding-right: 1rem;\n      }\n    "]);
+  var data = _taggedTemplateLiteral(["\n    padding: 1.5rem 1.5rem 0;\n    margin: -1.5rem;\n  "]);
 
   _templateObject7 = function _templateObject7() {
     return data;
@@ -2095,7 +1830,7 @@ function _templateObject7() {
 }
 
 function _templateObject6() {
-  var data = _taggedTemplateLiteral(["\n        bottom: -0.5rem;\n        padding: 0.75rem 1.5rem;\n        margin-bottom: -0.75rem;\n        margin-left: -1.5rem;\n        margin-right: -1.5rem;\n      "]);
+  var data = _taggedTemplateLiteral(["\n    padding: 1.5rem;\n    margin: -1.5rem;\n  "]);
 
   _templateObject6 = function _templateObject6() {
     return data;
@@ -2105,7 +1840,7 @@ function _templateObject6() {
 }
 
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n        bottom: -3rem;\n        margin-left: -2rem;\n        margin-right: -2rem;\n        margin-bottom: -1rem;\n        padding: 1rem 2rem;\n      "]);
+  var data = _taggedTemplateLiteral(["\n      ", " {\n        min-width: unset;\n        padding-left: 1rem;\n        padding-right: 1rem;\n      }\n    "]);
 
   _templateObject5 = function _templateObject5() {
     return data;
@@ -2176,25 +1911,19 @@ var DialogContent = styled__default(function (props) {
 }).withConfig({
   displayName: "Dialog__DialogContent",
   componentId: "gai4ey-3"
-})(["outline:none;width:100%;position:relative;min-height:5rem;", " ", " p{font-size:14px;}"], function (props) {
+})(["outline:none;width:100%;position:relative;min-height:5rem;", " ", " p{font-size:13px;}.expired-date{font-size:12px;color:", ";}"], function (props) {
   return props.icon && styled.css(["padding-right:8rem;min-height:6rem;"]);
 }, function (props) {
   return props.illustration && styled.css(["padding-right:15rem;", ""], utils.media.mobile(_templateObject3$1()));
-});
+}, utils.getColor('alert'));
 var DialogTitle = styled__default.h2.withConfig({
   displayName: "Dialog__DialogTitle",
   componentId: "gai4ey-4"
-})(["margin-bottom:1rem;padding-bottom:1rem;", " ", ""], function (props) {
-  return props.fixTitleMargin && "\n      padding-bottom: 0;\n    ";
-}, utils.media.mobile(_templateObject4()));
+})(["margin-bottom:1rem;padding-bottom:1rem;", ""], utils.media.mobile(_templateObject4()));
 var DialogFooter = styled__default.div.withConfig({
   displayName: "Dialog__DialogFooter",
   componentId: "gai4ey-5"
-})(["display:block;padding-top:1rem;margin-top:1rem;align-items:stretch;text-align:right;", " ", ""], function (props) {
-  return props.sticky && styled.css(["position:sticky;background:white;width:inherit;z-index:50;", " ", " ", ""], utils.media.desktop(_templateObject5()), utils.media.mobile(_templateObject6()), function (props) {
-    return props.isSticky && "\n        box-shadow: 0 0px 2px 0 rgba(0,0,0,0.1), 0 0px 5px 1px rgba(0,0,0,0.15);\n      ";
-  });
-}, utils.media.max(370)(_templateObject7(), Button));
+})(["width:100%;display:block;padding-top:1rem;margin-top:1rem;align-items:stretch;text-align:right;", ""], utils.media.max(370)(_templateObject5(), Button));
 var FooterAuxiliaryContainer = styled__default.div.withConfig({
   displayName: "Dialog__FooterAuxiliaryContainer",
   componentId: "gai4ey-6"
@@ -2203,17 +1932,15 @@ var FooterAuxiliaryContainer = styled__default.div.withConfig({
 var DialogContentWrapper = styled__default(LoadingDiv).withConfig({
   displayName: "Dialog__DialogContentWrapper",
   componentId: "gai4ey-7"
-})(["padding:2rem;margin:-2rem;", ""], utils.media.mobile(_templateObject8()));
+})(["padding:2rem;margin:-2rem;", ""], utils.media.mobile(_templateObject6()));
 var DialogAlwaysVisibleDiv = styled__default.div.withConfig({
   displayName: "Dialog__DialogAlwaysVisibleDiv",
   componentId: "gai4ey-8"
-})(["padding:2rem 2rem 0;margin:-2rem;", ""], utils.media.mobile(_templateObject9())); // END
+})(["padding:2rem 2rem 0;margin:-2rem;", ""], utils.media.mobile(_templateObject7())); // END
 
 var Dialog = styled__default(React__default.forwardRef(function (_ref, outerRef) {
   var className = _ref.className,
       skipWrap = _ref.skipWrap,
-      stickyFooter = _ref.stickyFooter,
-      fixTitleMargin = _ref.fixTitleMargin,
       skipCloseIcon = _ref.skipCloseIcon,
       isLoading = _ref.isLoading,
       footer = _ref.footer,
@@ -2225,21 +1952,15 @@ var Dialog = styled__default(React__default.forwardRef(function (_ref, outerRef)
       auxiliarActions = _ref.auxiliarActions,
       _ref$container = _ref.container,
       container = _ref$container === void 0 ? true : _ref$container,
-      props = _objectWithoutProperties(_ref, ["className", "skipWrap", "stickyFooter", "fixTitleMargin", "skipCloseIcon", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container"]);
+      props = _objectWithoutProperties(_ref, ["className", "skipWrap", "skipCloseIcon", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container"]);
 
   var ref = core.useEnsureRef(outerRef);
 
-  var _willUseIsSticky = willUseIsSticky(),
-      _willUseIsSticky2 = _slicedToArray(_willUseIsSticky, 1),
-      WithIsSticky = _willUseIsSticky2[0];
-
   var alwaysVisible = function alwaysVisible(confirmCloseDialog) {
     return React__default.createElement(React__default.Fragment, null, props.closeDialog && !skipCloseIcon && React__default.createElement(CloseIcon, {
       className: "JS-dialog-close",
       onClick: confirmCloseDialog
-    }), title && React__default.createElement(DialogTitle, {
-      fixTitleMargin: true
-    }, utils.callIfFunction(title)));
+    }), title && React__default.createElement(DialogTitle, null, utils.callIfFunction(title)));
   };
 
   var content = React__default.createElement(React__default.Fragment, null, Content && React__default.createElement(DialogContent, {
@@ -2248,14 +1969,7 @@ var Dialog = styled__default(React__default.forwardRef(function (_ref, outerRef)
   }, utils.callIfFunction(Content)), !Content && children && React__default.createElement(DialogContent, {
     icon: icon,
     illustration: illustration
-  }, utils.callIfFunction(children)), Content && children && utils.callIfFunction(children), footer && React__default.createElement(WithIsSticky, {
-    bottom: true
-  }, function (sentinel, isSticky) {
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement(DialogFooter, {
-      isSticky: isSticky,
-      sticky: stickyFooter
-    }, auxiliarActions && React__default.createElement(FooterAuxiliaryContainer, null, utils.callIfFunction(auxiliarActions)), utils.callIfFunction(footer)), sentinel());
-  }));
+  }, utils.callIfFunction(children)), Content && children && utils.callIfFunction(children), footer && React__default.createElement(DialogFooter, null, auxiliarActions && React__default.createElement(FooterAuxiliaryContainer, null, utils.callIfFunction(auxiliarActions)), utils.callIfFunction(footer)));
 
   var dialog = function dialog(confirmCloseDialog) {
     return React__default.createElement("div", {
@@ -2277,7 +1991,7 @@ var Dialog = styled__default(React__default.forwardRef(function (_ref, outerRef)
 })).withConfig({
   displayName: "Dialog",
   componentId: "gai4ey-9"
-})(["@supports (position:sticky){will-change:transform,opacity;&.JS-wc-off{will-change:auto;}}border-radius:12px;padding:2rem;background-color:white;width:100%;max-width:45rem;margin:auto;position:relative;align-self:baseline;display:block;> h3:first-child{margin-top:0.5rem;}p{line-height:140%;}", " ", " ", ""], utils.media.mobile(_templateObject10(), function (props) {
+})(["@supports (position:sticky){will-change:transform,opacity;&.JS-wc-off{will-change:auto;}}border-radius:12px;padding:2rem;background-color:white;width:100%;max-width:45rem;margin:auto;position:relative;align-self:baseline;display:block;> h3:first-child{margin-top:0.5rem;}p{line-height:140%;}", " ", " ", ""], utils.media.mobile(_templateObject8(), function (props) {
   return props.fullscreenOnMobile && "\n      border-radius: 0;\n      min-height: 100%;\n    ";
 }), function (props) {
   return props.closeDialog && styled.css(["", "{padding-right:2rem;}"], DialogTitle);
@@ -2319,7 +2033,7 @@ var DialogErrorContent = function DialogErrorContent(_ref4) {
     return React__default.createElement(Dialog, {
       as: "div"
     }, closeDialog && React__default.createElement(CloseIcon, {
-      onClick: closeDialog
+      onClick: confirmCloseDialog
     }), title && React__default.createElement(DialogTitle, null, title), React__default.createElement(DialogContent, {
       icon: "warning"
     }, content), React__default.createElement(DialogFooter, null, React__default.createElement(Button, {
@@ -2359,58 +2073,29 @@ var useDialogWithToggle = function useDialogWithToggle(dialog) {
 
 var WarningDialog = styled__default(function (_ref) {
   var content = _ref.content,
-      footer = _ref.footer,
-      withX = _ref.withX,
       closeDialog = _ref.closeDialog,
-      leftButton = _ref.leftButton,
-      additionalContent = _ref.additionalContent,
-      title = _ref.title,
-      rightButton = _ref.rightButton,
       className = _ref.className,
-      color = _ref.color,
       _ref$icon = _ref.icon,
       icon = _ref$icon === void 0 ? "warning" : _ref$icon,
       _ref$confirmLabel = _ref.confirmLabel,
-      confirmLabel = _ref$confirmLabel === void 0 ? "Entendi" : _ref$confirmLabel,
-      noActions = _ref.noActions,
-      children = _ref.children;
+      confirmLabel = _ref$confirmLabel === void 0 ? "Entendi" : _ref$confirmLabel;
   return React__default.createElement(Dialog, {
-    className: className,
-    closeDialog: withX && closeDialog
-  }, _isString(icon) ? React__default.createElement(WarningDialogIcon, {
+    className: className
+  }, React__default.createElement(MainIcon, {
     icon: icon
-  }) : icon, title && React__default.createElement(WarningDialogTitle, {
-    color: color || icon
-  }, title), content && React__default.createElement(Content, {
-    noTitle: !title,
-    noActions: noActions
-  }, content), additionalContent, utils.callIfFunction(leftButton, closeDialog), confirmLabel !== false && React__default.createElement(Button, {
+  }), React__default.createElement("p", null, content), React__default.createElement(Button, {
     highlight: true,
     onClick: closeDialog
-  }, confirmLabel), utils.callIfFunction(rightButton, closeDialog), utils.callIfFunction(footer, closeDialog), children);
+  }, confirmLabel));
 }).withConfig({
   displayName: "WarningDialog",
   componentId: "sc-1jw779e-0"
-})(["text-align:center;max-width:36rem;padding:2.5rem;", "{margin:0.5rem !important;}"], Button);
-var WarningDialogTitle = styled__default.h3.withConfig({
-  displayName: "WarningDialog__WarningDialogTitle",
+})(["text-align:center;max-width:36rem;padding:2.5rem;p{font-size:16px;font-weight:500;max-width:27rem;margin:0 auto 2rem;}"]);
+var MainIcon = styled__default(Icon).withConfig({
+  displayName: "WarningDialog__MainIcon",
   componentId: "sc-1jw779e-1"
-})(["color:", ";font-weight:500;font-size:20px;"], function (props) {
-  return props.color === 'warning' ? utils.getColor('alert') : props.color === 'success' ? utils.getColor('success') : props.color === 'due-date' ? utils.getColor('warning') : utils.getColor('main');
-});
-var Content = styled__default.div.withConfig({
-  displayName: "WarningDialog__Content",
-  componentId: "sc-1jw779e-2"
-})(["font-size:15px;max-width:27rem;margin:0 auto;line-height:130%;", " ", ""], function (props) {
-  return !props.noActions && "\n    margin: 0 auto 1.5rem;\n  ";
-}, function (props) {
-  return props.noTitle && "\n    font-weight: 500;\n    font-size: 16px;\n  ";
-});
-var WarningDialogIcon = styled__default(Icon).withConfig({
-  displayName: "WarningDialog__WarningDialogIcon",
-  componentId: "sc-1jw779e-3"
 })(["color:", ";font-size:46px;display:block;margin-bottom:1.25rem;"], function (props) {
-  return props.icon === 'warning' ? utils.getColor('alert') : props.icon === 'success' ? utils.getColor('success') : props.icon === 'due-date' ? utils.getColor('warning') : utils.getColor('main');
+  return props.icon === 'warning' ? utils.getColor('alert') : props.icon === 'success' ? utils.getColor('success') : utils.getColor('main');
 });
 var useWarningDialog = function useWarningDialog() {
   return useDialogWithToggle(function (toggle) {
@@ -2455,7 +2140,7 @@ var NotificationContainer = styled__default.div.withConfig({
 var Notification = styled__default.div.withConfig({
   displayName: "Notifications__Notification",
   componentId: "naxsn6-1"
-})(["padding:1rem 4.5rem 1rem 1.5rem;font-size:14px;font-weight:500;border-radius:10px;color:white;text-align:left;background:", ";box-shadow:0 2px 0px 0px rgba(0,0,0,0.1);min-width:12rem;min-height:48px;display:inline-flex;align-items:center;position:relative;top:1rem;", "{color:white;display:inline-block;background-color:rgba(0,0,0,0.1);font-size:18px;width:24px;height:24px;text-align:center;line-height:24px;border-radius:50%;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);right:1rem;&:hover{background-color:rgba(0,0,0,0.2);}}"], function (props) {
+})(["padding:1rem 3.5rem 1rem 1rem;border-radius:5px;color:white;text-align:left;line-height:20px;background:", ";box-shadow:0 2px 0px 0px rgba(0,0,0,0.25);min-width:12rem;min-height:44px;display:inline-block;position:relative;top:1rem;", "{color:white;display:inline-block;background-color:rgba(0,0,0,0.2);font-size:14px;width:20px;height:20px;text-align:center;line-height:20px;border-radius:50%;cursor:pointer;position:absolute;top:1rem;right:1rem;&:hover{background-color:rgba(0,0,0,0.3);}}"], function (props) {
   return utils.getColor(props.type)(props);
 }, Icon);
 
@@ -2518,106 +2203,6 @@ var FlipNotification = function FlipNotification(props) {
   }, props)));
 };
 
-function _templateObject$5() {
-  var data = _taggedTemplateLiteral(["\n    display: none;\n  "]);
-
-  _templateObject$5 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var _willUseSharedState$2 = core.willUseSharedState([]),
-    _willUseSharedState2$2 = _slicedToArray(_willUseSharedState$2, 3),
-    useNotifications = _willUseSharedState2$2[0],
-    setNotifications = _willUseSharedState2$2[2];
-
-var openPersistentNotification = function openPersistentNotification(notification) {
-  var newNotification = _objectSpread({
-    priority: 0,
-    type: "success"
-  }, _isObject(notification) ? notification : {
-    content: notification
-  });
-
-  setNotifications(function (list) {
-    var nextIndex = list.findIndex(function (n) {
-      return n.priority < newNotification.priority;
-    });
-    return nextIndex < 0 ? _toConsumableArray(list).concat([newNotification]) : _toConsumableArray(list.slice(0, nextIndex)).concat([newNotification], _toConsumableArray(list.slice(nextIndex)));
-  });
-  return function () {
-    return setNotifications(_without([newNotification]));
-  };
-};
-var animation$1 = utils.oneWayAnimation('opacity:0; transform:translateY(-20px)', 'opacity:1;transform:translate(0)');
-var NotificationContainer$1 = styled__default.div.withConfig({
-  displayName: "PersistentNotifications__NotificationContainer",
-  componentId: "sc-1t7i0dh-0"
-})(["position:fixed;top:0;height:0;right:0;z-index:20;"]);
-var Notification$1 = styled__default.div.withConfig({
-  displayName: "PersistentNotifications__Notification",
-  componentId: "sc-1t7i0dh-1"
-})(["background:", ";position:relative;border-radius:7px;"], function (props) {
-  return polished.transparentize(0.9, utils.getColor(props.type)(props));
-});
-var NotificationWrapper = styled__default.div.withConfig({
-  displayName: "PersistentNotifications__NotificationWrapper",
-  componentId: "sc-1t7i0dh-2"
-})(["background:white;margin-top:", ";margin-right:0.75rem;margin-left:0.75rem;padding:5px;border-radius:10px;box-shadow:0 0 10px 0 rgba(0,0,0,0.1),0 1px 2px 1px rgba(0,0,0,0.15);max-width:364px;", ""], function (props) {
-  return props.marginTop || "4.75rem";
-}, utils.printerMedia(_templateObject$5()));
-
-var _willUseSharedState3 = core.willUseSharedState(false),
-    _willUseSharedState4 = _slicedToArray(_willUseSharedState3, 3),
-    useIsHiddenPersistentNotifications = _willUseSharedState4[0],
-    hidePersistentNotifications = _willUseSharedState4[2];
-var PersistentNotifications = function PersistentNotifications() {
-  var _useNotifications = useNotifications(),
-      _useNotifications2 = _slicedToArray(_useNotifications, 2),
-      notifications = _useNotifications2[0],
-      setNotifications = _useNotifications2[1];
-
-  var _useIsHiddenPersisten = useIsHiddenPersistentNotifications(),
-      _useIsHiddenPersisten2 = _slicedToArray(_useIsHiddenPersisten, 1),
-      isHidden = _useIsHiddenPersisten2[0];
-
-  if (!notifications.length || isHidden) {
-    return null;
-  }
-
-  var closeMessage = function closeMessage() {
-    return setNotifications(function (list) {
-      return list.slice(1);
-    });
-  };
-
-  var _notifications$ = notifications[0],
-      content = _notifications$.content,
-      type = _notifications$.type,
-      marginTop = _notifications$.marginTop;
-  return React__default.createElement(core.Fill, {
-    name: "PersistentNotifications"
-  }, React__default.createElement(FlipNotification$1, {
-    type: type,
-    marginTop: marginTop
-  }, utils.callIfFunction(content, closeMessage)));
-};
-
-var FlipNotification$1 = function FlipNotification(props) {
-  var ref = React.useRef();
-  useFlipAnimation(ref, animation$1);
-  return React__default.createElement(NotificationContainer$1, {
-    className: "JS-fix-dialog-scroll",
-    ref: ref
-  }, React__default.createElement(NotificationWrapper, {
-    marginTop: props.marginTop
-  }, React__default.createElement(Notification$1, _extends({
-    id: "js-share-notification"
-  }, props))));
-};
-
 var Placeholder = styled__default.span.withConfig({
   displayName: "usePositioning__Placeholder",
   componentId: "sc-1m4912o-0"
@@ -2723,9 +2308,7 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
       keepWidth = _ref$keepWidth === void 0 ? true : _ref$keepWidth,
       _ref$boundMargin = _ref.boundMargin,
       boundMargin = _ref$boundMargin === void 0 ? 6 : _ref$boundMargin,
-      respectBounds = _ref.respectBounds,
-      respectOffsetScroll = _ref.respectOffsetScroll,
-      on = _ref.on;
+      respectBounds = _ref.respectBounds;
   var placeholder = React.useRef();
   var arrowRef = core.useEnsureRef(arrowRefOpt);
 
@@ -2750,8 +2333,14 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
       return;
     }
 
-    var usingLayer = respectOffsetScroll || useLayers && getDialogLayersSize() > 0;
-    var scrollOwner = usingLayer ? _isFunction(respectOffsetScroll) ? respectOffsetScroll(element.current.offsetParent) : utils.getClosestOffsetScroll(element.current.offsetParent) : {
+    if (keepWidth) {
+      element.current.style.width = '';
+    } else {
+      element.current.style.maxWidth = '';
+    }
+
+    var usingLayer = useLayers && getDialogLayersSize() > 0;
+    var scrollOwner = usingLayer ? utils.getClosestOffsetScroll(element.current.offsetParent) : {
       scrollTop: window.pageYOffset,
       scrollLeft: window.pageXOffset // console.log({scrollOwner,scrollTop:scrollOwner.scrollTop,pageYOffset:window.pageYOffset})
 
@@ -2759,24 +2348,9 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
     var scrollY = !isNaN(scrollOwner.scrollTop) ? scrollOwner.scrollTop : window.pageYOffset;
     var scrollX = !isNaN(scrollOwner.scrollLeft) ? scrollOwner.scrollLeft : window.pageXOffset;
 
-    var getRespectOffsetScrollTopLeft = function getRespectOffsetScrollTopLeft() {
-      var _placeholder$current$ = placeholder.current.getBoundingClientRect(),
-          top = _placeholder$current$.top,
-          left = _placeholder$current$.left;
-
-      var _scrollOwner$getBound = scrollOwner.getBoundingClientRect(),
-          scrollOwnerTop = _scrollOwner$getBound.top,
-          scrollOwnerLeft = _scrollOwner$getBound.left;
-
-      return {
-        top: top - scrollOwnerTop,
-        left: left - scrollOwnerLeft
-      };
-    };
-
-    var _ref2 = respectOffsetScroll ? getRespectOffsetScrollTopLeft() : placeholder.current.getBoundingClientRect(),
-        leftPlusBorder = _ref2.left,
-        topPlusBorder = _ref2.top;
+    var _placeholder$current$ = placeholder.current.getBoundingClientRect(),
+        leftPlusBorder = _placeholder$current$.left,
+        topPlusBorder = _placeholder$current$.top;
 
     var _window$getComputedSt = window.getComputedStyle(placeholder.current.offsetParent),
         borderLeftWidth = _window$getComputedSt.borderLeftWidth,
@@ -2843,10 +2417,10 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
     var arrowOnVerticalSide = arrowSide === 'left' || arrowSide === 'right';
     var arrowSize = arrowElement ? arrowElement.getBoundingClientRect()[arrowOnVerticalSide ? 'height' : 'width'] : ARROW_DEFAULT_SIZE * Math.sqrt(2);
 
-    var _ref3 = arrowOnVerticalSide ? processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetHeight, popupOffsetHeight, processedTop - top, flippedV) : processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetWidth, popupOffsetWidth, processedLeft - left, flippedV),
-        _ref4 = _slicedToArray(_ref3, 2),
-        arrowOffset = _ref4[0],
-        popupArrowOffset = _ref4[1];
+    var _ref2 = arrowOnVerticalSide ? processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetHeight, popupOffsetHeight, processedTop - top, flippedV) : processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetWidth, popupOffsetWidth, processedLeft - left, flippedV),
+        _ref3 = _slicedToArray(_ref2, 2),
+        arrowOffset = _ref3[0],
+        popupArrowOffset = _ref3[1];
 
     var maxHeight = window.innerHeight - (POSITIONING_BOUNDS.top + POSITIONING_BOUNDS.bottom) - (respectBounds ? boundMargin * 2 : 0);
     var maxWidth = window.innerWidth - (POSITIONING_BOUNDS.left + POSITIONING_BOUNDS.right) - (respectBounds ? boundMargin * 2 : 0);
@@ -2896,13 +2470,11 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
     }
   };
 
-  React.useLayoutEffect(setPosition, [on]);
+  React.useLayoutEffect(setPosition, []);
   React.useEffect(function () {
     window.addEventListener('portalReposition', setPosition);
     window.addEventListener('stepResize', setPosition);
-    window.addEventListener('scroll', setPosition, {
-      passive: true
-    });
+    window.addEventListener('scroll', setPosition);
     return function () {
       window.removeEventListener('portalReposition', setPosition);
       window.removeEventListener('stepResize', setPosition);
@@ -3013,8 +2585,6 @@ function (_React$Component) {
     _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(FlipList)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
     _this.play = function (oldSnap, newSnap) {
-      var _newSnap$parent;
-
       var _this$props = _this.props,
           animation = _this$props.animation,
           insertAnimation = _this$props.insertAnimation,
@@ -3059,18 +2629,14 @@ function (_React$Component) {
       }
 
       var rectAnimation = getClientRectAnimation(oldSnap.parent, newSnap.parent, {
-        skipTransform: true,
-        smallJumpFix: _this.props.smallJumpFix
+        skipTransform: true
       });
-
-      if ((_newSnap$parent = newSnap.parent) === null || _newSnap$parent === void 0 ? void 0 : _newSnap$parent.domNode) {
-        var endEffect = utils.callIfFunction(effect, newSnap.parent.domNode, {
-          newSnap: newSnap,
-          oldSnap: oldSnap
-        });
-        utils.callIfFunction(onStartAnimation);
-        morph(newSnap.parent.domNode, formatAnimation(rectAnimation, timing), endEffect || onEndAnimation);
-      }
+      var endEffect = utils.callIfFunction(effect, newSnap.parent.domNode, {
+        newSnap: newSnap,
+        oldSnap: oldSnap
+      });
+      utils.callIfFunction(onStartAnimation);
+      morph(newSnap.parent.domNode, formatAnimation(rectAnimation, timing), endEffect || onEndAnimation);
     };
 
     _this.reinsertSnap = function (item, scrollDelta, allChildren) {
@@ -3356,7 +2922,7 @@ function (_React$Component2) {
 
     _this2.addProps = function (children, eventHandlers, activeIndex, extraProps) {
       return children.map(function (c, index) {
-        return c.type === DraggableItem ? React__default.cloneElement(c, {
+        return reactHotLoader.areComponentsEqual(c.type, DraggableItem) ? React__default.cloneElement(c, {
           isDragging: activeIndex === index,
           dragIndex: index,
           droppable: _assertThisInitialized(_assertThisInitialized(_this2)),
@@ -4299,7 +3865,7 @@ var recentlyClosed = false;
 var openRef = {
   current: null
 };
-var Tooltip = function Tooltip(_ref) {
+var Tooltip = React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$delay = _ref.delay,
       delay = _ref$delay === void 0 ? 400 : _ref$delay,
@@ -4308,6 +3874,7 @@ var Tooltip = function Tooltip(_ref) {
       content = _ref.content,
       rest = _objectWithoutProperties(_ref, ["children", "delay", "instant", "whenEllipsis", "content"]);
 
+  var ensuredRef = useEnsureRef(ref);
   var tooltip = core.useToggle();
   var timeout = core.useRefState(-1);
 
@@ -4356,9 +3923,10 @@ var Tooltip = function Tooltip(_ref) {
     animationOptions: {
       ref: openRef
     },
+    ref: ensuredRef,
     top: !(rest.bottom || rest.left || rest.right || rest.at || rest.my)
   }, rest), content), children);
-};
+});
 
 function _templateObject4$1() {
   var data = _taggedTemplateLiteral(["\n  font-size: 13px;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 3rem;\n  text-align: center;\n"]);
@@ -4390,10 +3958,10 @@ function _templateObject2$4() {
   return data;
 }
 
-function _templateObject$6() {
+function _templateObject$5() {
   var data = _taggedTemplateLiteral(["\n    font-size: 14px;\n    & > * {\n      padding-top: 15px;\n      padding-bottom: 15px;\n    }\n    ", ", .icon {\n      font-size: 25px;\n    }\n  "]);
 
-  _templateObject$6 = function _templateObject() {
+  _templateObject$5 = function _templateObject() {
     return data;
   };
 
@@ -4405,17 +3973,10 @@ var slideUpOnTop = utils.oneWayAnimation('transform: translateY(10px); pointer-e
 var slideRight = utils.oneWayAnimation('transform: translateX(-10px)', 'transform: none;');
 var slideLeftOnLeft = utils.oneWayAnimation('transform: translateX(10px); pointer-events: none', 'transform: translateX(0px); pointer-events: none');
 var popupAnimation = utils.animationTiming('0.2s ease-out');
-
-var areComponentsEqual = function areComponentsEqual(a, b) {
-  return a === b;
-};
-
 var ListItem = styled__default.li.withConfig({
   displayName: "ContextMenu__ListItem",
   componentId: "sc-13y1vvt-0"
-})(["position:relative;font-size:13px;& > *{padding:11px 1.5rem 11px 3.5rem;display:block;}", " ", ",.icon{font-size:23px;position:absolute;padding-left:0.25rem;left:0;top:50%;transform:translateY(-50%);width:3.5rem;text-align:center;}", " & > a{color:inherit;font-weight:inherit;text-decoration:inherit;}& > a,& > label{cursor:pointer;}", " ", " input[type=\"radio\"]{display:none;}", " ", " ", " ", ""], function (props) {
-  return props.hasSubmenu && "\n    & > * {\n      padding-right: 3rem;\n    }\n  ";
-}, Icon, utils.media.mobile(_templateObject$6(), Icon), utils.ifProp('hover', styled.css(["& > a,& > label{background:", ";color:", ";color:", ";}"], function (props) {
+})(["position:relative;font-size:13px;& > *{padding:11px 1.5rem 11px 3.5rem;display:block;}", ",.icon{font-size:23px;position:absolute;padding-left:0.25rem;left:0;top:50%;transform:translateY(-50%);width:3.5rem;text-align:center;}", " & > a{color:inherit;font-weight:inherit;text-decoration:inherit;}& > a,& > label{cursor:pointer;}", " ", " input[type=\"radio\"]{display:none;}", " ", " ", " ", ""], Icon, utils.media.mobile(_templateObject$5(), Icon), utils.ifProp('hover', styled.css(["& > a,& > label{background:", ";color:", ";color:", ";}"], function (props) {
   return polished.lighten(0.53, utils.getColor("main")(props));
 }, utils.getColor('main'), function (props) {
   return polished.darken(0.03, utils.getColor("main")(props));
@@ -4578,7 +4139,6 @@ var Li = function Li(_ref) {
   var _ref$emitter = _ref.emitter,
       emitter = _ref$emitter === void 0 ? mitt() : _ref$emitter,
       index = _ref.index,
-      menuSlot = _ref.menuSlot,
       keepOpen = _ref.keepOpen,
       hover = _ref.hover,
       layerIndex = _ref.layerIndex,
@@ -4595,7 +4155,7 @@ var Li = function Li(_ref) {
       helpText = _ref.helpText,
       target = _ref.target,
       href = _ref.href,
-      rest = _objectWithoutProperties(_ref, ["emitter", "index", "menuSlot", "keepOpen", "hover", "layerIndex", "hoverCursor", "passTouchThrough", "children", "setCursorOnHover", "onClick", "prefixWith", "linkTo", "icon", "label", "descText", "helpText", "target", "href"]);
+      rest = _objectWithoutProperties(_ref, ["emitter", "index", "keepOpen", "hover", "layerIndex", "hoverCursor", "passTouchThrough", "children", "setCursorOnHover", "onClick", "prefixWith", "linkTo", "icon", "label", "descText", "helpText", "target", "href"]);
 
   var nodeRef = React.useRef();
   var tagRef = React.useRef();
@@ -4705,8 +4265,7 @@ var Li = function Li(_ref) {
         closing: subMenu.closing,
         onMouseMove: subMenu.open,
         onClose: onCloseSub,
-        sub: true,
-        slot: c.props.slot || menuSlot
+        sub: true
       });
     });
   };
@@ -4723,8 +4282,7 @@ var Li = function Li(_ref) {
     hover: hover,
     onClick: onClickHandler,
     onMouseLeave: onMouseOut,
-    onMouseMove: onMouseMove,
-    hasSubmenu: children
+    onMouseMove: onMouseMove
   }), rest.withButton || rest.noActions ? content : React__default.createElement(Tag, {
     href: href,
     target: target,
@@ -4742,16 +4300,15 @@ var _willUseLayers$1 = core.willUseLayers(),
 
 var contextMenuLayersQuantity = contextMenuLayersSize;
 
-var _willUseSharedState$3 = core.willUseSharedState(),
-    _willUseSharedState2$3 = _slicedToArray(_willUseSharedState$3, 1),
-    useContextMenuSharedState = _willUseSharedState2$3[0];
+var _willUseSharedState$2 = core.willUseSharedState(),
+    _willUseSharedState2$2 = _slicedToArray(_willUseSharedState$2, 1),
+    useContextMenuSharedState = _willUseSharedState2$2[0];
 
 var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
   var children = _ref2.children,
       sub = _ref2.sub,
       hoverIndex = _ref2.hoverIndex,
       autoHover = _ref2.autoHover,
-      menuSlot = _ref2.menuSlot,
       withoutIcons = _ref2.withoutIcons,
       onClose = _ref2.onClose,
       _ref2$onHover = _ref2.onHover,
@@ -4760,7 +4317,7 @@ var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
   } : _ref2$onHover,
       fill = _ref2.fill,
       onClick = _ref2.onClick,
-      props = _objectWithoutProperties(_ref2, ["children", "sub", "hoverIndex", "autoHover", "menuSlot", "withoutIcons", "onClose", "onHover", "fill", "onClick"]);
+      props = _objectWithoutProperties(_ref2, ["children", "sub", "hoverIndex", "autoHover", "withoutIcons", "onClose", "onHover", "fill", "onClick"]);
 
   var ref = core.useEnsureRef(unesuredRef);
 
@@ -4832,19 +4389,11 @@ var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
   };
 
   var getTotalKeyboardItems = function getTotalKeyboardItems(children) {
-    var sum = 0;
-    React__default.Children.forEach(children, function (child) {
-      if (child && !child.props.disabled && !child.props.readOnly) {
-        if (!styled.isStyledComponent(child.type) && child.type === Li || child.type.isKeyboardNavigable) {
-          sum += 1;
-        }
-
-        if (areComponentsEqual(child.type, StickyContainer) || child.props.nested) {
-          sum += getTotalKeyboardItems(child.props.children);
-        }
-      }
+    var max = 0;
+    React__default.Children.forEach(children, function (e) {
+      return max += e && (!styled.isStyledComponent(e.type) && reactHotLoader.areComponentsEqual(e.type, Li) || e.type.isKeyboardNavigable || (reactHotLoader.areComponentsEqual(e.type, StickyContainer) ? getTotalKeyboardItems(e.props.children) : 0));
     });
-    return sum;
+    return max;
   };
 
   var setCursorOnHover = function setCursorOnHover(index) {
@@ -4854,20 +4403,18 @@ var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
   };
 
   var formatChildren = function formatChildren(children) {
-    var indexRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-      current: 0
-    };
+    var indexOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var i = 0;
     return React__default.Children.map(children, function (child, j) {
-      return child && !child.props.disabled && !child.props.readOnly ? child.props.nested ? React__default.cloneElement(child, child.props, formatChildren(child.props.children, indexRef)) : !styled.isStyledComponent(child.type) && !reactIs.isMemo(child.type) && areComponentsEqual(child.type, Li) || child.type.isKeyboardNavigable ? React__default.cloneElement(child, {
-        hover: hoverCursor === indexRef.current && layerIndex === layerCursor,
+      return child ? !styled.isStyledComponent(child.type) && !reactIs.isMemo(child.type) && reactHotLoader.areComponentsEqual(child.type, Li) || child.type.isKeyboardNavigable ? React__default.cloneElement(child, {
+        hover: hoverCursor === i + indexOffset && layerIndex === layerCursor,
         hoverCursor: hoverCursor,
-        index: indexRef.current++,
+        index: indexOffset + i++,
         setCursorOnHover: setCursorOnHover,
         emitter: itemsEmitter,
-        layerIndex: layerIndex,
-        menuSlot: menuSlot
-      }) : areComponentsEqual(child.type, StickyContainer) ? React__default.cloneElement(child, _objectSpread({}, child.props, {
-        children: formatChildren(child.props.children, indexRef)
+        layerIndex: layerIndex
+      }) : reactHotLoader.areComponentsEqual(child.type, StickyContainer) ? React__default.cloneElement(child, _objectSpread({}, child.props, {
+        children: formatChildren(child.props.children, i + indexOffset)
       })) : child : child;
     });
   };
@@ -4933,7 +4480,6 @@ var ContextMenu = React.forwardRef(function (_ref3, ref) {
   return React__default.createElement(React__default.Fragment, null, placeholder, React__default.createElement(core.Fill, {
     name: slotName
   }, React__default.createElement(ContextMenuComponent, _extends({}, rest, {
-    menuSlot: slot,
     sub: sub
   }, positionInfo, {
     ref: contextMenuRef,
@@ -4942,135 +4488,13 @@ var ContextMenu = React.forwardRef(function (_ref3, ref) {
 });
 ContextMenu.ListItem = ListItem;
 
-var scrollWidth = function () {
-  if (!window.document) return 0;
-  var html = document.documentElement;
-  var oldOverflow = html.style.overflowY;
-  html.style.overflowY = 'scroll';
-  var width = window.innerWidth - html.clientWidth;
-  html.style.overflowY = oldOverflow;
-  return width;
-}();
-
-var callIfFunction = function callIfFunction(prop) {
-  for (var _len6 = arguments.length, args = new Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
-    args[_key6 - 1] = arguments[_key6];
-  }
-
-  return typeof prop === "function" ? prop.apply(void 0, args) : prop;
-};
-
-function _templateObject$7() {
-  var data = _taggedTemplateLiteral(["\n  ", ""]);
-
-  _templateObject$7 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var checkCustomScreenWidth = function checkCustomScreenWidth(sizeParis, customWidth) {
-  var currentWidth = callIfFunction(customWidth);
-  return !sizeParis.find(function (_ref5) {
-    var _ref6 = _slicedToArray(_ref5, 2),
-        size = _ref6[0],
-        type = _ref6[1];
-
-    if (type === "min-width") {
-      return currentWidth < size;
-    }
-
-    if (type === "max-width") {
-      return currentWidth > size;
-    }
-  });
-};
-
-var media = function media() {
-  for (var _len3 = arguments.length, sizePairs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    sizePairs[_key3] = arguments[_key3];
-  }
-
-  return function () {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
-
-    return styled.css(["", ""], function (props) {
-      var _props$theme, _props$theme2;
-
-      return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.overrideMediaWidth) ? checkCustomScreenWidth(sizePairs, (_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.overrideMediaWidth) ? styled.css.apply(void 0, args) : "" : styled.css(["@media ", "{", "}"], sizePairs.map(function (_ref7) {
-        var _ref8 = _slicedToArray(_ref7, 2),
-            size = _ref8[0],
-            type = _ref8[1];
-
-        return "(".concat(type, ": ").concat(size + scrollWidth, "px)");
-      }).join(' and '), styled.css.apply(void 0, args));
-    });
-  };
-};
-media.mobile = media([600, 'max-width']);
-
-media.between = function (min, max) {
-  return media([min, 'min-width'], [max, 'max-width']);
-};
-
-media.max = function (n) {
-  return media([n, 'max-width']);
-};
-
-media.min = function (n) {
-  return media([n, 'min-width']);
-};
-
-media.desktop = media([601, 'min-width']);
-
-var getFrameOffset = function getFrameOffset(i, total) {
-  return Math.round(i * 100 / (total - 1));
-};
-
-var emotion = createEmotion({
-  nonce: __webpack_nonce__
-});
-var oneWayAnimation = function oneWayAnimation() {
-  for (var _len5 = arguments.length, frames = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-    frames[_key5] = arguments[_key5];
-  }
-
-  return emotion.keyframes(_templateObject$7(), frames.map(function (frame, i) {
-    return !frame ? '' : "".concat(getFrameOffset(i, frames.length), "% {\n      ").concat(frame, "\n    }");
-  }));
-};
-var animationTiming = function animationTiming(props) {
-  return function () {
-    for (var _len7 = arguments.length, animations = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
-      animations[_key7] = arguments[_key7];
-    }
-
-    return animations.filter(function (_) {
-      return _;
-    }).map(function (_) {
-      return _ + ' ' + props;
-    }).join(',');
-  };
-};
-var identityTranslateFrames = oneWayAnimation('transform: translateY(0);', 'transform: translateY(0);');
-var identityOpacityFrames = oneWayAnimation('opacity: 1;', 'opacity:1;');
-
 var LoadingBar = styled__default.div.withConfig({
   displayName: "PageLoader__LoadingBar",
   componentId: "sc-96jeob-0"
-})(["width:100%;border-radius:0 1px 1px 0;height:4px;position:fixed;background:", ";transform:translateX(-100%);", " left:0;z-index:99999;box-shadow:", ";", " ", ""], function (props) {
-  return props.bottom ? styled.css(["", ""], utils.getColor('main')) : "#84D359";
+})(["width:0%;height:3px;position:fixed;background:#84D359;top:0;left:0;z-index:99999;box-shadow:0 0 6px 0 rgba(0,0,0,0.5);", "  ", " "], function (props) {
+  return props.loading && "\n    width: 70%;\n    transition: 1.5s width linear;\n  ";
 }, function (props) {
-  return props.bottom ? "bottom:55px;" : "top: 0;";
-}, function (props) {
-  return props.bottom ? "0 0 1px 1px rgba(0,132,214,0.2);" : "0 0 2px 0 rgba(0,0,0,0.5);";
-}, function (props) {
-  return props.loading && "\n    transform: translateX(-30%);\n    transition: transform 1.5s ease;\n  ";
-}, function (props) {
-  return props.closing && "\n    transform: translateX(0);\n    transition: transform 0.3s ease-in;\n  ";
+  return props.closing && "\n    width: 100%;\n    transition: 0.3s ease-in;\n  ";
 });
 var PageLoader = function PageLoader(_ref) {
   var isLoading = _ref.isLoading;
@@ -5087,18 +4511,6 @@ var PageLoader = function PageLoader(_ref) {
     closing: loader.closing
   });
 };
-var animation$2 = utils.oneWayAnimation('transform:translateX(-30%);', 'transform:translateX(0);');
-var SuspenseLoadingBar = function SuspenseLoadingBar() {
-  var ref = React__default.useRef();
-  useFlipLeave(ref, animation$2, {
-    reverse: false,
-    timing: animationTiming('0.3s ease-in')
-  });
-  return React__default.createElement(LoadingBar, {
-    ref: ref,
-    loading: true
-  });
-};
 
 var isNodeJunction = function isNodeJunction(nextNode) {
   return nextNode && !nextNode.hasChangedLine && nextNode.words[0] !== '';
@@ -5398,20 +4810,17 @@ FillLastLineResizer.h2 = function (props) {
 };
 
 var DEFAULT_ANIMATION = utils.oneWayAnimation("opacity: 1;", "opacity: 0;");
-var AnimationBlockContainer = styled__default.div.withConfig({
-  displayName: "TransitionDiv__AnimationBlockContainer",
+var BlockContainer$1 = styled__default.div.withConfig({
+  displayName: "TransitionDiv__BlockContainer",
   componentId: "sc-1sh2xah-0"
-})(["", " position:relative;"], function (props) {
-  return props.inline ? 'display: inline-block; ' : '';
-});
+})(["position:relative;"]);
 var TransitionDiv = function TransitionDiv(_ref) {
   var children = _ref.children,
       animation = _ref.animation,
       skipChromeFix = _ref.skipChromeFix,
       className = _ref.className,
       block = _ref.block,
-      inline = _ref.inline,
-      rest = _objectWithoutProperties(_ref, ["children", "animation", "skipChromeFix", "className", "block", "inline"]);
+      rest = _objectWithoutProperties(_ref, ["children", "animation", "skipChromeFix", "className", "block"]);
 
   var blockRef = React.useRef();
 
@@ -5426,27 +4835,24 @@ var TransitionDiv = function TransitionDiv(_ref) {
   };
 
   var content = children ? React__default.createElement(FlipList, _extends({
-    smallJumpFix: inline && -3,
     effect: overflowEffect,
     skipChromeFix: skipChromeFix,
     animation: animation || DEFAULT_ANIMATION
   }, rest), [React__default.createElement("div", {
-    className: block || inline ? "" : className,
+    className: block ? "" : className,
     key: "first"
   }, children)]) : React__default.createElement(FlipList, _extends({
-    smallJumpFix: inline && -3,
     effect: overflowEffect,
     skipChromeFix: skipChromeFix,
     animation: animation || DEFAULT_ANIMATION
   }, rest), []);
-  return block || inline ? React__default.createElement(AnimationBlockContainer, {
-    inline: inline,
+  return block ? React__default.createElement(BlockContainer$1, {
     ref: blockRef,
     className: className
   }, content) : content;
 };
 
-var BlockContainer$1 = styled__default.div.withConfig({
+var BlockContainer$2 = styled__default.div.withConfig({
   displayName: "SwitchDiv__BlockContainer",
   componentId: "htfwpl-0"
 })(["position:relative;"]);
@@ -5493,12 +4899,167 @@ var SwitchContainer = function SwitchContainer(_ref2) {
   switchAnimation(contentRef, enterAnimation, leaveAnimation, {
     effect: effect
   });
-  return React__default.createElement(BlockContainer$1, {
+  return React__default.createElement(BlockContainer$2, {
     ref: contentRef,
     className: className
   }, utils.callIfFunction(children));
 };
 
+var TOP_TRIGGER = function TOP_TRIGGER(posInfo, refInfo) {
+  // Started sticking.
+  if (posInfo.bottom < refInfo.top) {
+    return true;
+  } // Stopped sticking.
+
+
+  if (posInfo.bottom >= refInfo.top && posInfo.bottom < refInfo.bottom) {
+    return false;
+  }
+};
+
+var BOTTOM_TRIGGER = function BOTTOM_TRIGGER(posInfo, refInfo) {
+  // Started sticking.
+  if (posInfo.top > refInfo.bottom) {
+    return true;
+  }
+
+  if (posInfo.top <= refInfo.bottom && posInfo.top > refInfo.top) {
+    return false;
+  }
+};
+
+var SentinelStyle = styled__default.div.withConfig({
+  displayName: "willUseIsSticky__SentinelStyle",
+  componentId: "sc-1nsyca-0"
+})(["position:absolute;visibility:hidden;height:1px;width:1px;", ""], function (props) {
+  return props.addCss;
+});
+var willUseIsSticky = function willUseIsSticky() {
+  var _willUseSharedCallbac = core.willUseSharedCallback(),
+      _willUseSharedCallbac2 = _slicedToArray(_willUseSharedCallbac, 2),
+      useRegister = _willUseSharedCallbac2[0],
+      onChange = _willUseSharedCallbac2[1];
+
+  var _willUseSharedState = core.willUseSharedState(),
+      _willUseSharedState2 = _slicedToArray(_willUseSharedState, 3),
+      useSharedIsSticky = _willUseSharedState2[0],
+      setSharedIsSticky = _willUseSharedState2[2];
+
+  var createObserver = function createObserver(root) {
+    return window.IntersectionObserver ? new window.IntersectionObserver(function (records, observer) {
+      var _iteratorNormalCompletion = true;
+      var _didIteratorError = false;
+      var _iteratorError = undefined;
+
+      try {
+        for (var _iterator = records[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var record = _step.value;
+          var targetInfo = record.boundingClientRect;
+          var rootBoundsInfo = record.rootBounds;
+
+          if (!rootBoundsInfo) {
+            return;
+          }
+
+          onChange(targetInfo, rootBoundsInfo, record.target, record.isIntersecting);
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+    }, {
+      root: root
+    }) : {
+      observe: _identity,
+      unobserve: _identity
+    };
+  };
+
+  var observerMap = new Map();
+
+  var getObserver = function getObserver() {
+    var root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var result = observerMap.get(root);
+
+    if (result) {
+      return result;
+    }
+
+    var observer = createObserver(root);
+    observerMap.set(root, observer);
+    return observer;
+  };
+
+  var activeObserved = [];
+
+  var resetObservers = function resetObservers() {
+    var root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var observer = getObserver(root);
+    activeObserved.forEach(function (observed) {
+      observer.unobserve(observed);
+      observer.observe(observed);
+    });
+  };
+
+  var WithIsSticky = React__default.forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+        children = _ref.children,
+        bottom = _ref.bottom,
+        root = _ref.root,
+        intersection = _ref.intersection,
+        onChange = _ref.onChange;
+    var ensuredRef = core.useEnsureRef(ref);
+
+    var _useState = React.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        isSticky = _useState2[0],
+        setIsSticky = _useState2[1];
+
+    useRegister(function (posInfo, refInfo, target, isIntersecting) {
+      if (ensuredRef.current === target) {
+        var value = intersection ? isIntersecting : bottom ? BOTTOM_TRIGGER(posInfo, refInfo) : TOP_TRIGGER(posInfo, refInfo);
+
+        if (value !== undefined) {
+          setIsSticky(value);
+          utils.callIfFunction(onChange, value);
+          setSharedIsSticky(value);
+        }
+      }
+    });
+    React.useEffect(function () {
+      setIsSticky(false);
+      getObserver(utils.callIfFunction(root)).observe(ensuredRef.current);
+      activeObserved = activeObserved.concat(ensuredRef.current);
+      return function () {
+        // observer.unobserve(ref.current)
+        activeObserved = _without([ensuredRef.current], activeObserved);
+      };
+    }, []);
+
+    var renderSentinel = function renderSentinel() {
+      var css = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+      return React__default.createElement(SentinelStyle, {
+        addCss: css,
+        className: className,
+        ref: ensuredRef
+      });
+    };
+
+    return children ? children(renderSentinel, isSticky) : renderSentinel();
+  });
+  return [WithIsSticky, useSharedIsSticky, resetObservers];
+};
+
 var FormatDate = function FormatDate(_ref) {
   var date = _ref.date,
       format = _ref.format,
@@ -5552,10 +5113,10 @@ var Image = React.forwardRef(function (_ref, ref) {
   }));
 });
 
-function _templateObject$8() {
+function _templateObject$6() {
   var data = _taggedTemplateLiteral(["\n      @supports (position: sticky) {\n        top: 0;\n        margin-right: -0.75rem;\n      }\n    "]);
 
-  _templateObject$8 = function _templateObject() {
+  _templateObject$6 = function _templateObject() {
     return data;
   };
 
@@ -5564,20 +5125,10 @@ function _templateObject$8() {
 var DialogWithImageHeader = styled__default(Dialog).withConfig({
   displayName: "DialogWithImageHeader",
   componentId: "sc-1f1ry4g-0"
-})(["max-width:51rem;", "{background:", ";text-shadow:none;color:rgba(120,120,120,1);font-size:20px;box-shadow:rgba(0,0,0,0.2) 0px 1px 3px 0px,rgba(0,0,0,0.05) 0px 0px 0px 1px;width:36px;height:36px;line-height:36px;transition:0.1s ease-out;:hover{background-color:rgb(230,230,230);}:active{background-color:rgb(220,220,220);transition:0s ease-out;}@supports (position:sticky){position:sticky;top:-2.5rem;right:0rem;float:right;margin-right:-1.25rem;margin-top:0.75rem;}", "}"], CloseIcon, utils.getColor('gray240'), utils.media.mobile(_templateObject$8()));
-
-function _templateObject3$3() {
-  var data = _taggedTemplateLiteral(["\n    min-height: 100%;\n    overflow: hidden;\n  "]);
-
-  _templateObject3$3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
+})(["max-width:51rem;", "{background:", ";text-shadow:none;color:rgba(120,120,120,1);font-size:20px;box-shadow:rgba(0,0,0,0.2) 0px 1px 3px 0px,rgba(0,0,0,0.05) 0px 0px 0px 1px;width:36px;height:36px;line-height:36px;transition:0.1s ease-out;:hover{background-color:rgb(230,230,230);}:active{background-color:rgb(220,220,220);transition:0s ease-out;}@supports (position:sticky){position:sticky;top:-2.5rem;right:0rem;float:right;margin-right:-1.25rem;margin-top:0.75rem;}", "}"], CloseIcon, utils.getColor('gray240'), utils.media.mobile(_templateObject$6()));
 
 function _templateObject2$5() {
-  var data = _taggedTemplateLiteral(["\n      font-size: 16px;\n    "]);
+  var data = _taggedTemplateLiteral(["\n    min-height: 100%;\n    overflow: hidden;\n  "]);
 
   _templateObject2$5 = function _templateObject2() {
     return data;
@@ -5586,10 +5137,10 @@ function _templateObject2$5() {
   return data;
 }
 
-function _templateObject$9() {
+function _templateObject$7() {
   var data = _taggedTemplateLiteral(["\n    display:block;\n    position:fixed;\n    top:0;\n    left:0;\n    bottom:0;\n    z-index:1000;\n    transition: 0.25s transform ease-out;\n    background-color: ", ";\n    box-shadow: -5px 0 20px 5px rgba(0,0,0,0.4);\n    border-radius: 0;\n    ", "\n  "]);
 
-  _templateObject$9 = function _templateObject() {
+  _templateObject$7 = function _templateObject() {
     return data;
   };
 
@@ -5600,13 +5151,13 @@ var SideMenu = styled__default.div.withConfig({
   componentId: "suvg9r-0"
 })(["background-color:", ";border-top-left-radius:10px;border-bottom-left-radius:10px;width:19rem;flex-shrink:0;padding:1.25rem 0;", " ", ""], utils.getColor('gray240'), function (props) {
   return !props.visibleOnDesktop && 'display:none;';
-}, utils.media.mobile(_templateObject$9(), utils.getColor('gray240'), function (props) {
+}, utils.media.mobile(_templateObject$7(), utils.getColor('gray240'), function (props) {
   return !props.isOpen && "\n      transform: translateX(-100%);\n      box-shadow: none;\n    ";
 }));
 var DialogTabMenu = styled__default.ul.withConfig({
   displayName: "DialogWithSidebar__DialogTabMenu",
   componentId: "suvg9r-1"
-})(["cursor:default;overflow:auto;text-align:left;color:inherit;user-select:none;li{position:relative;padding:1rem 2rem 1rem 4.1rem;font-size:14px;", ":hover{background-color:rgba(0,0,0,0.1);cursor:pointer;}&.selected{color:", ";background:rgba(0,132,214,0.125);pointer-events:none;}}.icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:3rem;text-align:center;line-height:0;font-size:26px;}", ""], utils.media.mobile(_templateObject2$5()), utils.getColor('main'), function (props) {
+})(["cursor:default;overflow:auto;text-align:left;color:inherit;user-select:none;li{position:relative;padding:1rem 2rem 1rem 4.1rem;font-size:14px;:hover{background-color:rgba(0,0,0,0.1);cursor:pointer;}&.selected{color:", ";background:rgba(0,132,214,0.125);pointer-events:none;}}.icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:3rem;text-align:center;line-height:0;font-size:26px;}", ""], utils.getColor('main'), function (props) {
   return props.menuTabIsOpen && "\n    li {\n      padding: 1.25rem 2rem 1.25rem 3.25rem;\n      border-radius: 6px\n    }\n    .icon{\n      left: 0;\n    }\n  ";
 });
 
@@ -5650,7 +5201,7 @@ var DialogWithSidebarPresentation = function DialogWithSidebarPresentation(_ref)
       visibleOnDesktop: true
     }, sidebar(tab)), React__default.createElement("div", {
       className: (menuTabIsOpen ? "menuTabIsOpen " : "") + "main-container"
-    }, React__default.createElement("h2", null, menuTabIsOpen ? "Configurações gerais" : React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
+    }, React__default.createElement("h2", null, menuTabIsOpen ? "Configurações da página" : React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
       className: "icon icon-menu mobile-only",
       onClick: sideMenu.open
     }), title(tab))), React__default.createElement(React__default.Suspense, {
@@ -5693,7 +5244,7 @@ var DialogWithSidebar = styled__default(function (props) {
 }).withConfig({
   displayName: "DialogWithSidebar",
   componentId: "suvg9r-2"
-})(["max-width:59rem;display:flex;padding:0;flex-direction:row;", ""], utils.media.mobile(_templateObject3$3()));
+})(["max-width:59rem;display:flex;padding:0;flex-direction:row;", ""], utils.media.mobile(_templateObject2$5()));
 
 var MobileBubbleDialogFooter = styled__default.div.withConfig({
   displayName: "MobileBubbleDialog__MobileBubbleDialogFooter",
@@ -5731,7 +5282,6 @@ var MobileBubbleDialog = styled__default(function (_ref) {
 })(["border-radius:10px;background-color:white;width:100%;margin:auto;position:relative;align-self:baseline;overflow:hidden;@supports (flex-wrap:wrap){display:flex;flex-direction:column;}"]);
 
 exports.AnimatedModal = AnimatedModal;
-exports.AnimationBlockContainer = AnimationBlockContainer;
 exports.Button = Button;
 exports.CloseIcon = CloseIcon;
 exports.ConfirmDialog = ConfirmDialog;
@@ -5772,30 +5322,24 @@ exports.ListItem = ListItem;
 exports.ListMenu = ListMenu;
 exports.ListSeparator = ListSeparator;
 exports.Loading = Loading;
-exports.LoadingBar = LoadingBar;
 exports.LoadingDiv = LoadingDiv;
 exports.MENU_TAB = MENU_TAB;
 exports.MobileBubbleDialog = MobileBubbleDialog;
 exports.Modal = Modal;
 exports.ModalContainer = ModalContainer;
 exports.Notifications = Notifications;
-exports.OnClickLoadingButton = OnClickLoadingButton;
 exports.PageLoader = PageLoader;
-exports.PersistentNotifications = PersistentNotifications;
 exports.Popup = Popup;
 exports.Reposition = Reposition;
 exports.SideMenu = SideMenu;
 exports.SimpleLi = SimpleLi;
 exports.SplitColumnsContainer = SplitColumnsContainer;
 exports.StickyContainer = StickyContainer;
-exports.SuspenseLoadingBar = SuspenseLoadingBar;
 exports.SwitchDiv = SwitchDiv;
 exports.TextButton = TextButton;
 exports.Tooltip = Tooltip;
 exports.TransitionDiv = TransitionDiv;
 exports.WarningDialog = WarningDialog;
-exports.WarningDialogIcon = WarningDialogIcon;
-exports.WarningDialogTitle = WarningDialogTitle;
 exports.addPositioningBound = addPositioningBound;
 exports.contextMenuLayersQuantity = contextMenuLayersQuantity;
 exports.defaultAnimationMaker = defaultAnimationMaker;
@@ -5806,10 +5350,7 @@ exports.fixDoubledLastMarginBottom = fixDoubledLastMarginBottom;
 exports.formatAnimation = formatAnimation;
 exports.getClientRectAnimation = getClientRectAnimation;
 exports.getDialogLayersSize = getDialogLayersSize;
-exports.hidePersistentNotifications = hidePersistentNotifications;
-exports.isFakeScrolled = isFakeScrolled;
 exports.morph = morph;
-exports.openPersistentNotification = openPersistentNotification;
 exports.preventDialogPop = preventDialogPop;
 exports.removeWindowScroll = removeWindowScroll;
 exports.setNotification = setNotification;
@@ -5822,7 +5363,6 @@ exports.useFlip = useFlip;
 exports.useFlipAnimation = useFlipAnimation;
 exports.useFlipEnter = useFlipEnter;
 exports.useFlipLeave = useFlipLeave;
-exports.useIsHiddenPersistentNotifications = useIsHiddenPersistentNotifications;
 exports.useNotification = useNotification;
 exports.useNotificationRef = useNotificationRef;
 exports.usePositioning = usePositioning;