pebble-web 2.5.0 → 2.7.0

package/dist/pebble-web.module.js

@@ -1042,7 +1042,7 @@ var animationConfig = {
   },
   config: function config(_a, motion) {
     return motion === "leave" ? {
-      duration: 0.1
+      duration: 80
     } : {
       duration: 200
     };
@@ -1255,6 +1255,8 @@ var loadingStyle = /*#__PURE__*/css({
   position: "absolute"
 }, ";label:loadingStyle;" + ( "" ));
 
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var dateClass = /*#__PURE__*/css( {
   name: "1ydb6k9-dateClass",
   styles: "padding:20px;width:100%;;label:dateClass;"
@@ -1270,6 +1272,12 @@ var wrapperStyle$3 = /*#__PURE__*/css( {
   name: "h7juj2-wrapperStyle",
   styles: "margin-bottom:20px;;label:wrapperStyle;"
 } );
+var errorStyle = /*#__PURE__*/css(_objectSpread$8(_objectSpread$8({}, typography.s.bold), {}, {
+  backgroundColor: colors.red.lightest,
+  color: colors.red.darker,
+  textAlign: "left",
+  padding: "11px 30px"
+}), ";label:errorStyle;" + ( "" ));
 
 function _createSuper$4(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$4(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$4() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
@@ -1465,8 +1473,8 @@ var UserAgentInfoProvider = /*#__PURE__*/function (_React$PureComponent) {
   return UserAgentInfoProvider;
 }(PureComponent);
 
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$7() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var noop = function noop() {};
@@ -1519,7 +1527,8 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
           inputProps = _this$props.inputProps,
           placeholder = _this$props.placeholder,
           propsValue = _this$props.value,
-          disabled = _this$props.disabled;
+          disabled = _this$props.disabled,
+          errorMessage = _this$props.errorMessage;
       return /*#__PURE__*/createElement(DropDown, {
         dropDownClassName: dropDownClassName,
         labelComponent: function labelComponent(_ref) {
@@ -1535,14 +1544,14 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
               onChange: noop,
               type: "tel",
               value: value,
-              placeholder: "".concat(placeholder, " DD/MM/YYYY"),
+              placeholder: placeholder,
               onClick: function onClick() {
                 if (disabled) return;
                 toggleDropdown();
               },
               fixLabelAtTop: true
             }, inputProps, {
-              inputProps: _objectSpread$8(_objectSpread$8({
+              inputProps: _objectSpread$9(_objectSpread$9({
                 placeholder: "DD/MM/YYYY"
               }, inputProps && inputProps.inputProps), {}, {
                 onChange: onChange
@@ -1557,7 +1566,7 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
         modifiers: modifiers
       }, function (_ref3) {
         var toggle = _ref3.toggle;
-        return /*#__PURE__*/createElement(Calendar, Object.assign({
+        return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Calendar, Object.assign({
           hideShadow: true,
           className: dateClass,
           selected: propsValue ? new Date(propsValue) : undefined
@@ -1567,7 +1576,9 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
             _this2.onCalendarDateChange(date);
             toggle();
           }
-        }));
+        })), errorMessage && /*#__PURE__*/createElement("div", {
+          className: errorStyle
+        }, errorMessage));
       });
     }
   }], [{
@@ -1651,9 +1662,9 @@ var Logo = function Logo(_ref) {
   }));
 };
 
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var toastWrapper = /*#__PURE__*/css(_objectSpread$9(_objectSpread$9({
+function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var toastWrapper = /*#__PURE__*/css(_objectSpread$a(_objectSpread$a({
   position: "fixed",
   borderRadius: constants.borderRadius
 }, typography.normal.regular), {}, {
@@ -1667,8 +1678,8 @@ var toastWrapper = /*#__PURE__*/css(_objectSpread$9(_objectSpread$9({
   }
 }), ";label:toastWrapper;" + ( "" ));
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var emitter = /*#__PURE__*/mitt();
@@ -1830,13 +1841,13 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
         native: true,
         items: this.state.show,
         key: position,
-        from: _objectSpread$a({
+        from: _objectSpread$b({
           opacity: 0
         }, customStyles[position].transitions.from),
-        enter: _objectSpread$a({
+        enter: _objectSpread$b({
           opacity: 1
         }, customStyles[position].transitions.enter),
-        leave: _objectSpread$a({
+        leave: _objectSpread$b({
           opacity: 0,
           pointerEvents: "none"
         }, customStyles[position].transitions.leave),
@@ -1845,7 +1856,7 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
         return show && function (styles) {
           return /*#__PURE__*/createElement(animated.div, {
             className: cx(toastWrapper, _this2.props.className),
-            style: _objectSpread$a(_objectSpread$a({
+            style: _objectSpread$b(_objectSpread$b({
               backgroundColor: bColor
             }, styles), customStyles[position].style)
           }, /*#__PURE__*/createElement("i", {
@@ -1876,9 +1887,9 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
   return Toast;
 }(PureComponent);
 
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var messageWrapper = /*#__PURE__*/css(_objectSpread$b(_objectSpread$b({
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var messageWrapper = /*#__PURE__*/css(_objectSpread$c(_objectSpread$c({
   borderRadius: constants.borderRadius
 }, typography.normal.regular), {}, {
   color: colors.white.base,
@@ -1982,9 +1993,9 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
   return Modal;
 }(PureComponent);
 
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var rowWrapper = /*#__PURE__*/css(_objectSpread$c(_objectSpread$c(_objectSpread$c({}, typography.normal.regular), {}, {
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$d(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var rowWrapper = /*#__PURE__*/css(_objectSpread$d(_objectSpread$d(_objectSpread$d({}, typography.normal.regular), {}, {
   cursor: "pointer",
   padding: "12px 18px",
   position: "relative",
@@ -2007,7 +2018,7 @@ var labelWrap = /*#__PURE__*/css( {
 var activeRow = /*#__PURE__*/css({
   backgroundColor: colors.gray.lightest
 }, ";label:activeRow;" + ( "" ));
-var selectedRow = /*#__PURE__*/css(_objectSpread$c({
+var selectedRow = /*#__PURE__*/css(_objectSpread$d({
   color: colors.violet.base
 }, typography.normal.bold), ";label:selectedRow;" + ( "" ));
 var advancedActionsWrapper = /*#__PURE__*/css({
@@ -2075,9 +2086,9 @@ var Option = /*#__PURE__*/function (_React$Component) {
 }(Component);
 Option.defaultProps = defaultProps;
 
-function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$d(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var searchWrapperStyle = /*#__PURE__*/css(_objectSpread$d(_objectSpread$d({
+function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$e(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var searchWrapperStyle = /*#__PURE__*/css(_objectSpread$e(_objectSpread$e({
   minWidth: "200px",
   borderRadius: constants.borderRadius,
   padding: "0 20px"
@@ -2105,7 +2116,7 @@ var searchWrapperStyle = /*#__PURE__*/css(_objectSpread$d(_objectSpread$d({
     }
   }
 }), ";label:searchWrapperStyle;" + ( "" ));
-var searchStyle = /*#__PURE__*/css(_objectSpread$d(_objectSpread$d(_objectSpread$d(_objectSpread$d({
+var searchStyle = /*#__PURE__*/css(_objectSpread$e(_objectSpread$e(_objectSpread$e(_objectSpread$e({
   borderRadius: constants.borderRadius,
   outline: "none",
   border: 0,
@@ -2238,8 +2249,8 @@ var searchBoxScrolledStyle = /*#__PURE__*/css({
   padding: onScrollPadding
 }, ";label:searchBoxScrolledStyle;" + ( "" ));
 
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$e(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$c(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$c(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$c() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
@@ -2359,7 +2370,7 @@ var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/createElement(Search, Object.assign({
         type: "small"
       }, searchBoxProps, {
-        inputProps: _objectSpread$e(_objectSpread$e({}, searchBoxProps && searchBoxProps.inputProps), {}, {
+        inputProps: _objectSpread$f(_objectSpread$f({}, searchBoxProps && searchBoxProps.inputProps), {}, {
           onKeyDown: this.handleKeyPress,
           autoFocus: true
         })
@@ -2384,22 +2395,22 @@ var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
   return OptionGroup;
 }(PureComponent);
 
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$g(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var optionGroupCheckBoxButtonWrapPadding = 20;
 var optionGroupCheckBoxButtonWrapPaddingTop = 10;
 var optionGroupCheckBoxWrap = /*#__PURE__*/css({
   maxHeight: optionWrapperMaxHeight + searchBoxHeight + 2 * (initialPadding - onScrollPadding) + optionGroupCheckBoxButtonWrapPadding + optionGroupCheckBoxButtonWrapPaddingTop + smallButtonHeight,
   position: "relative"
 }, ";label:optionGroupCheckBoxWrap;" + ( "" ));
-var optionGroupCheckBoxButtonWrap = /*#__PURE__*/css(_objectSpread$f(_objectSpread$f({}, flexSpaceBetween), {}, {
+var optionGroupCheckBoxButtonWrap = /*#__PURE__*/css(_objectSpread$g(_objectSpread$g({}, flexSpaceBetween), {}, {
   padding: optionGroupCheckBoxButtonWrapPadding,
   paddingTop: optionGroupCheckBoxButtonWrapPaddingTop,
   backgroundColor: colors.white.base
 }), ";label:optionGroupCheckBoxButtonWrap;" + ( "" ));
 
-function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$g(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$h(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$d(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$d(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$d() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var OptionGroupCheckBox = /*#__PURE__*/function (_React$PureComponent) {
@@ -2457,7 +2468,7 @@ var OptionGroupCheckBox = /*#__PURE__*/function (_React$PureComponent) {
           isSelected = _this$props2.isSelected,
           onChange = _this$props2.onChange,
           rest = _objectWithoutProperties(_this$props2, ["wrapClassName", "onApply", "onClear", "isSelected", "onChange"]);
-      var advancedOptionsProps = _objectSpread$g({
+      var advancedOptionsProps = _objectSpread$h({
         selectVisible: this.selectVisible,
         clearVisible: this.clearVisible
       }, this.props.advancedOptionsProps);
@@ -2761,8 +2772,8 @@ var arrowStyle = /*#__PURE__*/css({
   }
 }, ";label:arrowStyle;" + ( "" ));
 
-function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$h(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$i(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$g() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
@@ -2828,7 +2839,7 @@ var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
               style = _ref2.style,
               placement = _ref2.placement,
               arrowProps = _ref2.arrowProps;
-          var wrapperStyle = _objectSpread$h(_objectSpread$h(_objectSpread$h({}, style), transitionStyles), {}, {
+          var wrapperStyle = _objectSpread$i(_objectSpread$i(_objectSpread$i({}, style), transitionStyles), {}, {
             backgroundColor: popperBackgroundColor,
             transform: "".concat(style.transform || "", " ").concat(transitionStyles.transform || ""),
             transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px")
@@ -2844,7 +2855,7 @@ var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
           }), /*#__PURE__*/createElement("div", {
             className: arrowStyle,
             ref: arrowProps.ref,
-            style: _objectSpread$h(_objectSpread$h({}, arrowProps.style), {}, {
+            style: _objectSpread$i(_objectSpread$i({}, arrowProps.style), {}, {
               color: popperBackgroundColor
             }),
             "data-placement": placement
@@ -2860,8 +2871,8 @@ PebblePopper.defaultProps = {
   closeOnOutsideClick: true
 };
 
-function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$i(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$j(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var modalPadding = 30;
 var modalContainer$1 = /*#__PURE__*/css({
   background: "white",
@@ -2875,7 +2886,7 @@ var flexCenter = /*#__PURE__*/css( {
   name: "7sl85e-flexCenter",
   styles: "display:flex;align-items:center;justify-content:center;height:100%;;label:flexCenter;"
 } );
-var buttonsContainer = /*#__PURE__*/css(_objectSpread$i(_objectSpread$i({}, flexSpaceBetween), {}, {
+var buttonsContainer = /*#__PURE__*/css(_objectSpread$j(_objectSpread$j({}, flexSpaceBetween), {}, {
   marginTop: "40px"
 }), ";label:buttonsContainer;" + ( "" ));
 var iconCloseClassName = /*#__PURE__*/css({
@@ -2923,13 +2934,13 @@ var PopUp = function PopUp(props) {
   }, approveButtonProps), approveButtonText))));
 };
 
-function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$j(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$k(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var selectedTabStyle = /*#__PURE__*/css({
   borderBottom: "2px solid ".concat(colors.violet.base),
   color: colors.violet.base
 }, ";label:selectedTabStyle;" + ( "" ));
-var tabStyle = /*#__PURE__*/css(_objectSpread$j({
+var tabStyle = /*#__PURE__*/css(_objectSpread$k({
   padding: "10px 20px 20px",
   cursor: "pointer"
 }, typography.s.bold), ";label:tabStyle;" + ( "" ));
@@ -3195,9 +3206,9 @@ var RadioGroup = /*#__PURE__*/function (_React$PureComponent) {
   return RadioGroup;
 }(PureComponent);
 
-function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$k(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var wrapStyle = /*#__PURE__*/css(_objectSpread$k(_objectSpread$k({}, flexRow), {}, {
+function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$l(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var wrapStyle = /*#__PURE__*/css(_objectSpread$l(_objectSpread$l({}, flexRow), {}, {
   cursor: "pointer"
 }), ";label:wrapStyle;" + ( "" ));
 var disabledStyle = /*#__PURE__*/css( {
@@ -3299,8 +3310,8 @@ var Rating = /*#__PURE__*/function (_React$PureComponent) {
   return Rating;
 }(PureComponent);
 
-function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$l(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$m(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var inputReadOnlyStyle$1 = /*#__PURE__*/css({
   color: colors.gray.dark
 }, ";label:inputReadOnlyStyle;" + ( "" ));
@@ -3309,12 +3320,12 @@ var inputDisabledStyle$1 = /*#__PURE__*/css({
   pointerEvents: "none",
   color: colors.gray.base
 }, ";label:inputDisabledStyle;" + ( "" ));
-var messageStyle$1 = /*#__PURE__*/css(_objectSpread$l(_objectSpread$l({}, typography.s.regular), {}, {
+var messageStyle$1 = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({}, typography.s.regular), {}, {
   marginTop: 10,
   lineHeight: "10px",
   textAlign: "left"
 }), ";label:messageStyle;" + ( "" ));
-var infoTextStyle = /*#__PURE__*/css(_objectSpread$l(_objectSpread$l({}, typography.s.light), {}, {
+var infoTextStyle = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({}, typography.s.light), {}, {
   marginRight: "15px",
   lineHeight: "12px"
 }), ";label:infoTextStyle;" + ( "" ));
@@ -3331,7 +3342,7 @@ var placeholderStyle = /*#__PURE__*/css({
     transform: "translate(0, -10px)"
   }
 }, ";label:placeholderStyle;" + ( "" ));
-var inputStyle$2 = /*#__PURE__*/css(_objectSpread$l(_objectSpread$l({
+var inputStyle$2 = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({
   border: 0,
   outline: 0,
   borderRadius: "3px",
@@ -3493,7 +3504,6 @@ var closeStyle = /*#__PURE__*/css({
   }
 }, ";label:closeStyle;" + ( "" ));
 var sidebarStyle = /*#__PURE__*/css({
-  transition: "transform 200ms ".concat(constants.animationCurve),
   backgroundColor: colors.white.base,
   position: "fixed",
   top: 0,
@@ -3512,13 +3522,17 @@ function _createSuper$m(Derived) { var hasNativeReflectConstruct = _isNativeRefl
 function _isNativeReflectConstruct$m() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var transitionProps = {
   from: {
-    opacity: 0
+    opacity: 0,
+    transform: "translateX(100%)"
   },
   enter: {
-    opacity: 1
+    opacity: 1,
+    transform: "translateX(0)"
   },
   leave: {
-    opacity: 0
+    opacity: 0,
+    transform: "translateX(100%)",
+    pointerEvents: "none"
   }
 };
 var SideBar = /*#__PURE__*/function (_React$PureComponent) {
@@ -3572,46 +3586,34 @@ var SideBar = /*#__PURE__*/function (_React$PureComponent) {
           onClose = _this$props2.onClose,
           onOutsideClick = _this$props2.onOutsideClick,
           closeOnOutsideClick = _this$props2.closeOnOutsideClick;
-      var _sidebarOverride = /*#__PURE__*/css({
-        width: width,
-        transform: isOpen ? "translateX(0)" : "translateX(".concat(width, "px)")
-      }, ";label:SideBar;" + ( "" ));
-      var _sidebarStyle = cx(_sidebarOverride, sidebarStyle, /*#__PURE__*/css({
-        transform: isOpen ? "translateX(0)" : "translateX(100%)"
+      var _sidebarStyle = cx(sidebarStyle, /*#__PURE__*/css({
+        width: width
       }, ";label:SideBar;" + ( "" )));
-      return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Transition, Object.assign({
-        items: isOpen
-      }, transitionProps, {
-        config: animationConfig.config
-      }), function (show) {
-        return show && function (styles) {
-          return /*#__PURE__*/createElement(animated.div, {
-            style: styles,
-            className: sidebarWrapperStyle,
-            onClick: onOutsideClick || closeOnOutsideClick ? _this2.onOutsideClick : undefined,
-            "data-testid": "shadowArea"
-          });
-        };
-      }), /*#__PURE__*/createElement("div", {
-        className: _sidebarStyle
-      }, /*#__PURE__*/createElement(Transition, Object.assign({
-        items: isOpen
-      }, transitionProps), function (show) {
-        return show && function (styles) {
-          return /*#__PURE__*/createElement(animated.div, {
-            style: styles,
-            className: closeStyle,
-            onClick: onClose
-          }, /*#__PURE__*/createElement("i", {
-            className: "pi pi-close"
-          }), /*#__PURE__*/createElement(Ink, null));
-        };
-      }), isOpen && /*#__PURE__*/createElement("div", {
-        style: {
-          overflowY: "scroll",
-          height: "100vh"
-        }
-      }, children)));
+      return /*#__PURE__*/createElement(MountTransition, Object.assign({
+        visible: isOpen
+      }, transitionProps), function (styles) {
+        return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(animated.div, {
+          style: {
+            opacity: styles.opacity
+          },
+          className: sidebarWrapperStyle,
+          onClick: onOutsideClick || closeOnOutsideClick ? _this2.onOutsideClick : undefined,
+          "data-testid": "shadowArea"
+        }), /*#__PURE__*/createElement(animated.div, {
+          className: _sidebarStyle,
+          style: styles
+        }, /*#__PURE__*/createElement("div", {
+          className: closeStyle,
+          onClick: onClose
+        }, /*#__PURE__*/createElement("i", {
+          className: "pi pi-close"
+        }), /*#__PURE__*/createElement(Ink, null)), /*#__PURE__*/createElement("div", {
+          style: {
+            overflowY: "scroll",
+            height: "100vh"
+          }
+        }, children)));
+      });
     }
   }]);
   return SideBar;
@@ -3620,10 +3622,10 @@ SideBar.defaultProps = {
   closeOnOutsideClick: true
 };
 
-function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$m(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$n(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var rheostatOverrides = "\n.rheostat {\n  overflow: visible;\n}\n\n.rheostat-background {\n  background-color: ".concat(colors.violet.lightest, ";\n  position: relative;\n  border-radius: 2px;\n  overflow: hidden;\n  height: 4px;\n  top: 0;\n  width: 100%;\n}\n\n.rheostat-progress {\n  background-color: ").concat(colors.violet.base, ";\n  position: absolute;\n  height: 4px;\n  border-radius: 2px;\n  top: 0;\n}\n\n.rheostat-handle {\n  background-color: ").concat(colors.violet.base, ";\n  border-radius: 50%;\n  height: 20px;\n  outline: none;\n  z-index: 2;\n  width: 20px;\n  margin-left: -10px;\n  top: -8px;\n  border: 0;\n  cursor: pointer;\n  box-shadow: ").concat(constants.boxShadow.xElevated, ";\n}\n\n.__pebble__slider__large .rheostat-handle {\n  width: 24px;\n  height: 24px;\n  margin-left: -12px;\n  top: -10px;\n}\n\n.rheostat-handle:hover {\n  background-color: ").concat(colors.violet.light, ";\n}\n\n.__pebble__slider__disabled .rheostat-handle {\n  background-color: ").concat(colors.violet.lighter, ";\n  cursor: inherit;\n}\n\n.rheostat-horizontal {\n  height: 4px;\n}\n");
-var sliderHeader = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({}, flexSpaceBetween), {}, {
+var sliderHeader = /*#__PURE__*/css(_objectSpread$n(_objectSpread$n({}, flexSpaceBetween), {}, {
   marginBottom: 25,
   alignItems: "center",
   ".__pebble__slider__large &": {
@@ -3684,8 +3686,8 @@ var Slider = function Slider(_ref) {
   }, rest)));
 };
 
-function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$n(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$o(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var headStyle = /*#__PURE__*/css( {
   name: "1ehjdcc-headStyle",
   styles: "display:flex;flex-direction:row;position:relative;;label:headStyle;"
@@ -3694,7 +3696,7 @@ var headSection = /*#__PURE__*/css( {
   name: "1hilual-headSection",
   styles: "flex:1;display:flex;flex-direction:column;align-items:center;cursor:pointer;> div{font-size:14px;};label:headSection;"
 } );
-var headingStyle = /*#__PURE__*/css(_objectSpread$n({}, typography.normal.regular), ";label:headingStyle;" + ( "" ));
+var headingStyle = /*#__PURE__*/css(_objectSpread$o({}, typography.normal.regular), ";label:headingStyle;" + ( "" ));
 var dotStyle$1 = /*#__PURE__*/css({
   height: 20,
   width: 20,
@@ -3723,8 +3725,8 @@ var stepperLineStyle = /*#__PURE__*/css({
   backgroundColor: colors.violet.base
 }, ";label:stepperLineStyle;" + ( "" ));
 
-function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$o(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$p(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$n(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$n() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 function noop$2() {}
@@ -3883,11 +3885,11 @@ var Stepper = /*#__PURE__*/function (_React$PureComponent) {
             name: "fxyzre-Stepper",
             styles: "display:none;;label:Stepper;"
           } ), i !== _this2.state.active))
-        }, renderContentElement(_objectSpread$o({
+        }, renderContentElement(_objectSpread$p({
           item: datum,
           isSelected: i === _this2.state.active
         }, args)));
-      }), renderFooterElement(_objectSpread$o({
+      }), renderFooterElement(_objectSpread$p({
         activeIndex: this.state.active
       }, args), this.props)));
     }
@@ -3928,9 +3930,9 @@ Stepper.defaultProps = {
   }
 };
 
-function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$p(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var labelTextStyle = /*#__PURE__*/css(_objectSpread$p(_objectSpread$p({}, typography.s.bold), {}, {
+function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$q(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var labelTextStyle = /*#__PURE__*/css(_objectSpread$q(_objectSpread$q({}, typography.s.bold), {}, {
   color: colors.gray.dark,
   marginRight: "10px"
 }), ";label:labelTextStyle;" + ( "" ));
@@ -4026,9 +4028,9 @@ var Switch = /*#__PURE__*/function (_React$PureComponent) {
   return Switch;
 }(PureComponent);
 
-function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$q(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var tagStyle = /*#__PURE__*/css(_objectSpread$q(_objectSpread$q(_objectSpread$q({}, typography.s.bold), flexSpaceBetween), {}, {
+function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$r(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var tagStyle = /*#__PURE__*/css(_objectSpread$r(_objectSpread$r(_objectSpread$r({}, typography.s.bold), flexSpaceBetween), {}, {
   borderRadius: constants.borderRadius,
   padding: "0 10px",
   height: 28,
@@ -4075,15 +4077,15 @@ var Tag = function Tag(_ref) {
   }, /*#__PURE__*/createElement(Ink, null)));
 };
 
-function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$r(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$s(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var Text = function Text(_ref) {
   var typography = _ref.typography,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? colors.gray.darker : _ref$color,
       children = _ref.children,
       className = _ref.className;
-  var _className = /*#__PURE__*/css(_objectSpread$r(_objectSpread$r({}, typography), {}, {
+  var _className = /*#__PURE__*/css(_objectSpread$s(_objectSpread$s({}, typography), {}, {
     color: color
   }),  "" );
   return /*#__PURE__*/React__default.createElement("span", {
@@ -4260,9 +4262,9 @@ var TimePicker = function TimePicker(props) {
   }));
 };
 
-function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$s(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var textStyle = /*#__PURE__*/css(_objectSpread$s(_objectSpread$s({}, typography.s.regular), {}, {
+function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$t(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var textStyle = /*#__PURE__*/css(_objectSpread$t(_objectSpread$t({}, typography.s.regular), {}, {
   color: colors.white.base,
   display: "block",
   padding: "10px 16px"
@@ -4346,17 +4348,17 @@ var optionsWrapper$1 = /*#__PURE__*/css({
 
 function _createSuper$q(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$q(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$q() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$t(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$u(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function defaultSearchBox(_ref, props) {
   var registerChange = _ref.registerChange,
       onFocus = _ref.onFocus,
       value = _ref.value;
-  var _inputProps = props.inputProps ? _objectSpread$t({}, props.inputProps.inputProps) : {};
+  var _inputProps = props.inputProps ? _objectSpread$u({}, props.inputProps.inputProps) : {};
   return /*#__PURE__*/createElement(Input, Object.assign({}, props.inputProps, {
     onChange: registerChange,
     placeholder: props.placeholder,
-    inputProps: _objectSpread$t(_objectSpread$t({}, _inputProps), {}, {
+    inputProps: _objectSpread$u(_objectSpread$u({}, _inputProps), {}, {
       onFocus: onFocus,
       onKeyDown: function onKeyDown(e) {
         if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;