@startlibs/components 1.0.3 → 1.0.4

package/lib/index.js

@@ -6,7 +6,7 @@ import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
 import _inherits from '@babel/runtime/helpers/inherits';
 import React, { useEffect, useRef, useMemo, useState, useLayoutEffect, forwardRef } from 'react';
 import styled, { withTheme, css, isStyledComponent, createGlobalStyle } from 'styled-components';
-import { transparentize, darken, rgba, lighten } from 'polished';
+import { transparentize, darken, rgba } from 'polished';
 import { getColor, styledExtend, media, customTheme, callIfFunction, twoWayAnimation, oneWayAnimation, ifUndefined, getUID, constrainEvent, printerMedia, getClosestOffsetScroll, identityOpacityFrames, getScrollParent, normalizeMouse, normalizeTouch, getMargin, animationTiming, ifProp, isMobile, createPressAndMoveEvent, stopPropagation, postFetcher, _s, formatDate, addQueryString } from '@startlibs/utils';
 import _extends from '@babel/runtime/helpers/extends';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
@@ -102,14 +102,14 @@ var Loading = styled.div.withConfig({
 });
 
 var _excluded$l = ["type", "locked", "color", "alpha", "success", "alert", "warning", "highlight", "light", "hover", "white", "icon", "onlyIcon", "small", "withDropdown", "onlyDropdown", "outline", "dashed", "textOnly", "isLoading", "isLoadingIcon", "dark", "innerAs", "className", "children", "rounded", "tabIndex", "focused", "noFocus", "colorSet", "concealed", "concealedModule", "buttonRef"];
