@startlibs/components 1.0.0-alpha-7v → 1.0.0-alpha-7w

package/lib/index.js

@@ -19,28 +19,29 @@ var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers
 var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
 var router = require('@reach/router');
-var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
 var _assign = _interopDefault(require('lodash/fp/assign'));
 var core = require('@startlibs/core');
+var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
 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 ReactDOM = _interopDefault(require('react-dom'));
-var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
 var _ = _interopDefault(require('lodash/fp'));
+var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
 var _typeof = _interopDefault(require('@babel/runtime/helpers/typeof'));
 var emotion = require('emotion');
+var _isString = _interopDefault(require('lodash/fp/isString'));
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
-var mitt = _interopDefault(require('mitt'));
-var _debounce = _interopDefault(require('lodash/fp/debounce'));
 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'));
 var _without = _interopDefault(require('lodash/fp/without'));
 
 var IconComponent =
@@ -155,7 +156,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 51%;\n  transform: translateY(-50%);\n  right: 1rem;\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 51%;\n  transform: translateY(-50%);\n  right: 1rem;\n  font-size: 12px;\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -180,6 +181,7 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
       success = _ref.success,
       alert = _ref.alert,
       highlight = _ref.highlight,
+      light = _ref.light,
       hover = _ref.hover,
       white = _ref.white,
       icon = _ref.icon,
