@startlibs/components 1.0.0-alpha-7t → 1.0.0-alpha-7y

package/lib/index.js

@@ -19,28 +19,28 @@ var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers
 var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
 var reactRouterDom = require('react-router-dom');
-var _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 _isString = _interopDefault(require('lodash/fp/isString'));
 var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
-var _ = _interopDefault(require('lodash/fp'));
-var _typeof = _interopDefault(require('@babel/runtime/helpers/typeof'));
-var emotion = require('emotion');
+var _isObject = _interopDefault(require('lodash/fp/isObject'));
 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 _typeof = _interopDefault(require('@babel/runtime/helpers/typeof'));
 var _without = _interopDefault(require('lodash/fp/without'));
 
 var IconComponent =
@@ -144,7 +144,7 @@ function _templateObject3() {
 }
 
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n    ", "\n  "]);
+  var data = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    ", "\n  "]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -154,7 +154,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;
@@ -179,6 +179,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,
@@ -204,7 +205,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,
@@ -218,20 +219,24 @@ 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;flex-shrink:0;:hover{background:", ";}:active{background:", ";}", " ", " + .styled-button{margin-left:1rem;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
   return props.rounded ? '100px' : '6px';
 }, utils.getColor, function (props) {
   return polished.darken(0.05, utils.getColor(props, true));
 }, function (props) {
   return polished.darken(0.08, utils.getColor(props, true));
 }, function (props) {
-  return !props.noFocus && styled.css([":focus{", "}", ""], focus, function (props) {
+  return props.nowrap && "\n    white-space: nowrap;\n  ";
+}, function (props) {
+  return !props.noFocus && !props.isLoading && styled.css([":focus{", "}", ""], focus, function (props) {
     return props.focused && focus;
   });
 }, function (props) {
@@ -244,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) {
@@ -253,10 +264,16 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
 }, function (props) {
   return props.isLoading && styled.css(["color:transparent !important;pointer-events:none;", "{visibility:hidden;}"], Icon);
 }, utils.media.mobile(_templateObject2(), function (props) {
-  return !props.small && styled.css(["padding:13px 1.5rem;font-size:13px;"]);
+  return !props.small && !props.onlyIcon && styled.css(["padding:13px 1.5rem;font-size:13px;"]);
+}, function (props) {
+  return !props.small && props.onlyIcon && styled.css(["min-width:3.5rem;min-height:3.5rem;"]);
+}, function (props) {
+  return props.withDropdown && styled.css(["padding-right:2.5rem;", "{right:14px;}"], DropdownIcon);
 }), 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, {
@@ -309,6 +326,10 @@ function (_React$Component) {
     value: function componentDidCatch(e, info) {
       var error = e && e.stack;
 
+      if (e === null || e === void 0 ? void 0 : e.notFound) {
+        return;
+      }
+
       try {
         if (!e || !e.stack) {
           JSON.stringify(e);
@@ -365,100 +386,10 @@ function (_React$Component) {
   return ErrorBoundary;
 }(React__default.Component); // StartlibsProvider.registerInternal('ErrorBoundary',ErrorBoundary)
 
-var scrollWidth = function () {
-  if (!window.document) return 0;
-  var html = document.documentElement;
-  var oldOverflow = html.style.overflowY;
-  html.style.overflowY = 'scroll';
-  var width = window.innerWidth - html.clientWidth;
-  html.style.overflowY = oldOverflow;
-  return width;
-}();
-
-var callIfFunction = function callIfFunction(prop) {
-  for (var _len6 = arguments.length, args = new Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
-    args[_key6 - 1] = arguments[_key6];
-  }
-
-  return typeof prop === "function" ? prop.apply(void 0, args) : prop;
-};
-var ifUndefined = function ifUndefined(v) {
-  for (var _len10 = arguments.length, or = new Array(_len10 > 1 ? _len10 - 1 : 0), _key10 = 1; _key10 < _len10; _key10++) {
-    or[_key10 - 1] = arguments[_key10];
-  }
-
-  return v !== undefined ? v : or.length === 1 ? or[0] : ifUndefined.apply(void 0, [or[0]].concat(_toConsumableArray(or.slice(1))));
-};
-
 function _templateObject$1() {
-  var data = _taggedTemplateLiteral(["\n  ", ""]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var media = function media() {
-  for (var _len = arguments.length, sizePairs = new Array(_len), _key = 0; _key < _len; _key++) {
-    sizePairs[_key] = arguments[_key];
-  }
-
-  return function () {
-    return styled.css(["@media screen and ", "{", "}"], sizePairs.map(function (_ref4) {
-      var _ref5 = _slicedToArray(_ref4, 2),
-          size = _ref5[0],
-          type = _ref5[1];
-
-      return "(".concat(type, ": ").concat(size + scrollWidth, "px)");
-    }).join(' and '), styled.css.apply(void 0, arguments));
-  };
-};
-media.mobile = media([600, 'max-width']);
-
-media.between = function (min, max) {
-  return media([min, 'min-width'], [max, 'max-width']);
-};
-
-media.max = function (n) {
-  return media([n, 'max-width']);
-};
-
-media.min = function (n) {
-  return media([n, 'min-width']);
-};
-
-media.desktop = media([601, 'min-width']);
-
-var getFrameOffset = function getFrameOffset(i, total) {
-  return Math.round(i * 100 / (total - 1));
-};
-
-var oneWayAnimation = function oneWayAnimation() {
-  for (var _len2 = arguments.length, frames = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    frames[_key2] = arguments[_key2];
-  }
-
-  return emotion.keyframes(_templateObject$1(), frames.map(function (frame, i) {
-    return !frame ? '' : "".concat(getFrameOffset(i, frames.length), "% {\n      ").concat(frame, "\n    }");
-  }));
-};
-var twoWayAnimation = function twoWayAnimation() {
-  for (var _len3 = arguments.length, frames = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    frames[_key3] = arguments[_key3];
-  }
-
-  return [frames, _.reverse(frames)].map(function (frames) {
-    return oneWayAnimation.apply(void 0, _toConsumableArray(frames));
-  });
-};
-var identityTranslateFrames = oneWayAnimation('transform: translateY(0);', 'transform: translateY(0);');
-var identityOpacityFrames = oneWayAnimation('opacity: 1;', 'opacity:1;');
-
-function _templateObject$2() {
   var data = _taggedTemplateLiteral(["test"]);
 
-  _templateObject$2 = function _templateObject() {
+  _templateObject$1 = function _templateObject() {
     return data;
   };
 
@@ -470,13 +401,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
   };
 };
 
@@ -504,12 +461,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() {
@@ -554,7 +510,7 @@ var defaultSwitchAnimation = utils.oneWayAnimation("opacity: 1;", "opacity: 0;",
 var SHORT_ANIMATIONS = {
   fadeIn: defaultEnterAnimation
 };
-var b = styled.createGlobalStyle(_templateObject$2());
+var b = styled.createGlobalStyle(_templateObject$1());
 
 var applyDefault = function applyDefault(k) {
   return SHORT_ANIMATIONS[k] || k;
@@ -587,15 +543,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,
@@ -696,6 +652,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,
@@ -712,8 +670,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));
@@ -721,20 +679,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;'
 
@@ -751,7 +770,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) {
@@ -768,12 +787,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) {
@@ -815,9 +836,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,
@@ -859,16 +880,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]);
@@ -877,16 +903,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 () {
@@ -898,6 +925,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;
           }
@@ -905,11 +938,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
@@ -918,18 +947,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 {
@@ -943,9 +981,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) {
@@ -972,10 +1010,10 @@ var willUseFlip = function willUseFlip() {
         });
 
         if (rectAnimation.length) {
-          playSwitch(oldSnap, newSnap, {
+          willPlaySwitch(oldSnap, newSnap, {
             switchAnimation: defaultSwitchAnimation,
             timing: timing
-          });
+          })();
         }
 
         controlElement.remove();
@@ -993,8 +1031,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;
@@ -1005,9 +1043,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;
@@ -1022,7 +1060,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;
         }
       });
@@ -1062,21 +1102,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),
@@ -1084,8 +1125,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);
         });
@@ -1108,8 +1150,8 @@ var _willUseFlip = willUseFlip(),
 var useFlipAnimation = function useFlipAnimation(ref, onEnterOrBoth) {
   var onLeaveOrIgnore = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   var config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  var onEnter = ifUndefined(onEnterOrBoth && onEnterOrBoth.onEnter, onEnterOrBoth);
-  var onLeave = ifUndefined(onEnterOrBoth && onEnterOrBoth.onLeave, onLeaveOrIgnore);
+  var onEnter = utils.ifUndefined(onEnterOrBoth && onEnterOrBoth.onEnter, onEnterOrBoth);
+  var onLeave = utils.ifUndefined(onEnterOrBoth && onEnterOrBoth.onLeave, onLeaveOrIgnore);
   useFlipEnter(ref, onEnter, config);
   useFlipLeave(ref, onLeave === true ? onEnter : onLeave, _objectSpread({}, config, {
     reverse: onLeave === true
@@ -1126,10 +1168,10 @@ function _templateObject2$1() {
   return data;
 }
 
-function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["\n    padding: 3rem 0.5rem;\n  "]);
+function _templateObject$2() {
+  var data = _taggedTemplateLiteral(["\n    padding: ", ";\n  "]);
 
-  _templateObject$3 = function _templateObject() {
+  _templateObject$2 = function _templateObject() {
     return data;
   };
 
@@ -1154,7 +1196,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$2(), 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({
@@ -1216,10 +1260,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),
@@ -1237,25 +1280,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)
   }
 };
 
@@ -1282,13 +1337,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);
@@ -1311,7 +1369,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) {
@@ -1327,7 +1385,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";
         }
@@ -1424,7 +1482,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();
@@ -1482,7 +1542,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";
       }
 
@@ -1490,6 +1550,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, {
@@ -1511,6 +1573,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,
@@ -1524,16 +1587,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
@@ -1550,10 +1617,10 @@ function _templateObject2$2() {
   return data;
 }
 
-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  "]);
+function _templateObject$3() {
+  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() {
+  _templateObject$3 = function _templateObject() {
     return data;
   };
 
@@ -1579,7 +1646,7 @@ var SplitColumnsContainer = styled__default.div.withConfig({
   displayName: "SplitColumnsContainer",
   componentId: "sc-1h4sw88-0"
 })(["margin-bottom:", "rem;", " ", ""], getMarginFromFieldChild, function (props) {
-  return styled.css(["", ""], utils.media.min(props.viewportMinWidth || 0)(_templateObject$4(), function (props) {
+  return styled.css(["", ""], utils.media.min(props.viewportMinWidth || 0)(_templateObject$3(), function (props) {
     return utils.getMargin(splitColumnMargins)(props) / 2;
   }, function (props) {
     return utils.getMargin(splitColumnMargins)(props) / 2;
@@ -1619,9 +1686,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;
   };
@@ -1669,10 +1841,10 @@ function _templateObject2$3() {
   return data;
 }
 
-function _templateObject$5() {
+function _templateObject$4() {
   var data = _taggedTemplateLiteral(["\n    top: 0\n  "]);
 
-  _templateObject$5 = function _templateObject() {
+  _templateObject$4 = function _templateObject() {
     return data;
   };
 
@@ -1681,7 +1853,7 @@ function _templateObject$5() {
 var DialogIcon = styled__default(Icon).withConfig({
   displayName: "Dialog__DialogIcon",
   componentId: "gai4ey-0"
-})(["font-size:60px;width:8rem;text-align:center;color:#d2d2d2;right:0;top:1rem;position:absolute;", ""], utils.media.desktop(_templateObject$5()));
+})(["font-size:60px;width:8rem;text-align:center;color:#d2d2d2;right:0;top:1rem;position:absolute;", ""], utils.media.desktop(_templateObject$4()));
 var CloseIcon = styled__default(Icon).attrs(_assign({
   icon: 'x'
 })).withConfig({
@@ -1717,117 +1889,71 @@ 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,
+      skipCloseIcon = _ref.skipCloseIcon,
+      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", "skipCloseIcon", "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 && !skipCloseIcon && 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(children)), Content && children && utils.callIfFunction(children));
+  }, utils.callIfFunction(Content)), !Content && children && React__default.createElement(DialogContent, {
+    icon: icon,
+    illustration: illustration
+  }, utils.callIfFunction(children)), Content && children && utils.callIfFunction(children), footer && React__default.createElement(DialogFooter, null, auxiliarActions && React__default.createElement(FooterAuxiliaryContainer, null, utils.callIfFunction(auxiliarActions)), utils.callIfFunction(footer)));
 
   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);
@@ -1838,8 +1964,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,
@@ -1858,14 +1984,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, {
@@ -1877,13 +2003,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
@@ -1893,6 +2019,78 @@ var DialogError = function DialogError(_ref7) {
   });
 };
 
+var useDialog = function useDialog(dialog) {
+  var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var toggleCallback = arguments.length > 2 ? arguments[2] : undefined;
+  var toggle = core.useToggle(false, toggleCallback);
+  core.useFill("Dialog", toggle.isOpen !== false && dialog(toggle.close), [toggle.isOpen].concat(_toConsumableArray(args)));
+  return toggle.open;
+};
+var useDialogWithToggle = function useDialogWithToggle(dialog) {
+  var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var toggle = core.useToggle();
+  core.useFill("Dialog", toggle.isOpen !== false && dialog(toggle), [toggle.isOpen].concat(_toConsumableArray(args)));
+  return toggle;
+};
+
+var WarningDialog = styled__default(function (_ref) {
+  var content = _ref.content,
+      closeDialog = _ref.closeDialog,
+      className = _ref.className,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? "warning" : _ref$icon,
+      _ref$confirmLabel = _ref.confirmLabel,
+      confirmLabel = _ref$confirmLabel === void 0 ? "Entendi" : _ref$confirmLabel;
+  return React__default.createElement(Dialog, {
+    className: className
+  }, React__default.createElement(MainIcon, {
+    icon: icon
+  }), React__default.createElement("p", null, content), React__default.createElement(Button, {
+    highlight: true,
+    onClick: closeDialog
+  }, confirmLabel));
+}).withConfig({
+  displayName: "WarningDialog",
+  componentId: "sc-1jw779e-0"
+})(["text-align:center;max-width:36rem;padding:2.5rem;p{font-size:16px;font-weight:500;max-width:27rem;margin:0 auto 2rem;}"]);
+var MainIcon = styled__default(Icon).withConfig({
+  displayName: "WarningDialog__MainIcon",
+  componentId: "sc-1jw779e-1"
+})(["color:", ";font-size:46px;display:block;margin-bottom:1.25rem;"], function (props) {
+  return props.icon === 'warning' ? utils.getColor('alert') : utils.getColor('main');
+});
+var useWarningDialog = function useWarningDialog() {
+  return useDialogWithToggle(function (toggle) {
+    return React__default.createElement(WarningDialog, _extends({}, toggle.isOpen, {
+      closeDialog: toggle.close
+    }));
+  });
+};
+
+var _willUseSharedState = core.willUseSharedState(),
+    _willUseSharedState2 = _slicedToArray(_willUseSharedState, 3),
+    useRenderDefaultWarningDialog = _willUseSharedState2[0],
+    _setWarningDialog = _willUseSharedState2[2];
+
+var setWarningDialog = function setWarningDialog(props) {
+  return _setWarningDialog(React__default.createElement(WarningDialog, _extends({}, props, {
+    closeDialog: function closeDialog() {
+      return _setWarningDialog(null);
+    }
+  })));
+};
+var DefaultWarningDialog = function DefaultWarningDialog() {
+  var _useRenderDefaultWarn = useRenderDefaultWarningDialog(),
+      _useRenderDefaultWarn2 = _slicedToArray(_useRenderDefaultWarn, 1),
+      warningDialog = _useRenderDefaultWarn2[0];
+
+  if (warningDialog) {
+    return warningDialog;
+  }
+
+  return null;
+};
+
 var NotificationContainer = styled__default.div.withConfig({
   displayName: "Notifications__NotificationContainer",
   componentId: "naxsn6-0"
@@ -1900,13 +2098,15 @@ var NotificationContainer = styled__default.div.withConfig({
 var Notification = styled__default.div.withConfig({
   displayName: "Notifications__Notification",
   componentId: "naxsn6-1"
-})(["padding:1rem 3.5rem 1rem 1rem;border-radius:5px;color:white;text-align:left;line-height:20px;background:", ";box-shadow:0 2px 0px 0px rgba(0,0,0,0.25);min-width:12rem;min-height:44px;display:inline-block;position:relative;top:1rem;", "{color:white;display:inline-block;background-color:rgba(0,0,0,0.2);font-size:14px;width:20px;height:20px;text-align:center;line-height:20px;border-radius:50%;cursor:pointer;position:absolute;top:1rem;right:1rem;&:hover{background-color:rgba(0,0,0,0.3);}}"], utils.getColor('success'), Icon);
+})(["padding:1rem 3.5rem 1rem 1rem;border-radius:5px;color:white;text-align:left;line-height:20px;background:", ";box-shadow:0 2px 0px 0px rgba(0,0,0,0.25);min-width:12rem;min-height:44px;display:inline-block;position:relative;top:1rem;", "{color:white;display:inline-block;background-color:rgba(0,0,0,0.2);font-size:14px;width:20px;height:20px;text-align:center;line-height:20px;border-radius:50%;cursor:pointer;position:absolute;top:1rem;right:1rem;&:hover{background-color:rgba(0,0,0,0.3);}}"], function (props) {
+  return utils.getColor(props.type)(props);
+}, Icon);
 
-var _willUseSharedState = core.willUseSharedState(),
-    _willUseSharedState2 = _slicedToArray(_willUseSharedState, 3),
-    useNotification = _willUseSharedState2[0],
-    useNotificationRef = _willUseSharedState2[1],
-    setNotification = _willUseSharedState2[2];
+var _willUseSharedState$1 = core.willUseSharedState(),
+    _willUseSharedState2$1 = _slicedToArray(_willUseSharedState$1, 3),
+    useNotification = _willUseSharedState2$1[0],
+    useNotificationRef = _willUseSharedState2$1[1],
+    setNotification = _willUseSharedState2$1[2];
 var willSetNotification = function willSetNotification(str) {
   return function () {
     return setNotification(str);
@@ -1918,15 +2118,24 @@ var Notifications = function Notifications() {
 
   var _useNotification = useNotification(),
       _useNotification2 = _slicedToArray(_useNotification, 2),
-      notification = _useNotification2[0],
+      rawNotification = _useNotification2[0],
       setNotification = _useNotification2[1];
 
+  var _ref = _isObject(rawNotification) ? rawNotification : {
+    type: "success",
+    msg: rawNotification
+  },
+      msg = _ref.msg,
+      type = _ref.type,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 5000 : _ref$timeout;
+
   React.useEffect(function () {
-    if (notification) {
+    if (msg) {
       toggle.open();
-      setTimeout(toggle.willCloseAfter(5000), 100);
+      setTimeout(toggle.willCloseAfter(timeout), 100);
     }
-  }, [notification]);
+  }, [msg]);
   React.useEffect(function () {
     if (!toggle.isOpen) {
       setNotification(null);
@@ -1934,7 +2143,9 @@ var Notifications = function Notifications() {
   }, [toggle.isOpen]);
   return toggle.isOpen && React__default.createElement(core.Fill, {
     name: "Notifications"
-  }, React__default.createElement(FlipNotification, null, notification, React__default.createElement(Icon, {
+  }, React__default.createElement(FlipNotification, {
+    type: type
+  }, utils.callIfFunction(msg, toggle.close), React__default.createElement(Icon, {
     icon: "x",
     onClick: toggle.close
   })));
@@ -1973,27 +2184,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'];
@@ -2037,7 +2263,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);
 
@@ -2081,9 +2310,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;
@@ -2122,12 +2351,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];
@@ -2140,13 +2369,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})
 
 
@@ -2167,6 +2406,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
@@ -2183,8 +2424,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);
@@ -2304,6 +2543,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) {
@@ -2340,8 +2580,12 @@ function (_React$Component) {
       var rectAnimation = getClientRectAnimation(oldSnap.parent, newSnap.parent, {
         skipTransform: true
       });
-      callIfFunction(onStartAnimation);
-      morph(newSnap.parent.domNode, formatAnimation(rectAnimation, timing), onEndAnimation);
+      var endEffect = utils.callIfFunction(effect, newSnap.parent.domNode, {
+        newSnap: newSnap,
+        oldSnap: oldSnap
+      });
+      utils.callIfFunction(onStartAnimation);
+      morph(newSnap.parent.domNode, formatAnimation(rectAnimation, timing), endEffect || onEndAnimation);
     };
 
     _this.reinsertSnap = function (item, scrollDelta, allChildren) {
@@ -2432,6 +2676,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);
         }
       }
@@ -2486,7 +2731,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"
@@ -2566,19 +2813,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
+      }));
     }
   }]);
 
@@ -2672,6 +2924,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);
@@ -2856,7 +3113,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;
         }