-var _templateObject$8, _templateObject2$7, _templateObject3$4;
+var _templateObject$8, _templateObject2$7, _templateObject3$5;
 var DropdownIcon = styledExtend(Icon$1)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 51%;\n  transform: translateY(-50%);\n  right: 1rem;\n  font-size: 12px;\n"])));
 var LockIcon = styled(Icon$1).withConfig({
   displayName: "Button__LockIcon",
   componentId: "sc-qe54pl-0"
 })(["position:absolute;bottom:10px;right:.75rem;left:auto;top:auto;font-size:18px;"]);
 var focus = css([":after{content:'';pointer-events:none;position:absolute;top:-3px;right:-3px;left:-3px;bottom:-3px;border-radius:", ";border:2px solid rgba(0,0,0,0.15);}"], function (props) {
-  return props.rounded ? '100px' : '9px';
+  return props.rounded ? '100px' : '11px';
 });
 var Button = styled(/*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
@@ -174,7 +174,7 @@ var Button = styled(/*#__PURE__*/React.forwardRef(function (_ref, ref) {
   displayName: "Button",
   componentId: "sc-qe54pl-1"
 })(["vertical-align:top;border:0;font-size:12px;border-radius:", ";background:", ";color:white;min-width:8rem;font-weight:500;display:inline-block;line-height:16px;text-align:center;padding:10px 1.25rem;outline:none;cursor:pointer;position:relative;text-decoration:none;user-select:none;flex-shrink:0;:hover{background:", ";}:active{background:", ";}", " ", " & + &{margin-left:1rem;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
-  return props.rounded ? '100px' : '6px';
+  return props.rounded ? '100px' : '8px';
 }, getColor, function (props) {
   return darken(0.05, getColor(props, true));
 }, function (props) {
@@ -187,7 +187,7 @@ var Button = styled(/*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
 }, function (props) {
   return props.hasErrors && css([":after{content:'';pointer-events:none;position:absolute;top:-4px;right:-4px;left:-4px;bottom:-4px;border-radius:", ";border:3px solid ", ";}"], function (props) {
-    return props.rounded ? '100px' : '9px';
+    return props.rounded ? '100px' : '11px';
   }, function (props) {
     return transparentize(0.7, getColor("alert")(props));
   });
@@ -228,7 +228,7 @@ var Button = styled(/*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return transparentize(0.76, darken(0.05, getColor('warning')(props)));
   });
 }, function (props) {
-  return (props.outline || props.dashed || props.textOnly) && 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 ? getColor('main') : 'rgba(0,0,0,0.6)', Icon$1, DropdownIcon, props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.5)', props.outline ? 'solid' : props.dashed ? 'dashed' : '', props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.35)', props.rounded ? '100px' : '6px', props.textOnly && 'content: none;');
+  return (props.outline || props.dashed || props.textOnly) && 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 ? getColor('main') : 'rgba(0,0,0,0.6)', Icon$1, DropdownIcon, props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.5)', props.outline ? 'solid' : props.dashed ? 'dashed' : '', props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.35)', props.rounded ? '100px' : '8px', props.textOnly && 'content: none;');
 }, function (props) {
   return props.alpha && css(["background:rgba(0,0,0,0.45);:hover{background:rgba(0,0,0,0.50);}:active{background:rgba(0,0,0,0.55);}"]);
 }, function (props) {
@@ -243,7 +243,7 @@ var Button = styled(/*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return !props.small && props.onlyIcon && css(["min-width:3.5rem;min-height:3.5rem;"]);
 }, function (props) {
   return props.withDropdown && css(["padding-right:2.5rem;", "{right:14px;}"], DropdownIcon);
-}), media.max(359)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n    ", "\n  "])), function (props) {
+}), media.max(359)(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n    ", "\n  "])), function (props) {
   return !props.small && !props.onlyIcon && !props.onlyDropdown && css(["min-width:0;"]);
 }), function (props) {
   return props.fullwidth && "\n    width: 100%;\n  ";
@@ -438,8 +438,8 @@ var LoadingDiv = function LoadingDiv(_ref2) {
   }, children) : children);
 };
 
-var _excluded$h = ["className", "skipWrap", "stickyFooter", "fixTitleMargin", "skipCloseIcon", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container"];
-var _templateObject$7, _templateObject2$6, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _excluded$h = ["className", "skipWrap", "wrapChildren", "stickyFooter", "fixTitleMargin", "skipCloseIcon", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container", "onClose"];
+var _templateObject$7, _templateObject2$6, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
 var DialogIcon = styled(Icon$1).withConfig({
   displayName: "Dialog__DialogIcon",
   componentId: "sc-gai4ey-0"
@@ -466,7 +466,7 @@ var DialogContent = styled(function (props) {
 })(["outline:none;width:100%;position:relative;min-height:5rem;", " ", " p{font-size:14px;}"], function (props) {
   return props.icon && css(["padding-right:8rem;min-height:6rem;"]);
 }, function (props) {
-  return props.illustration && css(["padding-right:15rem;", ""], media.mobile(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n        padding-right: 1.5rem;\n      "]))));
+  return props.illustration && css(["padding-right:15rem;", ""], media.mobile(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n        padding-right: 1.5rem;\n      "]))));
 });
 var DialogTitle = styled.h2.withConfig({
   displayName: "Dialog__DialogTitle",
@@ -478,10 +478,10 @@ var DialogFooter = styled.div.withConfig({
   displayName: "Dialog__DialogFooter",
   componentId: "sc-gai4ey-5"
 })(["display:block;padding-top:1rem;margin-top:1rem;align-items:stretch;text-align:right;", " ", ""], function (props) {
-  return props.sticky && css(["position:sticky;background:white;width:inherit;z-index:50;", " ", " ", ""], media.desktop(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n        bottom: -3rem;\n        margin-left: -2rem;\n        margin-right: -2rem;\n        margin-bottom: -1.5rem;\n        margin-top: 0.5rem;\n        padding: 1.5rem 2rem;\n        border-radius: 0 0 0.5rem 0.5rem;\n      "]))), media.mobile(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n        bottom: -0.5rem;\n        padding: 0.75rem 1.5rem;\n        margin-bottom: -0.75rem;\n        margin-left: -1.5rem;\n        margin-right: -1.5rem;\n      "]))), function (props) {
+  return props.sticky && css(["position:sticky;background:white;width:inherit;z-index:50;", " ", " ", ""], media.desktop(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n        bottom: -3rem;\n        margin-left: -2rem;\n        margin-right: -2rem;\n        margin-bottom: -1.5rem;\n        margin-top: 0.5rem;\n        padding: 1.5rem 2rem;\n        border-radius: 0 0 1rem 1rem;\n      "]))), media.mobile(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n        bottom: -0.5rem;\n        padding: 0.75rem 1.5rem;\n        margin-bottom: -0.75rem;\n        margin-left: -1.5rem;\n        margin-right: -1.5rem;\n      "]))), function (props) {
     return props.isSticky && "\n        box-shadow: 0 0px 2px 0 rgba(0,0,0,0.1), 0 0px 5px 1px rgba(0,0,0,0.15);\n        border-radius: 0;\n      ";
   });
-}, media.max(370)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      ", " {\n        min-width: unset;\n        padding-left: 1rem;\n        padding-right: 1rem;\n      }\n    "])), Button$1));
+}, media.max(370)(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n      ", " {\n        min-width: unset;\n        padding-left: 1rem;\n        padding-right: 1rem;\n      }\n    "])), Button$1));
 var FooterAuxiliaryContainer = styled.div.withConfig({
   displayName: "Dialog__FooterAuxiliaryContainer",
   componentId: "sc-gai4ey-6"
@@ -492,7 +492,7 @@ var FooterAuxiliaryContainer = styled.div.withConfig({
 var DialogContentWrapper = styled(LoadingDiv$1).withConfig({
   displayName: "Dialog__DialogContentWrapper",
   componentId: "sc-gai4ey-7"
-})(["padding:2rem;margin:-2rem;", ""], media.mobile(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    padding: 1.5rem;\n    margin: -1.5rem;\n  "]))));
+})(["padding:2rem;margin:-2rem;", ""], media.mobile(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n    padding: 1.5rem;\n    margin: -1.5rem;\n  "]))));
 var DialogAlwaysVisibleDiv = styled.div.withConfig({
   displayName: "Dialog__DialogAlwaysVisibleDiv",
   componentId: "sc-gai4ey-8"
@@ -502,6 +502,7 @@ var DialogAlwaysVisibleDiv = styled.div.withConfig({
 var Dialog = styled(/*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
   var className = _ref.className,
     skipWrap = _ref.skipWrap,
+    wrapChildren = _ref.wrapChildren,
     stickyFooter = _ref.stickyFooter;
     _ref.fixTitleMargin;
     var skipCloseIcon = _ref.skipCloseIcon,
@@ -515,11 +516,30 @@ var Dialog = styled(/*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
     auxiliarActions = _ref.auxiliarActions,
     _ref$container = _ref.container,
     container = _ref$container === void 0 ? true : _ref$container,
+    onClose = _ref.onClose,
     props = _objectWithoutProperties(_ref, _excluded$h);
   var ref = useEnsureRef(outerRef);
   var _willUseIsSticky = willUseIsSticky$1(),
     _willUseIsSticky2 = _slicedToArray(_willUseIsSticky, 1),
     WithIsSticky = _willUseIsSticky2[0];
+  var handleClose = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!onClose) {
+            _context.next = 3;
+            break;
+          }
+          _context.next = 3;
+          return onClose()["catch"](console.error);
+        case 3:
+          if (props.closeDialog) props.closeDialog();
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [onClose, props.closeDialog]);
   var alwaysVisible = function alwaysVisible(confirmCloseDialog) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, props.closeDialog && !skipCloseIcon && /*#__PURE__*/React.createElement(CloseIcon$1, {
       className: "JS-dialog-close",
@@ -534,7 +554,7 @@ var Dialog = styled(/*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
   }, callIfFunction(Content)), !Content && children && /*#__PURE__*/React.createElement(DialogContent, {
     icon: icon,
     illustration: illustration
-  }, callIfFunction(children)), Content && children && callIfFunction(children), footer && /*#__PURE__*/React.createElement(WithIsSticky, {
+  }, wrapChildren ? wrapChildren(children) : callIfFunction(children)), Content && children && (wrapChildren ? wrapChildren(children) : callIfFunction(children)), footer && /*#__PURE__*/React.createElement(WithIsSticky, {
     bottom: true
   }, function (sentinel, isSticky) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DialogFooter, {
@@ -553,15 +573,16 @@ var Dialog = styled(/*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
   return container ? /*#__PURE__*/React.createElement(DialogContainer$1, _extends({}, props, {
     DialogErrorContent: DialogErrorContent,
     ref: ref,
-    title: title
-  }), function (_ref2) {
-    var confirmCloseDialog = _ref2.confirmCloseDialog;
+    title: title,
+    closeDialog: handleClose
+  }), function (_ref3) {
+    var confirmCloseDialog = _ref3.confirmCloseDialog;
     return dialog(confirmCloseDialog);
-  }) : dialog(props.closeDialog);
+  }) : dialog(handleClose);
 })).withConfig({
   displayName: "Dialog",
   componentId: "sc-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%;}", " ", " ", ""], media.mobile(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    padding: 1.5rem 1.5rem 1.5rem;\n    max-width: 100%;\n    ", ";\n  "])), function (props) {
+})(["@supports (position:sticky){will-change:transform,opacity;&.JS-wc-off{will-change:auto;}}border-radius:18px;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%;}", " ", " ", ""], media.mobile(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    padding: 1.5rem 1.5rem 1.5rem;\n    max-width: 100%;\n    ", ";\n  "])), function (props) {
   return props.fullscreenOnMobile && "\n      border-radius: 0;\n      min-height: 100%;\n    ";
 }), function (props) {
   return props.closeDialog && css(["", "{padding-right:2rem;}"], DialogTitle);
@@ -572,14 +593,37 @@ var ConfirmDialog = function ConfirmDialog(props) {
   }), props.children);
 };
 var DefaultConfirmDialog = function DefaultConfirmDialog(props) {
-  return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (_ref3) {
-    var confirmDialogLabels = _ref3.confirmDialogLabels;
+  return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (_ref4) {
+    var confirmDialogLabels = _ref4.confirmDialogLabels;
+    var handleCancel = /*#__PURE__*/function () {
+      var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (props.onCancel) props.onCancel();
+              if (!props.onClose) {
+                _context2.next = 4;
+                break;
+              }
+              _context2.next = 4;
+              return props.onClose()["catch"](console.error);
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function handleCancel() {
+        return _ref5.apply(this, arguments);
+      };
+    }();
     return /*#__PURE__*/React.createElement(ConfirmDialog, {
       title: confirmDialogLabels.title,
-      closeDialog: props.onCancel,
+      closeDialog: handleCancel,
+      onClose: props.onClose,
       onConfirm: props.onConfirm,
       footer: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button$1, {
-        onClick: props.onCancel
+        onClick: handleCancel
       }, confirmDialogLabels.cancel), /*#__PURE__*/React.createElement(Button$1, {
         hover: "success",
         isLoading: props.isLoading,
@@ -592,37 +636,73 @@ var DefaultConfirmDialog = function DefaultConfirmDialog(props) {
     }, /*#__PURE__*/React.createElement("p", null, confirmDialogLabels.content));
   });
 };
-var DialogErrorContent = function DialogErrorContent(_ref4) {
-  var closeDialog = _ref4.closeDialog;
-    _ref4.title;
-  return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (_ref5) {
-    var _ref5$ErrorDialog = _ref5.ErrorDialog,
-      title = _ref5$ErrorDialog.title,
-      content = _ref5$ErrorDialog.content,
-      close = _ref5$ErrorDialog.close;
+var DialogErrorContent = function DialogErrorContent(_ref6) {
+  var closeDialog = _ref6.closeDialog,
+    onClose = _ref6.onClose;
+    _ref6.title;
+  var handleClose = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          if (!onClose) {
+            _context3.next = 3;
+            break;
+          }
+          _context3.next = 3;
+          return onClose()["catch"](console.error);
+        case 3:
+          if (closeDialog) closeDialog();
+        case 4:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })), [onClose, closeDialog]);
+  return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (_ref8) {
+    var _ref8$ErrorDialog = _ref8.ErrorDialog,
+      title = _ref8$ErrorDialog.title,
+      content = _ref8$ErrorDialog.content,
+      close = _ref8$ErrorDialog.close;
     return /*#__PURE__*/React.createElement(Dialog, {
       as: "div"
     }, closeDialog && /*#__PURE__*/React.createElement(CloseIcon$1, {
-      onClick: closeDialog
+      onClick: handleClose
     }), title && /*#__PURE__*/React.createElement(DialogTitle, null, title), /*#__PURE__*/React.createElement(DialogContent, {
       icon: "warning"
     }, content), /*#__PURE__*/React.createElement(DialogFooter, null, /*#__PURE__*/React.createElement(Button$1, {
-      onClick: closeDialog
+      onClick: handleClose
     }, close)));
   });
 };
-var DialogError = function DialogError(_ref6) {
-  var closeDialog = _ref6.closeDialog;
-  return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (_ref7) {
-    var _ref7$ErrorDialog = _ref7.ErrorDialog,
-      title = _ref7$ErrorDialog.title;
-      _ref7$ErrorDialog.content;
-      _ref7$ErrorDialog.close;
+var DialogError = function DialogError(_ref9) {
+  var closeDialog = _ref9.closeDialog,
+    onClose = _ref9.onClose;
+  var handleClose = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          if (!onClose) {
+            _context4.next = 3;
+            break;
+          }
+          _context4.next = 3;
+          return onClose()["catch"](console.error);
+        case 3:
+          if (closeDialog) closeDialog();
+        case 4:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })), [onClose, closeDialog]);
+  return /*#__PURE__*/React.createElement(StartlibsConsumer, null, function (_ref11) {
+    var title = _ref11.ErrorDialog.title;
     return /*#__PURE__*/React.createElement(Dialog, {
-      closeDialog: closeDialog,
+      closeDialog: handleClose,
       title: title
     }, /*#__PURE__*/React.createElement(DialogErrorContent, {
-      closeDialog: closeDialog
+      closeDialog: handleClose,
+      onClose: onClose
     }));
   });
 };
