@startlibs/components 1.0.0-alpha-8d3 → 1.0.0-alpha-8e

package/lib/index.js

@@ -19,26 +19,26 @@ var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers
 var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
 var reactRouterDom = require('react-router-dom');
-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'));
-var _without = _interopDefault(require('lodash/fp/without'));
 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 _isFunction = _interopDefault(require('lodash/fp/isFunction'));
 var reactIs = require('react-is');
 var mitt = _interopDefault(require('mitt'));
 require('lodash/fp');
@@ -113,7 +113,9 @@ 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) {
-  return props.theme.iconFont;
+  var _props$theme;
+
+  return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.iconFont;
 }, function (props) {
   return props.clickable && "\n    cursor: pointer;\n    &:hover {\n      opacity: 0.85;\n    }\n  ";
 });
@@ -123,8 +125,8 @@ var Link = reactRouterDom.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 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    ");
+})(["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"));
 }, function (props) {
   return props.size || 26;
 }, function (props) {
@@ -180,6 +182,7 @@ 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,
@@ -193,6 +196,7 @@ 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,
@@ -207,7 +211,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", "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"]);
+      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"]);
 
   return React__default.createElement(Wrapper, _extends({
     ref: ref || buttonRef,
@@ -216,12 +220,16 @@ 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: !outline || !dashed || !white,
+    white: !light && !outline && !dashed && !white,
     absolute: true,
     size: small && '16',
     borderWidth: small && '3'
@@ -229,7 +237,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));
@@ -241,12 +249,20 @@ 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) {
@@ -265,6 +281,16 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
   }, 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) {
@@ -273,6 +299,8 @@ 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) {
@@ -299,13 +327,29 @@ 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", "children", "innerAs"]);
+      props = _objectWithoutProperties(_ref, ["className", "isLoading", "alert", "children", "innerAs"]);
 
   return React__default.createElement(Wrapper, _extends({
     className: className
@@ -316,8 +360,10 @@ 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;}", ""], utils.getColor('main'), function (props) {
-  return 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;}", " & ~ &{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));
 }, Loading, function (props) {
   return props.nowrap && "\n    white-space: nowrap;\n  ";
 });
@@ -385,10 +431,12 @@ function (_React$Component) {
         error = e.toString();
       }
 