@@ -2877,7 +3141,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);
         }
@@ -3065,15 +3334,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,
@@ -3081,6 +3355,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,
@@ -3088,13 +3367,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);
@@ -3121,7 +3402,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') {
@@ -3327,6 +3612,8 @@ function (_React$Component3) {
           _this3.ghost.style.transform = newTransform;
 
           _this3.ghost.addEventListener('transitionend', _this3.stopMoving);
+
+          _this3.endTimeout = setTimeout(_this3.stopMoving, 300);
         }
       } else {
         _this3.stopMoving();
@@ -3344,10 +3631,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);
@@ -3588,9 +3875,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;
   };
@@ -3608,10 +3905,10 @@ function _templateObject2$4() {
   return data;
 }
 
-function _templateObject$6() {
-  var data = _taggedTemplateLiteral(["\n    font-size: 13px;\n    & > * {\n      padding: 14px 3.25rem;\n    }\n  "]);
+function _templateObject$5() {
+  var data = _taggedTemplateLiteral(["\n    font-size: 14px;\n    & > * {\n      padding-top: 15px;\n      padding-bottom: 15px;\n    }\n    ", ", .icon {\n      font-size: 25px;\n    }\n  "]);
 
-  _templateObject$6 = function _templateObject() {
+  _templateObject$5 = function _templateObject() {
     return data;
   };
 
@@ -3626,24 +3923,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:13px;& > *{padding:11px 1.5rem 11px 3.5rem;display:block;}", ",.icon{font-size:23px;position:absolute;padding-left:0.25rem;left:0;top:50%;transform:translateY(-50%);width:3.5rem;text-align:center;}", " & > a{color:inherit;font-weight:inherit;text-decoration:inherit;}& > a,& > label{cursor:pointer;}", " ", " input[type=\"radio\"]{display:none;}", " ", " ", " ", ""], Icon, utils.media.mobile(_templateObject$5(), Icon), utils.ifProp('hover', styled.css(["& > a,& > label{background:", ";color:", ";color:", ";}"], function (props) {
   return polished.lighten(0.53, utils.getColor("main")(props));
 }, utils.getColor('main'), function (props) {
   return polished.darken(0.03, utils.getColor("main")(props));
-})), 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) {
@@ -3651,13 +3958,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) {
@@ -3779,6 +4086,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,
@@ -3790,9 +4098,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();
@@ -3849,7 +4159,7 @@ var Li = function Li(_ref) {
     };
   }, []);
   React.useEffect(function () {
-    if (children) {
+    if (children && !utils.isMobile()) {
       if (hover) {
         if (!subMenu.isOpen || subMenu.closing || !subPrevented.get()) {
           subMenu.open();
@@ -3863,38 +4173,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');
   };
@@ -3912,7 +4219,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';
@@ -3922,14 +4229,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;
@@ -3941,11 +4247,11 @@ var _willUseLayers$1 = core.willUseLayers(),
 
 var contextMenuLayersQuantity = contextMenuLayersSize;
 
-var _willUseSharedState$1 = core.willUseSharedState(),
-    _willUseSharedState2$1 = _slicedToArray(_willUseSharedState$1, 1),
-    useContextMenuSharedState = _willUseSharedState2$1[0];
+var _willUseSharedState$2 = core.willUseSharedState(),
+    _willUseSharedState2$2 = _slicedToArray(_willUseSharedState$2, 1),
+    useContextMenuSharedState = _willUseSharedState2$2[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,
@@ -3957,7 +4263,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),
@@ -4057,10 +4366,34 @@ var ContextMenuComponent = React.forwardRef(function (_ref2, ref) {
     });
   };
 
+  var touchStart = utils.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));
@@ -4438,19 +4771,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({
@@ -4458,7 +4810,7 @@ var BlockContainer$2 = styled__default.div.withConfig({
   componentId: "htfwpl-0"
 })(["position:relative;"]);
 
-var _twoWayAnimation$4 = twoWayAnimation('opacity: 0;', 'opacity: 0;', 'opacity: 1;'),
+var _twoWayAnimation$4 = utils.twoWayAnimation('opacity: 0;', 'opacity: 0;', 'opacity: 1;'),
     _twoWayAnimation2$4 = _slicedToArray(_twoWayAnimation$4, 2),
     fadeIn$3 = _twoWayAnimation2$4[0],
     relativeFadeout = _twoWayAnimation2$4[1];
@@ -4503,7 +4855,7 @@ var SwitchContainer = function SwitchContainer(_ref2) {
   return React__default.createElement(BlockContainer$2, {
     ref: contentRef,
     className: className
-  }, callIfFunction(children));
+  }, utils.callIfFunction(children));
 };
 
 var TOP_TRIGGER = function TOP_TRIGGER(posInfo, refInfo) {
@@ -4546,44 +4898,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);
@@ -4594,6 +4968,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);
 
@@ -4602,20 +4978,20 @@ 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);
-          callIfFunction(onChange, value);
+          utils.callIfFunction(onChange, value);
           setSharedIsSticky(value);
         }
       }
     });
     React.useEffect(function () {
       setIsSticky(false);
-      observer.observe(ensuredRef.current);
+      getObserver(utils.callIfFunction(root)).observe(ensuredRef.current);
       activeObserved = activeObserved.concat(ensuredRef.current);
       return function () {
         // observer.unobserve(ref.current)
@@ -4654,26 +5030,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);
@@ -4688,16 +5055,21 @@ 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
   }));
 });
 