@@ -205,7 +207,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", "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", "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,
@@ -219,20 +221,22 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
   }), locked && React__default.createElement(LockIcon, {
     icon: "lock"
   }), children, isLoading && React__default.createElement(Loading, {
-    white: true,
-    absolute: true
+    white: !outline || !dashed || !white,
+    absolute: true,
+    size: small && '16',
+    borderWidth: small && '3'
   }));
 })).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;: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;: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));
 }, function (props) {
   return polished.darken(0.08, utils.getColor(props, true));
 }, function (props) {
-  return !props.noFocus && styled.css([":focus{", "}", ""], focus, function (props) {
+  return !props.noFocus && !props.isLoading && styled.css([":focus{", "}", ""], focus, function (props) {
     return props.focused && focus;
   });
 }, function (props) {
@@ -245,6 +249,12 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
   return props.withDropdown && styled.css(["padding-right:2.25rem;text-align:left;"]);
 }, function (props) {
   return props.onlyDropdown && styled.css(["", "{right:50%;transform:translate(50%,-50%);}"], DropdownIcon);
+}, function (props) {
+  return props.light && styled.css(["background:", ";color:", ";:hover{background:", ";}:active{background:", ";}"], utils.getColor('bluishGray'), utils.getColor('gray120'), function (props) {
+    return polished.darken(0.05, utils.getColor('bluishGray')(props));
+  }, function (props) {
+    return polished.darken(0.08, utils.getColor('bluishGray')(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) {
@@ -256,8 +266,10 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
 }, utils.media.mobile(_templateObject2(), function (props) {
   return !props.small && styled.css(["padding:13px 1.5rem;font-size:13px;"]);
 }), utils.media.max(359)(_templateObject3(), function (props) {
-  return !props.small && !props.onlyIcon && !props.onlyDropdown && styled.css(["padding-left:1rem;padding-right:1rem;min-width:0;"]);
-}), utils.customTheme("Button"));
+  return !props.small && !props.onlyIcon && !props.onlyDropdown && styled.css(["min-width:0;"]);
+}), function (props) {
+  return props.fullwidth && "\n    width: 100%;\n  ";
+}, utils.customTheme("Button"));
 
 Button.a = function (props) {
   return React__default.createElement(Button, _extends({}, props, {
@@ -390,6 +402,48 @@ var ifUndefined = function ifUndefined(v) {
 
   return v !== undefined ? v : or.length === 1 ? or[0] : ifUndefined.apply(void 0, [or[0]].concat(_toConsumableArray(or.slice(1))));
 };
+function isMobile() {
+  var check = false;
+
+  if (typeof navigator === 'undefined') {
+    return false;
+  }
+
+  (function (a) {
+    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series([46])0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br([ev])w|bumb|bw-([nu])|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do([cp])o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly([-_])|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-([mpt])|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c([- _agpst])|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac([ -/])|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja([tv])a|jbro|jemu|jigs|kddi|keji|kgt([ /])|klon|kpt |kwc-|kyo([ck])|le(no|xi)|lg( g|\/([klu])|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t([- ov])|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30([02])|n50([025])|n7(0([01])|10)|ne(([cm])-|on|tf|wf|wg|wt)|nok([6i])|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan([adt])|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c([-01])|47|mc|nd|ri)|sgh-|shar|sie([-m])|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c([- ])|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0, 4))) check = true;
+  })(navigator.userAgent || navigator.vendor || window['opera']);
+
+  return check;
+}
+var normalizeTouch = function normalizeTouch(fn, endFn) {
+  return function (e) {
+    var touch = e.touches[0];
+
+    if (e.touches.length > 1 && e.type !== 'touchend') {
+      callIfFunction(endFn, e, touch);
+    } else {
+      callIfFunction(fn, e, touch);
+    }
+  };
+};
+var normalizeMouse = function normalizeMouse(fn, endFn) {
+  return function (e) {
+    if (e.buttons > 1 && e.type !== 'mouseup') {
+      callIfFunction(endFn, e, e);
+    } else {
+      callIfFunction(fn, e, e);
+    }
+  };
+};
+var normalizePress = function normalizePress(fn, endFn) {
+  return function (e) {
+    if (e.touches) {
+      normalizeTouch(fn, endFn)(e);
+    } else {
+      normalizeMouse(fn, endFn)(e);
+    }
+  };
+};
 
 function _templateObject$1() {
   var data = _taggedTemplateLiteral(["\n  ", ""]);
@@ -406,7 +460,7 @@ var media = function media() {
   }
 
   return function () {
-    return styled.css(["@media screen and ", "{", "}"], sizePairs.map(function (_ref4) {
+    return styled.css(["@media ", "{", "}"], sizePairs.map(function (_ref4) {
       var _ref5 = _slicedToArray(_ref4, 2),
           size = _ref5[0],
           type = _ref5[1];
@@ -456,6 +510,54 @@ var twoWayAnimation = function twoWayAnimation() {
 var identityTranslateFrames = oneWayAnimation('transform: translateY(0);', 'transform: translateY(0);');
 var identityOpacityFrames = oneWayAnimation('opacity: 1;', 'opacity:1;');
 
+var disableSelect = function disableSelect(e) {
+  e.preventDefault();
+};
+
+var createPressEvent = function createPressEvent(onStart) {
+  return normalizePress(function (startEvent, info) {
+    var onEnd = onStart(startEvent, info);
+    var finish = normalizePress(function (e, info) {
+      callIfFunction(onEnd, e, info);
+      window.removeEventListener('selectstart', disableSelect);
+      window.removeEventListener('touchend', finish);
+      window.removeEventListener('mouseup', finish);
+    });
+    window.addEventListener('selectstart', disableSelect);
+
+    if (startEvent.touches) {
+      window.addEventListener('touchend', finish);
+    } else {
+      window.addEventListener("mouseup", finish);
+    }
+  });
+};
+var createPressAndMoveEvent = function createPressAndMoveEvent(onStart) {
+  return createPressEvent(function (startEvent, info) {
+    var _concat3 = [].concat(onStart(startEvent, info)),
+        _concat4 = _slicedToArray(_concat3, 2),
+        onMove = _concat4[0],
+        onEnd = _concat4[1];
+
+    var finish = normalizePress(function (e, info) {
+      callIfFunction(onEnd, e, info);
+      window.removeEventListener('touchmove', move);
+      window.removeEventListener('mousemove', move);
+    });
+    var move = normalizePress(onMove, finish);
+
+    if (startEvent.touches) {
+      window.addEventListener('touchmove', move, {
+        passive: false
+      });
+    } else {
+      window.addEventListener("mousemove", move);
+    }
+
+    return finish;
+  });
+};
+
 function _templateObject$2() {
   var data = _taggedTemplateLiteral(["test"]);
 
@@ -471,13 +573,39 @@ var getMargins = function getMargins(domNode) {
       marginTop = _window$getComputedSt.marginTop,
       marginLeft = _window$getComputedSt.marginLeft,
       marginBottom = _window$getComputedSt.marginBottom,
-      marginRight = _window$getComputedSt.marginRight;
+      marginRight = _window$getComputedSt.marginRight,
+      paddingTop = _window$getComputedSt.paddingTop;
 
   return {
     marginTop: marginTop,
     marginLeft: marginLeft,
     marginBottom: marginBottom,
-    marginRight: marginRight
+    marginRight: marginRight,
+    paddingTop: paddingTop
+  };
+};
+
+var getParentProperties = function getParentProperties(parentNode) {
+  if (!parentNode) return {};
+
+  var _window$getComputedSt2 = window.getComputedStyle(parentNode),
+      marginTop = _window$getComputedSt2.marginTop,
+      marginLeft = _window$getComputedSt2.marginLeft,
+      marginBottom = _window$getComputedSt2.marginBottom,
+      marginRight = _window$getComputedSt2.marginRight,
+      paddingBottom = _window$getComputedSt2.paddingBottom,
+      paddingTop = _window$getComputedSt2.paddingTop;
+
+  return {
+    parentStyle: {
+      marginTop: marginTop,
+      marginLeft: marginLeft,
+      marginBottom: marginBottom,
+      marginRight: marginRight,
+      paddingBottom: paddingBottom,
+      paddingTop: paddingTop
+    },
+    parentNode: parentNode
   };
 };
 
@@ -505,12 +633,11 @@ var toPosition = function toPosition(domNode) {
   return _objectSpread({
     domNode: domNode,
     nextSibling: domNode.nextSibling,
-    parentNode: domNode.parentNode,
     top: finalPosition ? domNode.offsetTop : top - parentRect.top,
     left: finalPosition ? domNode.offsetLeft : left - parentRect.left,
     height: height,
     width: width
-  }, margins);
+  }, getParentProperties(domNode.parentNode), margins);
 };
 
 var sumWithPx = function sumWithPx() {
@@ -588,15 +715,15 @@ var cloneWrapper = function cloneWrapper(element) {
     return tempWrapper.append(c);
   });
 
-  var _window$getComputedSt2 = window.getComputedStyle(element),
-      display = _window$getComputedSt2.display,
-      width = _window$getComputedSt2.width,
-      height = _window$getComputedSt2.height,
-      padding = _window$getComputedSt2.padding,
-      borderLeftWidth = _window$getComputedSt2.borderLeftWidth,
-      borderRightWidth = _window$getComputedSt2.borderRightWidth,
-      borderBottomWidth = _window$getComputedSt2.borderBottomWidth,
-      borderTopWidth = _window$getComputedSt2.borderTopWidth;
+  var _window$getComputedSt3 = window.getComputedStyle(element),
+      display = _window$getComputedSt3.display,
+      width = _window$getComputedSt3.width,
+      height = _window$getComputedSt3.height,
+      padding = _window$getComputedSt3.padding,
+      borderLeftWidth = _window$getComputedSt3.borderLeftWidth,
+      borderRightWidth = _window$getComputedSt3.borderRightWidth,
+      borderBottomWidth = _window$getComputedSt3.borderBottomWidth,
+      borderTopWidth = _window$getComputedSt3.borderTopWidth;
 
   Object.assign(tempWrapper.style, {
     display: display,
@@ -697,6 +824,8 @@ var getClientRectAnimation = function getClientRectAnimation(oldSnap, newSnap) {
       skipTransform = _ref5.skipTransform;
 
   if (hasClientRectChanged(oldSnap, newSnap)) {
+    var _oldSnap$parentStyle, _newSnap$parentStyle, _oldSnap$parentStyle2, _newSnap$parentStyle2;
+
     var node = newSnap.domNode;
     var offsetLeft = node.offsetLeft,
         offsetTop = node.offsetTop,
@@ -713,8 +842,8 @@ var getClientRectAnimation = function getClientRectAnimation(oldSnap, newSnap) {
     var finalPadding = '';
 
     if (deltaHeight > 0) {
-      var _window$getComputedSt3 = window.getComputedStyle(node),
-          paddingBottom = _window$getComputedSt3.paddingBottom;
+      var _window$getComputedSt4 = window.getComputedStyle(node),
+          paddingBottom = _window$getComputedSt4.paddingBottom;
 
       finalPadding = 'padding-bottom:' + paddingBottom + ';';
       heightFix = "padding-bottom: ".concat(sumWithPx(deltaHeight, paddingBottom));
@@ -722,20 +851,81 @@ var getClientRectAnimation = function getClientRectAnimation(oldSnap, newSnap) {
 
     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(oldSnap.marginTop || 0, ";\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, ";\n        width: ").concat(newSnap.width, "px;\n        height: ").concat(newSnap.height, "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 [];
   }
 };
 
-var playSwitch = function playSwitch(oldSnap, newSnap, _ref6) {
-  var switchIn = _ref6.switchIn,
-      switchOut = _ref6.switchOut,
-      switchAnimation = _ref6.switchAnimation,
-      timing = _ref6.timing,
-      _ref6$transformHeight = _ref6.transformHeight,
-      transformHeight = _ref6$transformHeight === void 0 ? _identity : _ref6$transformHeight;
+var getClientRectAnimationForSwitch = function getClientRectAnimationForSwitch(oldSnap, newSnap) {
+  var _ref6 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      skipTransform = _ref6.skipTransform;
+
+  if (hasClientRectChanged(oldSnap, newSnap)) {
+    var _node$parentNode, _node$parentNode2;
+
+    var node = newSnap.domNode;
+    var offsetLeft = node.offsetLeft,
+        offsetTop = node.offsetTop,
+        scrollHeight = node.scrollHeight,
+        clientHeight = node.clientHeight,
+        scrollWidth = node.scrollWidth,
+        clientWidth = node.clientWidth;
+    var scrollTop = ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.scrollTop) || 0;
+    var scrollLeft = ((_node$parentNode2 = node.parentNode) === null || _node$parentNode2 === void 0 ? void 0 : _node$parentNode2.scrollLeft) || 0; // get margin-bottom
+
+    var prevBorder = node.style.border;
+    node.style.border = '1px solid transparent';
+    var borderHeight = node.clientHeight;
+    node.style.border = prevBorder; // get negative margin top
+
+    var prevPadding = newSnap.paddingTop;
+    var nonPaddingFixTop = newSnap.clonedNode.getBoundingClientRect().top;
+    var topWithPaddingFix = nonPaddingFixTop;
+
+    if (!parseInt(prevPadding)) {
+      node.style.paddingTop = '1px';
+      topWithPaddingFix = newSnap.clonedNode.getBoundingClientRect().top;
+      node.style.paddingTop = '';
+    }
+
+    var newSnapNegativeTopMarginDelta = topWithPaddingFix - nonPaddingFixTop;
+    var newSnapBottomMarginDelta = clientHeight - borderHeight;
+    var left = oldSnap.left - offsetLeft + scrollLeft;
+    var top = oldSnap.top - offsetTop + scrollTop - newSnapNegativeTopMarginDelta;
+    var deltaHeight = oldSnap.height - newSnap.height;
+    var heightFix = '';
+    var finalPadding = '';
+
+    if (deltaHeight > 0) {
+      var _window$getComputedSt5 = window.getComputedStyle(node),
+          paddingBottom = _window$getComputedSt5.paddingBottom;
+
+      finalPadding = 'padding-bottom:' + paddingBottom + ';';
+      heightFix = "padding-bottom: ".concat(sumWithPx(deltaHeight, paddingBottom), ";");
+    }
+
+    var overflowFix = scrollHeight > clientHeight || scrollWidth > clientWidth ? "overflow: hidden;" : "";
+    var transform = (left !== 0 || top !== 0) && !skipTransform ? "transform: translate(".concat(left, "px,").concat(top, "px);") : '';
+    var oldTransform = node.style.transform;
+    return [utils.oneWayAnimation("\n        ".concat(transform, "\n        ").concat(heightFix, "\n        ").concat(overflowFix, "\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        width: ").concat(newSnap.width, "px;\n        height: ").concat(newSnap.height - newSnapBottomMarginDelta, "px;\n        "))];
+  } else {
+    return [];
+  }
+};
+
+var willPlaySwitch = function willPlaySwitch(oldSnap, newSnap, _ref7) {
+  var switchIn = _ref7.switchIn,
+      switchOut = _ref7.switchOut,
+      switchAnimation = _ref7.switchAnimation,
+      timing = _ref7.timing,
+      _ref7$transformHeight = _ref7.transformHeight,
+      transformHeight = _ref7$transformHeight === void 0 ? _identity : _ref7$transformHeight;
   var realWrapper = newSnap.domNode;
   var newChildren = [].slice.call(realWrapper.children); // realWrapper.style.willChange = 'width,height,margin-top;'
 
@@ -752,7 +942,7 @@ var playSwitch = function playSwitch(oldSnap, newSnap, _ref6) {
   // oldSnap.clonedNode.style.willChange = 'width,height,opacity'
 
   var realWrapperRect = realWrapper.getBoundingClientRect();
-  var resizeToNew = utils.oneWayAnimation("\n    overflow: hidden;\n    width: ".concat(realWrapperRect.width, "px;\n    height: ").concat(realWrapperRect.height, "px;\n    "), "\n    overflow: hidden;\n    width: ".concat(newSnap.clonedNode.style.width, ";\n    height: ").concat(utils.callIfFunction(transformHeight, newSnap.clonedNode.style.height, realWrapperRect), ";\n    "));
+  var resizeToNew = utils.oneWayAnimation("\n    overflow: hidden;\n    width: ".concat(oldSnap.width, "px;\n    height: ").concat(oldSnap.height, "px;\n    "), "\n    overflow: hidden;\n    width: ".concat(newSnap.clonedNode.style.width, ";\n    height: ").concat(utils.callIfFunction(transformHeight, newSnap.clonedNode.style.height, realWrapperRect), ";\n    "));
   childMAp(newChildren, function (c) {
     if (c.dataset && !c.dataset.noFlip) {
       if (c.style.opacity) {
@@ -769,12 +959,14 @@ var playSwitch = function playSwitch(oldSnap, newSnap, _ref6) {
   });
   var resizeOld = oldSnap.width > newSnap.width || oldSnap.height > newSnap.height ? [resizeToNew] : [resizeToNew];
   var resizeNew = oldSnap.width < newSnap.width || oldSnap.height < newSnap.height ? [resizeToNew] : [resizeToNew];
-  morph(oldSnap.clonedNode, formatAnimation([].concat(switchOut || switchAnimation, resizeOld), timing), function () {
-    return oldSnap.clonedNode.remove();
-  });
-  newSnap.clonedNode.style.opacity = '0';
-  continueSwitchCallbacks.set(realWrapper, continueSwitchOnClone(realWrapper));
-  morph(newSnap.clonedNode, formatAnimation([formatAnimation(switchIn || switchAnimation, timing, !switchIn)].concat(resizeNew), timing), finishSwitchNew(newSnap.clonedNode, realWrapper));
+  return function () {
+    morph(oldSnap.clonedNode, formatAnimation([].concat(switchOut || switchAnimation, resizeOld), timing), function () {
+      return oldSnap.clonedNode.remove();
+    });
+    newSnap.clonedNode.style.opacity = '0';
+    continueSwitchCallbacks.set(realWrapper, continueSwitchOnClone(realWrapper));
+    morph(newSnap.clonedNode, formatAnimation([formatAnimation(switchIn || switchAnimation, timing, !switchIn)].concat(resizeNew), timing), finishSwitchNew(newSnap.clonedNode, realWrapper));
+  };
 };
 
 var getDelays = function getDelays(el, animation) {
@@ -816,9 +1008,9 @@ function (_React$Component) {
   return Snapshoter;
 }(React__default.Component);
 
-var useFlip = function useFlip(_ref7) {
-  var on = _ref7.on,
-      moveOn = _ref7.moveOn;
+var useFlip = function useFlip(_ref8) {
+  var on = _ref8.on,
+      moveOn = _ref8.moveOn;
   core.useHiddenFill(React__default.createElement(Snapshoter, {
     on: on,
     moveOn: moveOn,
@@ -860,16 +1052,21 @@ var willUseFlip = function willUseFlip() {
   var useEnterAnimation = function useEnterAnimation(ref) {
     var onEnter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultEnterAnimation;
 
-    var _ref8 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-        onEnterEnd = _ref8.onEnterEnd,
-        _ref8$timing = _ref8.timing,
-        timing = _ref8$timing === void 0 ? defaultAnimationMaker : _ref8$timing;
+    var _ref9 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        onEnterEnd = _ref9.onEnterEnd,
+        _ref9$timing = _ref9.timing,
+        timing = _ref9$timing === void 0 ? defaultAnimationMaker : _ref9$timing,
+        enterEffect = _ref9.enterEffect;
 
     React.useLayoutEffect(function () {
       if (!morphEnabled && onEnter && ref.current) {
         var el = ref.current;
         var animation = formatAnimation(onEnter, timing);
-        morph(el, animation, onEnterEnd);
+        var endEffect = utils.callIfFunction(enterEffect, el);
+        morph(el, animation, function () {
+          utils.callIfFunction(onEnterEnd);
+          utils.callIfFunction(endEffect, el);
+        });
         enterChildrenCallback(timing);
       }
     }, [onEnter]);
@@ -878,16 +1075,17 @@ var willUseFlip = function willUseFlip() {
   var useLeaveAnimation = function useLeaveAnimation(ref) {
     var onLeave = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultEnterAnimation;
 
-    var _ref9 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-        removeRef = _ref9.ref,
-        _ref9$timing = _ref9.timing,
-        timing = _ref9$timing === void 0 ? defaultAnimationMaker : _ref9$timing,
-        _ref9$nestedFlip = _ref9.nestedFlip,
-        nestedFlip = _ref9$nestedFlip === void 0 ? false : _ref9$nestedFlip,
-        _ref9$events = _ref9.events,
-        events = _ref9$events === void 0 ? {} : _ref9$events,
-        _ref9$reverse = _ref9.reverse,
-        reverse = _ref9$reverse === void 0 ? true : _ref9$reverse;
+    var _ref10 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        removeRef = _ref10.ref,
+        leaveEffect = _ref10.leaveEffect,
+        _ref10$timing = _ref10.timing,
+        timing = _ref10$timing === void 0 ? defaultAnimationMaker : _ref10$timing,
+        _ref10$nestedFlip = _ref10.nestedFlip,
+        nestedFlip = _ref10$nestedFlip === void 0 ? false : _ref10$nestedFlip,
+        _ref10$events = _ref10.events,
+        events = _ref10$events === void 0 ? {} : _ref10$events,
+        _ref10$reverse = _ref10.reverse,
+        reverse = _ref10$reverse === void 0 ? true : _ref10$reverse;
 
     React.useLayoutEffect(function () {
       return function () {
@@ -899,6 +1097,12 @@ var willUseFlip = function willUseFlip() {
           var isNested = utils.callIfFunction(nestedFlip);
           var clone = isNested ? el : el.cloneNode(true);
 
+          utils._s.each(function (callback, type) {
+            return clone.addEventListener(type, callback);
+          }, events);
+
+          var endEffect = utils.callIfFunction(leaveEffect, clone, el);
+
           if (removeRef) {
             removeRef.current = clone;
           }
@@ -906,11 +1110,7 @@ var willUseFlip = function willUseFlip() {
           if (!isNested) {
             el.parentNode.insertBefore(clone, el);
           } // sometimes the clone may need to trigger events (usual case: onmouseover to reopen the element)
-
-
-          utils._s.each(function (callback, type) {
-            return clone.addEventListener(type, callback);
-          }, events); // allow clone to be continued by another animation
+          // allow clone to be continued by another animation
 
 
           controlElement = clone; // the animation
@@ -919,18 +1119,27 @@ var willUseFlip = function willUseFlip() {
             morph(clone, animation, function () {
               clone.remove();
               disableMorph();
+              utils.callIfFunction(endEffect, clone, el);
             });
           }; // wait for current animation to end and then animate
 
 
           if (clone.style.animation) {
+            var maxAnimationTime = _max((clone.style.animationDuration.split(",") || ["0.25s"]).map(function (s) {
+              return parseFloat(s.trim() || "0.25") * (s.indexOf("m") > 0 ? 1 : 1000);
+            }));
+
+            var timeoutRef = {};
+
             var animationEnd = function animationEnd(e) {
-              clone.animationDelay = '';
-              e.stopImmediatePropagation();
+              clearTimeout(timeoutRef.current || -1);
               clone.removeEventListener('animationend', animationEnd);
+              clone.animationDelay = '';
+              e === null || e === void 0 ? void 0 : e.stopImmediatePropagation();
               setTimeout(animate, 1);
             };
 
+            timeoutRef.current = setTimeout(animationEnd, maxAnimationTime);
             clone.addEventListener('animationend', animationEnd);
             clone.style.animationDelay = getDelays(el, clone.style.animation);
           } else {
@@ -944,9 +1153,9 @@ var willUseFlip = function willUseFlip() {
   var useMorphAnimation = function useMorphAnimation(ref) {
     var ready = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
 
-    var _ref10 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-        _ref10$timing = _ref10.timing,
-        timing = _ref10$timing === void 0 ? defaultAnimationMaker : _ref10$timing;
+    var _ref11 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        _ref11$timing = _ref11.timing,
+        timing = _ref11$timing === void 0 ? defaultAnimationMaker : _ref11$timing;
 
     React.useLayoutEffect(function () {
       if (ready && controlElement && ref.current) {
@@ -973,10 +1182,10 @@ var willUseFlip = function willUseFlip() {
         });
 
         if (rectAnimation.length) {
-          playSwitch(oldSnap, newSnap, {
+          willPlaySwitch(oldSnap, newSnap, {
             switchAnimation: defaultSwitchAnimation,
             timing: timing
-          });
+          })();
         }
 
         controlElement.remove();
@@ -994,8 +1203,8 @@ var willUseFlip = function willUseFlip() {
   };
 
   var useNestedEnterAnimation = function useNestedEnterAnimation(ref, onEnter) {
-    var _ref11 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-        timing = _ref11.timing;
+    var _ref12 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        timing = _ref12.timing;
 
     useRegisterEnter(function (parentTiming) {
       var el = ref.current;
@@ -1006,9 +1215,9 @@ var willUseFlip = function willUseFlip() {
   };
 
   var useNestLeaveAnimation = function useNestLeaveAnimation(ref, onLeave) {
-    var _ref12 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-        timing = _ref12.timing,
-        events = _ref12.events;
+    var _ref13 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        timing = _ref13.timing,
+        events = _ref13.events;
 
     useRegisterLeave(function (parentTiming) {
       var el = ref.current;
@@ -1023,7 +1232,9 @@ var willUseFlip = function willUseFlip() {
 
     return function (ref) {
       React.useLayoutEffect(function () {
-        if (ref.current.dataset) {
+        var _ref$current;
+
+        if ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.dataset) {
           ref.current.dataset.morphId = morphId;
         }
       });
@@ -1063,21 +1274,22 @@ var willUseFlipSwitch = function willUseFlipSwitch() {
   };
 
   return function (ref, onEnter, onLeave) {
-    var _ref13 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
-        _ref13$timing = _ref13.timing,
-        timing = _ref13$timing === void 0 ? defaultAnimationMaker : _ref13$timing,
-        _ref13$switchAnimatio = _ref13.switchAnimation,
-        switchAnimation = _ref13$switchAnimatio === void 0 ? defaultSwitchAnimation : _ref13$switchAnimatio,
-        effect = _ref13.effect;
+    var _ref14 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+        _ref14$timing = _ref14.timing,
+        timing = _ref14$timing === void 0 ? defaultAnimationMaker : _ref14$timing,
+        _ref14$switchAnimatio = _ref14.switchAnimation,
+        switchAnimation = _ref14$switchAnimatio === void 0 ? defaultSwitchAnimation : _ref14$switchAnimatio,
+        effect = _ref14.effect;
 
     React.useLayoutEffect(function () {
       if (oldSnap && ref.current) {
         var newSnap = getTempWrapper(ref.current, {
           withMargins: true
         });
+        var switchToPlay = _identity;
 
         if (oldSnap.clonedNode) {
-          playSwitch(oldSnap, newSnap, {
+          switchToPlay = willPlaySwitch(oldSnap, newSnap, {
             switchIn: utils.callIfFunction(onEnter),
             switchOut: utils.callIfFunction(onLeave),
             switchAnimation: utils.callIfFunction(switchAnimation),
@@ -1085,8 +1297,9 @@ var willUseFlipSwitch = function willUseFlipSwitch() {
           });
         }
 
-        var animation = getClientRectAnimation(oldSnap, newSnap);
-        var endEffect = utils.callIfFunction(effect, oldSnap.clonedNode, newSnap.clonedNode);
+        var animation = getClientRectAnimationForSwitch(oldSnap, newSnap);
+        var endEffect = utils.callIfFunction(effect, oldSnap.clonedNode, newSnap.clonedNode, ref.current);
+        switchToPlay();
         morph(newSnap.domNode, formatAnimation(animation, timing), function () {
           return utils.callIfFunction(endEffect, oldSnap.clonedNode, newSnap.clonedNode);
         });
@@ -1128,7 +1341,7 @@ function _templateObject2$1() {
 }
 
 function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["\n    padding: 3rem 0.5rem;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding: ", ";\n  "]);
 
   _templateObject$3 = function _templateObject() {
     return data;
@@ -1155,7 +1368,9 @@ var DialogCenter = styled__default.div.withConfig({
   componentId: "wendlg-2"
 })(["@supports (position:sticky){will-change:transform,opacity;&.JS-wc-off{will-change:auto;}}display:-webkit-box;display:-ms-flexbox;display:flex;overflow-y:", ";overflow-x:hidden;position:fixed;top:0;bottom:0;left:0;right:0;align-items:center;", " ", ""], function (props) {
   return props.withScroll ? "scroll" : "hidden";
-}, utils.media.desktop(_templateObject$3()), utils.media.mobile(_templateObject2$1(), function (props) {
+}, utils.media.desktop(_templateObject$3(), function (props) {
+  return props.fullscreen ? '1rem' : '3rem 0.5rem;';
+}), utils.media.mobile(_templateObject2$1(), function (props) {
   return props.fullscreenOnMobile ? '0' : '0.5rem';
 }));
 var PopupSlot = styled__default(core.Slot).withConfig({
@@ -1217,10 +1432,9 @@ var removeWindowScroll = function removeWindowScroll(opening) {
     }
   }
 
-  var finishReset = function finishReset(bodyWidth) {
-    var marginRight = body.offsetWidth - bodyWidth;
-    body.style.paddingRight = marginRight + 'px';
-    window.scroll(window.scrollLeft, scrollTop);
+  var finishReset = function finishReset(marginRight, scrollTop) {
+    // body.style.paddingRight = marginRight + 'px'
+    window.scroll(window.scrollLeft || window.scrollX || 0, scrollTop);
     fixPosition('.navbar,.JS-fix-dialog-scroll', function (n) {
       if (opening) {
         var _window$getComputedSt = window.getComputedStyle(n),
@@ -1238,25 +1452,37 @@ var removeWindowScroll = function removeWindowScroll(opening) {
         n.style.transform = null;
       }
     });
-    window.dispatchEvent(new CustomEvent('resize', {
-      detail: {
-        dialog: true
-      }
-    }));
+    window.requestAnimationFrame(function () {
+      return window.dispatchEvent(new CustomEvent('resize', {
+        detail: {
+          dialog: true
+        }
+      }));
+    });
   };
 
   var body = document.body;
   var bodyWidth = body.offsetWidth;
-  var scrollTop = window.pageYOffset;
 
   if (opening) {
+    var scrollTop = window.pageYOffset;
     body.style.overflow = 'hidden';
-    finishReset(bodyWidth);
+    var marginRight = body.offsetWidth - bodyWidth;
+    body.style.position = 'fixed';
+    body.style.top = -scrollTop + "px";
+    body.style.left = '0';
+    body.style.right = marginRight + 'px';
+    finishReset(marginRight, scrollTop);
   } else {
     // setTimeout(() => {
+    var _scrollTop = parseInt(body.style.top);
+
     body.style.overflow = '';
-    bodyWidth = body.offsetWidth;
-    finishReset(bodyWidth); // },250)
+    body.style.position = '';
+    body.style.top = '';
+    body.style.left = '';
+    body.style.right = '';
+    finishReset(0, -_scrollTop); // },250)
   }
 };
 
@@ -1283,13 +1509,16 @@ var DialogContainer = React.forwardRef(function (_ref, forwardedRef) {
       _ref$animation = _ref.animation,
       animation = _ref$animation === void 0 ? dialogFadeInDown : _ref$animation,
       animationTiming = _ref.animationTiming,
+      animationLeaveEffect = _ref.animationLeaveEffect,
+      animationEnterEffect = _ref.animationEnterEffect,
       skipKeys = _ref.skipKeys,
       fullscreenOnMobile = _ref.fullscreenOnMobile,
       _ref$confirmChanges = _ref.confirmChanges,
       confirmChanges = _ref$confirmChanges === void 0 ? true : _ref$confirmChanges,
       skipDom = _ref.skipDom,
       modalRef = _ref.modalRef,
-      skipCheckFocus = _ref.skipCheckFocus;
+      skipCheckFocus = _ref.skipCheckFocus,
+      autoComplete = _ref.autoComplete;
   var dialogRef = core.useEnsureRef(forwardedRef);
   var prevActiveElement = core.useRefState(document.activeElement);
   var modal = core.useEnsureRef(modalRef);
@@ -1312,7 +1541,7 @@ var DialogContainer = React.forwardRef(function (_ref, forwardedRef) {
         }
       }); // clearPreventDialogPop()
 
-      if (document.body.scrollHeight < document.body.clientHeight) {
+      if (document.body.scrollHeight === document.body.clientHeight) {
         modal.current.style.overflowY = "scroll";
 
         if (modalScroll.current) {
@@ -1328,7 +1557,7 @@ var DialogContainer = React.forwardRef(function (_ref, forwardedRef) {
         });
       }
 
-      if (document.body.scrollHeight >= document.body.clientHeight) {
+      if (document.body.scrollHeight > document.body.clientHeight) {
         if (modalScroll.current) {
           modalScroll.current.style.overflowY = "hidden";
         }
@@ -1425,7 +1654,9 @@ var DialogContainer = React.forwardRef(function (_ref, forwardedRef) {
   };
 
   var checkKey = function checkKey(e) {
-    if (!isTop() || skipKeys) return;
+    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) return;
 
     if (modal.current && e.shiftKey && e.keyCode === 9 && modal.current.querySelector('[tabindex]') === document.activeElement) {
       e.preventDefault();
@@ -1483,7 +1714,7 @@ var DialogContainer = React.forwardRef(function (_ref, forwardedRef) {
         removeWindowScroll(true);
       }
 
-      if (document.body.scrollHeight < document.body.clientHeight) {
+      if (document.body.scrollHeight === document.body.clientHeight) {
         modal.current.style.overflowY = "none";
       }
 
@@ -1491,6 +1722,8 @@ var DialogContainer = React.forwardRef(function (_ref, forwardedRef) {
         modalScroll.current.style.overflowY = "scroll";
       }
     },
+    leaveEffect: animationLeaveEffect,
+    enterEffect: animationEnterEffect,
     timing: animationTiming
   });
   useFlipAnimation(modal, !skipDom && utils.identityOpacityFrames, true, {
@@ -1512,6 +1745,7 @@ var DialogContainer = React.forwardRef(function (_ref, forwardedRef) {
   }), React__default.createElement(ModalContainer, {
     ref: modal
   }, React__default.createElement(DialogCenter, {
+    autoComplete: autoComplete,
     className: "JS-has-wc",
     withScroll: getSize() > 1,
     fullscreenOnMobile: fullscreenOnMobile,
@@ -1525,16 +1759,20 @@ var DialogContainer = React.forwardRef(function (_ref, forwardedRef) {
 var AnimatedModal = React__default.forwardRef(function (_ref2, ref) {
   var timing = _ref2.timing,
       nestedFlip = _ref2.nestedFlip,
+      enterEffect = _ref2.enterEffect,
+      leaveEffect = _ref2.leaveEffect,
       _ref2$modalIn = _ref2.modalIn,
       modalIn = _ref2$modalIn === void 0 ? dialogModalIn : _ref2$modalIn,
       _ref2$modalOut = _ref2.modalOut,
       modalOut = _ref2$modalOut === void 0 ? dialogModalOut : _ref2$modalOut,
-      props = _objectWithoutProperties(_ref2, ["timing", "nestedFlip", "modalIn", "modalOut"]);
+      props = _objectWithoutProperties(_ref2, ["timing", "nestedFlip", "enterEffect", "leaveEffect", "modalIn", "modalOut"]);
 
   var modal = core.useEnsureRef(ref);
   useFlipAnimation(modal, modalIn, modalOut, {
     timing: timing,
-    nestedFlip: nestedFlip
+    nestedFlip: nestedFlip,
+    leaveEffect: leaveEffect,
+    enterEffect: enterEffect
   });
   return React__default.createElement(Modal, _extends({}, props, {
     ref: modal
@@ -1552,7 +1790,7 @@ function _templateObject2$2() {
 }
 
 function _templateObject$4() {
-  var data = _taggedTemplateLiteral(["\n    display: flex;\n    flex-wrap: nowrap;\n    margin-left: -", "rem;\n    margin-right: -", "rem;\n    margin-top: -", "rem;\n    > * {\n      flex-basis: 0;\n      flex-grow: 1;\n      margin-left: ", "rem;\n      margin-right: ", "rem;\n      margin-top: ", "rem;\n    }\n  "]);
+  var data = _taggedTemplateLiteral(["\n      display: flex;\n      flex-wrap: nowrap;\n      margin-left: -", "rem;\n      margin-right: -", "rem;\n      margin-top: -", "rem;\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n        margin-left: ", "rem;\n        margin-right: ", "rem;\n        margin-top: ", "rem;\n      }\n    "]);
 
   _templateObject$4 = function _templateObject() {
     return data;
@@ -1620,9 +1858,114 @@ var fixDoubledLastMarginBottom = function fixDoubledLastMarginBottom(children) {
   return React__default.Children.map(children, processChild);
 };
 
-function _templateObject6() {
+var _twoWayAnimation$1 = utils.twoWayAnimation('opacity:0;', 'opacity:1;'),
+    _twoWayAnimation2$1 = _slicedToArray(_twoWayAnimation$1, 2),
+    loadingEnter = _twoWayAnimation2$1[0],
+    loadingLeave = _twoWayAnimation2$1[1];
+
+var _twoWayAnimation3 = utils.twoWayAnimation('opacity:0; transform:translateY(50%)', 'opacity:1;transform:translateY(0)'),
+    _twoWayAnimation4 = _slicedToArray(_twoWayAnimation3, 2),
+    onEnter = _twoWayAnimation4[0],
+    onLeave = _twoWayAnimation4[1];
+
+var BlockContainer = styled__default.div.withConfig({
+  displayName: "LoadingDiv__BlockContainer",
+  componentId: "sc-1g7ljba-0"
+})(["position:relative;"]);
+
+var FlipDiv = function FlipDiv(_ref) {
+  var useAnimation = _ref.useAnimation,
+      outerRef = _ref.outerRef,
+      _ref$onEnter = _ref.onEnter,
+      onEnter = _ref$onEnter === void 0 ? onEnter : _ref$onEnter,
+      _ref$onLeave = _ref.onLeave,
+      onLeave = _ref$onLeave === void 0 ? onLeave : _ref$onLeave,
+      props = _objectWithoutProperties(_ref, ["useAnimation", "outerRef", "onEnter", "onLeave"]);
+
+  var ensuredRef = core.useEnsureRef(outerRef);
+  useAnimation(ensuredRef, onEnter, onLeave);
+  return React__default.createElement(BlockContainer, _extends({}, props, {
+    ref: ensuredRef
+  }));
+};
+
+var PaddingDiv = styled__default.div.withConfig({
+  displayName: "LoadingDiv__PaddingDiv",
+  componentId: "sc-1g7ljba-1"
+})(["padding:", " 0;"], function (props) {
+  return props.height;
+});
+var LoadingDiv = function LoadingDiv(_ref2) {
+  var _ref2$defaultToSuspen = _ref2.defaultToSuspense,
+      defaultToSuspense = _ref2$defaultToSuspen === void 0 ? true : _ref2$defaultToSuspen,
+      fallback = _ref2.fallback,
+      isLoading = _ref2.isLoading,
+      className = _ref2.className,
+      _ref2$height = _ref2.height,
+      height = _ref2$height === void 0 ? 12 : _ref2$height,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 32 : _ref2$size,
+      _ref2$borderWidth = _ref2.borderWidth,
+      borderWidth = _ref2$borderWidth === void 0 ? 5 : _ref2$borderWidth,
+      children = _ref2.children;
+  var flipAnimation = core.useLazyConstant(willUseFlipSwitch);
+  var loadingBlock = React__default.createElement(PaddingDiv, {
+    height: _isString(height) ? borderWidth : height + 'rem'
+  }, React__default.createElement(Loading, {
+    autoFocus: true,
+    absolute: true,
+    size: size,
+    borderWidth: borderWidth
+  }));
+  return React__default.createElement(React__default.Suspense, {
+    fallback: React__default.createElement(FlipDiv, {
+      key: "loading",
+      padded: true,
+      onEnter: loadingEnter,
+      onLeave: loadingLeave,
+      useAnimation: flipAnimation,
+      className: className
+    }, fallback, loadingBlock)
+  }, typeof isLoading === 'boolean' || defaultToSuspense ? isLoading ? React__default.createElement(FlipDiv, {
+    key: "loading",
+    padded: true,
+    onEnter: loadingEnter,
+    onLeave: loadingLeave,
+    useAnimation: flipAnimation,
+    className: className
+  }, fallback, loadingBlock) : React__default.createElement(FlipDiv, {
+    key: "loaded",
+    loaded: true,
+    onEnter: loadingEnter,
+    onLeave: loadingLeave,
+    useAnimation: flipAnimation,
+    className: className
+  }, children) : children);
+};
+
+function _templateObject8() {
   var data = _taggedTemplateLiteral(["\n    padding: 1.5rem 1.5rem 1.5rem;\n    max-width: 100%;\n    ", ";\n  "]);
 
+  _templateObject8 = function _templateObject8() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject7() {
+  var data = _taggedTemplateLiteral(["\n    padding: 1.5rem 1.5rem 0;\n    margin: -1.5rem;\n  "]);
+
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject6() {
+  var data = _taggedTemplateLiteral(["\n    padding: 1.5rem;\n    margin: -1.5rem;\n  "]);
+
   _templateObject6 = function _templateObject6() {
     return data;
   };
@@ -1718,117 +2061,70 @@ var DialogFooter = styled__default.div.withConfig({
 var FooterAuxiliaryContainer = styled__default.div.withConfig({
   displayName: "Dialog__FooterAuxiliaryContainer",
   componentId: "gai4ey-6"
-})(["flex-grow:1;align-self:center;display:inline-block;padding-right:1rem;float:left;"]);
-
-var _twoWayAnimation$1 = utils.twoWayAnimation('opacity:0;', 'opacity:1;'),
-    _twoWayAnimation2$1 = _slicedToArray(_twoWayAnimation$1, 2),
-    loadingEnter = _twoWayAnimation2$1[0],
-    loadingLeave = _twoWayAnimation2$1[1];
-
-var _twoWayAnimation3 = utils.twoWayAnimation('opacity:0; transform:translateY(50%)', 'opacity:1;transform:translateY(0)'),
-    _twoWayAnimation4 = _slicedToArray(_twoWayAnimation3, 2),
-    onEnter = _twoWayAnimation4[0],
-    onLeave = _twoWayAnimation4[1];
+})(["flex-grow:1;align-self:center;display:inline-block;padding-right:1rem;float:left;"]); // THIS IS NEEDED FOR LOADING ANIMATION ON DialogWithImageHeader
 
-var BlockContainer = styled__default.div.withConfig({
-  displayName: "Dialog__BlockContainer",
+var DialogContentWrapper = styled__default(LoadingDiv).withConfig({
+  displayName: "Dialog__DialogContentWrapper",
   componentId: "gai4ey-7"
-})(["position:relative;overflow:hidden;", ""], function (props) {
-  return props.padded ? 'padding:12rem 0;' : '';
-});
+})(["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(_templateObject7())); // END
 
-var FlipDiv = function FlipDiv(_ref) {
-  var useAnimation = _ref.useAnimation,
-      outerRef = _ref.outerRef,
-      _ref$onEnter = _ref.onEnter,
-      onEnter = _ref$onEnter === void 0 ? onEnter : _ref$onEnter,
-      _ref$onLeave = _ref.onLeave,
-      onLeave = _ref$onLeave === void 0 ? onLeave : _ref$onLeave,
-      props = _objectWithoutProperties(_ref, ["useAnimation", "outerRef", "onEnter", "onLeave"]);
+var Dialog = styled__default(React__default.forwardRef(function (_ref, outerRef) {
+  var className = _ref.className,
+      skipWrap = _ref.skipWrap,
+      isLoading = _ref.isLoading,
+      footer = _ref.footer,
+      Content = _ref.Content,
+      children = _ref.children,
+      title = _ref.title,
+      illustration = _ref.illustration,
+      icon = _ref.icon,
+      auxiliarActions = _ref.auxiliarActions,
+      _ref$container = _ref.container,
+      container = _ref$container === void 0 ? true : _ref$container,
+      props = _objectWithoutProperties(_ref, ["className", "skipWrap", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container"]);
 
-  var ensuredRef = core.useEnsureRef(outerRef);
-  useAnimation(ensuredRef, onEnter, onLeave);
-  return React__default.createElement(BlockContainer, _extends({}, props, {
-    ref: ensuredRef
-  }));
-};
+  var ref = core.useEnsureRef(outerRef);
 
-var Dialog = styled__default(React__default.forwardRef(function (_ref2, outerRef) {
-  var className = _ref2.className,
-      isLoading = _ref2.isLoading,
-      footer = _ref2.footer,
-      Content = _ref2.Content,
-      children = _ref2.children,
-      title = _ref2.title,
-      illustration = _ref2.illustration,
-      icon = _ref2.icon,
-      auxiliarActions = _ref2.auxiliarActions,
-      _ref2$container = _ref2.container,
-      container = _ref2$container === void 0 ? true : _ref2$container,
-      props = _objectWithoutProperties(_ref2, ["className", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container"]);
+  var alwaysVisible = function alwaysVisible(confirmCloseDialog) {
+    return React__default.createElement(React__default.Fragment, null, props.closeDialog && React__default.createElement(CloseIcon, {
+      className: "JS-dialog-close",
+      onClick: confirmCloseDialog
+    }), title && React__default.createElement(DialogTitle, null, utils.callIfFunction(title)));
+  };
 
-  var ref = core.useEnsureRef(outerRef);
-  var flipAnimation = core.useLazyConstant(willUseFlipSwitch);
-  var content = React__default.createElement(React__default.Fragment, null, !Content && children && React__default.createElement(DialogContent, {
+  var content = React__default.createElement(React__default.Fragment, null, Content && React__default.createElement(DialogContent, {
+    icon: icon,
+    illustration: illustration
+  }, utils.callIfFunction(Content)), !Content && children && React__default.createElement(DialogContent, {
     icon: icon,
     illustration: illustration
-  }, utils.callIfFunction(children)), Content && children && utils.callIfFunction(children));
+  }, 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", {
-      className: className + " JS-has-wc",
+      className: className + " JS-has-wc JS-dialog",
       ref: ref
-    }, props.closeDialog && React__default.createElement(CloseIcon, {
-      onClick: confirmCloseDialog
-    }), title && React__default.createElement(DialogTitle, null, utils.callIfFunction(title)), Content && React__default.createElement(DialogContent, {
-      icon: icon,
-      illustration: illustration
-    }, utils.callIfFunction(Content)), React__default.createElement(React__default.Suspense, {
-      fallback: React__default.createElement(FlipDiv, {
-        key: "loading",
-        padded: true,
-        onEnter: loadingEnter,
-        onLeave: loadingLeave,
-        useAnimation: flipAnimation,
-        className: className
-      }, React__default.createElement(Loading, {
-        autoFocus: true,
-        absolute: true,
-        size: 40,
-        borderWidth: 6
-      }))
-    }, typeof isLoading === 'boolean' ? isLoading ? React__default.createElement(FlipDiv, {
-      key: "loading",
-      padded: true,
-      onEnter: loadingEnter,
-      onLeave: loadingLeave,
-      useAnimation: flipAnimation,
-      className: className
-    }, React__default.createElement(Loading, {
-      autoFocus: true,
-      absolute: true,
-      size: 40,
-      borderWidth: 6
-    })) : React__default.createElement(FlipDiv, {
-      key: "loaded",
-      onEnter: loadingEnter,
-      onLeave: loadingLeave,
-      useAnimation: flipAnimation
-    }, content) : content), footer && React__default.createElement(DialogFooter, null, auxiliarActions && React__default.createElement(FooterAuxiliaryContainer, null, utils.callIfFunction(auxiliarActions)), utils.callIfFunction(footer)));
+    }, skipWrap ? React__default.createElement(React__default.Fragment, null, alwaysVisible(confirmCloseDialog), content) : React__default.createElement(React__default.Fragment, null, React__default.createElement(DialogAlwaysVisibleDiv, null, alwaysVisible(confirmCloseDialog)), React__default.createElement(DialogContentWrapper, {
+      isLoading: isLoading
+    }, content)));
   };
 
   return container ? React__default.createElement(DialogContainer, _extends({}, props, {
     DialogErrorContent: DialogErrorContent,
     ref: ref,
     title: title
-  }), function (_ref3) {
-    var confirmCloseDialog = _ref3.confirmCloseDialog;
+  }), function (_ref2) {
+    var confirmCloseDialog = _ref2.confirmCloseDialog;
     return dialog(confirmCloseDialog);
   }) : dialog(props.closeDialog);
 })).withConfig({
   displayName: "Dialog",
-  componentId: "gai4ey-8"
-})(["@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(_templateObject6(), function (props) {
+  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) {
   return props.fullscreenOnMobile && "\n      border-radius: 0;\n      min-height: 100%;\n    ";
 }), function (props) {
   return props.closeDialog && styled.css(["", "{padding-right:2rem;}"], DialogTitle);
@@ -1839,8 +2135,8 @@ var ConfirmDialog = function ConfirmDialog(props) {
   }), props.children);
 };
 var DefaultConfirmDialog = function DefaultConfirmDialog(props) {
-  return React__default.createElement(core.StartlibsConsumer, null, function (_ref4) {
-    var confirmDialogLabels = _ref4.confirmDialogLabels;
+  return React__default.createElement(core.StartlibsConsumer, null, function (_ref3) {
+    var confirmDialogLabels = _ref3.confirmDialogLabels;
     return React__default.createElement(ConfirmDialog, {
       title: confirmDialogLabels.title,
       closeDialog: props.onCancel,
@@ -1859,14 +2155,14 @@ var DefaultConfirmDialog = function DefaultConfirmDialog(props) {
     }, React__default.createElement("p", null, confirmDialogLabels.content));
   });
 };
-var DialogErrorContent = function DialogErrorContent(_ref5) {
-  var closeDialog = _ref5.closeDialog,
-      title = _ref5.title;
-  return React__default.createElement(core.StartlibsConsumer, null, function (_ref6) {
-    var _ref6$ErrorDialog = _ref6.ErrorDialog,
-        title = _ref6$ErrorDialog.title,
-        content = _ref6$ErrorDialog.content,
-        close = _ref6$ErrorDialog.close;
+var DialogErrorContent = function DialogErrorContent(_ref4) {
+  var closeDialog = _ref4.closeDialog,
+      title = _ref4.title;
+  return React__default.createElement(core.StartlibsConsumer, null, function (_ref5) {
+    var _ref5$ErrorDialog = _ref5.ErrorDialog,
+        title = _ref5$ErrorDialog.title,
+        content = _ref5$ErrorDialog.content,
+        close = _ref5$ErrorDialog.close;
     return React__default.createElement(Dialog, {
       as: "div"
     }, closeDialog && React__default.createElement(CloseIcon, {
@@ -1878,13 +2174,13 @@ var DialogErrorContent = function DialogErrorContent(_ref5) {
     }, close)));
   });
 };
-var DialogError = function DialogError(_ref7) {
-  var closeDialog = _ref7.closeDialog;
-  return React__default.createElement(core.StartlibsConsumer, null, function (_ref8) {
-    var _ref8$ErrorDialog = _ref8.ErrorDialog,
-        title = _ref8$ErrorDialog.title,
-        content = _ref8$ErrorDialog.content,
-        close = _ref8$ErrorDialog.close;
+var DialogError = function DialogError(_ref6) {
+  var closeDialog = _ref6.closeDialog;
+  return React__default.createElement(core.StartlibsConsumer, null, function (_ref7) {
+    var _ref7$ErrorDialog = _ref7.ErrorDialog,
+        title = _ref7$ErrorDialog.title,
+        content = _ref7$ErrorDialog.content,
+        close = _ref7$ErrorDialog.close;
     return React__default.createElement(Dialog, {
       closeDialog: closeDialog,
       title: title
@@ -1974,27 +2270,42 @@ var ARROW_KEY_POSITIONS = {
   top: '0',
   bottom: '-0'
 };
+var POSITIONING_BOUNDS = {
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0
+};
+var addPositioningBound = function addPositioningBound(key, value) {
+  POSITIONING_BOUNDS[key] += value;
+  return function () {
+    return POSITIONING_BOUNDS[key] -= value;
+  };
+};
 
-function getPosition(origin, offset, max, originSize, selfSize, originalAlignment, selfAlignment, onCollision, mapping) {
+function getPosition(origin, offset, max, originSize, selfSize, originalAlignment, selfAlignment, onCollision, mapping, boundMargin) {
   // 0 pra left ou top, 1/2 pra center, 1 pra right ou bottom
   var originDiff = originSize * (mapping.indexOf(originalAlignment) / 2); // 0 pra left ou top, -1/2 pra center, -1 pra right ou bottom
 
   var selfDiff = -(selfSize * (mapping.indexOf(selfAlignment) / 2));
-  var newPosition = origin + selfDiff + originDiff + offset;
-  var collision = Math.max(-newPosition, newPosition + selfSize - max);
+  var respectingBounds = boundMargin !== false;
+  var upperBound = respectingBounds ? POSITIONING_BOUNDS[mapping[0]] + boundMargin : Number.MIN_SAFE_INTEGER;
+  var lowerBound = respectingBounds ? POSITIONING_BOUNDS[mapping[2]] + boundMargin : 0;
+  var newPosition = Math.max(upperBound, origin + selfDiff + originDiff + offset);
+  var collision = Math.max(-newPosition, newPosition + selfSize - max + lowerBound);
 
   if (collision > 0 && onCollision !== 'none') {
     if (onCollision.indexOf('flip') >= 0) {
-      var flippedPosition = getPosition(origin, -offset, max, originSize, selfSize, originalAlignment, selfAlignment, onCollision.indexOf('fit') >= 0 ? 'fit' : 'none', mapping.slice().reverse());
+      var flippedPosition = getPosition(origin, -offset, max, originSize, selfSize, originalAlignment, selfAlignment, onCollision.indexOf('fit') >= 0 ? 'fit' : 'none', mapping.slice().reverse(), boundMargin);
       var flippedCollision = Math.max(-flippedPosition[0], flippedPosition[0] + selfSize - max);
 
-      if (collision > 0 && flippedCollision > 0) {
-        return getPosition(origin, offset, max, originSize, selfSize, originalAlignment, selfAlignment, 'fit', mapping);
+      if (collision > 0 && flippedCollision > 0 || flippedPosition[0] < upperBound) {
+        return getPosition(origin, offset, max, originSize, selfSize, originalAlignment, selfAlignment, 'fit', mapping, boundMargin);
       }
 
       return collision < flippedCollision ? [newPosition, 'none'] : [flippedPosition[0], flippedPosition[1] === 'fit' ? 'flipfit' : 'flip'];
     } else {
-      return newPosition < 0 ? [0, 'fitted'] : [newPosition - collision, collision !== 0 ? 'fit' : 'none'];
+      return newPosition < upperBound ? [upperBound, 'fitted'] : [Math.max(upperBound, newPosition - collision), collision !== 0 ? 'fit' : 'none'];
     }
   } else {
     return [newPosition, 'none'];
@@ -2038,7 +2349,10 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
       onRight = _ref.right,
       onTop = _ref.top,
       _ref$keepWidth = _ref.keepWidth,
-      keepWidth = _ref$keepWidth === void 0 ? true : _ref$keepWidth;
+      keepWidth = _ref$keepWidth === void 0 ? true : _ref$keepWidth,
+      _ref$boundMargin = _ref.boundMargin,
+      boundMargin = _ref$boundMargin === void 0 ? 6 : _ref$boundMargin,
+      respectBounds = _ref.respectBounds;
   var placeholder = React.useRef();
   var arrowRef = core.useEnsureRef(arrowRefOpt);
 
@@ -2082,9 +2396,9 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
 
     var left = leftPlusBorder - parseInt(borderLeftWidth, 10);
     var top = topPlusBorder - parseInt(borderTopWidth, 10);
-    var _ref2 = placeholder.current.offsetParent,
-        parentOffsetWidth = _ref2.offsetWidth,
-        parentOffsetHeight = _ref2.offsetHeight;
+    var _placeholder$current$2 = placeholder.current.offsetParent,
+        parentOffsetWidth = _placeholder$current$2.offsetWidth,
+        parentOffsetHeight = _placeholder$current$2.offsetHeight;
     var _element$current = element.current,
         popupOffsetWidth = _element$current.offsetWidth,
         popupOffsetHeight = _element$current.offsetHeight;
@@ -2123,12 +2437,12 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
         verticalAt = _replace$split4[0],
         horizontalAt = _replace$split4[1];
 
-    var _getPosition = getPosition(left, offsetX, bodyWidth, parentOffsetWidth, fill ? parentOffsetWidth : popupOffsetWidth, horizontalAt, horizontalMy, horizontalCollision, HORIZONTAL_MAPPING),
+    var _getPosition = getPosition(left, offsetX, bodyWidth, parentOffsetWidth, fill ? parentOffsetWidth : popupOffsetWidth, horizontalAt, horizontalMy, horizontalCollision, HORIZONTAL_MAPPING, !!respectBounds && boundMargin),
         _getPosition2 = _slicedToArray(_getPosition, 2),
         processedLeft = _getPosition2[0],
         collisionH = _getPosition2[1];
 
-    var _getPosition3 = getPosition(top, offsetY, windowHeight, parentOffsetHeight, popupOffsetHeight, verticalAt, verticalMy, verticalCollision, VERTICAL_MAPPING),
+    var _getPosition3 = getPosition(top, offsetY, windowHeight, parentOffsetHeight, popupOffsetHeight, verticalAt, verticalMy, verticalCollision, VERTICAL_MAPPING, !!respectBounds && boundMargin),
         _getPosition4 = _slicedToArray(_getPosition3, 2),
         processedTop = _getPosition4[0],
         collisionV = _getPosition4[1];
@@ -2141,13 +2455,23 @@ 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);
+    element.current.style.maxHeight = '';
+
+    if (parseInt(window.getComputedStyle(element.current).maxHeight) > maxHeight) {
+      element.current.style.maxHeight = maxHeight + 'px';
+    }
 
     if (keepWidth) {
       element.current.style.width = Math.ceil(popupCurrentWidth) + "px";
+    } else {
+      element.current.style.maxWidth = maxWidth + 'px';
     } // console.log({processedTop,top,offsetY,scrollY})
 
 
@@ -2168,6 +2492,8 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
       atBottom: verticalAt === 'bottom' && !flippedV || verticalAt === 'top' && flippedV,
       atLeft: horizontalAt === 'left' && !flippedH || verticalAt === 'right' && flippedH,
       atRight: horizontalAt === 'right' && !flippedH || verticalAt === 'left' && flippedH,
+      fullHeight: popupOffsetHeight > maxHeight,
+      fullWidth: popupOffsetWidth > maxWidth,
       arrowSide: arrowSide,
       arrowOffset: arrowOffset,
       arrowStyle: arrowStyle
@@ -2184,8 +2510,6 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
 
   React.useLayoutEffect(setPosition, []);
   React.useEffect(function () {
-    var debouncedSetPosition = _debounce(100, setPosition);
-
     window.addEventListener('portalReposition', setPosition);
     window.addEventListener('stepResize', setPosition);
     window.addEventListener('scroll', setPosition);
@@ -2305,6 +2629,7 @@ function (_React$Component) {
           removeAnimation = _this$props.removeAnimation,
           onEndAnimation = _this$props.onEndAnimation,
           onStartAnimation = _this$props.onStartAnimation,
+          effect = _this$props.effect,
           skipChromeFix = _this$props.skipChromeFix,
           timing = _this$props.timing;
       newSnap.children.forEach(function (newItemSnap) {
@@ -2341,8 +2666,12 @@ function (_React$Component) {
       var rectAnimation = getClientRectAnimation(oldSnap.parent, newSnap.parent, {
         skipTransform: true
       });
+      var endEffect = callIfFunction(effect, newSnap.parent.domNode, {
+        newSnap: newSnap,
+        oldSnap: oldSnap
+      });
       callIfFunction(onStartAnimation);
-      morph(newSnap.parent.domNode, formatAnimation(rectAnimation, timing), onEndAnimation);
+      morph(newSnap.parent.domNode, formatAnimation(rectAnimation, timing), endEffect || onEndAnimation);
     };
 
     _this.reinsertSnap = function (item, scrollDelta, allChildren) {
@@ -2433,6 +2762,7 @@ function (_React$Component) {
         var newSnap = this.calculatePositionForAnimation();
 
         if (newSnap) {
+          // se não tiver parentNode, verficar se há uma div sendo offsetParent, body não serve
           this.play(snap, newSnap);
         }
       }
@@ -2487,7 +2817,9 @@ var _React$createContext = React__default.createContext({}),
 var DropPosition = styled__default.div.withConfig({
   displayName: "Draggable__DropPosition",
   componentId: "sc-1g7nmwq-0"
-})(["border:2px dashed rgba(0,0,0,0.1);background-color:rgba(0,0,0,0.025);border-radius:8px;position:absolute;top:0;bottom:0;right:0;left:0;visibility:visible;display:block;"]);
+})(["border:2px dashed rgba(0,0,0,0.1);background-color:rgba(0,0,0,0.025);border-radius:8px;position:absolute;top:0;bottom:0;right:0;left:0;visibility:visible;display:block;", ""], function (props) {
+  return props.rounded && "\n    border-radius: 1000rem;\n  ";
+});
 var EmptyPlaceholder = styled__default.div.withConfig({
   displayName: "Draggable__EmptyPlaceholder",
   componentId: "sc-1g7nmwq-1"
@@ -2567,19 +2899,24 @@ function (_React$Component) {
           isDragging = _this$props.isDragging,
           droppable = _this$props.droppable,
           dragIndex = _this$props.dragIndex,
+          roundedPlaceholder = _this$props.roundedPlaceholder,
           children = _this$props.children,
-          props = _objectWithoutProperties(_this$props, ["DragTag", "as", "eventHandlers", "className", "isDragging", "droppable", "dragIndex", "children"]);
+          props = _objectWithoutProperties(_this$props, ["DragTag", "as", "eventHandlers", "className", "isDragging", "droppable", "dragIndex", "roundedPlaceholder", "children"]);
 
       var Wrapper = DragTag || as;
       var extraClassName = (isDragging ? ' drag-drop-placeholder' : '') + ' drag-drop-item';
       return typeof children === 'function' ? children(_objectSpread({
         className: extraClassName
       }, this.events, {
-        children: isDragging && React__default.createElement(DropPosition, null)
+        children: isDragging && React__default.createElement(DropPosition, {
+          rounded: roundedPlaceholder
+        })
       })) : React__default.createElement(Wrapper, _extends({
         className: className + extraClassName,
         isDragging: isDragging
-      }, props, this.events), children, isDragging && React__default.createElement(DropPosition, null));
+      }, props, this.events), children, isDragging && React__default.createElement(DropPosition, {
+        rounded: roundedPlaceholder
+      }));
     }
   }]);
 
@@ -2673,6 +3010,11 @@ function (_React$Component2) {
       }
 
       var parent = ReactDOM.findDOMNode(_assertThisInitialized(_assertThisInitialized(_this2))).offsetParent;
+
+      if (!parent) {
+        return [];
+      }
+
       var parentRect = parent.getBoundingClientRect();
 
       var toPosition = _this2.toPosition(parentRect, scrollXY);
@@ -2857,7 +3199,14 @@ function (_React$Component3) {
     };
 
     _this3.dragStart = function (draggable) {
-      return function (currentTarget, pageX, pageY, clientX, clientY, e) {
+      return function (e, _ref4) {
+        var pageX = _ref4.pageX,
+            pageY = _ref4.pageY,
+            clientX = _ref4.clientX,
+            clientY = _ref4.clientY;
+        _this3.dragHasEnded = false;
+        var currentTarget = e.currentTarget;
+
         if (shouldPreventDrag(e) || _this3.props.disabled) {
           return;
         }
@@ -2878,7 +3227,12 @@ function (_React$Component3) {
             if (window.navigator.vibrate) window.navigator.vibrate([65]);
 
             if (!_this3.state.dragInfo.active) {
-              _this3.dragMove(currentTarget, pageX, pageY, clientX, clientY, e);
+              _this3.dragMove(e, {
+                pageX: pageX,
+                pageY: pageY,
+                clientX: clientX,
+                clientY: clientY
+              });
             }
           }, holdTouchTimer);
         }
@@ -3066,15 +3420,20 @@ function (_React$Component3) {
           area: intersectionArea / area,
           distance: distance
         };
-      }).reduce(function (iMax, _ref4, i, arr) {
-        var area = _ref4.area,
-            distance = _ref4.distance;
+      }).reduce(function (iMax, _ref5, i, arr) {
+        var area = _ref5.area,
+            distance = _ref5.distance;
         return area > arr[iMax].area || area === arr[iMax].area && distance < arr[iMax].distance ? i : iMax;
       }, 0);
       return centerInsideGhost[closestIndex];
     };
 
     _this3.stopMoving = function () {
+      if (_this3.dragHasEnded) {
+        return;
+      }
+
+      _this3.dragHasEnded = true;
       var dragInfo = _this3.state.dragInfo;
       var activeIndex = dragInfo.activeIndex,
           startIndex = dragInfo.startIndex,
@@ -3082,6 +3441,11 @@ function (_React$Component3) {
           activeDroppable = dragInfo.activeDroppable,
           startDroppable = dragInfo.startDroppable;
 
+      if (_this3.endTimeout) {
+        clearTimeout(_this3.endTimeout);
+        _this3.endTimeout = null;
+      }
+
       _this3.setState({
         saving: {
           list: _this3.props.list,
@@ -3089,13 +3453,15 @@ function (_React$Component3) {
           dragInfo: _set('active', false, dragInfo)
         }
       }, function () {
+        var _this3$ghost;
+
         _this3.preventScroll = false;
 
         _this3.props.setDragRef(null);
 
         _this3.settedDragRef = false;
 
-        if (_this3.ghost.parentNode) {
+        if ((_this3$ghost = _this3.ghost) === null || _this3$ghost === void 0 ? void 0 : _this3$ghost.parentNode) {
           reenableWillChange(_this3.ghost);
 
           _this3.ghost.parentNode.removeChild(_this3.ghost);
@@ -3122,7 +3488,11 @@ function (_React$Component3) {
       });
     };
 
-    _this3.dragMove = function (currentTarget, pageX, pageY, clientX, clientY, e) {
+    _this3.dragMove = function (e, _ref6) {
+      var pageX = _ref6.pageX,
+          pageY = _ref6.pageY,
+          clientX = _ref6.clientX,
+          clientY = _ref6.clientY;
       var distance = Math.sqrt(Math.pow(_this3.positions.originalX - pageX, 2) + Math.pow(_this3.positions.originalY - pageY, 2));
 
       if (e.type === 'mousemove') {
@@ -3328,6 +3698,8 @@ function (_React$Component3) {
           _this3.ghost.style.transform = newTransform;
 
           _this3.ghost.addEventListener('transitionend', _this3.stopMoving);
+
+          _this3.endTimeout = setTimeout(_this3.stopMoving, 300);
         }
       } else {
         _this3.stopMoving();
@@ -3345,10 +3717,10 @@ function (_React$Component3) {
     };
 
     _this3.mouseDown = function (draggable) {
-      return utils.normalizeMouse(_this3.dragStart(draggable));
+      return utils.normalizeMouse(_this3.dragStart(draggable), _this3.dragEnd);
     };
 
-    _this3.mouseMove = utils.normalizeMouse(_this3.dragMove);
+    _this3.mouseMove = utils.normalizeMouse(_this3.dragMove, _this3.dragEnd);
 
     _this3.touchStart = function (draggable) {
       return utils.normalizeTouch(_this3.dragStart(draggable), _this3.dragEnd);
@@ -3589,9 +3961,19 @@ var Tooltip = function Tooltip(_ref) {
   }, rest), content), children);
 };
 
-function _templateObject3$2() {
+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"]);
 
+  _templateObject4$1 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3$2() {
+  var data = _taggedTemplateLiteral(["\n    font-size: 12px;\n  "]);
+
   _templateObject3$2 = function _templateObject3() {
     return data;
   };
@@ -3610,7 +3992,7 @@ function _templateObject2$4() {
 }
 
 function _templateObject$6() {
-  var data = _taggedTemplateLiteral(["\n    font-size: 13px;\n    & > * {\n      padding: 14px 3.25rem;\n    }\n  "]);
+  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() {
     return data;
@@ -3627,24 +4009,34 @@ var popupAnimation = utils.animationTiming('0.2s ease-out');
 var ListItem = styled__default.li.withConfig({
   displayName: "ContextMenu__ListItem",
   componentId: "sc-13y1vvt-0"
-})(["position:relative;& > *{padding:11px 3.25rem;display:block;}", " & > a{color:inherit;font-weight:inherit;text-decoration:inherit;}& > a,& > label{cursor:pointer;}", " ", " ", ",.icon{font-size:23px;position:absolute;left:0.25rem;top:50%;transform:translateY(-50%);width:3rem;text-align:center;}input[type=\"radio\"]{display:none;}", " ", " ", " ", ""], utils.media.mobile(_templateObject$6()), utils.ifProp('hover', styled.css(["& > a,& > label{background:", ";color:", ";color:", ";}"], function (props) {
+})(["position:relative;font-size:12px;& > *{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$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));
-})), utils.ifProp('highlight', styled.css(["color:", ";"], utils.getColor('main'))), Icon, utils.ifProp('noActions', "\n    max-width: 17rem;\n    color: rgba(0,0,0,0.4);\n    pointer-events: none;\n    text-align: center;\n    white-space: normal;\n  "), utils.ifProp('withButton', styled.css(["padding:0.25rem 1rem;", "{width:100%;color:white;font-weight:500;padding:10px 1.25rem;", "}"], Button, utils.media.mobile(_templateObject2$4()))), utils.ifProp('smallPaddingRight', styled.css(["& > *{padding-right:1.5rem;}"])), utils.customTheme('ListItem'));
+})), utils.ifProp('highlight', styled.css(["color:", ";"], utils.getColor('main'))), utils.ifProp('noActions', "\n    max-width: 17rem;\n    color: rgba(0,0,0,0.4);\n    pointer-events: none;\n    text-align: center;\n    white-space: normal;\n  "), utils.ifProp('withButton', styled.css(["padding:0.25rem 1rem;", "{width:100%;color:white;font-weight:500;padding:10px 1.25rem;", "}"], Button, utils.media.mobile(_templateObject2$4()))), utils.ifProp('smallPaddingRight', styled.css(["& > *{padding-right:1.5rem;}"])), utils.customTheme('ListItem'));
+var ListItemDescText = styled__default.div.withConfig({
+  displayName: "ContextMenu__ListItemDescText",
+  componentId: "sc-13y1vvt-1"
+})(["font-size:11px;margin-top:0.25rem;opacity:0.6;", ""], utils.media.mobile(_templateObject3$2()));
+var ListItemHelpText = styled__default.span.withConfig({
+  displayName: "ContextMenu__ListItemHelpText",
+  componentId: "sc-13y1vvt-2"
+})(["opacity:0.5;"]);
 var ListMenu = styled__default.ul.withConfig({
   displayName: "ContextMenu__ListMenu",
-  componentId: "sc-13y1vvt-1"
+  componentId: "sc-13y1vvt-3"
 })(["padding:0.5rem 0;cursor:default;overflowY:auto;text-align:left;color:inherit;user-select:none;"]);
 var ContextListMenu = styled__default(ListMenu).withConfig({
   displayName: "ContextMenu__ContextListMenu",
-  componentId: "sc-13y1vvt-2"
-})(["position:absolute;z-index:999;background-color:white;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 10px -2px rgba(0,0,0,0.15),0 0px 2px 0px rgba(0,0,0,0.2);border-radius:8px;margin-bottom:0.5rem;overflow:auto;max-height:100vh;", " ", " ", ""], function (props) {
-  return props.withoutIcons && "\n    ".concat(ListItem, " > * {\n      padding-left: 1.5rem;\n      padding-right: 1.5rem;\n    }\n  ");
-}, utils.ifProp('sub', styled.css(["", " ", ""], utils.ifProp('atTop', 'margin-top: -0.5rem;', 'margin-top: 0.5rem;'), utils.ifProp('atRight', "\n      margin-left: -2px;\n      ", "\n      margin-left: 2px;\n    "))), utils.customTheme('ContextMenu'));
+  componentId: "sc-13y1vvt-4"
+})(["position:absolute;z-index:999;background-color:white;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 10px -2px rgba(0,0,0,0.15),0 0px 2px 0px rgba(0,0,0,0.2);border-radius:10px;margin-bottom:0.5rem;overflow:auto;max-height:100vh;", " ", " ", ""], function (props) {
+  return props.withoutIcons && "\n    ".concat(ListItem, " > * {\n      padding-left: 1.5rem;\n    }\n  ");
+}, utils.ifProp('sub', styled.css(["", " ", ""], function (props) {
+  return props.fullHeight ? '' : props.atTop ? 'margin-top: -0.5rem;' : 'margin-top: 0.5rem;';
+}, utils.ifProp('atRight', "\n      margin-left: -4px;\n      ", "\n      margin-left: 4px;\n    "))), utils.customTheme('ContextMenu'));
 var StickyContainer = styled__default.div.withConfig({
   displayName: "ContextMenu__StickyContainer",
-  componentId: "sc-13y1vvt-3"
+  componentId: "sc-13y1vvt-5"
 })(["position:sticky;background:white;", " ", ""], function (props) {
   return props.atBottom && "\n    bottom: -0.5rem;\n    padding-bottom: 0.5rem;\n    margin-bottom: -0.5rem;\n  ";
 }, function (props) {
@@ -3652,13 +4044,13 @@ var StickyContainer = styled__default.div.withConfig({
 });
 var ListSeparator = styled__default.li.withConfig({
   displayName: "ContextMenu__ListSeparator",
-  componentId: "sc-13y1vvt-4"
+  componentId: "sc-13y1vvt-6"
 })(["border-bottom:1px solid rgba(0,0,0,0.1);margin-top:0.5rem;margin-bottom:0.5rem;cursor:default;height:0;", ""], utils.ifProp('lighten', styled.css(["border-color:rgba(255,255,255,0.15);"])));
 var ListHeading = styled__default.li.withConfig({
   displayName: "ContextMenu__ListHeading",
-  componentId: "sc-13y1vvt-5"
+  componentId: "sc-13y1vvt-7"
 })(["display:flex;align-items:center;padding:.5rem 1.25rem .25rem;span{flex-shrink:0;margin-right:.5rem;color:", ";font-size:10px;text-transform:uppercase;font-weight:600;}:after{content:'';flex-grow:1;height:1px;background:", ";}"], utils.getColor('gray180'), utils.getColor('gray240'));
-var SubmenuArrowIcon = utils.styledExtend(Icon)(_templateObject3$2());
+var SubmenuArrowIcon = utils.styledExtend(Icon)(_templateObject4$1());
 var SimpleLi =
 /*#__PURE__*/
 function (_React$Component) {
@@ -3780,6 +4172,7 @@ var Li = function Li(_ref) {
   var _ref$emitter = _ref.emitter,
       emitter = _ref$emitter === void 0 ? mitt() : _ref$emitter,
       index = _ref.index,
+      keepOpen = _ref.keepOpen,
       hover = _ref.hover,
       layerIndex = _ref.layerIndex,
       hoverCursor = _ref.hoverCursor,
@@ -3791,9 +4184,11 @@ var Li = function Li(_ref) {
       linkTo = _ref.linkTo,
       icon = _ref.icon,
       label = _ref.label,
+      descText = _ref.descText,
+      helpText = _ref.helpText,
       target = _ref.target,
       href = _ref.href,
-      rest = _objectWithoutProperties(_ref, ["emitter", "index", "hover", "layerIndex", "hoverCursor", "passTouchThrough", "children", "setCursorOnHover", "onClick", "prefixWith", "linkTo", "icon", "label", "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();
@@ -3850,7 +4245,7 @@ var Li = function Li(_ref) {
     };
   }, []);
   React.useEffect(function () {
-    if (children) {
+    if (children && !isMobile()) {
       if (hover) {
         if (!subMenu.isOpen || subMenu.closing || !subPrevented.get()) {
           subMenu.open();
@@ -3864,38 +4259,35 @@ var Li = function Li(_ref) {
     }
   }, [hoverCursor]);
 
-  var onMouseEnter = function onMouseEnter() {
-    return utils.callIfFunction(setCursorOnHover, index);
+  var onMouseMove = function onMouseMove(e) {
+    if (!hover) {
+      utils.callIfFunction(setCursorOnHover, index);
+    }
+
+    e === null || e === void 0 ? void 0 : e.stopPropagation();
   };
 
   var onMouseOut = function onMouseOut(e) {
-    return utils.callIfFunction(setCursorOnHover, -1);
+    utils.callIfFunction(setCursorOnHover, -1);
+    e === null || e === void 0 ? void 0 : e.stopPropagation();
   };
 
-  var touchEnd = function touchEnd(e) {
-    if (!passTouchThrough) {
-      e.preventDefault();
+  var onClickHandler = function onClickHandler(e) {
+    if (children || keepOpen) {
+      e.stopPropagation();
     }
 
     if (children) {
-      if (hover) subMenu.toggle();else onMouseEnter();
-    } else {
-      if (tagRef.current) {
-        tagRef.current.click();
+      if (hover) {
+        subMenu.toggle();
       } else {
-        nodeRef.current.click();
+        onMouseMove();
       }
+    } else {
+      utils.callIfFunction(onClick, e);
     }
   };
 
-  var onClickHandler = function onClickHandler(e) {
-    if (children) {
-      e.stopPropagation();
-    }
-
-    utils.callIfFunction(onClick, e);
-  };
-
   var onCloseSub = function onCloseSub() {
     return emitter.emit('openSub');
   };
@@ -3913,7 +4305,7 @@ var Li = function Li(_ref) {
 
   var content = React__default.createElement(React__default.Fragment, null, prefixWith, icon && React__default.createElement(Icon, {
     icon: icon
-  }), label, children && React__default.createElement(SubmenuArrowIcon, {
+  }), label, " ", helpText && React__default.createElement(ListItemHelpText, null, "(", helpText, ")"), descText && React__default.createElement(ListItemDescText, null, descText), children && React__default.createElement(SubmenuArrowIcon, {
     icon: "arrow-right"
   }));
   var Tag = linkTo ? Link : 'a';
@@ -3923,14 +4315,13 @@ var Li = function Li(_ref) {
     hover: hover,
     onClick: onClickHandler,
     onMouseLeave: onMouseOut,
-    onMouseEnter: onMouseEnter,
-    onTouchEnd: touchEnd
+    onMouseMove: onMouseMove
   }), rest.withButton || rest.noActions ? content : React__default.createElement(Tag, {
     href: href,
     target: target,
     to: linkTo,
     ref: tagRef,
-    onMouseEnter: onMouseEnter
+    onMouseEnter: onMouseMove
   }, content), subMenu.isOpen && addProps(children));
 };
 Li.Simple = SimpleLi;
@@ -3946,7 +4337,7 @@ var _willUseSharedState$1 = core.willUseSharedState(),
     _willUseSharedState2$1 = _slicedToArray(_willUseSharedState$1, 1),
     useContextMenuSharedState = _willUseSharedState2$1[0];
 
-var ContextMenuComponent = React.forwardRef(function (_ref2, ref) {
+var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
   var children = _ref2.children,
       sub = _ref2.sub,
       hoverIndex = _ref2.hoverIndex,
@@ -3958,7 +4349,10 @@ var ContextMenuComponent = React.forwardRef(function (_ref2, ref) {
     return 0;
   } : _ref2$onHover,
       fill = _ref2.fill,
-      props = _objectWithoutProperties(_ref2, ["children", "sub", "hoverIndex", "autoHover", "withoutIcons", "onClose", "onHover", "fill"]);
+      onClick = _ref2.onClick,
+      props = _objectWithoutProperties(_ref2, ["children", "sub", "hoverIndex", "autoHover", "withoutIcons", "onClose", "onHover", "fill", "onClick"]);
+
+  var ref = core.useEnsureRef(unesuredRef);
 
   var _useState = React.useState(autoHover || sub ? 0 : -1),
       _useState2 = _slicedToArray(_useState, 2),
@@ -4058,10 +4452,34 @@ var ContextMenuComponent = React.forwardRef(function (_ref2, ref) {
     });
   };
 
+  var touchStart = createPressAndMoveEvent(function (e, prevPos) {
+    // e.preventDefault()
+    e.stopPropagation();
+    e.target.dispatchEvent(new MouseEvent('mousemove', {
+      bubbles: true
+    }));
+    var passedResistance = false;
+    return [function (e, nextPos) {
+      var delta = prevPos.clientY - nextPos.clientY;
+
+      if (Math.abs(delta) > 10) {
+        passedResistance = true;
+        setCursorOnHover(-1);
+      }
+    }, function (e, finalPos) {
+      if (!passedResistance) {
+        e.target.click();
+      }
+    }];
+  });
   return React__default.createElement(ContextListMenu, _extends({
     "data-drag": false,
     ref: ref,
     sub: sub,
+    onWheel: function onWheel(e) {
+      return e.stopPropagation();
+    },
+    onTouchStart: touchStart,
     withoutIcons: withoutIcons,
     onMouseDown: utils.stopPropagation()
   }, props), formatChildren(children));
@@ -4439,19 +4857,38 @@ var TransitionDiv = function TransitionDiv(_ref) {
   var children = _ref.children,
       animation = _ref.animation,
       skipChromeFix = _ref.skipChromeFix,
+      className = _ref.className,
       block = _ref.block,
-      rest = _objectWithoutProperties(_ref, ["children", "animation", "skipChromeFix", "block"]);
+      rest = _objectWithoutProperties(_ref, ["children", "animation", "skipChromeFix", "className", "block"]);
+
+  var blockRef = React.useRef();
+
+  var overflowEffect = function overflowEffect() {
+    if (blockRef.current) {
+      var prevOverflow = blockRef.current.style.overflow;
+      blockRef.current.style.overflow = 'hidden';
+      return function () {
+        blockRef.current.style.overflow = prevOverflow;
+      };
+    }
+  };
 
   var content = children ? React__default.createElement(FlipList, _extends({
+    effect: overflowEffect,
     skipChromeFix: skipChromeFix,
     animation: animation || DEFAULT_ANIMATION
   }, rest), [React__default.createElement("div", {
+    className: block ? "" : className,
     key: "first"
   }, children)]) : React__default.createElement(FlipList, _extends({
+    effect: overflowEffect,
     skipChromeFix: skipChromeFix,
     animation: animation || DEFAULT_ANIMATION
   }, rest), []);
-  return block ? React__default.createElement(BlockContainer$1, null, content) : content;
+  return block ? React__default.createElement(BlockContainer$1, {
+    ref: blockRef,
+    className: className
+  }, content) : content;
 };
 
 var BlockContainer$2 = styled__default.div.withConfig({
@@ -4547,44 +4984,66 @@ var willUseIsSticky = function willUseIsSticky() {
       useSharedIsSticky = _willUseSharedState2[0],
       setSharedIsSticky = _willUseSharedState2[2];
 
-  var observer = window.IntersectionObserver ? new window.IntersectionObserver(function (records, observer) {
-    var _iteratorNormalCompletion = true;
-    var _didIteratorError = false;
-    var _iteratorError = undefined;
+  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;
+      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;
-        }
+          if (!rootBoundsInfo) {
+            return;
+          }
 
-        onChange(targetInfo, rootBoundsInfo, record.target);
-      }
-    } catch (err) {
-      _didIteratorError = true;
-      _iteratorError = err;
-    } finally {
-      try {
-        if (!_iteratorNormalCompletion && _iterator.return != null) {
-          _iterator.return();
+          onChange(targetInfo, rootBoundsInfo, record.target, record.isIntersecting);
         }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
       } finally {
-        if (_didIteratorError) {
-          throw _iteratorError;
+        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;
     }
-  }) : {
-    observe: _identity,
-    unobserve: _identity
+
+    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);
@@ -4595,6 +5054,8 @@ var willUseIsSticky = function willUseIsSticky() {
     var className = _ref.className,
         children = _ref.children,
         bottom = _ref.bottom,
+        root = _ref.root,
+        intersection = _ref.intersection,
         onChange = _ref.onChange;
     var ensuredRef = core.useEnsureRef(ref);
 
@@ -4603,9 +5064,9 @@ var willUseIsSticky = function willUseIsSticky() {
         isSticky = _useState2[0],
         setIsSticky = _useState2[1];
 
-    useRegister(function (posInfo, refInfo, target) {
+    useRegister(function (posInfo, refInfo, target, isIntersecting) {
       if (ensuredRef.current === target) {
-        var value = bottom ? BOTTOM_TRIGGER(posInfo, refInfo) : TOP_TRIGGER(posInfo, refInfo);
+        var value = intersection ? isIntersecting : bottom ? BOTTOM_TRIGGER(posInfo, refInfo) : TOP_TRIGGER(posInfo, refInfo);
 
         if (value !== undefined) {
           setIsSticky(value);
@@ -4616,7 +5077,7 @@ var willUseIsSticky = function willUseIsSticky() {
     });
     React.useEffect(function () {
       setIsSticky(false);
-      observer.observe(ensuredRef.current);
+      getObserver(callIfFunction(root)).observe(ensuredRef.current);
       activeObserved = activeObserved.concat(ensuredRef.current);
       return function () {
         // observer.unobserve(ref.current)
@@ -4655,26 +5116,17 @@ var FormatDate = function FormatDate(_ref) {
   });
 };
 
-var BackgroundImageStyle = styled__default.div.withConfig({
-  displayName: "Image__BackgroundImageStyle",
-  componentId: "sjju78-0"
-})(["background-image:url('", "');"], function (props) {
-  return props.image;
-});
 var Image = React.forwardRef(function (_ref, ref) {
-  var src = _ref.src,
-      rest = _objectWithoutProperties(_ref, ["src"]);
+  var dom = _ref.dom,
+      src = _ref.src,
+      style = _ref.style,
+      rest = _objectWithoutProperties(_ref, ["dom", "src", "style"]);
 
-  var _useState = React.useState(src),
+  var _useState = React.useState(typeof src === 'string' ? src : src && URL.createObjectURL(src)),
       _useState2 = _slicedToArray(_useState, 2),
       image = _useState2[0],
       setImage = _useState2[1];
 
-  var _useState3 = React.useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      tempImage = _useState4[0],
-      setTempImage = _useState4[1];
-
   React.useEffect(function () {
     if (src) {
       var imageStr = typeof src === 'string' ? src : URL.createObjectURL(src);
@@ -4689,8 +5141,13 @@ var Image = React.forwardRef(function (_ref, ref) {
       setImage("");
     }
   }, [src]);
-  return React__default.createElement(BackgroundImageStyle, _extends({}, rest, {
-    image: tempImage || image,
+  return dom ? React__default.createElement("img", _extends({}, rest, {
+    src: image,
+    ref: ref
+  })) : React__default.createElement("div", _extends({}, rest, {
+    style: _objectSpread({}, style, {
+      backgroundImage: "url(\"".concat(image, "\")")
+    }),
     ref: ref
   }));
 });
@@ -4875,6 +5332,7 @@ exports.DefaultConfirmDialog = DefaultConfirmDialog;
 exports.Dialog = Dialog;
 exports.DialogContainer = DialogContainer;
 exports.DialogContent = DialogContent;
+exports.DialogContentWrapper = DialogContentWrapper;
 exports.DialogError = DialogError;
 exports.DialogErrorContent = DialogErrorContent;
 exports.DialogFooter = DialogFooter;
@@ -4902,6 +5360,7 @@ exports.ListItem = ListItem;
 exports.ListMenu = ListMenu;
 exports.ListSeparator = ListSeparator;
 exports.Loading = Loading;
+exports.LoadingDiv = LoadingDiv;
 exports.MENU_TAB = MENU_TAB;
 exports.MobileBubbleDialog = MobileBubbleDialog;
 exports.Modal = Modal;
@@ -4917,6 +5376,7 @@ exports.StickyContainer = StickyContainer;
 exports.SwitchDiv = SwitchDiv;
 exports.Tooltip = Tooltip;
 exports.TransitionDiv = TransitionDiv;
+exports.addPositioningBound = addPositioningBound;
 exports.contextMenuLayersQuantity = contextMenuLayersQuantity;
 exports.defaultAnimationMaker = defaultAnimationMaker;
 exports.dialogFadeInDown = dialogFadeInDown;