@@ -795,22 +875,22 @@ var FlipNotification$1 = function FlipNotification(props) {
   }, props)));
 };
 
-var _templateObject$6, _templateObject2$5, _templateObject3$2, _templateObject4$1, _templateObject5, _templateObject6;
+var _templateObject$6, _templateObject2$5, _templateObject3$3, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var NotificationContainer$1 = styled.div.withConfig({
   displayName: "ToastNotifications__NotificationContainer",
   componentId: "sc-inycsj-0"
-})(["position:fixed;bottom:0;max-height:100%;z-index:999999;display:flex;flex-direction:column-reverse;align-items:flex-end;overflow-y:auto;right:1.5rem;::-webkit-scrollbar{width:21px;height:21px;}::-webkit-scrollbar-thumb{pointer-events:all;background:rgba(0,0,0,0.4);border-radius:100px;background-clip:padding-box;border:6px solid transparent;min-height:30px;min-width:30px;&:hover{background:rgba(0,0,0,0.5);background-clip:padding-box;border:6px solid transparent;}}::-webkit-scrollbar-corner{background:transparent;}", " ", ""], media.desktop(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n    &.JS-dialog-open {\n      right: 2.75rem;\n    }\n  "]))), media.mobile(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n    left: 0.75rem;\n    right: 0.75rem;\n  "]))));
-var DefaultToast = styled.div.withConfig({
-  displayName: "ToastNotifications__DefaultToast",
+})(["position:fixed;bottom:0;max-height:100%;z-index:999999;display:flex;flex-direction:column-reverse;align-items:flex-end;overflow-y:auto;right:1.5rem;", " ", " ::-webkit-scrollbar{width:21px;height:21px;}::-webkit-scrollbar-thumb{pointer-events:all;background:rgba(0,0,0,0.4);border-radius:100px;background-clip:padding-box;border:6px solid transparent;min-height:30px;min-width:30px;&:hover{background:rgba(0,0,0,0.5);background-clip:padding-box;border:6px solid transparent;}}::-webkit-scrollbar-corner{background:transparent;}", " ", ""], media.desktop(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n    padding-bottom: 1.5rem;\n  "]))), media.mobile(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n    padding-bottom: 0.75rem;\n  "]))), media.desktop(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n    &.JS-dialog-open {\n      right: 2.75rem;\n    }\n  "]))), media.mobile(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n    left: 0.75rem;\n    right: 0.75rem;\n  "]))));
+var ToastBox = styled.div.withConfig({
+  displayName: "ToastNotifications__ToastBox",
   componentId: "sc-inycsj-1"
-})(["color:white;font-size:14px;font-weight:500;transition:0.4s opacity 1.5s;border-radius:10px;margin-top:0.5rem;overflow:hidden;flex-shrink:0;transition:0.3s background ease,0.4s opacity 1.5s;", " ", " ", ""], media.desktop(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n    background: ", ";\n    max-width: 300px;\n    :first-child {\n      margin-bottom: 1.5rem;\n    }\n  "])), function (props) {
+})(["color:white;font-size:14px;font-weight:500;border-radius:10px;flex-shrink:0;margin-top:0.5rem;overflow:hidden;transition:0.3s background ease,0.4s opacity 1.5s;", " ", " ", ""], media.desktop(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background: ", ";\n    max-width: 300px;\n  "])), function (props) {
   return rgba(getColor(props.type)(props), ifUndefined(props.opacity, 0.7));
-}), media.mobile(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n    background: ", ";\n    :first-child {\n      margin-bottom: 0.75rem;\n    }\n  "])), function (props) {
+}), media.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    background: ", ";\n  "])), function (props) {
   return rgba(getColor(props.type)(props), ifUndefined(props.opacity, 0.8));
 }), function (props) {
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["background: ", ";"])), getColor(props.type));
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["background: ", ";"])), getColor(props.type));
 });
 var NotificationTitleContainer = styled.div.withConfig({
   displayName: "ToastNotifications__NotificationTitleContainer",
@@ -825,12 +905,12 @@ var NotificationTitle = styled.div.withConfig({
 var NotificationContent = styled.div.withConfig({
   displayName: "ToastNotifications__NotificationContent",
   componentId: "sc-inycsj-4"
-})(["display:flex;align-items:center;text-align:left;padding:1rem 1.5rem;", ""], media.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    justify-content: center;\n  "]))));
+})(["display:flex;align-items:center;text-align:left;padding:1rem 1.5rem;", ""], media.mobile(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    justify-content: center;\n  "]))));
 var NotificationIconWrapper = styled.div.withConfig({
   displayName: "ToastNotifications__NotificationIconWrapper",
   componentId: "sc-inycsj-5"
-})(["margin-right:1rem;position:relative;width:36px;text-align:center;flex-shrink:0;", "{font-size:40px;", "}"], Icon$1, function (props) {
-  return props.isLoading && "\n      font-size: 22px;\n    ";
+})(["margin-right:1rem;position:relative;width:36px;text-align:center;flex-shrink:0;", "{font-size:", "px;}"], Icon$1, function (props) {
+  return props.isLoading ? 22 : props.iconFontSize || 40;
 });
 var CloseIcon = styled(Icon$1).attrs({
   icon: 'x'
@@ -863,6 +943,7 @@ var createToastNotification = function createToastNotification(notification, tim
   var hasClosed = false;
   var close = function close() {
     clearTimeout(currentTimer);
+    if (hasClosed) return;
     setToastNotifications(_.differenceBy('uid', _, [{
       uid: uid
     }]));
@@ -893,7 +974,9 @@ var createToastNotification = function createToastNotification(notification, tim
         setToastNotifications(_.concat(notificationObj));
       } else {
         setToastNotifications(_.map(function (n) {
-          return n.uid === uid ? notificationObj : n;
+          return n.uid === uid ? _objectSpread$7(_objectSpread$7({}, notificationObj), {}, {
+            _key: n._key
+          }) : n;
         }));
       }
     }
@@ -934,7 +1017,10 @@ var willShowToastNotification = function willShowToastNotification(str) {
     return showToastNotification(str);
   };
 };
-var animation$2 = oneWayAnimation("transform: scale(1); transform-origin: center; opacity: 1;", "transform: scale(0); transform-origin: center; opacity: 0;");
+var EXIT_ANIMATION_MS = 300;
+var TOAST_EASING = 'cubic-bezier(0.22, 0.61, 0.36, 1)';
+var TOAST_TIMING = "".concat(EXIT_ANIMATION_MS, "ms ").concat(TOAST_EASING);
+var animation$2 = oneWayAnimation('transform: translateY(0); opacity: 1;', 'transform: translateY(0.25rem); opacity: 1;', 'transform: translateY(1rem); opacity: 0;');
 var removeAnimationReinsertPosition = function removeAnimationReinsertPosition(e) {
   return e.style.position = '';
 };
@@ -943,51 +1029,91 @@ var ToastNotifications = function ToastNotifications() {
     _useToastNotification2 = _slicedToArray(_useToastNotification, 2),
     notifications = _useToastNotification2[0];
     _useToastNotification2[1];
+  var containerRef = useRef(null);
+  var _useNotificationConta = useNotificationContainerWidthLock(containerRef),
+    lockWidth = _useNotificationConta.lockWidth,
+    unlockWidth = _useNotificationConta.unlockWidth;
   return /*#__PURE__*/React.createElement(Fill, {
     name: "Notifications"
   }, /*#__PURE__*/React.createElement(NotificationContainer$1, {
+    ref: containerRef,
     className: "JS-on-open-dialog"
   }, /*#__PURE__*/React.createElement(FlipList$1, {
     animation: animation$2,
+    timing: TOAST_TIMING,
     onReinsert: removeAnimationReinsertPosition,
-    skipParentMorph: true
+    skipParentMorph: true,
+    anchoredDownList: true
   }, notifications.map(function (notification) {
-    return callIfFunction(notification.element, notification.close) || /*#__PURE__*/React.createElement(DefaultToast, {
-      id: "js-share-notification",
+    var closeWithLock = function closeWithLock() {
+      lockWidth();
+      notification.close();
+      setTimeout(unlockWidth, EXIT_ANIMATION_MS);
+    };
+    return callIfFunction(notification.element, closeWithLock) || /*#__PURE__*/React.createElement(ToastBox, {
+      key: "toast-".concat(notification.uid),
       type: notification.type,
       onClick: notification.onClick,
-      opacity: notification.opacity,
-      key: notification.uid
+      opacity: notification.opacity
     }, notification.title ? /*#__PURE__*/React.createElement(NotificationTitleContainer, {
       onClick: notification.onClickTitle ? function (e) {
-        return notification.onClickTitle(e, notification.close);
+        return notification.onClickTitle(e, closeWithLock);
       } : undefined
     }, /*#__PURE__*/React.createElement(NotificationTitle, null, notification.title), notification.closeOnX && /*#__PURE__*/React.createElement(CloseIcon, {
-      onClick: constrainEvent(notification.close)
+      onClick: constrainEvent(closeWithLock)
     })) : notification.closeOnX && /*#__PURE__*/React.createElement(CloseIcon, {
-      onClick: notification.close
+      onClick: closeWithLock
     }), /*#__PURE__*/React.createElement(SwitchDiv$1, {
       on: notification._key
     }, /*#__PURE__*/React.createElement(NotificationContent, null, notification.icon && /*#__PURE__*/React.createElement(NotificationIconWrapper, {
-      isLoading: notification.isLoading
+      isLoading: notification.isLoading,
+      iconFontSize: notification.iconFontSize
     }, /*#__PURE__*/React.createElement(Icon$1, {
       icon: notification.icon
     }), notification.isLoading && /*#__PURE__*/React.createElement(Loading$1, {
       size: 36,
       white: true,
       absolute: true
-    })), /*#__PURE__*/React.createElement(_StyledDiv, null, callIfFunction(notification.content, notification.close))), notification.details && /*#__PURE__*/React.createElement(NotificationDetails, {
+    })), /*#__PURE__*/React.createElement(_StyledDiv, null, callIfFunction(notification.content, closeWithLock))), notification.details && /*#__PURE__*/React.createElement(NotificationDetails, {
       onClick: constrainEvent()
     }, notification.details)));
   }))));
 };
+var useNotificationContainerWidthLock = function useNotificationContainerWidthLock(containerRef) {
+  var lockCountRef = useRef(0);
+  var prevWidthRef = useRef(null);
+  var lockWidth = function lockWidth() {
+    var el = containerRef.current;
+    if (!el) return;
+    if (lockCountRef.current === 0) {
+      prevWidthRef.current = el.style.width;
+      var measured = el.getBoundingClientRect().width;
+      el.style.width = measured + 'px';
+    }
+    lockCountRef.current = lockCountRef.current + 1;
+  };
+  var unlockWidth = function unlockWidth() {
+    var el = containerRef.current;
+    if (!el) return;
+    var next = Math.max(0, lockCountRef.current - 1);
+    lockCountRef.current = next;
+    if (next === 0) {
+      el.style.width = prevWidthRef.current || '';
+      prevWidthRef.current = null;
+    }
+  };
+  return {
+    lockWidth: lockWidth,
+    unlockWidth: unlockWidth
+  };
+};
 var _StyledDiv = styled("div").withConfig({
   displayName: "ToastNotifications___StyledDiv",
   componentId: "sc-inycsj-8"
 })(["min-width:0;"]);
 
 var _excluded$f = ["content", "type", "marginTop"];
-var _templateObject$5, _templateObject2$4;
+var _templateObject$5, _templateObject2$4, _templateObject3$2;
 function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PersistentNotification = styled.div.withConfig({
@@ -1053,15 +1179,17 @@ var NotificationContainer = styled.div.withConfig({
 var Notification = styled.div.withConfig({
   displayName: "PersistentNotifications__Notification",
   componentId: "sc-1t7i0dh-6"
-})(["background:", ";position:relative;border-radius:7px;"], function (props) {
+})(["background:", ";position:relative;border-radius:15px;"], function (props) {
   return transparentize(0.9, getColor(props.type)(props));
 });
 var NotificationWrapper = styled.div.withConfig({
   displayName: "PersistentNotifications__NotificationWrapper",
   componentId: "sc-1t7i0dh-7"
-})(["background:white;margin-top:", ";margin-right:0.75rem;margin-left:0.75rem;padding:5px;border-radius:10px;box-shadow:0 0 10px 0 rgba(0,0,0,0.1),0 1px 2px 1px rgba(0,0,0,0.15);max-width:364px;", ""], function (props) {
-  return props.marginTop || "4.75rem";
-}, printerMedia(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+})(["background:white;margin-top:", ";margin-right:0.75rem;margin-left:0.75rem;padding:5px;border-radius:18px;box-shadow:0 0 10px 0 rgba(0,0,0,0.1),0 1px 2px 1px rgba(0,0,0,0.15);max-width:364px;", " ", ""], function (props) {
+  return props.marginTop || "3.5rem";
+}, media.mobile(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n    margin-top: ", ";\n  "])), function (props) {
+  return props.marginTop || "4rem";
+}), printerMedia(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 var _willUseSharedState3 = willUseSharedState(false),
   _willUseSharedState4 = _slicedToArray(_willUseSharedState3, 3),
   useIsHiddenPersistentNotifications = _willUseSharedState4[0],
@@ -1180,7 +1308,9 @@ function getPosition(origin, offset, max, originSize, selfSize, originalAlignmen
       }
       return collision < flippedCollision ? [newPosition, 'none'] : [flippedPosition[0], flippedPosition[1] === 'fit' ? 'flipfit' : 'flip'];
     } else {
-      return newPosition < upperBound ? [upperBound, 'fitted'] : [Math.max(upperBound, newPosition - collision), collision !== 0 ? 'fit' : 'none'];
+      var minBound = respectingBounds ? upperBound : 0;
+      var fittedPosition = Math.max(minBound, Math.min(newPosition, max - selfSize - lowerBound));
+      return [fittedPosition, fittedPosition !== newPosition ? 'fit' : 'none'];
     }
   } else {
     return [newPosition, 'none'];
@@ -1645,6 +1775,7 @@ var DialogContainer = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
     animationEnterEffect = _ref.animationEnterEffect,
     skipKeys = _ref.skipKeys,
     fullscreenOnMobile = _ref.fullscreenOnMobile,
+    fullscreen = _ref.fullscreen,
     _ref$confirmChanges = _ref.confirmChanges,
     confirmChanges = _ref$confirmChanges === void 0 ? true : _ref$confirmChanges,
     skipDom = _ref.skipDom,
@@ -1859,6 +1990,7 @@ var DialogContainer = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
     autoComplete: autoComplete,
     className: "JS-has-wc",
     withScroll: getSize() > 1,
+    fullscreen: fullscreen,
     fullscreenOnMobile: fullscreenOnMobile,
     ref: modalScroll,
     as: usingForm ? 'form' : undefined,
@@ -2074,6 +2206,12 @@ var DroppableContainerComponent = /*#__PURE__*/function (_React$Component2) {
         startDroppable = _ref2.startDroppable,
         activeIndex = _ref2.activeIndex,
         activeDroppable = _ref2.activeDroppable;
+      // Repositioning dereferences startDroppable.props further down. Rendering with an
+      // activeDroppable but no startDroppable would take the whole tree down, so render
+      // the list untouched instead and let the next commit reconcile it.
+      if (!startDroppable) {
+        return array;
+      }
       if (activeDroppable && (activeDroppable === _this2 || startDroppable === _this2)) {
         // remove
         var removedOrInserted = _.pullAt(startDroppable === _this2 ? startIndex : [], array);
@@ -2172,6 +2310,13 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
     holdTouchTimer
     }*/
     _this3.ghost = void 0;
+    // dragEnd animates the ghost out over 300ms, so the tail of a drag is asynchronous
+    // and a new drag can start before the previous one has finished. Each drag therefore
+    // gets its own session holding everything its completion needs (ghost, dragInfo),
+    // instead of reading the shared slots a newer drag may already have taken over.
+    // dragToken identifies the drag that currently owns the shared state.
+    _this3.dragToken = 0;
+    _this3.activeSession = null;
     _this3.positions = {};
     _this3.passedResistance = false;
     _this3.pressedEnough = false;
@@ -2230,7 +2375,6 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
           pageY = _ref4.pageY,
           clientX = _ref4.clientX,
           clientY = _ref4.clientY;
-        _this3.dragHasEnded = false;
         var currentTarget = e.currentTarget;
         if (shouldPreventDrag(e) || _this3.props.disabled) {
           return;
@@ -2321,6 +2465,18 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
       _this3.ghostDimensions = ghostDimensions;
       parent.click(); // close popups
       _this3.ghost = el;
+      // Open this drag's session and take ownership of the shared state. Any previous
+      // session is now superseded: it still holds its own ghost and dragInfo, so it can
+      // finish animating and clean itself up without touching anything below.
+      _this3.dragToken++;
+      _this3.activeSession = {
+        token: _this3.dragToken,
+        ghost: el,
+        dragInfo: null,
+        ended: false,
+        endTimeout: null,
+        onTransitionEnd: null
+      };
       parent.appendChild(_this3.ghost);
       _disableWillChange(_this3.ghost);
       _this3.setState({
@@ -2421,59 +2577,89 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
       }, 0);
       return centerInsideGhost[closestIndex];
     };
-    _this3.stopMoving = function () {
-      if (_this3.dragHasEnded) {
+    _this3.stopMoving = function (session) {
+      // Completion runs from mouseup, from a transitionend, or from the 300ms fallback
+      // timer, so it can be reached more than once for the same drag.
+      if (!session || session.ended) {
         return;
       }
-      _this3.dragHasEnded = true;
-      var dragInfo = _this3.state.dragInfo;
-      var activeIndex = dragInfo.activeIndex,
-        startIndex = dragInfo.startIndex,
-        activeGroup = dragInfo.activeGroup,
-        activeDroppable = dragInfo.activeDroppable,
-        startDroppable = dragInfo.startDroppable;
-      if (_this3.endTimeout) {
-        clearTimeout(_this3.endTimeout);
-        _this3.endTimeout = null;
+      session.ended = true;
+      var token = session.token,
+        ghost = session.ghost,
+        dragInfo = session.dragInfo;
+      var _ref6 = dragInfo || {},
+        activeIndex = _ref6.activeIndex,
+        startIndex = _ref6.startIndex,
+        activeGroup = _ref6.activeGroup,
+        activeDroppable = _ref6.activeDroppable,
+        startDroppable = _ref6.startDroppable;
+      if (session.endTimeout) {
+        clearTimeout(session.endTimeout);
+        session.endTimeout = null;
+      }
+      if (ghost && session.onTransitionEnd) {
+        ghost.removeEventListener('transitionend', session.onTransitionEnd);
+        session.onTransitionEnd = null;
+      }
+
+      // Everything below acts on this session's own ghost and dragInfo, so it stays
+      // correct even once a newer drag has replaced this.ghost and this.state.dragInfo.
+      var finish = function finish() {
+        if (ghost !== null && ghost !== void 0 && ghost.parentNode) {
+          _reenableWillChange(ghost);
+          ghost.parentNode.removeChild(ghost);
+        }
+        if (activeIndex !== startIndex && activeIndex !== undefined || activeDroppable !== startDroppable && activeDroppable !== undefined) {
+          var _startDroppable$props, _activeDroppable$prop;
+          var promise = _this3.props.setItemOrder(startIndex, activeIndex, startDroppable === null || startDroppable === void 0 ? void 0 : (_startDroppable$props = startDroppable.props) === null || _startDroppable$props === void 0 ? void 0 : _startDroppable$props.id, activeDroppable === null || activeDroppable === void 0 ? void 0 : (_activeDroppable$prop = activeDroppable.props) === null || _activeDroppable$prop === void 0 ? void 0 : _activeDroppable$prop.id, activeGroup);
+          if (promise && promise.then) {
+            promise.then(function () {
+              return _this3.clearChangedOrder(token);
+            }, function () {
+              return _this3.clearChangedOrder(token);
+            });
+          } else {
+            _this3.clearChangedOrder(token);
+          }
+        } else {
+          _this3.clearChangedOrder(token);
+        }
+      };
+      if (token !== _this3.dragToken) {
+        // Superseded: a newer drag owns the shared state and the render output. Drop
+        // our ghost and commit our reorder, but leave that drag's state alone.
+        finish();
+        return;
       }
       _this3.setState({
         saving: {
           list: _this3.props.list,
           children: _this3.props.children,
-          dragInfo: _.set('active', false, dragInfo)
+          dragInfo: _.set('active', false, dragInfo || {})
         }
       }, function () {
-        var _this3$ghost;
         _this3.preventScroll = false;
         _this3.props.setDragRef(null);
         _this3.settedDragRef = false;
-        if ((_this3$ghost = _this3.ghost) !== null && _this3$ghost !== void 0 && _this3$ghost.parentNode) {
-          _reenableWillChange(_this3.ghost);
-          _this3.ghost.parentNode.removeChild(_this3.ghost);
-        }
-        if (activeIndex !== startIndex && activeIndex !== undefined || activeDroppable !== startDroppable && activeDroppable !== undefined) {
-          var promise = _this3.props.setItemOrder(startIndex, activeIndex, startDroppable.props.id, activeDroppable.props.id, activeGroup);
-          if (promise && promise.then) {
-            promise.then(_this3.clearChangedOrder, _this3.clearChangedOrder);
-          } else {
-            _this3.clearChangedOrder();
-          }
-        } else {
-          _this3.clearChangedOrder();
-        }
+        finish();
       });
     };
-    _this3.clearChangedOrder = function () {
+    _this3.clearChangedOrder = function (token) {
+      // Only the drag that still owns the shared state may reset it — a superseded
+      // session clearing dragInfo here would wipe the drag currently in progress.
+      if (token !== undefined && token !== _this3.dragToken) {
+        return;
+      }
       _this3.setState({
         dragInfo: {},
         saving: false
       });
     };
-    _this3.dragMove = function (e, _ref6) {
-      var pageX = _ref6.pageX,
-        pageY = _ref6.pageY,
-        clientX = _ref6.clientX,
-        clientY = _ref6.clientY;
+    _this3.dragMove = function (e, _ref7) {
+      var pageX = _ref7.pageX,
+        pageY = _ref7.pageY,
+        clientX = _ref7.clientX,
+        clientY = _ref7.clientY;
       var distance = Math.sqrt(Math.pow(_this3.positions.originalX - pageX, 2) + Math.pow(_this3.positions.originalY - pageY, 2));
       if (e.type === 'mousemove') {
         // get touchstart and touchmove
@@ -2621,29 +2807,41 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
       _this3.stopAutoScroll();
       _this3.props.setDragRef && _this3.props.setDragRef(null);
       clearTimeout(_this3.holdTouchTimer);
-      var _this3$state$dragInfo = _this3.state.dragInfo,
-        activeDroppable = _this3$state$dragInfo.activeDroppable,
-        activeIndex = _this3$state$dragInfo.activeIndex;
-      if (activeDroppable) {
-        var finalPosition = activeDroppable.getPosition(activeIndex, _this3.getScrollPosition());
-        var _window$getComputedSt = window.getComputedStyle(_this3.ghost),
+      // Wired to mouseup, touchend, visibilitychange and blur, so this can fire several
+      // times for one drag. Only the first call owns the session and completes it.
+      var session = _this3.activeSession;
+      if (!session) {
+        return;
+      }
+      _this3.activeSession = null;
+      session.dragInfo = _this3.state.dragInfo;
+      var ghost = session.ghost;
+      var _session$dragInfo = session.dragInfo,
+        activeDroppable = _session$dragInfo.activeDroppable,
+        activeIndex = _session$dragInfo.activeIndex;
+      var finalPosition = activeDroppable && activeDroppable.getPosition(activeIndex, _this3.getScrollPosition());
+      if (activeDroppable && ghost && finalPosition) {
+        var _window$getComputedSt = window.getComputedStyle(ghost),
           marginTop = _window$getComputedSt.marginTop,
           marginLeft = _window$getComputedSt.marginLeft,
           left = _window$getComputedSt.left,
           top = _window$getComputedSt.top;
         var finalLeft = finalPosition.x - Math.max(1, finalPosition.width) / 2 - parseInt(left) - parseInt(marginLeft);
         var finalTop = finalPosition.y - Math.max(1, finalPosition.height) / 2 - parseInt(top) - parseInt(marginTop);
-        _this3.ghost.style.transition = "transform 300ms ease-in-out 0ms, opacity 300ms ease-in-out 0ms";
+        ghost.style.transition = "transform 300ms ease-in-out 0ms, opacity 300ms ease-in-out 0ms";
         var newTransform = "translate(".concat(finalLeft, "px,").concat(finalTop, "px)");
-        if ((_this3.ghost.style.transform || "").replace(/\s/g, '') === newTransform) {
-          _this3.stopMoving();
+        if ((ghost.style.transform || "").replace(/\s/g, '') === newTransform) {
+          _this3.stopMoving(session);
         } else {
-          _this3.ghost.style.transform = newTransform;
-          _this3.ghost.addEventListener('transitionend', _this3.stopMoving);
-          _this3.endTimeout = setTimeout(_this3.stopMoving, 300);
+          ghost.style.transform = newTransform;
+          session.onTransitionEnd = function () {
+            return _this3.stopMoving(session);
+          };
+          ghost.addEventListener('transitionend', session.onTransitionEnd);
+          session.endTimeout = setTimeout(session.onTransitionEnd, 300);
         }
       } else {
-        _this3.stopMoving();
+        _this3.stopMoving(session);
       }
     };
     _this3.addDroppable = function (el) {
@@ -2747,7 +2945,7 @@ var DraggableContainer = /*#__PURE__*/function (_React$Component3) {
 
 // type GhostDimensions = { offsetX: number, offsetY: number, width: number, height: number }
 DraggableContainer.defaultProps = {
-  holdTouchTimer: 300,
+  holdTouchTimer: 500,
   scrollOnDrag: true,
   setDragRef: function setDragRef() {}
 };
@@ -2951,11 +3149,15 @@ var areComponentsEqual = function areComponentsEqual(a, b) {
 var ListItem = styled.li.withConfig({
   displayName: "ContextMenu__ListItem",
   componentId: "sc-13y1vvt-0"
-})(["position:relative;font-size:13px;& > *{padding:11px 1.5rem 11px 3.5rem;display:block;}", " ", ",.icon{font-size:23px;position:absolute;padding-left:0.25rem;left:0;top:50%;transform:translateY(-50%);width:3.5rem;text-align:center;}", " & > a{color:inherit;font-weight:inherit;text-decoration:inherit;}& > a,& > label{cursor:pointer;}", " ", " input[type=\"radio\"]{display:none;}", " ", " ", " ", ""], function (props) {
+})(["position:relative;font-size:13px;& > *{padding:11px 1.5rem 11px 3.5rem;display:block;}", " ", ",.icon{font-size:", "px;position:absolute;padding-left:0.25rem;left:0;top:50%;transform:translateY(-50%);width:3.5rem;text-align:center;}", " & > a{color:inherit;font-weight:inherit;text-decoration:inherit;}& > a,& > label{cursor:pointer;}", " ", " input[type=\"radio\"]{display:none;}", " ", " ", " ", ""], function (props) {
   return props.hasSubmenu && "\n    & > * {\n      padding-right: 3rem;\n    }\n  ";
-}, Icon$1, media.mobile(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    & > * {\n      padding-top: 15px;\n      padding-bottom: 15px;\n    }\n    ", ", .icon {\n      font-size: 25px;\n    }\n  "])), Icon$1), ifProp('hover', css(["& > a,& > label{background:", ";color:", ";color:", ";}"], function (props) {
-  return lighten(0.53, getColor("main")(props));
-}, getColor('main'), function (props) {
+}, Icon$1, function (props) {
+  return props.iconSize || 23;
+}, media.mobile(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n    font-size: 15px;\n    & > * {\n      padding-top: 15px;\n      padding-bottom: 15px;\n    }\n    ", ", .icon {\n      font-size: ", "px;\n    }\n  "])), Icon$1, function (props) {
+  return (props.iconSize || 23) + 2;
+}), ifProp('hover', css(["& > a,& > label{background:", ";color:", ";}"], function (props) {
+  return transparentize(0.88, getColor("main")(props));
+}, function (props) {
   return darken(0.03, getColor("main")(props));
 })), ifProp('highlight', css(["color:", ";"], getColor('main'))), 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  "), ifProp('withButton', css(["padding:0.25rem 1rem;", "{width:100%;color:white;font-weight:500;padding:10px 1.25rem;", "}"], Button$1, media.mobile(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n        padding: 13px 1.25rem;\n      "]))))), ifProp('smallPaddingRight', css(["& > *{padding-right:1.5rem;}"])), customTheme('ListItem'));
 var ListItemDescText = styled.div.withConfig({
@@ -2973,7 +3175,7 @@ var ListMenu = styled.ul.withConfig({
 var ContextListMenu = styled(ListMenu).withConfig({
   displayName: "ContextMenu__ContextListMenu",
   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) {
+})(["position:absolute;z-index:999;background-color:white;backdrop-filter:blur(15px);background-color:rgb(255 255 255 / 82%);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:12px;margin-bottom:0.5rem;overflow:auto;max-height:100vh;max-height:100dvh;max-width:100vw;max-width:100dvw;", " ", " ", ""], function (props) {
   return props.withoutIcons && "\n    ".concat(ListItem, " > * {\n      padding-left: 1.5rem;\n    }\n  ");
 }, ifProp('sub', css(["", " ", ""], function (props) {
   return props.fullHeight ? '' : props.atTop ? 'margin-top: -0.5rem;' : 'margin-top: 0.5rem;';
@@ -2993,7 +3195,7 @@ var ListSeparator = styled.li.withConfig({
 var ListHeading = styled.li.withConfig({
   displayName: "ContextMenu__ListHeading",
   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:", ";}"], getColor('gray180'), getColor('gray240'));
+})(["display:flex;align-items:center;padding:.5rem 1rem;color:rgba(0,0,0,0.4);font-size:12px;text-transform:uppercase;:after{content:'';flex-grow:1;margin-left:0.75rem;height:1px;background:rgba(0,0,0,0.15);}"]);
 var SubmenuArrowIcon = styledExtend(Icon$1)(_templateObject4 || (_templateObject4 = _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"])));
 var SimpleLi = /*#__PURE__*/function (_React$Component) {
   function SimpleLi() {
@@ -3168,7 +3370,15 @@ var Li = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }
       } else {
         if (subMenu.isOpen) {
-          subMenu.closeAfter(200);
+          if (hoverCursor === -1) {
+            // Mouse saiu de todos os itens — provavelmente indo até o submenu (que
+            // abre ao lado, com um pequeno gap). Janela generosa; ao alcançá-lo, o
+            // onMouseEnter/onMouseMove do submenu chama subMenu.open e cancela.
+            subMenu.closeAfter(450);
+          } else {
+            // Mouse foi para outro item do menu — mantém os 200ms originais.
+            subMenu.closeAfter(200);
+          }
           emitter.emit('preventSub', index);
         }
       }
@@ -3207,6 +3417,10 @@ var Li = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         fixed: rest.fixedPosition,
         closing: subMenu.closing,
         onMouseMove: subMenu.open,
+        // onMouseEnter não borbulha, então não é barrado pelo stopPropagation dos itens
+        // do submenu (linha onMouseMove do Li). Garante que alcançar o submenu sempre
+        // cancele o fechamento agendado por closeAfter(200), mantendo-o aberto.
+        onMouseEnter: subMenu.open,
         onClose: onCloseSub,
         sub: true,
         slot: c.props.slot || menuSlot
@@ -3459,16 +3673,16 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidCatch",
     value: function componentDidCatch(e, info) {
-      var error = e && e.stack;
       if (_.get([0], e) === 'login' && _.get([1, 'status'], e) === 401) {
         window.location = "/login";
       }
       if (e !== null && e !== void 0 && e.notFound) {
         return;
       }
+      var error = e && e.stack;
       try {
         if (!e || !e.stack) {
-          JSON.stringify(e);
+          error = JSON.stringify(e);
         }
       } catch (exception) {
         error = e.toString();
@@ -3476,7 +3690,10 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
       if (!/bot|spider|crawl/i.test(window.navigator.userAgent)) {
         postFetcher("/log/errorBoundary", {
           error: error,
-          info: info
+          message: e === null || e === void 0 ? void 0 : e.message,
+          name: e === null || e === void 0 ? void 0 : e.name,
+          componentStack: info === null || info === void 0 ? void 0 : info.componentStack,
+          url: window.location.href
         });
       }
     }
@@ -3533,7 +3750,7 @@ var LoadingBar = styled.div.withConfig({
 })(["width:100%;border-radius:0 1px 1px 0;height:4px;position:fixed;background:", ";transform:translateX(-100%);", " left:0;z-index:99999;box-shadow:", ";", " ", ""], function (props) {
   return props.bottom ? css(["", ""], getColor('main')) : "#84D359";
 }, function (props) {
-  return props.bottom ? "bottom:55px;" : "top: 0;";
+  return props.bottom ? "bottom:69px;" : "top: 0;";
 }, function (props) {
   return props.bottom ? "0 0 1px 1px rgba(0,132,214,0.2);" : "0 0 2px 0 rgba(0,0,0,0.5);";
 }, function (props) {
@@ -3987,7 +4204,10 @@ var finishSwitchNew = function finishSwitchNew(clone, wrapper) {
     var newChildren = [].slice.call(wrapper.children);
     childMAp(newChildren, function (c) {
       if (c.dataset) {
-        c.style.opacity = c.dataset.prevOpacity || '';
+        // Guard against stale "0" from a prior uncompleted cycle: always restore
+        // to empty when prev is "0" since "0" is never a legitimate captured value.
+        var prev = c.dataset.prevOpacity;
+        c.style.opacity = prev && prev !== '0' ? prev : '';
       }
     });
     // wrapper.style.willChange = ''
@@ -4149,7 +4369,10 @@ var willPlaySwitch = function willPlaySwitch(oldSnap, newSnap, _ref7) {
   var resizeToNew = 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(callIfFunction(transformHeight, newSnap.clonedNode.style.height, realWrapperRect), ";\n    "));
   childMAp(newChildren, function (c) {
     if (c.dataset && !c.dataset.noFlip) {
-      if (c.style.opacity) {
+      // Don't capture "0" as prevOpacity — it's always a transient value from
+      // a prior uncompleted willPlaySwitch. Otherwise finishSwitchNew restores
+      // opacity to "0" permanently, leaving content invisible.
+      if (c.style.opacity && c.style.opacity !== '0') {
         c.dataset.prevOpacity = c.style.opacity;
       }
       c.style.opacity = '0';
@@ -4568,7 +4791,9 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
         height = _item$domNode$getBoun.height;
       item.domNode.style.left = item.domNode.offsetLeft + 'px';
       item.domNode.style.top = item.domNode.offsetTop - scrollDelta + 'px';
-      item.domNode.style.marginTop = 0;
+      if (!_this.props.anchoredDownList) {
+        item.domNode.style.marginTop = 0;
+      }
       item.domNode.style.marginLeft = 0;
       item.domNode.style.width = width + 'px';
       item.domNode.style.height = height + 'px';
@@ -4589,15 +4814,16 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
         parentRect: parentRect
       };
     };
-    _this.calculatePositionForAnimation = function () {
+    _this.calculatePositionForAnimation = function (lockedParentRect) {
       var _this$getParents = _this.getParents(),
         parentRect = _this$getParents.parentRect,
         parentNode = _this$getParents.parentNode,
         offsetParent = _this$getParents.offsetParent;
       if (!offsetParent) return null;
+      var effectiveParentRect = lockedParentRect || parentRect;
       var children = new Map();
       [].slice.call(parentNode.children).map(function (node) {
-        var position = toPosition$1(node, parentRect, {
+        var position = toPosition$1(node, effectiveParentRect, {
           withMargins: true,
           numberOfSiblings: _this.props.numberOfElements || 1
         });
@@ -4610,6 +4836,7 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
         parent: toPosition$1(offsetParent, undefined, {
           withMargins: true
         }),
+        parentRect: effectiveParentRect,
         scrollTop: offsetParent.scrollTop
       };
     };
@@ -4620,7 +4847,8 @@ var FlipList = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState, snap) {
       if (snap) {
-        var newSnap = this.calculatePositionForAnimation();
+        var useLockedParentRect = this.props.anchoredDownList && snap.parentRect;
+        var newSnap = this.calculatePositionForAnimation(useLockedParentRect ? snap.parentRect : undefined);
         if (newSnap) {
           // se não tiver parentNode, verficar se há uma div sendo offsetParent, body não serve
           this.play(snap, newSnap);
@@ -4944,7 +5172,7 @@ var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
   })) : /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     style: _objectSpread(_objectSpread({}, style), {}, {
-      backgroundImage: "url(\"".concat(image, "\")")
+      backgroundImage: image && "url(\"".concat(image, "\")")
     }),
     ref: ref
   }));
@@ -4961,7 +5189,7 @@ var _templateObject, _templateObject2, _templateObject3;
 var SideMenu = styled.div.withConfig({
   displayName: "DialogWithSidebar__SideMenu",
   componentId: "sc-suvg9r-0"
-})(["background-color:", ";border-top-left-radius:10px;border-bottom-left-radius:10px;width:19rem;flex-shrink:0;padding:1.25rem 0;", " ", ""], getColor('gray240'), function (props) {
+})(["background-color:", ";border-top-left-radius:18px;border-bottom-left-radius:18px;width:19rem;flex-shrink:0;padding:1.25rem 0;", " ", ""], getColor('gray240'), function (props) {
   return !props.visibleOnDesktop && 'display:none;';
 }, media.mobile(_templateObject || (_templateObject = _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  "])), getColor('gray240'), function (props) {
   return !props.isOpen && "\n      transform: translateX(-100%);\n      box-shadow: none;\n    ";
@@ -5094,7 +5322,7 @@ var _excluded = ["href"],
 var Link = function Link(_ref) {
   var href = _ref.href,
     props = _objectWithoutProperties(_ref, _excluded);
-  return props.to ? /*#__PURE__*/React.createElement(Wouter.Link, props) : /*#__PURE__*/React.createElement("a", _extends({}, props, {
+  return _.isString(props.to) ? /*#__PURE__*/React.createElement(Wouter.Link, props) : /*#__PURE__*/React.createElement("a", _extends({}, props, {
     href: href === null || href === void 0 ? void 0 : href.replace("~", "")
   }));
 };
@@ -5193,4 +5421,9 @@ var useSearchParams = function useSearchParams(defaultParams) {
 };
 var Router = Wouter.Router;
 
-export { AnimatedModal, AnimationBlockContainer, Button, CloseIcon$1 as CloseIcon, ConfirmDialog, ContextListMenu, ContextMenu, ContextMenuComponent, DefaultArrow, DefaultConfirmDialog, DefaultWarningDialog, Dialog, DialogContainer, DialogContent, DialogContentWrapper, DialogError, DialogErrorContent, DialogFooter, DialogIcon, DialogTabMenu, DialogTitle, DialogWithImageHeader, DialogWithSidebar, DialogWithSidebarPresentation, DraggableContainer, DraggableItem, DropdownIcon, DroppableContainer, ErrorBoundary, FillLastLineResizer, FlipList, FooterAuxiliaryContainer, FormatDate, HistoryLink, Icon, Image, Li, Link, ListHeading, ListItem, ListMenu, ListSeparator, Loading, LoadingBar, LoadingDiv, MENU_TAB, MobileBubbleDialog, Modal, ModalContainer, Navigate, Notifications, OnClickLoadingButton, PageLoader, PersistentNotification, PersistentNotificationActions, PersistentNotificationCloseIcon, PersistentNotificationContent, PersistentNotificationIcon, PersistentNotifications, Popup, Reposition, Route, Router, Routes, SideMenu, SimpleLi, SplitColumnsContainer, StickyContainer, SuspenseLoadingBar, SwitchDiv, TextButton, ToastNotifications, Tooltip, TransitionDiv, WarningDialog, WarningDialogIcon, WarningDialogTitle, addPositioningBound, contextMenuLayersQuantity, createToastNotification, defaultAnimationMaker, dialogFadeInDown, dialogModalIn, dialogModalOut, fixDoubledLastMarginBottom, formatAnimation, getClientRectAnimation, getDialogLayersSize, hidePersistentNotifications, isFakeScrolled, morph, openPersistentNotification, preventDialogPop, removeWindowScroll, setNotification, setWarningDialog, toPosition, useAbsoluteLocation, useAbsolutePath, useDialog, useDialogLayers, useDialogWithToggle, useFlip, useFlipAnimation, useFlipEnter, useFlipLeave, useIsHiddenPersistentNotifications, useLocation, useNavigate, useNotification, useNotificationRef, useParams, usePositioning, useSearchParams, useToastNotificationToggle, useWarningDialog, waitForPop, willSetNotification, willShowToastNotification, willUseFlip, willUseFlipSwitch, willUseIsSticky };
+var BasicBulletList = styled.ul.withConfig({
+  displayName: "BasicBulletList",
+  componentId: "sc-1u3hhup-0"
+})(["margin-bottom:0;font-size:13px;li{margin-top:4px;padding-left:1rem;position:relative;:before{content:'\u2022';font-size:17px;line-height:0;position:absolute;left:0;top:7px;}}"]);
+
+export { AnimatedModal, AnimationBlockContainer, BasicBulletList, Button, CloseIcon$1 as CloseIcon, ConfirmDialog, ContextListMenu, ContextMenu, ContextMenuComponent, DefaultArrow, DefaultConfirmDialog, DefaultWarningDialog, Dialog, DialogContainer, DialogContent, DialogContentWrapper, DialogError, DialogErrorContent, DialogFooter, DialogIcon, DialogTabMenu, DialogTitle, DialogWithImageHeader, DialogWithSidebar, DialogWithSidebarPresentation, DraggableContainer, DraggableItem, DropdownIcon, DroppableContainer, ErrorBoundary, FillLastLineResizer, FlipList, FooterAuxiliaryContainer, FormatDate, HistoryLink, Icon, Image, Li, Link, ListHeading, ListItem, ListMenu, ListSeparator, Loading, LoadingBar, LoadingDiv, MENU_TAB, MobileBubbleDialog, Modal, ModalContainer, Navigate, Notifications, OnClickLoadingButton, PageLoader, PersistentNotification, PersistentNotificationActions, PersistentNotificationCloseIcon, PersistentNotificationContent, PersistentNotificationIcon, PersistentNotifications, Popup, Reposition, Route, Router, Routes, SideMenu, SimpleLi, SplitColumnsContainer, StickyContainer, SuspenseLoadingBar, SwitchDiv, TextButton, ToastNotifications, Tooltip, TransitionDiv, WarningDialog, WarningDialogIcon, WarningDialogTitle, addPositioningBound, contextMenuLayersQuantity, createToastNotification, defaultAnimationMaker, dialogFadeInDown, dialogModalIn, dialogModalOut, fixDoubledLastMarginBottom, formatAnimation, getClientRectAnimation, getDialogLayersSize, hidePersistentNotifications, isFakeScrolled, morph, openPersistentNotification, preventDialogPop, removeWindowScroll, setNotification, setWarningDialog, toPosition, useAbsoluteLocation, useAbsolutePath, useDialog, useDialogLayers, useDialogWithToggle, useFlip, useFlipAnimation, useFlipEnter, useFlipLeave, useIsHiddenPersistentNotifications, useLocation, useNavigate, useNotification, useNotificationRef, useParams, usePositioning, useSearchParams, useToastNotificationToggle, useWarningDialog, waitForPop, willSetNotification, willShowToastNotification, willUseFlip, willUseFlipSwitch, willUseIsSticky };