-function _templateObject$7() {
-  var data = _taggedTemplateLiteral(["\n      @supports (position: sticky) {\n        top: 0;\n        margin: -0.75rem;\n      }\n    "]);
+function _templateObject$6() {
+  var data = _taggedTemplateLiteral(["\n      @supports (position: sticky) {\n        top: 0;\n        margin-right: -0.75rem;\n      }\n    "]);
 
-  _templateObject$7 = function _templateObject() {
+  _templateObject$6 = function _templateObject() {
     return data;
   };
 
@@ -4706,7 +5078,7 @@ function _templateObject$7() {
 var DialogWithImageHeader = styled__default(Dialog).withConfig({
   displayName: "DialogWithImageHeader",
   componentId: "sc-1f1ry4g-0"
-})(["max-width:51rem;", "{background:", ";text-shadow:none;color:rgba(120,120,120,1);font-size:20px;box-shadow:rgba(0,0,0,0.2) 0px 1px 3px 0px,rgba(0,0,0,0.05) 0px 0px 0px 1px;width:36px;height:36px;line-height:36px;transition:0.1s ease-out;:hover{background-color:rgb(230,230,230);}:active{background-color:rgb(220,220,220);transition:0s ease-out;}@supports (position:sticky){position:sticky;top:-2.5rem;right:0rem;float:right;margin:-1.25rem;}", "}"], CloseIcon, utils.getColor('gray240'), utils.media.mobile(_templateObject$7()));
+})(["max-width:51rem;", "{background:", ";text-shadow:none;color:rgba(120,120,120,1);font-size:20px;box-shadow:rgba(0,0,0,0.2) 0px 1px 3px 0px,rgba(0,0,0,0.05) 0px 0px 0px 1px;width:36px;height:36px;line-height:36px;transition:0.1s ease-out;:hover{background-color:rgb(230,230,230);}:active{background-color:rgb(220,220,220);transition:0s ease-out;}@supports (position:sticky){position:sticky;top:-2.5rem;right:0rem;float:right;margin-right:-1.25rem;margin-top:0.75rem;}", "}"], CloseIcon, utils.getColor('gray240'), utils.media.mobile(_templateObject$6()));
 
 function _templateObject2$5() {
   var data = _taggedTemplateLiteral(["\n    min-height: 100%;\n    overflow: hidden;\n  "]);
@@ -4718,10 +5090,10 @@ function _templateObject2$5() {
   return data;
 }
 
-function _templateObject$8() {
+function _templateObject$7() {
   var data = _taggedTemplateLiteral(["\n    display:block;\n    position:fixed;\n    top:0;\n    left:0;\n    bottom:0;\n    z-index:1000;\n    transition: 0.25s transform ease-out;\n    background-color: ", ";\n    box-shadow: -5px 0 20px 5px rgba(0,0,0,0.4);\n    border-radius: 0;\n    ", "\n  "]);
 
-  _templateObject$8 = function _templateObject() {
+  _templateObject$7 = function _templateObject() {
     return data;
   };
 
@@ -4732,7 +5104,7 @@ var SideMenu = styled__default.div.withConfig({
   componentId: "suvg9r-0"
 })(["background-color:", ";border-top-left-radius:10px;border-bottom-left-radius:10px;width:19rem;flex-shrink:0;padding:1.25rem 0;", " ", ""], utils.getColor('gray240'), function (props) {
   return !props.visibleOnDesktop && 'display:none;';
-}, utils.media.mobile(_templateObject$8(), utils.getColor('gray240'), function (props) {
+}, utils.media.mobile(_templateObject$7(), utils.getColor('gray240'), function (props) {
   return !props.isOpen && "\n      transform: translateX(-100%);\n      box-shadow: none;\n    ";
 }));
 var DialogTabMenu = styled__default.ul.withConfig({
@@ -4871,9 +5243,11 @@ exports.ContextMenu = ContextMenu;
 exports.ContextMenuComponent = ContextMenuComponent;
 exports.DefaultArrow = DefaultArrow;
 exports.DefaultConfirmDialog = DefaultConfirmDialog;
+exports.DefaultWarningDialog = DefaultWarningDialog;
 exports.Dialog = Dialog;
 exports.DialogContainer = DialogContainer;
 exports.DialogContent = DialogContent;
+exports.DialogContentWrapper = DialogContentWrapper;
 exports.DialogError = DialogError;
 exports.DialogErrorContent = DialogErrorContent;
 exports.DialogFooter = DialogFooter;
@@ -4901,6 +5275,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;
@@ -4916,6 +5291,8 @@ exports.StickyContainer = StickyContainer;
 exports.SwitchDiv = SwitchDiv;
 exports.Tooltip = Tooltip;
 exports.TransitionDiv = TransitionDiv;
+exports.WarningDialog = WarningDialog;
+exports.addPositioningBound = addPositioningBound;
 exports.contextMenuLayersQuantity = contextMenuLayersQuantity;
 exports.defaultAnimationMaker = defaultAnimationMaker;
 exports.dialogFadeInDown = dialogFadeInDown;
@@ -4929,8 +5306,11 @@ exports.morph = morph;
 exports.preventDialogPop = preventDialogPop;
 exports.removeWindowScroll = removeWindowScroll;
 exports.setNotification = setNotification;
+exports.setWarningDialog = setWarningDialog;
 exports.toPosition = toPosition;
+exports.useDialog = useDialog;
 exports.useDialogLayers = useDialogLayers;
+exports.useDialogWithToggle = useDialogWithToggle;
 exports.useFlip = useFlip;
 exports.useFlipAnimation = useFlipAnimation;
 exports.useFlipEnter = useFlipEnter;
@@ -4938,6 +5318,7 @@ exports.useFlipLeave = useFlipLeave;
 exports.useNotification = useNotification;
 exports.useNotificationRef = useNotificationRef;
 exports.usePositioning = usePositioning;
+exports.useWarningDialog = useWarningDialog;
 exports.waitForPop = waitForPop;
 exports.willSetNotification = willSetNotification;
 exports.willUseFlip = willUseFlip;