-      utils.postFetcher("/log/errorBoundary", {
-        error: error,
-        info: info
-      });
+      if (!/bot|spider|crawl/i.test(window.navigator.userAgent)) {
+        utils.postFetcher("/log/errorBoundary", {
+          error: error,
+          info: info
+        });
+      }
     }
   }, {
     key: "render",
@@ -699,7 +747,7 @@ var getClientRectAnimation = function getClientRectAnimation(oldSnap, newSnap) {
       skipTransform = _ref5.skipTransform,
       smallJumpFix = _ref5.smallJumpFix;
 
-  if (hasClientRectChanged(oldSnap, newSnap)) {
+  if (oldSnap && newSnap && hasClientRectChanged(oldSnap, newSnap)) {
     var _oldSnap$parentStyle, _newSnap$parentStyle, _oldSnap$parentStyle2, _newSnap$parentStyle2;
 
     var node = newSnap.domNode;
@@ -1293,7 +1341,11 @@ var fixPosition = function fixPosition(query, fn) {
 };
 
 var openLayers = 0;
-var removeWindowScroll = function removeWindowScroll(opening) {
+var fakedScrollTop = 0;
+var isFakeScrolled = function isFakeScrolled() {
+  return openLayers > 0 && fakedScrollTop > 0;
+};
+var removeWindowScroll = function removeWindowScroll(opening, keepDisabledScroll) {
   if (opening) {
     openLayers = Math.max(openLayers + 1, 1);
 
@@ -1311,6 +1363,11 @@ var removeWindowScroll = function removeWindowScroll(opening) {
   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),
@@ -1342,15 +1399,29 @@ var removeWindowScroll = function removeWindowScroll(opening) {
 
   if (opening) {
     var scrollTop = window.pageYOffset;
-    body.style.overflow = 'hidden';
+    fakedScrollTop = scrollTop;
+
+    if (keepDisabledScroll) {
+      body.style.overflowY = 'scroll';
+    } else {
+      body.style.overflow = 'hidden';
+    }
+
     var marginRight = body.offsetWidth - bodyWidth;
     body.style.position = 'fixed';
     body.style.top = -scrollTop + "px";
     body.style.left = '0';
-    body.style.right = marginRight + 'px';
+
+    if (!keepDisabledScroll) {
+      body.style.right = marginRight + 'px';
+    } else {
+      body.style.right = '0';
+    }
+
     finishReset(marginRight, scrollTop);
   } else {
-    // setTimeout(() => {
+    fakedScrollTop = 0; // setTimeout(() => {
+
     var _scrollTop = parseInt(body.style.top);
 
     body.style.overflow = '';
@@ -1530,9 +1601,9 @@ var DialogContainer = React.forwardRef(function (_ref, forwardedRef) {
   };
 
   var checkKey = function checkKey(e) {
-    var _e$target, _e$target$className;
+    var _e$target, _e$target$className, _e$target2;
 
-    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 (!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 (modal.current && e.shiftKey && e.keyCode === 9 && modal.current.querySelector('[tabindex]') === document.activeElement) {
       e.preventDefault();
@@ -1727,7 +1798,7 @@ var fixDoubledLastMarginBottom = function fixDoubledLastMarginBottom(children) {
     return processChild(children, 0);
   }
 
-  while (!children[last] || children[last] && children[last].type && children[last].type.displayName === "Errors") {
+  while ((!children[last] || children[last] && children[last].type && children[last].type.displayName === "Errors") && last > 0) {
     last--;
   }
 
@@ -1819,9 +1890,193 @@ var LoadingDiv = function LoadingDiv(_ref2) {
   }, children) : children);
 };
 
-function _templateObject8() {
+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  "]);
+
   _templateObject8 = function _templateObject8() {
     return data;
   };
@@ -1830,7 +2085,7 @@ function _templateObject8() {
 }
 
 function _templateObject7() {
-  var data = _taggedTemplateLiteral(["\n    padding: 1.5rem 1.5rem 0;\n    margin: -1.5rem;\n  "]);
+  var data = _taggedTemplateLiteral(["\n      ", " {\n        min-width: unset;\n        padding-left: 1rem;\n        padding-right: 1rem;\n      }\n    "]);
 
   _templateObject7 = function _templateObject7() {
     return data;
@@ -1840,7 +2095,7 @@ function _templateObject7() {
 }
 
 function _templateObject6() {
-  var data = _taggedTemplateLiteral(["\n    padding: 1.5rem;\n    margin: -1.5rem;\n  "]);
+  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      "]);
 
   _templateObject6 = function _templateObject6() {
     return data;
@@ -1850,7 +2105,7 @@ function _templateObject6() {
 }
 
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n      ", " {\n        min-width: unset;\n        padding-left: 1rem;\n        padding-right: 1rem;\n      }\n    "]);
+  var data = _taggedTemplateLiteral(["\n        bottom: -3rem;\n        margin-left: -2rem;\n        margin-right: -2rem;\n        margin-bottom: -1rem;\n        padding: 1rem 2rem;\n      "]);
 
   _templateObject5 = function _templateObject5() {
     return data;
@@ -1935,7 +2190,11 @@ var DialogTitle = styled__default.h2.withConfig({
 var DialogFooter = styled__default.div.withConfig({
   displayName: "Dialog__DialogFooter",
   componentId: "gai4ey-5"
-})(["width:100%;display:block;padding-top:1rem;margin-top:1rem;align-items:stretch;text-align:right;", ""], utils.media.max(370)(_templateObject5(), Button));
+})(["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));
 var FooterAuxiliaryContainer = styled__default.div.withConfig({
   displayName: "Dialog__FooterAuxiliaryContainer",
   componentId: "gai4ey-6"
@@ -1944,15 +2203,16 @@ 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(_templateObject6()));
+})(["padding:2rem;margin:-2rem;", ""], utils.media.mobile(_templateObject8()));
 var DialogAlwaysVisibleDiv = styled__default.div.withConfig({
   displayName: "Dialog__DialogAlwaysVisibleDiv",
   componentId: "gai4ey-8"
-})(["padding:2rem 2rem 0;margin:-2rem;", ""], utils.media.mobile(_templateObject7())); // END
+})(["padding:2rem 2rem 0;margin:-2rem;", ""], utils.media.mobile(_templateObject9())); // 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,
@@ -1965,10 +2225,14 @@ 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", "fixTitleMargin", "skipCloseIcon", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container"]);
+      props = _objectWithoutProperties(_ref, ["className", "skipWrap", "stickyFooter", "fixTitleMargin", "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",
@@ -1984,7 +2248,14 @@ 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(DialogFooter, null, auxiliarActions && React__default.createElement(FooterAuxiliaryContainer, null, utils.callIfFunction(auxiliarActions)), utils.callIfFunction(footer)));
+  }, 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());
+  }));
 
   var dialog = function dialog(confirmCloseDialog) {
     return React__default.createElement("div", {
@@ -2006,7 +2277,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(_templateObject8(), 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(_templateObject10(), 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);
@@ -2088,49 +2359,58 @@ 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;
+      confirmLabel = _ref$confirmLabel === void 0 ? "Entendi" : _ref$confirmLabel,
+      noActions = _ref.noActions,
+      children = _ref.children;
   return React__default.createElement(Dialog, {
-    className: className
-  }, React__default.createElement(MainIcon, {
+    className: className,
+    closeDialog: withX && closeDialog
+  }, _isString(icon) ? React__default.createElement(WarningDialogIcon, {
     icon: icon
-  }), title && React__default.createElement(Title, {
-    color: icon
+  }) : icon, title && React__default.createElement(WarningDialogTitle, {
+    color: color || icon
   }, title), content && React__default.createElement(Content, {
-    noTitle: !title
+    noTitle: !title,
+    noActions: noActions
   }, content), additionalContent, utils.callIfFunction(leftButton, closeDialog), confirmLabel !== false && React__default.createElement(Button, {
     highlight: true,
     onClick: closeDialog
-  }, confirmLabel), utils.callIfFunction(rightButton, closeDialog));
+  }, confirmLabel), utils.callIfFunction(rightButton, closeDialog), utils.callIfFunction(footer, closeDialog), children);
 }).withConfig({
   displayName: "WarningDialog",
   componentId: "sc-1jw779e-0"
 })(["text-align:center;max-width:36rem;padding:2.5rem;", "{margin:0.5rem !important;}"], Button);
-var Title = styled__default.h3.withConfig({
-  displayName: "WarningDialog__Title",
+var WarningDialogTitle = styled__default.h3.withConfig({
+  displayName: "WarningDialog__WarningDialogTitle",
   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') : utils.getColor('main');
+  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 1.5rem;line-height:130%;", ""], function (props) {
+})(["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 MainIcon = styled__default(Icon).withConfig({
-  displayName: "WarningDialog__MainIcon",
+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') : utils.getColor('main');
+  return props.icon === 'warning' ? utils.getColor('alert') : props.icon === 'success' ? utils.getColor('success') : props.icon === 'due-date' ? utils.getColor('warning') : utils.getColor('main');
 });
 var useWarningDialog = function useWarningDialog() {
   return useDialogWithToggle(function (toggle) {
@@ -2175,7 +2455,7 @@ var NotificationContainer = styled__default.div.withConfig({
 var Notification = styled__default.div.withConfig({
   displayName: "Notifications__Notification",
   componentId: "naxsn6-1"
-})(["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) {
+})(["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) {
   return utils.getColor(props.type)(props);
 }, Icon);
 
@@ -2238,6 +2518,16 @@ 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],
@@ -2275,14 +2565,25 @@ var Notification$1 = styled__default.div.withConfig({
 var NotificationWrapper = styled__default.div.withConfig({
   displayName: "PersistentNotifications__NotificationWrapper",
   componentId: "sc-1t7i0dh-2"
-})(["background:white;margin-top:4rem;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:360px;"]);
+})(["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];
 
-  if (!notifications.length) {
+  var _useIsHiddenPersisten = useIsHiddenPersistentNotifications(),
+      _useIsHiddenPersisten2 = _slicedToArray(_useIsHiddenPersisten, 1),
+      isHidden = _useIsHiddenPersisten2[0];
+
+  if (!notifications.length || isHidden) {
     return null;
   }
 
@@ -2294,11 +2595,13 @@ var PersistentNotifications = function PersistentNotifications() {
 
   var _notifications$ = notifications[0],
       content = _notifications$.content,
-      type = _notifications$.type;
+      type = _notifications$.type,
+      marginTop = _notifications$.marginTop;
   return React__default.createElement(core.Fill, {
     name: "PersistentNotifications"
   }, React__default.createElement(FlipNotification$1, {
-    type: type
+    type: type,
+    marginTop: marginTop
   }, utils.callIfFunction(content, closeMessage)));
 };
 
@@ -2308,7 +2611,9 @@ var FlipNotification$1 = function FlipNotification(props) {
   return React__default.createElement(NotificationContainer$1, {
     className: "JS-fix-dialog-scroll",
     ref: ref
-  }, React__default.createElement(NotificationWrapper, null, React__default.createElement(Notification$1, _extends({
+  }, React__default.createElement(NotificationWrapper, {
+    marginTop: props.marginTop
+  }, React__default.createElement(Notification$1, _extends({
     id: "js-share-notification"
   }, props))));
 };
@@ -2418,7 +2723,9 @@ 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;
+      respectBounds = _ref.respectBounds,
+      respectOffsetScroll = _ref.respectOffsetScroll,
+      on = _ref.on;
   var placeholder = React.useRef();
   var arrowRef = core.useEnsureRef(arrowRefOpt);
 
@@ -2443,8 +2750,8 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
       return;
     }
 
-    var usingLayer = useLayers && getDialogLayersSize() > 0;
-    var scrollOwner = usingLayer ? utils.getClosestOffsetScroll(element.current.offsetParent) : {
+    var usingLayer = respectOffsetScroll || useLayers && getDialogLayersSize() > 0;
+    var scrollOwner = usingLayer ? _isFunction(respectOffsetScroll) ? respectOffsetScroll(element.current.offsetParent) : utils.getClosestOffsetScroll(element.current.offsetParent) : {
       scrollTop: window.pageYOffset,
       scrollLeft: window.pageXOffset // console.log({scrollOwner,scrollTop:scrollOwner.scrollTop,pageYOffset:window.pageYOffset})
 
@@ -2452,9 +2759,24 @@ 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 _placeholder$current$ = placeholder.current.getBoundingClientRect(),
-        leftPlusBorder = _placeholder$current$.left,
-        topPlusBorder = _placeholder$current$.top;
+    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 _window$getComputedSt = window.getComputedStyle(placeholder.current.offsetParent),
         borderLeftWidth = _window$getComputedSt.borderLeftWidth,
@@ -2521,10 +2843,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 _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 _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 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);
@@ -2574,11 +2896,13 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
     }
   };
 
-  React.useLayoutEffect(setPosition, []);
+  React.useLayoutEffect(setPosition, [on]);
   React.useEffect(function () {
     window.addEventListener('portalReposition', setPosition);
     window.addEventListener('stepResize', setPosition);
-    window.addEventListener('scroll', setPosition);
+    window.addEventListener('scroll', setPosition, {
+      passive: true
+    });
     return function () {
       window.removeEventListener('portalReposition', setPosition);
       window.removeEventListener('stepResize', setPosition);
@@ -2689,6 +3013,8 @@ 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,
@@ -2736,12 +3062,15 @@ function (_React$Component) {
         skipTransform: true,
         smallJumpFix: _this.props.smallJumpFix
       });
-      var endEffect = utils.callIfFunction(effect, newSnap.parent.domNode, {
-        newSnap: newSnap,
-        oldSnap: oldSnap
-      });
-      utils.callIfFunction(onStartAnimation);
-      morph(newSnap.parent.domNode, formatAnimation(rectAnimation, timing), endEffect || onEndAnimation);
+
+      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);
+      }
     };
 
     _this.reinsertSnap = function (item, scrollDelta, allChildren) {
@@ -4061,10 +4390,10 @@ function _templateObject2$4() {
   return data;
 }
 
-function _templateObject$5() {
+function _templateObject$6() {
   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$5 = function _templateObject() {
+  _templateObject$6 = function _templateObject() {
     return data;
   };
 
@@ -4084,7 +4413,9 @@ var areComponentsEqual = function areComponentsEqual(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;}", " ", " ", " ", ""], Icon, utils.media.mobile(_templateObject$5(), 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;}", " ", " ", " ", ""], 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) {
   return polished.lighten(0.53, utils.getColor("main")(props));
 }, utils.getColor('main'), function (props) {
   return polished.darken(0.03, utils.getColor("main")(props));
@@ -4247,6 +4578,7 @@ 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,
@@ -4263,7 +4595,7 @@ var Li = function Li(_ref) {
       helpText = _ref.helpText,
       target = _ref.target,
       href = _ref.href,
-      rest = _objectWithoutProperties(_ref, ["emitter", "index", "keepOpen", "hover", "layerIndex", "hoverCursor", "passTouchThrough", "children", "setCursorOnHover", "onClick", "prefixWith", "linkTo", "icon", "label", "descText", "helpText", "target", "href"]);
+      rest = _objectWithoutProperties(_ref, ["emitter", "index", "menuSlot", "keepOpen", "hover", "layerIndex", "hoverCursor", "passTouchThrough", "children", "setCursorOnHover", "onClick", "prefixWith", "linkTo", "icon", "label", "descText", "helpText", "target", "href"]);
 
   var nodeRef = React.useRef();
   var tagRef = React.useRef();
@@ -4373,7 +4705,8 @@ var Li = function Li(_ref) {
         closing: subMenu.closing,
         onMouseMove: subMenu.open,
         onClose: onCloseSub,
-        sub: true
+        sub: true,
+        slot: c.props.slot || menuSlot
       });
     });
   };
@@ -4390,7 +4723,8 @@ var Li = function Li(_ref) {
     hover: hover,
     onClick: onClickHandler,
     onMouseLeave: onMouseOut,
-    onMouseMove: onMouseMove
+    onMouseMove: onMouseMove,
+    hasSubmenu: children
   }), rest.withButton || rest.noActions ? content : React__default.createElement(Tag, {
     href: href,
     target: target,
@@ -4417,6 +4751,7 @@ var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
       sub = _ref2.sub,
       hoverIndex = _ref2.hoverIndex,
       autoHover = _ref2.autoHover,
+      menuSlot = _ref2.menuSlot,
       withoutIcons = _ref2.withoutIcons,
       onClose = _ref2.onClose,
       _ref2$onHover = _ref2.onHover,
@@ -4425,7 +4760,7 @@ var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
   } : _ref2$onHover,
       fill = _ref2.fill,
       onClick = _ref2.onClick,
-      props = _objectWithoutProperties(_ref2, ["children", "sub", "hoverIndex", "autoHover", "withoutIcons", "onClose", "onHover", "fill", "onClick"]);
+      props = _objectWithoutProperties(_ref2, ["children", "sub", "hoverIndex", "autoHover", "menuSlot", "withoutIcons", "onClose", "onHover", "fill", "onClick"]);
 
   var ref = core.useEnsureRef(unesuredRef);
 
@@ -4497,11 +4832,19 @@ var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
   };
 
   var getTotalKeyboardItems = function getTotalKeyboardItems(children) {
-    var max = 0;
-    React__default.Children.forEach(children, function (e) {
-      return max += e && (!styled.isStyledComponent(e.type) && e.type === Li || e.type.isKeyboardNavigable || (areComponentsEqual(e.type, StickyContainer) ? getTotalKeyboardItems(e.props.children) : 0));
+    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);
+        }
+      }
     });
-    return max;
+    return sum;
   };
 
   var setCursorOnHover = function setCursorOnHover(index) {
@@ -4511,18 +4854,20 @@ var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
   };
 
   var formatChildren = function formatChildren(children) {
-    var indexOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    var i = 0;
+    var indexRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      current: 0
+    };
     return React__default.Children.map(children, function (child, j) {
-      return child ? !styled.isStyledComponent(child.type) && !reactIs.isMemo(child.type) && areComponentsEqual(child.type, Li) || child.type.isKeyboardNavigable ? React__default.cloneElement(child, {
-        hover: hoverCursor === i + indexOffset && layerIndex === layerCursor,
+      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,
         hoverCursor: hoverCursor,
-        index: indexOffset + i++,
+        index: indexRef.current++,
         setCursorOnHover: setCursorOnHover,
         emitter: itemsEmitter,
-        layerIndex: layerIndex
+        layerIndex: layerIndex,
+        menuSlot: menuSlot
       }) : areComponentsEqual(child.type, StickyContainer) ? React__default.cloneElement(child, _objectSpread({}, child.props, {
-        children: formatChildren(child.props.children, i + indexOffset)
+        children: formatChildren(child.props.children, indexRef)
       })) : child : child;
     });
   };
@@ -4588,6 +4933,7 @@ 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,
@@ -4614,10 +4960,10 @@ var callIfFunction = function callIfFunction(prop) {
   return typeof prop === "function" ? prop.apply(void 0, args) : prop;
 };
 
-function _templateObject$6() {
+function _templateObject$7() {
   var data = _taggedTemplateLiteral(["\n  ", ""]);
 
-  _templateObject$6 = function _templateObject() {
+  _templateObject$7 = function _templateObject() {
     return data;
   };
 
@@ -4626,10 +4972,10 @@ function _templateObject$6() {
 
 var checkCustomScreenWidth = function checkCustomScreenWidth(sizeParis, customWidth) {
   var currentWidth = callIfFunction(customWidth);
-  return !sizeParis.find(function (_ref4) {
-    var _ref5 = _slicedToArray(_ref4, 2),
-        size = _ref5[0],
-        type = _ref5[1];
+  return !sizeParis.find(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+        size = _ref6[0],
+        type = _ref6[1];
 
     if (type === "min-width") {
       return currentWidth < size;
@@ -4654,10 +5000,10 @@ var media = function media() {
     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 (_ref6) {
-        var _ref7 = _slicedToArray(_ref6, 2),
-            size = _ref7[0],
-            type = _ref7[1];
+      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));
@@ -4692,7 +5038,7 @@ var oneWayAnimation = function oneWayAnimation() {
     frames[_key5] = arguments[_key5];
   }
 
-  return emotion.keyframes(_templateObject$6(), frames.map(function (frame, i) {
+  return emotion.keyframes(_templateObject$7(), frames.map(function (frame, i) {
     return !frame ? '' : "".concat(getFrameOffset(i, frames.length), "% {\n      ").concat(frame, "\n    }");
   }));
 };
@@ -4715,10 +5061,16 @@ var identityOpacityFrames = oneWayAnimation('opacity: 1;', 'opacity:1;');
 var LoadingBar = styled__default.div.withConfig({
   displayName: "PageLoader__LoadingBar",
   componentId: "sc-96jeob-0"
-})(["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  ";
+})(["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";
+}, 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    width: 100%;\n    transition: 0.3s ease-in;\n  ";
+  return props.closing && "\n    transform: translateX(0);\n    transition: transform 0.3s ease-in;\n  ";
 });
 var PageLoader = function PageLoader(_ref) {
   var isLoading = _ref.isLoading;
@@ -4735,7 +5087,7 @@ var PageLoader = function PageLoader(_ref) {
     closing: loader.closing
   });
 };
-var animation$2 = utils.oneWayAnimation('width: 70%;', 'width: 100%');
+var animation$2 = utils.oneWayAnimation('transform:translateX(-30%);', 'transform:translateX(0);');
 var SuspenseLoadingBar = function SuspenseLoadingBar() {
   var ref = React__default.useRef();
   useFlipLeave(ref, animation$2, {
@@ -5046,8 +5398,8 @@ FillLastLineResizer.h2 = function (props) {
 };
 
 var DEFAULT_ANIMATION = utils.oneWayAnimation("opacity: 1;", "opacity: 0;");
-var BlockContainer$1 = styled__default.div.withConfig({
-  displayName: "TransitionDiv__BlockContainer",
+var AnimationBlockContainer = styled__default.div.withConfig({
+  displayName: "TransitionDiv__AnimationBlockContainer",
   componentId: "sc-1sh2xah-0"
 })(["", " position:relative;"], function (props) {
   return props.inline ? 'display: inline-block; ' : '';
@@ -5087,14 +5439,14 @@ var TransitionDiv = function TransitionDiv(_ref) {
     skipChromeFix: skipChromeFix,
     animation: animation || DEFAULT_ANIMATION
   }, rest), []);
-  return block || inline ? React__default.createElement(BlockContainer$1, {
+  return block || inline ? React__default.createElement(AnimationBlockContainer, {
     inline: inline,
     ref: blockRef,
     className: className
   }, content) : content;
 };
 
-var BlockContainer$2 = styled__default.div.withConfig({
+var BlockContainer$1 = styled__default.div.withConfig({
   displayName: "SwitchDiv__BlockContainer",
   componentId: "htfwpl-0"
 })(["position:relative;"]);
@@ -5141,167 +5493,12 @@ var SwitchContainer = function SwitchContainer(_ref2) {
   switchAnimation(contentRef, enterAnimation, leaveAnimation, {
     effect: effect
   });
-  return React__default.createElement(BlockContainer$2, {
+  return React__default.createElement(BlockContainer$1, {
     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,
@@ -5355,10 +5552,10 @@ var Image = React.forwardRef(function (_ref, ref) {
   }));
 });
 
-function _templateObject$7() {
+function _templateObject$8() {
   var data = _taggedTemplateLiteral(["\n      @supports (position: sticky) {\n        top: 0;\n        margin-right: -0.75rem;\n      }\n    "]);
 
-  _templateObject$7 = function _templateObject() {
+  _templateObject$8 = function _templateObject() {
     return data;
   };
 
@@ -5367,11 +5564,21 @@ function _templateObject$7() {
 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$7()));
+})(["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 _templateObject2$5() {
+function _templateObject3$3() {
   var data = _taggedTemplateLiteral(["\n    min-height: 100%;\n    overflow: hidden;\n  "]);
 
+  _templateObject3$3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2$5() {
+  var data = _taggedTemplateLiteral(["\n      font-size: 16px;\n    "]);
+
   _templateObject2$5 = function _templateObject2() {
     return data;
   };
@@ -5379,10 +5586,10 @@ function _templateObject2$5() {
   return data;
 }
 
-function _templateObject$8() {
+function _templateObject$9() {
   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$8 = function _templateObject() {
+  _templateObject$9 = function _templateObject() {
     return data;
   };
 
@@ -5393,13 +5600,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$8(), utils.getColor('gray240'), function (props) {
+}, utils.media.mobile(_templateObject$9(), 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.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.media.mobile(_templateObject2$5()), 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  ";
 });
 
@@ -5443,7 +5650,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 da página" : React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
+    }, React__default.createElement("h2", null, menuTabIsOpen ? "Configurações gerais" : 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, {
@@ -5486,7 +5693,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(_templateObject2$5()));
+})(["max-width:59rem;display:flex;padding:0;flex-direction:row;", ""], utils.media.mobile(_templateObject3$3()));
 
 var MobileBubbleDialogFooter = styled__default.div.withConfig({
   displayName: "MobileBubbleDialog__MobileBubbleDialogFooter",
@@ -5524,6 +5731,7 @@ 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;
@@ -5571,6 +5779,7 @@ exports.MobileBubbleDialog = MobileBubbleDialog;
 exports.Modal = Modal;
 exports.ModalContainer = ModalContainer;
 exports.Notifications = Notifications;
+exports.OnClickLoadingButton = OnClickLoadingButton;
 exports.PageLoader = PageLoader;
 exports.PersistentNotifications = PersistentNotifications;
 exports.Popup = Popup;
@@ -5585,6 +5794,8 @@ 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;
@@ -5595,6 +5806,8 @@ 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;
@@ -5609,6 +5822,7 @@ exports.useFlip = useFlip;
 exports.useFlipAnimation = useFlipAnimation;
 exports.useFlipEnter = useFlipEnter;
 exports.useFlipLeave = useFlipLeave;
+exports.useIsHiddenPersistentNotifications = useIsHiddenPersistentNotifications;
 exports.useNotification = useNotification;
 exports.useNotificationRef = useNotificationRef;
 exports.usePositioning = usePositioning;