@innovaccer/design-system 2.5.0 → 2.7.0-0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1635145037882 
+   * Generated on: 1639051084574 
    *      Package: @innovaccer/design-system
-   *      Version: v2.5.0
+   *      Version: v2.7.0-0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -569,46 +569,80 @@ var date$1 = function date(val, format) {
 
   switch (format) {
     case 'dd/mm/yyyy':
-      var p = val.split('/');
-      var date = +p[0] || 1;
-      var month = +p[1] || 1;
-      var year = +p[2] || 1900;
-      return validate(date, month, year);
+      {
+        var p = val.split('/');
+
+        var _date = +p[0] || 1;
+
+        var month = +p[1] || 1;
+        var year = +p[2] || 1900;
+        return validate(_date, month, year);
+      }
 
     case 'mm/dd/yyyy':
-      var p = val.split('/');
-      var date = +p[1] || 1;
-      var month = +p[0] || 1;
-      var year = +p[2] || 1900;
-      return validate(date, month, year);
+      {
+        var _p = val.split('/');
+
+        var _date2 = +_p[1] || 1;
+
+        var _month = +_p[0] || 1;
+
+        var _year = +_p[2] || 1900;
+
+        return validate(_date2, _month, _year);
+      }
 
     case 'yyyy/mm/dd':
-      var p = val.split('/');
-      var date = +p[2] || 1;
-      var month = +p[1] || 1;
-      var year = +p[0] || 1900;
-      return validate(date, month, year);
+      {
+        var _p2 = val.split('/');
+
+        var _date3 = +_p2[2] || 1;
+
+        var _month2 = +_p2[1] || 1;
+
+        var _year2 = +_p2[0] || 1900;
+
+        return validate(_date3, _month2, _year2);
+      }
 
     case 'dd-mm-yyyy':
-      var p = val.split('-');
-      var date = +p[0] || 1;
-      var month = +p[1] || 1;
-      var year = +p[2] || 1900;
-      return validate(date, month, year);
+      {
+        var _p3 = val.split('-');
+
+        var _date4 = +_p3[0] || 1;
+
+        var _month3 = +_p3[1] || 1;
+
+        var _year3 = +_p3[2] || 1900;
+
+        return validate(_date4, _month3, _year3);
+      }
 
     case 'mm-dd-yyyy':
-      var p = val.split('-');
-      var date = +p[1] || 1;
-      var month = +p[0] || 1;
-      var year = +p[2] || 1900;
-      return validate(date, month, year);
+      {
+        var _p4 = val.split('-');
+
+        var _date5 = +_p4[1] || 1;
+
+        var _month4 = +_p4[0] || 1;
+
+        var _year4 = +_p4[2] || 1900;
+
+        return validate(_date5, _month4, _year4);
+      }
 
     case 'yyyy-mm-dd':
-      var p = val.split('-');
-      var date = +p[2] || 1;
-      var month = +p[1] || 1;
-      var year = +p[0] || 1900;
-      return validate(date, month, year);
+      {
+        var _p5 = val.split('-');
+
+        var _date6 = +_p5[2] || 1;
+
+        var _month5 = +_p5[1] || 1;
+
+        var _year5 = +_p5[0] || 1900;
+
+        return validate(_date6, _month5, _year5);
+      }
 
     default:
       return false;
@@ -1216,7 +1250,7 @@ var getSelectAll$1 = function getSelectAll(selected, optionsLength, disabledOpti
   };
 };
 
-var _excluded$z = ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error"];
+var _excluded$A = ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error"];
 var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames, _classNames2;
 
@@ -1232,7 +1266,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       open = props.open,
       inlineLabel = props.inlineLabel,
       error = props.error,
-      rest = _objectWithoutProperties$1(props, _excluded$z);
+      rest = _objectWithoutProperties$1(props, _excluded$A);
 
   var buttonDisabled = disabled ? 'disabled' : 'default';
   var trimmedPlaceholder = placeholder.trim();
@@ -1266,21 +1300,21 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 DropdownButton.displayName = 'DropdownButton';
 
-var _excluded$y = ["children", "componentType", "className"];
+var _excluded$z = ["children", "componentType", "className"];
 
 var GenericText = function GenericText(_ref) {
   var children = _ref.children,
       _ref$componentType = _ref.componentType,
       componentType = _ref$componentType === void 0 ? 'span' : _ref$componentType,
       className = _ref.className,
-      props = _objectWithoutProperties$1(_ref, _excluded$y);
+      props = _objectWithoutProperties$1(_ref, _excluded$z);
 
   return /*#__PURE__*/React.createElement(componentType, _objectSpread2(_objectSpread2({}, props), {}, {
     className: className
   }), children);
 };
 
-var _excluded$x = ["appearance", "size", "children", "weight", "small", "className"];
+var _excluded$y = ["appearance", "size", "children", "weight", "small", "className"];
 var Text = function Text(props) {
   var _classNames;
 
@@ -1290,7 +1324,7 @@ var Text = function Text(props) {
       weight = props.weight,
       small = props.small,
       className = props.className,
-      rest = _objectWithoutProperties$1(props, _excluded$x);
+      rest = _objectWithoutProperties$1(props, _excluded$y);
 
   var classes = classnames((_classNames = {
     Text: true
@@ -1308,6 +1342,44 @@ Text.defaultProps = {
   size: 'regular'
 };
 
+var isEnterKey = function isEnterKey(e) {
+  return e.key === 'Enter';
+};
+
+var isSpaceKey = function isSpaceKey(e) {
+  return e.key === 'Space';
+};
+
+var _excluded$x = ["onClick", "onKeyDown", "role"];
+
+var useAccessibilityProps = function useAccessibilityProps(_ref) {
+  var onClick = _ref.onClick,
+      _onKeyDown = _ref.onKeyDown,
+      role = _ref.role,
+      rest = _objectWithoutProperties$1(_ref, _excluded$x);
+
+  return _objectSpread2({}, onClick ? {
+    onClick: onClick,
+    role: role || 'button',
+    tabIndex: 0,
+    'aria-label': rest['aria-label'],
+    onKeyDown: function onKeyDown(e) {
+      if (_onKeyDown) {
+        _onKeyDown(e);
+
+        return;
+      }
+
+      if (isEnterKey(e) && onClick) {
+        onClick(e);
+      }
+    }
+  } : {
+    role: role,
+    'aria-label': rest['aria-label']
+  });
+};
+
 var Icon = function Icon(props) {
   var _classNames;
 
@@ -1315,8 +1387,8 @@ var Icon = function Icon(props) {
       className = props.className,
       name = props.name,
       size = props.size,
-      onClick = props.onClick,
       children = props.children;
+  var accessibilityProps = useAccessibilityProps(props);
   var baseProps = extractBaseProps(props);
 
   var mapper = function mapper(val) {
@@ -1347,9 +1419,8 @@ var Icon = function Icon(props) {
 
   return /*#__PURE__*/React.createElement("i", _extends$3({}, baseProps, {
     className: iconClass,
-    style: styles,
-    onClick: onClick
-  }), type ? "".concat(name, "_").concat(type) : name);
+    style: styles
+  }, accessibilityProps), type ? "".concat(name, "_").concat(type) : name);
 };
 Icon.displayName = 'Icon';
 Icon.defaultProps = {
@@ -1389,9 +1460,9 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       onChange = props.onChange,
       name = props.name,
       value = props.value,
-      className = props.className;
-      props.checked;
-      var helpText = props.helpText,
+      className = props.className,
+      checkedProp = props.checked,
+      helpText = props.helpText,
       rest = _objectWithoutProperties$1(props, _excluded$w);
 
   var ref = React.useRef(null);
@@ -1399,7 +1470,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     return ref.current;
   });
 
-  var _React$useState = React.useState(props.checked === undefined ? defaultChecked : props.checked),
+  var _React$useState = React.useState(checkedProp === undefined ? defaultChecked : checkedProp),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       checked = _React$useState2[0],
       setChecked = _React$useState2[1];
@@ -1408,10 +1479,10 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     setIndeterminate(indeterminate);
   }, [indeterminate]);
   React.useEffect(function () {
-    if (props.checked !== undefined) {
-      setChecked(props.checked);
+    if (checkedProp !== undefined) {
+      setChecked(checkedProp);
     }
-  }, [props.checked]);
+  }, [checkedProp]);
   var CheckboxClass = classnames((_classNames = {}, _defineProperty$2(_classNames, 'Checkbox', true), _defineProperty$2(_classNames, 'Checkbox--disabled', disabled), _classNames), className);
   var CheckboxOuterWrapper = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'Checkbox-outerWrapper', true), _defineProperty$2(_classNames2, "Checkbox-outerWrapper--".concat(size), size), _classNames2));
   var CheckboxInputWrapper = classnames((_classNames3 = {}, _defineProperty$2(_classNames3, 'Checkbox-input', true), _defineProperty$2(_classNames3, 'Checkbox-input--checked', checked), _defineProperty$2(_classNames3, 'Checkbox-input--indeterminate', props.indeterminate), _classNames3));
@@ -1423,7 +1494,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   };
 
   var onChangeHandler = function onChangeHandler(e) {
-    if (props.checked === undefined) {
+    if (checkedProp === undefined) {
       setChecked(e.target.checked);
       setIndeterminate(e.target.indeterminate);
     }
@@ -1512,18 +1583,24 @@ var DefaultOption = function DefaultOption(props) {
       dataTest = props.dataTest;
   var label = optionData.label,
       disabled = optionData.disabled;
-  return /*#__PURE__*/React.createElement("div", {
-    className: className,
-    onClick: onClickHandler,
-    onMouseEnter: onUpdateActiveOption,
-    "data-test": dataTest,
-    "data-disabled": disabled
-  }, /*#__PURE__*/React.createElement("div", {
-    className: 'Option-label'
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: textClassName,
-    appearance: appearance
-  }, label)));
+  return (
+    /*#__PURE__*/
+    // TODO(a11y): fix accessibility
+
+    /* eslint-disable */
+    React.createElement("div", {
+      className: className,
+      onClick: onClickHandler,
+      onMouseEnter: onUpdateActiveOption,
+      "data-test": dataTest,
+      "data-disabled": disabled
+    }, /*#__PURE__*/React.createElement("div", {
+      className: 'Option-label'
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: textClassName,
+      appearance: appearance
+    }, label)))
+  );
 };
 
 var MetaOption = function MetaOption(props) {
@@ -1538,18 +1615,24 @@ var MetaOption = function MetaOption(props) {
   var subInfo = optionData.subInfo,
       label = optionData.label,
       disabled = optionData.disabled;
-  return /*#__PURE__*/React.createElement("div", {
-    className: className,
-    onClick: onClickHandler,
-    onMouseEnter: onUpdateActiveOption,
-    "data-test": dataTest,
-    "data-disabled": disabled
-  }, /*#__PURE__*/React.createElement("div", {
-    className: 'Option-label'
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: textClassName,
-    appearance: appearance
-  }, label), subInfo && renderSubInfo(subInfo)));
+  return (
+    /*#__PURE__*/
+    // TODO(a11y): fix accessibility
+
+    /* eslint-disable */
+    React.createElement("div", {
+      className: className,
+      onClick: onClickHandler,
+      onMouseEnter: onUpdateActiveOption,
+      "data-test": dataTest,
+      "data-disabled": disabled
+    }, /*#__PURE__*/React.createElement("div", {
+      className: 'Option-label'
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: textClassName,
+      appearance: appearance
+    }, label), subInfo && renderSubInfo(subInfo)))
+  );
 };
 
 var IconOption = function IconOption(props) {
@@ -1566,23 +1649,29 @@ var IconOption = function IconOption(props) {
       icon = optionData.icon,
       disabled = optionData.disabled;
   var OptionClass = classnames((_classNames = {}, _defineProperty$2(_classNames, "".concat(className), true), _defineProperty$2(_classNames, 'Option--icon', icon), _classNames));
-  return /*#__PURE__*/React.createElement("div", {
-    className: OptionClass,
-    onClick: onClickHandler,
-    onMouseEnter: onUpdateActiveOption,
-    "data-test": dataTest,
-    "data-disabled": disabled
-  }, icon && /*#__PURE__*/React.createElement(Icon, {
-    className: "Option-icon mr-4",
-    "data-test": "".concat(dataTest, "--Icon"),
-    name: icon,
-    appearance: appearance
-  }), /*#__PURE__*/React.createElement("div", {
-    className: 'Option-label'
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: textClassName,
-    appearance: appearance
-  }, label)));
+  return (
+    /*#__PURE__*/
+    // TODO(a11y): fix accessibility
+
+    /* eslint-disable */
+    React.createElement("div", {
+      className: OptionClass,
+      onClick: onClickHandler,
+      onMouseEnter: onUpdateActiveOption,
+      "data-test": dataTest,
+      "data-disabled": disabled
+    }, icon && /*#__PURE__*/React.createElement(Icon, {
+      className: "Option-icon mr-4",
+      "data-test": "".concat(dataTest, "--Icon"),
+      name: icon,
+      appearance: appearance
+    }), /*#__PURE__*/React.createElement("div", {
+      className: 'Option-label'
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: textClassName,
+      appearance: appearance
+    }, label)))
+  );
 };
 
 var IconWithMetaOption = function IconWithMetaOption(props) {
@@ -1601,23 +1690,29 @@ var IconWithMetaOption = function IconWithMetaOption(props) {
       icon = optionData.icon,
       disabled = optionData.disabled;
   var OptionClass = classnames((_classNames = {}, _defineProperty$2(_classNames, "".concat(className), true), _defineProperty$2(_classNames, 'Option--icon', icon), _classNames));
-  return /*#__PURE__*/React.createElement("div", {
-    className: OptionClass,
-    onClick: onClickHandler,
-    onMouseEnter: onUpdateActiveOption,
-    "data-test": dataTest,
-    "data-disabled": disabled
-  }, icon && /*#__PURE__*/React.createElement(Icon, {
-    "data-test": "".concat(dataTest, "--Icon"),
-    className: "Option-icon mr-4",
-    name: icon,
-    appearance: appearance
-  }), /*#__PURE__*/React.createElement("div", {
-    className: 'Option-label'
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: textClassName,
-    appearance: appearance
-  }, label), subInfo && renderSubInfo(subInfo)));
+  return (
+    /*#__PURE__*/
+    // TODO(a11y): fix accessibility
+
+    /* eslint-disable */
+    React.createElement("div", {
+      className: OptionClass,
+      onClick: onClickHandler,
+      onMouseEnter: onUpdateActiveOption,
+      "data-test": dataTest,
+      "data-disabled": disabled
+    }, icon && /*#__PURE__*/React.createElement(Icon, {
+      "data-test": "".concat(dataTest, "--Icon"),
+      className: "Option-icon mr-4",
+      name: icon,
+      appearance: appearance
+    }), /*#__PURE__*/React.createElement("div", {
+      className: 'Option-label'
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: textClassName,
+      appearance: appearance
+    }, label), subInfo && renderSubInfo(subInfo)))
+  );
 };
 
 var _OptionTypeMapping;
@@ -1803,51 +1898,51 @@ var Loading = function Loading(props) {
 
   switch (loadingType) {
     case 'DEFAULT':
-      return /*#__PURE__*/React__default.createElement(PlaceholderParagraph, {
+      return /*#__PURE__*/React.createElement(PlaceholderParagraph, {
         length: 'large',
         "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
       });
 
     case 'WITH_ICON':
-      return /*#__PURE__*/React__default.createElement(Placeholder, {
+      return /*#__PURE__*/React.createElement(Placeholder, {
         withImage: true,
         round: true,
         "data-test": "DesignSystem-Dropdown--Placeholder"
-      }, /*#__PURE__*/React__default.createElement(PlaceholderParagraph, {
+      }, /*#__PURE__*/React.createElement(PlaceholderParagraph, {
         length: "large"
       }));
 
     case 'WITH_META':
-      return /*#__PURE__*/React__default.createElement(Placeholder, {
+      return /*#__PURE__*/React.createElement(Placeholder, {
         withImage: false,
         "data-test": "DesignSystem-Dropdown--Placeholder"
-      }, /*#__PURE__*/React__default.createElement(PlaceholderParagraph, {
+      }, /*#__PURE__*/React.createElement(PlaceholderParagraph, {
         length: "large",
         "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
-      }), /*#__PURE__*/React__default.createElement(PlaceholderParagraph, {
+      }), /*#__PURE__*/React.createElement(PlaceholderParagraph, {
         length: "medium",
         size: "xxs",
         "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
       }));
 
     case 'WITH_CHECKBOX':
-      return /*#__PURE__*/React__default.createElement(Placeholder, {
+      return /*#__PURE__*/React.createElement(Placeholder, {
         withImage: true,
         "data-test": "DesignSystem-Dropdown--Placeholder"
-      }, /*#__PURE__*/React__default.createElement(PlaceholderParagraph, {
+      }, /*#__PURE__*/React.createElement(PlaceholderParagraph, {
         length: "large"
       }));
 
     case 'ICON_WITH_META':
-      return /*#__PURE__*/React__default.createElement(Placeholder, {
+      return /*#__PURE__*/React.createElement(Placeholder, {
         withImage: true,
         round: true,
         imageSize: 'medium',
         "data-test": "DesignSystem-Dropdown--Placeholder"
-      }, /*#__PURE__*/React__default.createElement(PlaceholderParagraph, {
+      }, /*#__PURE__*/React.createElement(PlaceholderParagraph, {
         length: "large",
         "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
-      }), /*#__PURE__*/React__default.createElement(PlaceholderParagraph, {
+      }), /*#__PURE__*/React.createElement(PlaceholderParagraph, {
         length: "medium",
         size: "xxs",
         "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
@@ -1900,7 +1995,9 @@ var DropdownList = function DropdownList(props) {
       applyOptions = props.applyOptions,
       cancelOptions = props.cancelOptions,
       toggleDropdown = props.toggleDropdown,
-      className = props.className;
+      className = props.className,
+      _props$searchPlacehol = props.searchPlaceholder,
+      searchPlaceholder = _props$searchPlacehol === void 0 ? 'Search..' : _props$searchPlacehol;
   var baseProps = extractBaseProps(props);
   var dropdownRef = /*#__PURE__*/React.createRef();
   var triggerRef = /*#__PURE__*/React.createRef();
@@ -2088,7 +2185,9 @@ var DropdownList = function DropdownList(props) {
       name: "Dropdown-search",
       icon: 'search',
       value: searchTerm,
-      placeholder: 'Search..',
+      placeholder: searchPlaceholder // TODO(a11y): research more on this.
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      ,
       autoFocus: true,
       onChange: searchHandler,
       onClear: searchClearHandler,
@@ -2119,7 +2218,7 @@ var DropdownList = function DropdownList(props) {
     var label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
     return /*#__PURE__*/React.createElement("div", {
       className: SelectAllClass,
-      onMouseEnter: function onMouseEnter(_e) {
+      onMouseEnter: function onMouseEnter() {
         return updateActiveOption(0, true);
       }
     }, /*#__PURE__*/React.createElement(Checkbox, {
@@ -2237,8 +2336,6 @@ var DropdownList = function DropdownList(props) {
   };
 
   var onkeydown = function onkeydown(event) {
-    var _dropdownApplyButtonR;
-
     var optionClass = '.OptionWrapper';
 
     switch (event.key) {
@@ -2253,67 +2350,78 @@ var DropdownList = function DropdownList(props) {
         break;
 
       case 'Enter':
-        var activeElement = document.activeElement;
-
-        if (dropdownOpen && (inputRef.current === activeElement || dropdownTriggerRef.current === activeElement)) {
-          event.preventDefault();
-          var classes = withCheckbox ? "".concat(optionClass, " .Checkbox-input") : optionClass;
-          var elements = document.querySelectorAll(classes);
-          var element = elements[cursor];
-          if (element) element.click();
-        }
+        {
+          var activeElement = document.activeElement;
+
+          if (dropdownOpen && (inputRef.current === activeElement || dropdownTriggerRef.current === activeElement)) {
+            event.preventDefault();
+            var classes = withCheckbox ? "".concat(optionClass, " .Checkbox-input") : optionClass;
+            var elements = document.querySelectorAll(classes);
+            var element = elements[cursor];
+            if (element) element.click();
+          }
 
-        if (!dropdownOpen) onToggleDropdown(!dropdownOpen);
-        break;
+          if (!dropdownOpen) onToggleDropdown(!dropdownOpen);
+          break;
+        }
 
       case 'Tab':
-        if (!showApplyButton && dropdownOpen) {
-          event.preventDefault();
-          onToggleDropdown(false, 'onClick');
-          return;
-        }
+        {
+          var _dropdownApplyButtonR;
 
-        var currentElement = document.activeElement;
-        var disabledApplyButton = (_dropdownApplyButtonR = dropdownApplyButtonRef.current) === null || _dropdownApplyButtonR === void 0 ? void 0 : _dropdownApplyButtonR.disabled;
+          if (!showApplyButton && dropdownOpen) {
+            event.preventDefault();
+            onToggleDropdown(false, 'onClick');
+            return;
+          }
 
-        if ((currentElement === dropdownCancelButtonRef.current && disabledApplyButton || currentElement === dropdownApplyButtonRef.current) && dropdownOpen) {
-          event.preventDefault();
-          onToggleDropdown(false, 'onClick');
-          return;
-        }
+          var currentElement = document.activeElement;
+          var disabledApplyButton = (_dropdownApplyButtonR = dropdownApplyButtonRef.current) === null || _dropdownApplyButtonR === void 0 ? void 0 : _dropdownApplyButtonR.disabled;
 
-        if (showApplyButton && dropdownOpen) {
-          event.preventDefault();
+          if ((currentElement === dropdownCancelButtonRef.current && disabledApplyButton || currentElement === dropdownApplyButtonRef.current) && dropdownOpen) {
+            event.preventDefault();
+            onToggleDropdown(false, 'onClick');
+            return;
+          }
 
-          if (currentElement === dropdownCancelButtonRef.current) {
-            var _dropdownApplyButtonR2;
+          if (showApplyButton && dropdownOpen) {
+            event.preventDefault();
 
-            (_dropdownApplyButtonR2 = dropdownApplyButtonRef.current) === null || _dropdownApplyButtonR2 === void 0 ? void 0 : _dropdownApplyButtonR2.focus();
-          } else {
-            var _dropdownCancelButton;
+            if (currentElement === dropdownCancelButtonRef.current) {
+              var _dropdownApplyButtonR2;
+
+              (_dropdownApplyButtonR2 = dropdownApplyButtonRef.current) === null || _dropdownApplyButtonR2 === void 0 ? void 0 : _dropdownApplyButtonR2.focus();
+            } else {
+              var _dropdownCancelButton;
 
-            (_dropdownCancelButton = dropdownCancelButtonRef.current) === null || _dropdownCancelButton === void 0 ? void 0 : _dropdownCancelButton.focus();
+              (_dropdownCancelButton = dropdownCancelButtonRef.current) === null || _dropdownCancelButton === void 0 ? void 0 : _dropdownCancelButton.focus();
+            }
           }
-        }
 
-        break;
+          break;
+        }
     }
   };
 
-  return /*#__PURE__*/React.createElement("div", _extends$3({}, baseProps, {
-    className: dropdownClass,
-    ref: triggerRef,
-    onKeyDown: onkeydown
-  }), /*#__PURE__*/React.createElement(Popover, _extends$3({
-    onToggle: onToggleDropdown,
-    trigger: trigger,
-    triggerClass: !menu ? 'w-100' : '',
-    open: dropdownOpen,
-    customStyle: popoverStyle,
-    position: alignmentMapping[align]
-  }, popoverOptions, {
-    "data-test": "DesignSystem-Dropdown--Popover"
-  }), (withSearch || props.async) && renderSearch(), renderDropdownSection(), showApplyButton && withCheckbox && renderApplyButton()));
+  return (
+    /*#__PURE__*/
+    //TODO(a11y)
+    //eslint-disable-next-line
+    React.createElement("div", _extends$3({}, baseProps, {
+      className: dropdownClass,
+      ref: triggerRef,
+      onKeyDown: onkeydown
+    }), /*#__PURE__*/React.createElement(Popover, _extends$3({
+      onToggle: onToggleDropdown,
+      trigger: trigger,
+      triggerClass: !menu ? 'w-100' : '',
+      open: dropdownOpen,
+      customStyle: popoverStyle,
+      position: alignmentMapping[align]
+    }, popoverOptions, {
+      "data-test": "DesignSystem-Dropdown--Popover"
+    }), (withSearch || props.async) && renderSearch(), renderDropdownSection(), showApplyButton && withCheckbox && renderApplyButton()))
+  );
 };
 
 DropdownList.displayName = 'DropdownList';
@@ -3422,6 +3530,17 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       };
     });
 
+    _defineProperty$2(_assertThisInitialized$2(_this), "yearMouseOverHandler", function (year, isCurrentYear, isDisabled, ev) {
+      var onYearHover = _this.props.onYearHover;
+      var yearData = {
+        value: year,
+        year: year,
+        isCurrentYear: isCurrentYear,
+        isDisabled: isDisabled
+      };
+      if (onYearHover) onYearHover(yearData, ev);
+    });
+
     _defineProperty$2(_assertThisInitialized$2(_this), "selectMonth", function (month) {
       return function () {
         _this.updateState(_this.state.yearNav, month);
@@ -3432,7 +3551,28 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       };
     });
 
+    _defineProperty$2(_assertThisInitialized$2(_this), "monthMouseOverHandler", function (month, isCurrentMonth, isDisabled, ev) {
+      var months = config.months;
+      var onMonthHover = _this.props.onMonthHover;
+      var monthData = {
+        value: months[month],
+        month: months[month],
+        year: _this.state.year,
+        isCurrentMonth: isCurrentMonth,
+        isDisabled: isDisabled
+      };
+      if (onMonthHover) onMonthHover(monthData, ev);
+    });
+
     _defineProperty$2(_assertThisInitialized$2(_this), "selectDate", function (index, date, prevMonthDayRange, dayRange) {
+      var d = _this.calculateDate(index, date, prevMonthDayRange, dayRange, false);
+
+      _this.setState({
+        currDate: d
+      });
+    });
+
+    _defineProperty$2(_assertThisInitialized$2(_this), "calculateDate", function (index, date, prevMonthDayRange, dayRange, isDateHovered) {
       var neighbouringMonthIndex;
       var neighbouringMonthDate;
       var type = '';
@@ -3454,15 +3594,15 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           year = _this$getNavDateInfo.year,
           month = _this$getNavDateInfo.month;
 
-      _this.updateState(year, month, neighbouringMonthDate);
+      if (isDateHovered === false) {
+        _this.updateState(year, month, neighbouringMonthDate);
 
-      _this.onNavIconClickHandler(type)();
+        _this.onNavIconClickHandler(type)();
+      }
 
       var d = _this.getDateValue(year, month, neighbouringMonthDate);
 
-      _this.setState({
-        currDate: d
-      });
+      return d;
     });
 
     _defineProperty$2(_assertThisInitialized$2(_this), "onNavIconClickHandler", function (type) {
@@ -3649,7 +3789,11 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/React.createElement("div", {
         className: headerContentClass
-      }, view !== 'date' && /*#__PURE__*/React.createElement("div", {
+      }, view !== 'date' &&
+      /*#__PURE__*/
+      // TODO(a11y)
+      //  eslint-disable-next-line
+      React.createElement("div", {
         className: "d-flex justify-content-center align-items-center",
         onClick: _this.onNavHeadingClickHandler(view)
       }, renderHeading(headerContent)), view === 'date' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -3700,15 +3844,21 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
             'Calendar-value--disabled': disabled,
             'Calendar-yearValue': true
           }, _defineProperty$2(_classNames2, "Calendar-yearValue--".concat(size), size), _defineProperty$2(_classNames2, 'Calendar-value--currDateMonthYear', isCurrentYear()), _classNames2));
-          return /*#__PURE__*/React.createElement("div", {
-            key: "".concat(row, "-").concat(col),
-            "data-test": "DesignSystem-Calendar--yearValue",
-            className: valueClass,
-            onClick: _this.selectYear(year)
-          }, /*#__PURE__*/React.createElement(Text, {
-            size: size === 'small' ? 'small' : 'regular',
-            appearance: active ? 'white' : disabled ? 'disabled' : isCurrentYear() ? 'link' : 'default'
-          }, year));
+          return (
+            /*#__PURE__*/
+            //  TODO(a11y)
+            //  eslint-disable-next-line
+            React.createElement("div", {
+              key: "".concat(row, "-").concat(col),
+              "data-test": "DesignSystem-Calendar--yearValue",
+              className: valueClass,
+              onClick: _this.selectYear(year),
+              onMouseOver: _this.yearMouseOverHandler.bind(_assertThisInitialized$2(_this), year, isCurrentYear(), disabled)
+            }, /*#__PURE__*/React.createElement(Text, {
+              size: size === 'small' ? 'small' : 'regular',
+              appearance: active ? 'white' : disabled ? 'disabled' : isCurrentYear() ? 'link' : 'default'
+            }, year))
+          );
         }));
       });
     });
@@ -3752,15 +3902,21 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
             'Calendar-value--dummy': disabled,
             'Calendar-monthValue': true
           }, _defineProperty$2(_classNames3, "Calendar-monthValue--".concat(size), size), _defineProperty$2(_classNames3, 'Calendar-value--currDateMonthYear', isCurrentMonth()), _classNames3));
-          return /*#__PURE__*/React.createElement("div", {
-            key: "".concat(row, "-").concat(col),
-            "data-test": "DesignSystem-Calendar--monthValue",
-            className: valueClass,
-            onClick: _this.selectMonth(month)
-          }, /*#__PURE__*/React.createElement(Text, {
-            size: size === 'small' ? 'small' : 'regular',
-            appearance: active ? 'white' : disabled ? 'disabled' : isCurrentMonth() ? 'link' : 'default'
-          }, months[month]));
+          return (
+            /*#__PURE__*/
+            //TODO(a11y)
+            //eslint-disable-next-line
+            React.createElement("div", {
+              key: "".concat(row, "-").concat(col),
+              "data-test": "DesignSystem-Calendar--monthValue",
+              className: valueClass,
+              onClick: _this.selectMonth(month),
+              onMouseOver: _this.monthMouseOverHandler.bind(_assertThisInitialized$2(_this), month, isCurrentMonth(), disabled)
+            }, /*#__PURE__*/React.createElement(Text, {
+              size: size === 'small' ? 'small' : 'regular',
+              appearance: active ? 'white' : disabled ? 'disabled' : isCurrentMonth() ? 'link' : 'default'
+            }, months[month]))
+          );
         }));
       });
     });
@@ -3813,7 +3969,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           firstDayOfWeek = _this$props7.firstDayOfWeek,
           disabledBefore = _this$props7.disabledBefore,
           disabledAfter = _this$props7.disabledAfter,
-          monthsInView = _this$props7.monthsInView;
+          monthsInView = _this$props7.monthsInView,
+          onDateHover = _this$props7.onDateHover;
       var _this$state8 = _this.state,
           startDate = _this$state8.startDate,
           endDate = _this$state8.endDate,
@@ -3835,13 +3992,10 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       var dayRange = getDaysInMonth(yearNavVal, monthNavVal);
       var dayDiff = getFirstDayOfMonth(yearNavVal, monthNavVal) - getIndexOfDay(firstDayOfWeek);
       var dummyDays = Math.abs(dayDiff);
-      var noOfRows = Math.ceil((dayRange + dummyDays) / daysInRow);
+      var noOfRows = Math.ceil((dayRange + dummyDays) / daysInRow); // TODO: @veekays
+      // if(noOfRows !== 6 && monthsInView <= 1) ?
 
-      if (noOfRows === 6) {
-        noOfRows = noOfRows;
-      } else if (monthsInView > 1) {
-        noOfRows = noOfRows;
-      } else {
+      if (noOfRows === 6) ; else if (monthsInView > 1) ; else {
         noOfRows = noOfRows + 1;
       }
 
@@ -3877,6 +4031,25 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
         };
       };
 
+      var onMouseEnterHandler = function onMouseEnterHandler(date, isToday, isDisabled, ev) {
+        var d = _this.calculateDate(index, date, prevMonthDayRange, dayRange, true) || new Date();
+        var months = config.months,
+            days = config.days;
+        var dayName = days.large[d.getDay()];
+        var dateData = {
+          value: d.getDate(),
+          isToday: isToday,
+          isDisabled: isDisabled,
+          todayDate: _this.state.currDate,
+          fullDate: d,
+          date: d.getDate(),
+          month: months[d.getMonth()],
+          year: d.getFullYear(),
+          dayName: dayName
+        };
+        if (onDateHover) onDateHover(dateData, ev);
+      };
+
       return Array.from({
         length: noOfRows
       }, function (_y, row) {
@@ -3976,14 +4149,16 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
             "data-test": "DesignSystem-Calendar--dateValue",
             className: valueClass,
             onClick: onClickHandler(date),
-            onMouseOver: onMouseOverHandler(date)
+            onMouseOver: onMouseOverHandler(date),
+            onMouseEnter: onMouseEnterHandler.bind(_assertThisInitialized$2(_this), date, today(), disabled)
           }, date), isEventExist && _this.renderEventsIndicator(size, active)), (dummy && date > 0 && index === monthsInView - 1 || dummy && date <= 0 && index === 0) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
             appearance: active ? 'white' : disabled ? 'disabled' : today() ? 'link' : 'default',
             size: size === 'small' ? 'small' : 'regular',
             "data-test": "DesignSystem-Calendar--dateValue",
             className: valueClass,
             onClick: onClickHandler(date),
-            onMouseOver: onMouseOverHandler(date)
+            onMouseOver: onMouseOverHandler(date),
+            onMouseEnter: onMouseEnterHandler.bind(_assertThisInitialized$2(_this), date, today(), disabled)
           }, date <= 0 ? prevMonthDayRange + date : date - dayRange), isEventExist && _this.renderEventsIndicator(size, active)));
         }));
       });
@@ -4340,6 +4515,8 @@ CardFooter.defaultProps = {
 };
 
 var GenericChip = function GenericChip(props) {
+  var _classNames2, _classNames3;
+
   var label = props.label,
       icon = props.icon,
       clearButton = props.clearButton,
@@ -4365,26 +4542,33 @@ var GenericChip = function GenericChip(props) {
     if (onClick) onClick();
   };
 
-  return /*#__PURE__*/React.createElement("div", _extends$3({
-    "data-test": "DesignSystem-GenericChip--GenericChipWrapper"
-  }, baseProps, {
-    className: "Chip-wrapper ".concat(className),
-    onClick: onClickHandler
-  }), icon && /*#__PURE__*/React.createElement(Icon, {
-    "data-test": "DesignSystem-GenericChip--Icon",
-    name: icon,
-    appearance: disabled ? 'disabled' : selected ? 'info' : 'default',
-    className: iconClass('left')
-  }), /*#__PURE__*/React.createElement(Text, {
-    "data-test": "DesignSystem-GenericChip--Text",
-    appearance: disabled ? 'disabled' : 'default'
-  }, label), clearButton && /*#__PURE__*/React.createElement(Icon, {
-    "data-test": "DesignSystem-GenericChip--clearButton",
-    name: "clear",
-    appearance: disabled ? 'disabled' : selected ? 'info' : 'subtle',
-    className: iconClass('right'),
-    onClick: onCloseHandler
-  }));
+  var iconAppearance = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'disabled', disabled && !selected), _defineProperty$2(_classNames2, 'info', selected), _defineProperty$2(_classNames2, 'subtle', !disabled && !selected && !clearButton && !icon), _defineProperty$2(_classNames2, 'default', !disabled && !selected && !clearButton && icon), _classNames2));
+  var textAppearance = classnames((_classNames3 = {}, _defineProperty$2(_classNames3, 'disabled', disabled && !selected), _defineProperty$2(_classNames3, 'link', selected), _defineProperty$2(_classNames3, 'default', !disabled && !selected), _classNames3));
+  return (
+    /*#__PURE__*/
+    // TODO(a11y)
+    // eslint-disable-next-line
+    React.createElement("div", _extends$3({
+      "data-test": "DesignSystem-GenericChip--GenericChipWrapper"
+    }, baseProps, {
+      className: "Chip-wrapper ".concat(className),
+      onClick: onClickHandler
+    }), icon && /*#__PURE__*/React.createElement(Icon, {
+      "data-test": "DesignSystem-GenericChip--Icon",
+      name: icon,
+      appearance: iconAppearance,
+      className: iconClass('left')
+    }), /*#__PURE__*/React.createElement(Text, {
+      "data-test": "DesignSystem-GenericChip--Text",
+      appearance: textAppearance
+    }, label), clearButton && /*#__PURE__*/React.createElement(Icon, {
+      "data-test": "DesignSystem-GenericChip--clearButton",
+      name: "clear",
+      appearance: iconAppearance,
+      className: iconClass('right'),
+      onClick: onCloseHandler
+    }))
+  );
 };
 GenericChip.displayName = 'GenericChip';
 
@@ -4413,7 +4597,7 @@ var Chip = function Chip(props) {
 
   var chipClass = classnames((_classNames = {
     Chip: true
-  }, _defineProperty$2(_classNames, "Chip-".concat(type, "--disabled"), disabled), _defineProperty$2(_classNames, "Chip--".concat(type), type && !disabled), _defineProperty$2(_classNames, "Chip-".concat(type, "--selected"), selected && !disabled), _classNames), className);
+  }, _defineProperty$2(_classNames, "Chip-".concat(type, "--disabled"), disabled), _defineProperty$2(_classNames, "Chip--".concat(type), type && !disabled), _defineProperty$2(_classNames, "Chip-".concat(type, "--selected"), selected && !disabled), _defineProperty$2(_classNames, "Chip-selection--selectedDisabled", type === 'selection' && selected && disabled), _classNames), className);
   var clearbutton = type === 'action' ? false : clearButton;
   var select = type === 'selection' && selected ? true : false;
   return /*#__PURE__*/React.createElement(GenericChip, _extends$3({
@@ -4563,14 +4747,13 @@ var Trigger$1 = function Trigger(props) {
   };
 
   var mask = date[inputFormat];
-  return /*#__PURE__*/React.createElement(InputMask, _extends$3({
+  return /*#__PURE__*/React.createElement(X, _extends$3({
     icon: "events",
     placeholder: inputFormat
   }, inputOptions, {
     error: showError,
     mask: mask,
-    value: date$1 ? translateToString(inputFormat, date$1) : init // @ts-ignore
-    ? InputMask.utils.getDefaultValue(mask, placeholderChar) : '',
+    value: date$1 ? translateToString(inputFormat, date$1) : init ? X.utils.getDefaultValue(mask, placeholderChar) : '',
     onChange: onChangeHandler,
     onBlur: onBlurHandler,
     onClear: onClearHandler,
@@ -4580,7 +4763,7 @@ var Trigger$1 = function Trigger(props) {
   }));
 };
 
-var _excluded$q = ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size"];
+var _excluded$q = ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size", "showTodayDate", "children"];
 var DatePicker = /*#__PURE__*/function (_React$Component) {
   _inherits$1(DatePicker, _React$Component);
 
@@ -4718,6 +4901,10 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
           _this$props4.onDateChange;
           _this$props4.closeOnSelect;
           var size = _this$props4.size,
+          _this$props4$showToda = _this$props4.showTodayDate,
+          showTodayDate = _this$props4$showToda === void 0 ? true : _this$props4$showToda,
+          _this$props4$children = _this$props4.children,
+          children = _this$props4$children === void 0 ? /*#__PURE__*/React.createElement(React.Fragment, null) : _this$props4$children,
           rest = _objectWithoutProperties$1(_this$props4, _excluded$q);
 
       var date = this.state.date;
@@ -4742,13 +4929,15 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
         return !isTodayDateDisabled;
       };
 
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Calendar, _extends$3({}, rest, {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: "d-flex"
+      }, children, /*#__PURE__*/React.createElement(Calendar, _extends$3({}, rest, {
         size: size,
         date: currDate,
         disabledBefore: dateDisabledBefore,
         disabledAfter: dateDisabledAfter,
         onDateChange: this.onDateChangeHandler
-      })), /*#__PURE__*/React.createElement("div", {
+      }))), showTodayDate && /*#__PURE__*/React.createElement("div", {
         className: "d-flex justify-content-center pb-6",
         "data-test": "DesignSystem-Select--TodaysDate-wrapper"
       }, /*#__PURE__*/React.createElement(Chip, {
@@ -4866,13 +5055,12 @@ var TimePicker = function TimePicker(props) {
   };
 
   var mask = time[inputFormat];
-  return /*#__PURE__*/React.createElement(InputMask, _extends$3({
+  return /*#__PURE__*/React.createElement(X, _extends$3({
     placeholder: placeholders[inputFormat],
     placeholderChar: placeholderChar
   }, inputOptions, {
     mask: mask,
-    value: time$1 ? translateToTime(inputFormat, time$1) : init // @ts-ignore
-    ? InputMask.utils.getDefaultValue(mask, placeholderChar) : '',
+    value: time$1 ? translateToTime(inputFormat, time$1) : init ? X.utils.getDefaultValue(mask, placeholderChar) : '',
     validators: inputValidator,
     onChange: onChangeHandler,
     onClear: onClearHandler,
@@ -4994,7 +5182,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       var _ref$current2;
 
       return (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
-    }
+    },
+    role: "presentation"
   }, inlineLabel && /*#__PURE__*/React.createElement("div", {
     className: "Input-inlineLabel"
   }, /*#__PURE__*/React.createElement(Text, {
@@ -5025,12 +5214,17 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     position: "top",
     tooltip: info
   }, trigger) : actionIcon && (value || defaultValue) ? actionIcon : onClear && (value || defaultValue) && /*#__PURE__*/React.createElement("div", {
-    className: rightIconClass,
+    className: rightIconClass
+  }, /*#__PURE__*/React.createElement(Icon, {
+    "data-test": "DesignSystem-Input--closeIcon",
     onClick: function onClick(e) {
-      return onClear(e);
+      var _ref$current3;
+
+      (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.focus({
+        preventScroll: true
+      });
+      onClear(e);
     },
-    "data-test": "DesignSystem-Input--closeIcon"
-  }, /*#__PURE__*/React.createElement(Icon, {
     name: 'close',
     size: sizeMapping$1[size]
   })));
@@ -5175,7 +5369,14 @@ var MetricInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       var _ref$current2;
 
       return (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
-    }
+    },
+    onFocus: function onFocus() {
+      var _ref$current3;
+
+      return (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.focus();
+    },
+    onKeyDown: function onKeyDown() {},
+    role: "presentation"
   }, icon && /*#__PURE__*/React.createElement(Icon, {
     "data-test": "DesignSystem-MetricInput--icon",
     name: icon,
@@ -5210,9 +5411,9 @@ var MetricInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     size: size,
     appearance: "subtle"
   }, suffix), /*#__PURE__*/React.createElement("div", {
-    className: "MetricInput-arrowIcons",
-    tabIndex: 0
+    className: "MetricInput-arrowIcons"
   }, /*#__PURE__*/React.createElement(Icon, {
+    tabIndex: -1,
     className: getArrowClass('up'),
     size: iconSize,
     name: "keyboard_arrow_up",
@@ -5221,6 +5422,7 @@ var MetricInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     },
     "data-test": "DesignSystem-MetricInput--upIcon"
   }), /*#__PURE__*/React.createElement(Icon, {
+    tabIndex: -1,
     className: getArrowClass('down'),
     size: iconSize,
     name: "keyboard_arrow_down",
@@ -5273,7 +5475,10 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
       className = props.className,
       rest = _objectWithoutProperties$1(props, _excluded$m);
 
-  var getNewCursorPosition = function getNewCursorPosition(type, position) {
+  var isEditable = React.useCallback(function (pos) {
+    return _typeof(mask[pos]) === 'object';
+  }, [mask]);
+  var getNewCursorPosition = React.useCallback(function (type, position) {
     if (type === 'right') {
       for (var i = position; i < mask.length; i++) {
         if (isEditable(i)) return i;
@@ -5291,82 +5496,70 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
     }
 
     return position;
-  };
-
-  var getDefaultSelection = function getDefaultSelection() {
+  }, [mask, isEditable]);
+  var getDefaultSelection = React.useCallback(function () {
     var pos = getNewCursorPosition('right', 0);
     return {
       start: pos,
       end: pos
     };
-  };
-
-  var getPlaceholderValue = function getPlaceholderValue() {
+  }, [getNewCursorPosition]);
+  var getPlaceholderValue = React.useCallback(function () {
     var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     var end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : mask.length - 1;
     return getDefaultValue(mask, placeholderChar).slice(start, end + 1);
-  };
-
-  var getSelectionLength = function getSelectionLength(val) {
-    return Math.abs(val.end - val.start);
-  };
-
-  var isEditable = function isEditable(pos) {
-    return _typeof(mask[pos]) === 'object';
-  };
-
+  }, [mask, placeholderChar]);
+  var defaultPlaceholderValue = React.useMemo(function () {
+    return getPlaceholderValue();
+  }, [getPlaceholderValue]);
+  var defaultSelection = React.useMemo(function () {
+    return getDefaultSelection();
+  }, [getDefaultSelection]);
+  var ref = React.useRef(null);
   var deferId = React.useRef();
-  var selectionRef = React.useRef(0);
+  var selectionPos = React.useRef(defaultSelection);
+  var newSelectionPos = React.useRef(0);
 
   var _React$useState = React.useState(defaultValue || valueProp || ''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       value = _React$useState2[0],
       setValue = _React$useState2[1];
 
-  var _React$useState3 = React.useState(getDefaultSelection()),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      selection = _React$useState4[0],
-      setSelection = _React$useState4[1];
-
-  var ref = React.useRef(null);
   React.useImperativeHandle(forwardRef, function () {
     return ref.current;
   });
   React.useEffect(function () {
     setValue(valueProp || '');
   }, [valueProp]);
-
-  var setCursorPosition = function setCursorPosition(val) {
-    return setSelectionPos({
-      start: val,
-      end: val
-    });
-  };
-
-  var getCurrSelection = function getCurrSelection() {
+  React.useEffect(function () {
+    setCursorPosition(newSelectionPos.current);
+  }, [value]);
+  var getSelectionLength = React.useCallback(function (val) {
+    return Math.abs(val.end - val.start);
+  }, []);
+  var getCurrSelection = React.useCallback(function () {
     var _ref$current, _ref$current2;
 
     return {
       start: ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.selectionStart) || 0,
       end: ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.selectionEnd) || 0
     };
-  };
-
-  var setSelectionPos = function setSelectionPos(pos) {
+  }, [ref.current]);
+  var setSelectionPos = React.useCallback(function (pos) {
     if (ref.current) {
       var el = ref.current;
       var start = Math.min(pos.start, pos.end);
       var end = Math.max(pos.start, pos.end);
       el.setSelectionRange(start, end);
     }
-  };
-
-  var updateSelection = function updateSelection() {
-    setSelection(getCurrSelection());
-    deferId.current = window.requestAnimationFrame(updateSelection);
-  };
-
-  var insertAtIndex = function insertAtIndex(currValue, index) {
+  }, [ref.current]);
+  var setCursorPosition = React.useCallback(function (val) {
+    return setSelectionPos({
+      start: val,
+      end: val
+    });
+  }, [setSelectionPos]);
+  var insertAtIndex = React.useCallback(function (currValue, index) {
     var iterator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
     var newValue = '';
     var newIndex = index + 1;
@@ -5377,7 +5570,10 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
     }
 
     if (iterator >= currValue.length) {
-      selectionRef.current = index;
+      selectionPos.current = {
+        start: index,
+        end: index
+      };
       return newValue;
     }
 
@@ -5397,12 +5593,15 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
 
     newValue += insertAtIndex(currValue, newIndex, newIterator);
     return newValue;
-  };
-
-  var onChangeHandler = function onChangeHandler(e) {
+  }, [mask, placeholderChar, isEditable]);
+  var updateSelection = React.useCallback(function () {
+    selectionPos.current = getCurrSelection();
+    deferId.current = window.requestAnimationFrame(updateSelection);
+  }, [selectionPos.current, getCurrSelection]);
+  var onChangeHandler = React.useCallback(function (e) {
     var inputVal = e.currentTarget.value;
     var currSelection = getCurrSelection();
-    var start = Math.min(selection.start, currSelection.start);
+    var start = Math.min(selectionPos.current.start, currSelection.start);
     var end = currSelection.end;
     var cursorPosition = start;
     var enteredVal = '';
@@ -5413,8 +5612,8 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
     updatedVal = insertAtIndex(enteredVal, start);
     insertedStringLength = updatedVal.length;
 
-    if (currSelection.end > selection.end) {
-      removedLength = insertedStringLength ? getSelectionLength(selection) : 0;
+    if (currSelection.end > selectionPos.current.end) {
+      removedLength = insertedStringLength ? getSelectionLength(selectionPos.current) : 0;
     } else if (inputVal.length < value.length) {
       removedLength = value.length - inputVal.length;
     }
@@ -5442,56 +5641,50 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
     }
 
     var newValue = maskedVal.slice(0, mask.length).join('');
-    window.requestAnimationFrame(function () {
-      return setCursorPosition(cursorPosition);
-    });
+    newSelectionPos.current = cursorPosition;
 
-    if (isValid(validators, newValue) && newValue !== value) {
+    if (newValue !== value && isValid(validators, newValue)) {
       setValue(newValue);
-      if (onChange) onChange(e, newValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue);
+    } else {
+      window.requestAnimationFrame(function () {
+        return setCursorPosition(newSelectionPos.current);
+      });
     }
-  };
-
-  var onBlurHandler = function onBlurHandler(e) {
+  }, [selectionPos.current, validators, getCurrSelection, insertAtIndex, getSelectionLength, getPlaceholderValue, getNewCursorPosition, isEditable, setCursorPosition, setValue, onChange]);
+  var onBlurHandler = React.useCallback(function (e) {
     var inputVal = e.currentTarget.value;
 
     if (clearOnEmptyBlur) {
-      if (inputVal === getPlaceholderValue()) {
+      if (inputVal === defaultPlaceholderValue) {
         setValue('');
         inputVal = '';
       }
     }
 
-    if (onBlur) onBlur(e, inputVal);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, inputVal);
     if (deferId.current) window.cancelAnimationFrame(deferId.current);
-  };
-
-  var onClearHandler = function onClearHandler(e) {
-    // setValue('');
-    // window.requestAnimationFrame(() => ref.current!.blur());
-    setValue(getPlaceholderValue());
-    window.requestAnimationFrame(function () {
-      return setCursorPosition(getDefaultSelection().start);
-    });
-    if (onClear) onClear(e);
-  };
-
-  var onFocusHandler = function onFocusHandler(e) {
+  }, [clearOnEmptyBlur, deferId.current, getPlaceholderValue, setValue, onBlur]);
+  var onClearHandler = React.useCallback(function (e) {
+    newSelectionPos.current = defaultSelection.start;
+    setValue(defaultPlaceholderValue);
+    onClear === null || onClear === void 0 ? void 0 : onClear(e);
+  }, [setValue, getPlaceholderValue, setCursorPosition, getDefaultSelection, onClear]);
+  var onFocusHandler = React.useCallback(function (e) {
     deferId.current = window.requestAnimationFrame(updateSelection);
 
     if (!value) {
+      newSelectionPos.current = defaultSelection.start;
       setValue(getPlaceholderValue());
-      window.requestAnimationFrame(function () {
-        return setSelectionPos(getDefaultSelection());
-      });
     }
 
-    if (onFocus) onFocus(e);
-  };
-
-  var classes = classnames({
-    'd-flex flex-column flex-grow-1': true
-  }, className);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+  }, [deferId.current, value, updateSelection, setValue, setSelectionPos, onFocus]);
+  var classes = React.useMemo(function () {
+    return classnames({
+      'd-flex flex-column flex-grow-1': true
+    }, className);
+  }, [className]);
   return /*#__PURE__*/React.createElement("div", {
     className: classes,
     "data-test": "DesignSystem-InputMask--Wrapper"
@@ -5511,11 +5704,16 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
     hide: !caption
   }, caption));
 });
-InputMask.displayName = 'InputMask'; // @ts-ignore
+InputMask.displayName = 'InputMask'; // we are adding a new property which is not present in default interface
+// we could have explicitly added the interface above with definition
+// but then it would force us to marks utils as optional
+// as we cannot add new properties by defining the InputMask
+// that would cause user to use `!` everywhere or check for utils
 
 InputMask.utils = {
   getDefaultValue: getDefaultValue
 };
+var X = InputMask;
 
 var _excluded$l = ["required", "optional", "withInput", "disabled", "children", "className"];
 
@@ -5622,7 +5820,10 @@ var Legend = function Legend(props) {
     background: "var(--".concat(iconAppearance, ")"),
     height: "".concat(iconSize, "px"),
     width: "".concat(iconSize, "px")
-  };
+  }; // TODO(a11y): fix accessibility
+
+  /* eslint-disable */
+
   return /*#__PURE__*/React.createElement("div", _extends$3({}, baseProps, {
     className: legendClass,
     onClick: function onClick(e) {
@@ -5715,14 +5916,14 @@ var EditableDropdown = function EditableDropdown(props) {
     switch (eventType) {
       case 'edit':
         setEditing(true);
+        break;
 
       case 'hover':
         setShowComponent(true);
-        return;
+        break;
 
       case 'default':
         setShowComponent(false);
-        return;
     }
   };
 
@@ -5803,10 +6004,11 @@ var IconMapping$2 = {
 var Message = function Message(props) {
   var _classNames, _classNames2, _classNames3, _classNames4;
 
-  var appearance = props.appearance,
-      actions = props.actions,
+  var actions = props.actions,
       title = props.title,
       className = props.className;
+  var appearance = props.appearance;
+  appearance = appearance === 'default' ? 'info' : appearance;
   var baseProps = extractBaseProps(props);
   var MessageClass = classnames((_classNames = {}, _defineProperty$2(_classNames, 'Message', true), _defineProperty$2(_classNames, "Message--".concat(appearance), appearance), _classNames), className);
   var IconClass = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'Message-icon', true), _defineProperty$2(_classNames2, "Message-icon--".concat(appearance), appearance), _defineProperty$2(_classNames2, 'Message-icon--withTitle', title), _classNames2));
@@ -5835,7 +6037,7 @@ var Message = function Message(props) {
     "data-test": "DesignSystem-Message"
   }, baseProps, {
     className: MessageClass
-  }), appearance !== 'default' && /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/React.createElement(Icon, {
     "data-test": "DesignSystem-Message--Icon",
     name: IconMapping$2[appearance],
     appearance: appearance,
@@ -5851,7 +6053,7 @@ var Message = function Message(props) {
 };
 Message.displayName = 'Message';
 Message.defaultProps = {
-  appearance: 'default',
+  appearance: 'info',
   description: ''
 };
 
@@ -5927,6 +6129,9 @@ MetaList.defaultProps = {
   labelAppearance: 'subtle'
 };
 
+/**
+ * Key codes are deprecated, soon major browser support will end.
+ */
 var ARROW_LEFT = 37;
 var ARROW_RIGHT = 39;
 
@@ -5987,7 +6192,7 @@ function fillValues(values, startIndex, endIndex, fillValue) {
     values[index] = fillValue;
   }
 }
-function isElementOfType(element, _ComponentType) {
+function isElementOfType(element) {
   return element != null && element.type != null;
 }
 
@@ -6206,21 +6411,27 @@ var Handle = /*#__PURE__*/function (_React$Component) {
       };
       var className = classnames((_classNames = {}, _defineProperty$2(_classNames, 'Slider-handle', true), _defineProperty$2(_classNames, 'Slider-handle--disabled', disabled), _defineProperty$2(_classNames, 'Slider-handle--active', isHandleMoving), _classNames));
       var TooltipClass = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'Slider-tooltip', true), _defineProperty$2(_classNames2, 'Tooltip', true), _defineProperty$2(_classNames2, 'd-none', !showTootlip), _classNames2));
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: className,
-        onMouseOver: this.handleMouseOver,
-        onMouseLeave: this.handleMouseLeave,
-        onMouseDown: this.beginHandleMovement,
-        onKeyDown: this.handleKeyDown,
-        onKeyUp: this.handleKeyUp,
-        ref: this.refHandlers.handle,
-        style: style,
-        tabIndex: 1,
-        "data-test": "DesignSystem-MultiSlider-Handle"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: TooltipClass,
-        style: style
-      }, label));
+      return (
+        /*#__PURE__*/
+        // TODO(a11y): fix accessibility
+
+        /* eslint-disable */
+        React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+          className: className,
+          onMouseOver: this.handleMouseOver,
+          onMouseLeave: this.handleMouseLeave,
+          onMouseDown: this.beginHandleMovement,
+          onKeyDown: this.handleKeyDown,
+          onKeyUp: this.handleKeyUp,
+          ref: this.refHandlers.handle,
+          style: style,
+          tabIndex: 1,
+          "data-test": "DesignSystem-MultiSlider-Handle"
+        }), /*#__PURE__*/React.createElement("div", {
+          className: TooltipClass,
+          style: style
+        }, label))
+      );
     }
   }]);
 
@@ -6478,7 +6689,10 @@ var MultiSlider = /*#__PURE__*/function (_React$Component) {
               foundHandle.changeValue(i);
             }
           }
-        };
+        }; // TODO(a11y): fix accessibility
+
+        /* eslint-disable */
+
 
         labels.push( /*#__PURE__*/React.createElement("div", {
           onClick: onClickHandler,
@@ -6675,7 +6889,7 @@ var OutsideClick = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return;
     }
 
-    if (!ReactDOM.findDOMNode(element.current).contains(event.target)) {
+    if (!element.current.contains(event.target)) {
       onOutsideClick(event);
     }
   }, []);
@@ -6828,26 +7042,32 @@ var StatusHint = function StatusHint(props) {
   var baseProps = extractBaseProps(props);
   var StatusHintClass = classnames(_defineProperty$2({}, 'StatusHint', true), className);
   var StatusHintIconClass = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'StatusHint-icon', true), _defineProperty$2(_classNames2, "StatusHint--".concat(appearance), appearance), _classNames2));
-  return /*#__PURE__*/React.createElement("div", _extends$3({
-    "data-test": "DesignSystem-StatusHint"
-  }, baseProps, {
-    className: StatusHintClass,
-    onClick: function onClick(e) {
-      return _onClick && _onClick(e);
-    },
-    onMouseEnter: function onMouseEnter(e) {
-      return _onMouseEnter && _onMouseEnter(e);
-    },
-    onMouseLeave: function onMouseLeave(e) {
-      return _onMouseLeave && _onMouseLeave(e);
-    }
-  }), /*#__PURE__*/React.createElement("span", {
-    "data-test": "DesignSystem-StatusHint--Icon",
-    className: StatusHintIconClass
-  }), /*#__PURE__*/React.createElement(Text, {
-    "data-test": "DesignSystem-StatusHint--Text",
-    weight: 'medium'
-  }, children));
+  return (
+    /*#__PURE__*/
+    // TODO(a11y): fix accessibility
+
+    /* eslint-disable */
+    React.createElement("div", _extends$3({
+      "data-test": "DesignSystem-StatusHint"
+    }, baseProps, {
+      className: StatusHintClass,
+      onClick: function onClick(e) {
+        return _onClick && _onClick(e);
+      },
+      onMouseEnter: function onMouseEnter(e) {
+        return _onMouseEnter && _onMouseEnter(e);
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        return _onMouseLeave && _onMouseLeave(e);
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      "data-test": "DesignSystem-StatusHint--Icon",
+      className: StatusHintIconClass
+    }), /*#__PURE__*/React.createElement(Text, {
+      "data-test": "DesignSystem-StatusHint--Text",
+      weight: 'medium'
+    }, children))
+  );
 };
 StatusHint.displayName = 'StatusHint';
 StatusHint.defaultProps = {
@@ -7054,8 +7274,10 @@ var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var SwitchWrapper = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'Switch-wrapper', true), _defineProperty$2(_classNames2, 'Switch-wrapper--disabled', disabled), _defineProperty$2(_classNames2, "Switch-wrapper--".concat(size), size), _defineProperty$2(_classNames2, 'Switch-wrapper--checked', checked), _defineProperty$2(_classNames2, 'Switch-wrapper--checkedDisabled', checked && disabled), _classNames2));
 
   var onChangeHandler = function onChangeHandler(event) {
-    if (checkedProp === undefined) setChecked(!checked);
-    if (onChange) onChange(event, !checked);
+    if (event.type == 'change' || isSpaceKey(event)) {
+      if (checkedProp === undefined) setChecked(!checked);
+      if (onChange) onChange(event, !checked);
+    }
   };
 
   return /*#__PURE__*/React.createElement("div", {
@@ -7069,7 +7291,8 @@ var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: ref,
     name: name,
     value: value,
-    className: "Switch-input"
+    className: "Switch-input",
+    onKeyUp: onChangeHandler
   })), /*#__PURE__*/React.createElement("span", {
     className: SwitchWrapper
   }));
@@ -7148,12 +7371,13 @@ ActionButton.defaultProps = {
 var Toast = function Toast(props) {
   var _classNames, _classNames2, _classNames4, _classNames5;
 
-  var appearance = props.appearance,
-      title = props.title,
+  var title = props.title,
       message = props.message,
       actions = props.actions,
       onClose = props.onClose,
       className = props.className;
+  var appearance = props.appearance;
+  appearance = appearance === 'default' ? 'info' : appearance;
   var baseProps = extractBaseProps(props);
   var wrapperClass = classnames((_classNames = {}, _defineProperty$2(_classNames, 'Toast', true), _defineProperty$2(_classNames, 'Toast--withMessage', message), _defineProperty$2(_classNames, "Toast--".concat(appearance), appearance), _classNames), className);
   var IconMapping = {
@@ -7212,7 +7436,7 @@ var Toast = function Toast(props) {
 };
 Toast.displayName = 'Toast';
 Toast.defaultProps = {
-  appearance: 'default'
+  appearance: 'info'
 };
 
 var objectWithoutPropertiesLoose = createCommonjsModule(function (module) {
@@ -11841,13 +12065,8 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
       onToggle(newValue === undefined ? !open : newValue, type);
     });
 
-    _defineProperty$2(_assertThisInitialized$2(_this), "findDOMNode", function (ref) {
-      return ReactDOM.findDOMNode(ref.current);
-    });
-
     _defineProperty$2(_assertThisInitialized$2(_this), "doesEventContainsElement", function (event, ref) {
-      var el = _this.findDOMNode(ref);
-
+      var el = ref.current;
       return el && el.contains(event.target);
     });
 
@@ -11913,7 +12132,7 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
         this._throttleWait = false;
 
         if (this.props.open) {
-          var triggerElement = this.findDOMNode(this.triggerRef);
+          var triggerElement = this.triggerRef.current;
           var zIndex = this.getZIndexForLayer(triggerElement);
           this.setState({
             zIndex: zIndex === undefined ? zIndex : zIndex + 1
@@ -12118,7 +12337,7 @@ _defineProperty$2(PopperWrapper, "defaultProps", {
 });
 
 var _excluded$9 = ["position", "customStyle", "dark", "children", "onToggle", "className", "hideOnReferenceEscape", "boundaryElement"];
-var propsList$1 = ['appendToBody', 'trigger', 'hoverable', 'on', 'open', 'closeOnBackdropClick', 'offset', 'closeOnScroll'];
+var propsList = ['appendToBody', 'trigger', 'hoverable', 'on', 'open', 'closeOnBackdropClick', 'offset', 'closeOnScroll'];
 var Popover = function Popover(props) {
   var position = props.position,
       customStyle = props.customStyle,
@@ -12127,7 +12346,8 @@ var Popover = function Popover(props) {
       onToggle = props.onToggle,
       className = props.className,
       hideOnReferenceEscape = props.hideOnReferenceEscape,
-      boundaryElement = props.boundaryElement,
+      _props$boundaryElemen = props.boundaryElement,
+      boundaryElement = _props$boundaryElemen === void 0 ? document.body : _props$boundaryElemen,
       rest = _objectWithoutProperties$1(props, _excluded$9);
 
   var _React$useState = React.useState(!!props.open),
@@ -12171,20 +12391,12 @@ var Popover = function Popover(props) {
     placement: position
   }), PopoverWrapper);
 };
-Popover.displayName = 'Popover'; // Popover.defaultProps = {
-//   ...filterProps(PopperWrapper.defaultProps, propsList, true),
-//   offset: 'large',
-//   position: 'bottom',
-//   hideOnReferenceEscape: true,
-//   customStyle: {},
-// }
-
-Popover.defaultProps = Object.assign({}, filterProps(PopperWrapper.defaultProps, propsList$1, true), {
+Popover.displayName = 'Popover';
+Popover.defaultProps = Object.assign({}, filterProps(PopperWrapper.defaultProps, propsList, true), {
   offset: 'large',
   position: 'bottom',
   hideOnReferenceEscape: true,
-  customStyle: {},
-  boundaryElement: document.body
+  customStyle: {}
 });
 
 var _excluded$8 = ["type", "onClick"];
@@ -12322,32 +12534,39 @@ var ChipInput = function ChipInput(props) {
       }
     }, rest));
   });
-  return /*#__PURE__*/React.createElement("div", _extends$3({
-    "data-test": "DesignSystem-ChipInput"
-  }, baseProps, {
-    className: ChipInputClass,
-    onClick: onClickHandler
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "ChipInput-wrapper"
-  }, chips && chips.length > 0 && chipComponents, /*#__PURE__*/React.createElement("input", {
-    "data-test": "DesignSystem-ChipInput--Input",
-    ref: inputRef,
-    className: "ChipInput-input",
-    autoFocus: autoFocus,
-    placeholder: placeholder,
-    disabled: disabled,
-    value: inputValue,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    onChange: onInputChangeHandler,
-    onKeyDown: onKeyDownHandler
-  })), chips.length > 0 && /*#__PURE__*/React.createElement(Icon, {
-    "data-test": "DesignSystem-ChipInput--Icon",
-    name: "close",
-    appearance: "subtle",
-    className: "ChipInput-icon",
-    onClick: onDeleteAllHandler
-  }));
+  return (
+    /*#__PURE__*/
+
+    /* TODO(a11y): fix accessibility  */
+
+    /* eslint-disable  */
+    React.createElement("div", _extends$3({
+      "data-test": "DesignSystem-ChipInput"
+    }, baseProps, {
+      className: ChipInputClass,
+      onClick: onClickHandler
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "ChipInput-wrapper"
+    }, chips && chips.length > 0 && chipComponents, /*#__PURE__*/React.createElement("input", {
+      "data-test": "DesignSystem-ChipInput--Input",
+      ref: inputRef,
+      className: "ChipInput-input",
+      autoFocus: autoFocus,
+      placeholder: placeholder,
+      disabled: disabled,
+      value: inputValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onChange: onInputChangeHandler,
+      onKeyDown: onKeyDownHandler
+    })), chips.length > 0 && /*#__PURE__*/React.createElement(Icon, {
+      "data-test": "DesignSystem-ChipInput--Icon",
+      name: "close",
+      appearance: "subtle",
+      className: "ChipInput-icon",
+      onClick: onDeleteAllHandler
+    }))
+  );
 };
 ChipInput.displayName = 'ChipInput';
 ChipInput.defaultProps = {
@@ -12447,21 +12666,26 @@ var MenuItem = function MenuItem(props) {
   };
 
   if (!expanded && !menu.icon) return null;
-  return /*#__PURE__*/React.createElement("div", _extends$3({
-    className: ItemClass
-  }, baseProps, {
-    onClick: onClickHandler
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-center overflow-hidden"
-  }, menu.icon && /*#__PURE__*/React.createElement(Icon, {
-    "data-test": "DesignSystem-VerticalNav--Icon",
-    className: expanded ? 'mr-4' : '',
-    name: menu.icon,
-    appearance: getIconAppearance(isActive, menu.disabled)
-  }), expanded && /*#__PURE__*/React.createElement(Text, {
-    "data-test": "DesignSystem-VerticalNav--Text",
-    appearance: getTextAppearance(isActive, menu.disabled)
-  }, menu.label)), expanded && renderSubMenu());
+  return (
+    /*#__PURE__*/
+    // TODO(a11y)
+    // eslint-disable-next-line
+    React.createElement("div", _extends$3({
+      className: ItemClass
+    }, baseProps, {
+      onClick: onClickHandler
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "d-flex align-items-center overflow-hidden"
+    }, menu.icon && /*#__PURE__*/React.createElement(Icon, {
+      "data-test": "DesignSystem-VerticalNav--Icon",
+      className: expanded ? 'mr-4' : '',
+      name: menu.icon,
+      appearance: getIconAppearance(isActive, menu.disabled)
+    }), expanded && /*#__PURE__*/React.createElement(Text, {
+      "data-test": "DesignSystem-VerticalNav--Text",
+      appearance: getTextAppearance(isActive, menu.disabled)
+    }, menu.label)), expanded && renderSubMenu())
+  );
 };
 MenuItem.defaultProps = {
   isActive: false
@@ -12634,16 +12858,21 @@ var HorizontalNav = function HorizontalNav(props) {
     var menuClasses = classnames((_classNames3 = {
       'HorizontalNav-menu': true
     }, _defineProperty$2(_classNames3, 'HorizontalNav-menu--active', isActive), _defineProperty$2(_classNames3, 'HorizontalNav-menu--disabled', menu.disabled), _classNames3));
-    return /*#__PURE__*/React.createElement("div", {
-      "data-test": "DesignSystem-HorizontalNav",
-      key: index,
-      className: menuClasses,
-      onClick: onClickHandler(menu)
-    }, renderIcon(menu, isActive), /*#__PURE__*/React.createElement(Text, {
-      appearance: getTextAppearance(isActive, menu.disabled),
-      "data-test": "DesignSystem-HorizontalNav--Text",
-      className: "HorizontalNav-menuText"
-    }, menu.label));
+    return (
+      /*#__PURE__*/
+      // TODO(a11y)
+      // eslint-disable-next-line
+      React.createElement("div", {
+        "data-test": "DesignSystem-HorizontalNav",
+        key: index,
+        className: menuClasses,
+        onClick: onClickHandler(menu)
+      }, renderIcon(menu, isActive), /*#__PURE__*/React.createElement(Text, {
+        appearance: getTextAppearance(isActive, menu.disabled),
+        "data-test": "DesignSystem-HorizontalNav--Text",
+        className: "HorizontalNav-menuText"
+      }, menu.label))
+    );
   });
   return /*#__PURE__*/React.createElement("div", _extends$3({}, baseProps, {
     className: classes
@@ -12651,7 +12880,7 @@ var HorizontalNav = function HorizontalNav(props) {
 };
 
 var _excluded$7 = ["children", "tooltip"];
-var propsList = ['trigger', 'on', 'open', 'offset', 'onToggle', 'dark', 'customStyle', 'closeOnBackdropClick', 'hideOnReferenceEscape', 'closeOnScroll'];
+var tooltipPropsList = ['trigger', 'on', 'open', 'offset', 'onToggle', 'dark', 'customStyle', 'closeOnBackdropClick', 'hideOnReferenceEscape', 'closeOnScroll'];
 var Tooltip = function Tooltip(props) {
   var children = props.children,
       tooltip = props.tooltip,
@@ -12673,7 +12902,7 @@ var Tooltip = function Tooltip(props) {
 //   hoverable: false
 // }, propsList);
 
-Tooltip.defaultProps = Object.assign({}, filterProps(Popover.defaultProps, propsList), {
+Tooltip.defaultProps = Object.assign({}, filterProps(Popover.defaultProps, tooltipPropsList), {
   hoverable: false
 });
 
@@ -12864,7 +13093,8 @@ var getUpdatedZIndex = function getUpdatedZIndex(ele) {
     zIndex = Math.max(zIndex, prevZIndex + 10);
   });
   return zIndex > 0 ? zIndex : undefined;
-};
+}; // keyboard event, boolean?, (event: Event) => void
+
 var closeOnEscapeKeypress = function closeOnEscapeKeypress(event, isTopOverlay, onClose) {
   if (event.key === 'Escape' && isTopOverlay) {
     onClose(event); // prevent browser-specific escape key behavior (Safari exits fullscreen)
@@ -13760,11 +13990,16 @@ var Box = function Box(props) {
       className = props.className;
   var baseProps = extractBaseProps(props);
   var MessageClass = classnames((_classNames = {}, _defineProperty$2(_classNames, 'Box', true), _defineProperty$2(_classNames, "Box--".concat(type), type), _defineProperty$2(_classNames, 'Box--typing', isTyping), _defineProperty$2(_classNames, 'Box--urgent', statusType === 'urgent'), _defineProperty$2(_classNames, "Box-".concat(type, "--withStatus"), withStatus || isTyping), _classNames), className);
+  /* TODO(a11y): fix accessibility  */
+
+  /* eslint-disable  */
+
   return /*#__PURE__*/React.createElement("div", _extends$3({}, baseProps, {
     className: MessageClass,
     onClick: onClick,
     "data-test": "DesignSystem-ChatMessage--Box"
   }), children);
+  /* eslint-enable  */
 };
 Box.displayName = 'Box';
 
@@ -13860,7 +14095,11 @@ var EmptyState = function EmptyState(props) {
     style: {
       height: imageHeight[size]
     }
-  }, image), imageSrc && !image && /*#__PURE__*/React.createElement("img", {
+  }, image), imageSrc && !image &&
+  /*#__PURE__*/
+  //TODO(a11y)
+  //eslint-disable-next-line
+  React.createElement("img", {
     src: imageSrc,
     height: imageHeight[size],
     "data-test": "DesignSystem-EmptyState--Img"
@@ -14083,26 +14322,36 @@ var EditableInput = function EditableInput(props) {
   };
 
   var onChangeHandler = function onChangeHandler(eventType) {
-    var _inputRef$current;
-
     switch (eventType) {
       case 'edit':
-        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-        setEditing(true);
+        {
+          var _inputRef$current;
+
+          (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+          setEditing(true);
+          setShowComponent(true);
+          break;
+        }
 
       case 'hover':
-        setShowComponent(true);
-        return;
+        {
+          setShowComponent(true);
+          break;
+        }
 
       case 'default':
-        setShowComponent(false);
+        {
+          setShowComponent(false);
+        }
     }
   };
 
   var inputComponent = /*#__PURE__*/React.createElement(Input, _extends$3({
     defaultValue: inputValue,
     placeholder: placeholder,
-    className: InputClass,
+    className: InputClass // TODO(a11y)
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    ,
     autoFocus: editing,
     size: size,
     onChange: onInputChangeHandler,
@@ -14149,33 +14398,38 @@ var EditableInput = function EditableInput(props) {
     }, value || placeholder);
   };
 
-  return /*#__PURE__*/React.createElement("div", _extends$3({
-    "data-test": "DesignSystem-EditableInput"
-  }, baseProps, {
-    className: EditableInputClass,
-    onKeyDown: onKeyDown
-  }), /*#__PURE__*/React.createElement(Editable, {
-    onChange: onChangeHandler,
-    editing: editing
-  }, renderChildren()), editing && /*#__PURE__*/React.createElement("div", {
-    className: ActionClass,
-    "data-test": "DesignSystem-EditableInput--Actions"
-  }, /*#__PURE__*/React.createElement(Button, {
-    icon: "clear",
-    className: "mr-3",
-    size: "tiny",
-    onClick: function onClick() {
-      setDefaultComponent(value);
-    },
-    "data-test": "DesignSystem-EditableInput--Discard"
-  }), /*#__PURE__*/React.createElement(Button, {
-    icon: "check",
-    appearance: "primary",
-    size: "tiny",
-    disabled: disableSaveAction,
-    onClick: onSaveChanges,
-    "data-test": "DesignSystem-EditableInput--Save"
-  })));
+  return (
+    /*#__PURE__*/
+    // TODO(a11y)
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", _extends$3({
+      "data-test": "DesignSystem-EditableInput"
+    }, baseProps, {
+      className: EditableInputClass,
+      onKeyDown: onKeyDown
+    }), /*#__PURE__*/React.createElement(Editable, {
+      onChange: onChangeHandler,
+      editing: editing
+    }, renderChildren()), editing && /*#__PURE__*/React.createElement("div", {
+      className: ActionClass,
+      "data-test": "DesignSystem-EditableInput--Actions"
+    }, /*#__PURE__*/React.createElement(Button, {
+      icon: "clear",
+      className: "mr-3",
+      size: "tiny",
+      onClick: function onClick() {
+        setDefaultComponent(value);
+      },
+      "data-test": "DesignSystem-EditableInput--Discard"
+    }), /*#__PURE__*/React.createElement(Button, {
+      icon: "check",
+      appearance: "primary",
+      size: "tiny",
+      disabled: disableSaveAction,
+      onClick: onSaveChanges,
+      "data-test": "DesignSystem-EditableInput--Save"
+    })))
+  );
 };
 EditableInput.defaultProps = {
   size: 'regular',
@@ -14250,14 +14504,21 @@ var EditableChipInput = function EditableChipInput(props) {
   var onChangeHandler = function onChangeHandler(eventType) {
     switch (eventType) {
       case 'edit':
-        setShowComponent(true);
+        {
+          setShowComponent(true);
+          break;
+        }
 
       case 'hover':
-        return;
+        {
+          break;
+        }
 
       case 'default':
-        setShowComponent(false);
-        return;
+        {
+          setShowComponent(false);
+          break;
+        }
     }
   };
 
@@ -14413,19 +14674,24 @@ var Step = function Step(props) {
 
   var iconAppearance = completed ? 'info' : disabled ? 'disabled' : active ? 'info' : 'default';
   var appearance = active ? 'link' : disabled ? 'disabled' : 'default';
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": "DesignSystem-Step",
-    className: StepClass,
-    onClick: onClickHandle
-  }, /*#__PURE__*/React.createElement(Icon, {
-    "data-test": "DesignSystem-Step--Icon",
-    name: completed ? 'check_circle' : 'radio_button_unchecked',
-    appearance: iconAppearance,
-    className: "mr-3 my-4"
-  }), label && /*#__PURE__*/React.createElement(Text, {
-    weight: "medium",
-    appearance: appearance
-  }, label));
+  return (
+    /*#__PURE__*/
+    // TODO(a11y)
+    // eslint-disable-next-line
+    React.createElement("div", {
+      "data-test": "DesignSystem-Step",
+      className: StepClass,
+      onClick: onClickHandle
+    }, /*#__PURE__*/React.createElement(Icon, {
+      "data-test": "DesignSystem-Step--Icon",
+      name: completed ? 'check_circle' : 'radio_button_unchecked',
+      appearance: iconAppearance,
+      className: "mr-3 my-4"
+    }), label && /*#__PURE__*/React.createElement(Text, {
+      weight: "medium",
+      appearance: appearance
+    }, label))
+  );
 };
 Step.displayName = 'Step';
 
@@ -14630,13 +14896,12 @@ var Trigger = function Trigger(props) {
   }, startLabel && /*#__PURE__*/React.createElement(Label, {
     required: startInputOptions.required,
     withInput: true
-  }, startLabel), /*#__PURE__*/React.createElement(InputMask, _extends$3({
+  }, startLabel), /*#__PURE__*/React.createElement(X, _extends$3({
     icon: "events",
     placeholder: inputFormat
   }, startInputOptions, {
     mask: mask,
-    value: startDate ? translateToString(inputFormat, startDate) : init // @ts-ignore
-    ? InputMask.utils.getDefaultValue(mask, startPlaceholderChar) : '',
+    value: startDate ? translateToString(inputFormat, startDate) : init ? X.utils.getDefaultValue(mask, startPlaceholderChar) : '',
     onChange: function onChange(e, val) {
       onChangeHandler(e, val || '', 'start');
     },
@@ -14660,13 +14925,12 @@ var Trigger = function Trigger(props) {
   }, endLabel && /*#__PURE__*/React.createElement(Label, {
     required: endInputOptions.required,
     withInput: true
-  }, endLabel), /*#__PURE__*/React.createElement(InputMask, _extends$3({
+  }, endLabel), /*#__PURE__*/React.createElement(X, _extends$3({
     icon: "events",
     placeholder: inputFormat
   }, endInputOptions, {
     mask: mask,
-    value: endDate ? translateToString(inputFormat, endDate) : init // @ts-ignore
-    ? InputMask.utils.getDefaultValue(mask, endPlaceholderChar) : '',
+    value: endDate ? translateToString(inputFormat, endDate) : init ? X.utils.getDefaultValue(mask, endPlaceholderChar) : '',
     onChange: function onChange(e, val) {
       onChangeHandler(e, val || '', 'end');
     },
@@ -14704,9 +14968,8 @@ var SingleInputTrigger = function SingleInputTrigger(props) {
   var errorMessage = inputOptions.caption === undefined ? 'Invalid value' : inputOptions.caption;
   var label = inputOptions.label;
   var _inputOptions$placeho = inputOptions.placeholderChar,
-      placeholderChar = _inputOptions$placeho === void 0 ? '_' : _inputOptions$placeho; // @ts-ignore
-
-  var defaultValue = InputMask.utils.getDefaultValue(mask, placeholderChar).split(' - ');
+      placeholderChar = _inputOptions$placeho === void 0 ? '_' : _inputOptions$placeho;
+  var defaultValue = X.utils.getDefaultValue(mask, placeholderChar).split(' - ');
   var sValue = startValue || defaultValue[0];
   var eValue = endValue || defaultValue[1];
 
@@ -14797,7 +15060,7 @@ var SingleInputTrigger = function SingleInputTrigger(props) {
   }, /*#__PURE__*/React.createElement(Column, null, label && /*#__PURE__*/React.createElement(Label, {
     required: inputOptions.required,
     withInput: true
-  }, label), /*#__PURE__*/React.createElement(InputMask, _extends$3({
+  }, label), /*#__PURE__*/React.createElement(X, _extends$3({
     icon: "events",
     placeholder: "".concat(inputFormat, " - ").concat(inputFormat)
   }, inputOptions, {
@@ -15214,7 +15477,17 @@ var DateRangePicker = /*#__PURE__*/function (_React$Component) {
   }]);
 
   return DateRangePicker;
-}(React.Component); // @ts-ignore
+}(React.Component);
+
+_defineProperty$2(DateRangePicker, "utils", {
+  getCurrentWeek: getCurrentWeek,
+  getPreviousWeek: getPreviousWeek,
+  getPreviousMonth: getPreviousMonth,
+  getPrevious90Days: getPrevious90Days,
+  getCustomDates: getCustomDates,
+  getCurrentYear: getCurrentYear,
+  getCurrentMonth: getCurrentMonth
+});
 
 _defineProperty$2(DateRangePicker, "defaultProps", _objectSpread2(_objectSpread2({}, Calendar.defaultProps), {}, {
   children: /*#__PURE__*/React.createElement(React.Fragment, null),
@@ -15235,16 +15508,6 @@ _defineProperty$2(DateRangePicker, "defaultProps", _objectSpread2(_objectSpread2
   }
 }));
 
-DateRangePicker.utils = {
-  getCurrentWeek: getCurrentWeek,
-  getPreviousWeek: getPreviousWeek,
-  getPreviousMonth: getPreviousMonth,
-  getPrevious90Days: getPrevious90Days,
-  getCustomDates: getCustomDates,
-  getCurrentYear: getCurrentYear,
-  getCurrentMonth: getCurrentMonth
-};
-
 var TabsWrapper = function TabsWrapper(props) {
   var children = props.children,
       onTabChange = props.onTabChange,
@@ -15275,14 +15538,19 @@ var TabsWrapper = function TabsWrapper(props) {
         label = _child$props.label,
         disabled = _child$props.disabled;
     var tabHeaderClass = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'Tab', true), _defineProperty$2(_classNames2, 'Tab--disabled', disabled), _defineProperty$2(_classNames2, 'Tab--active', !disabled && active === index), _classNames2));
-    return /*#__PURE__*/React.createElement("div", {
-      "data-test": "DesignSystem-Tabs--Header",
-      key: index,
-      className: tabHeaderClass,
-      onClick: function onClick() {
-        return !disabled && tabClickHandler(index);
-      }
-    }, label);
+    return (
+      /*#__PURE__*/
+      // TODO(a11y)
+      //  eslint-disable-next-line
+      React.createElement("div", {
+        "data-test": "DesignSystem-Tabs--Header",
+        key: index,
+        className: tabHeaderClass,
+        onClick: function onClick() {
+          return !disabled && tabClickHandler(index);
+        }
+      }, label)
+    );
   });
   return /*#__PURE__*/React.createElement("div", _extends$3({
     "data-test": "DesignSystem-TabsWrapper"
@@ -15432,21 +15700,26 @@ var Tabs = function Tabs(props) {
     var currentTabProp = children && 'props' in tab ? tab.props : tab;
     var disabled = currentTabProp.disabled;
     var tabHeaderClass = classnames((_classNames4 = {}, _defineProperty$2(_classNames4, 'Tab', true), _defineProperty$2(_classNames4, 'Tab--disabled', disabled), _defineProperty$2(_classNames4, 'Tab--active', !disabled && activeIndex === index), _classNames4));
-    return /*#__PURE__*/React.createElement("div", {
-      ref: function ref(element) {
-        return element && !disabled && tabRefs.push(element);
-      },
-      "data-test": "DesignSystem-Tabs--Tab",
-      key: index,
-      className: tabHeaderClass,
-      onClick: function onClick() {
-        return !disabled && tabClickHandler(index);
-      },
-      onKeyDown: function onKeyDown(event) {
-        return tabKeyDownHandler(event, index);
-      },
-      tabIndex: activeIndex === index ? 0 : -1
-    }, renderTab(currentTabProp, index));
+    return (
+      /*#__PURE__*/
+      // TODO(a11y)
+      //  eslint-disable-next-line
+      React.createElement("div", {
+        ref: function ref(element) {
+          return element && !disabled && tabRefs.push(element);
+        },
+        "data-test": "DesignSystem-Tabs--Tab",
+        key: index,
+        className: tabHeaderClass,
+        onClick: function onClick() {
+          return !disabled && tabClickHandler(index);
+        },
+        onKeyDown: function onKeyDown(event) {
+          return tabKeyDownHandler(event, index);
+        },
+        tabIndex: activeIndex === index ? 0 : -1
+      }, renderTab(currentTabProp, index))
+    );
   });
   return /*#__PURE__*/React.createElement("div", _extends$3({
     "data-test": "DesignSystem-Tabs"
@@ -16013,10 +16286,8 @@ var DropzoneBase = function DropzoneBase(props) {
     if (inputRef.current) {
       dispatch({
         type: 'openDialog'
-      }); // @ts-ignore
-
-      inputRef.current.value = null; // @ts-ignore
-
+      });
+      inputRef.current.value = '';
       inputRef.current.click();
     }
   }, [dispatch]);
@@ -16025,10 +16296,9 @@ var DropzoneBase = function DropzoneBase(props) {
     if (isFileDialogActive) {
       setTimeout(function () {
         if (inputRef.current) {
-          // @ts-ignore
           var _files = inputRef.current.files;
 
-          if (!_files.length) {
+          if (!_files || !_files.length) {
             dispatch({
               type: 'closeDialog'
             });
@@ -16050,7 +16320,6 @@ var DropzoneBase = function DropzoneBase(props) {
   }, [inputRef, isFileDialogActive, onFileDialogCancel]); // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
 
   var onKeyDownCb = useCallback(function (event) {
-    // @ts-ignore
     if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
       return;
     }
@@ -16074,8 +16343,8 @@ var DropzoneBase = function DropzoneBase(props) {
   var dragTargetsRef = useRef([]);
 
   var onDocumentDrop = function onDocumentDrop(event) {
-    // @ts-ignore
-    if (rootRef.current && rootRef.current.contains(event.target)) {
+    // Not every event target type is element so we have to check if it is.
+    if (event.target instanceof HTMLDivElement && rootRef.current && rootRef.current.contains(event.target)) {
       return;
     }
 
@@ -16098,8 +16367,7 @@ var DropzoneBase = function DropzoneBase(props) {
   }, [rootRef, preventDropOnDocument]);
   var onDragEnterCb = useCallback(function (event) {
     event.preventDefault();
-    event.persist(); // @ts-ignore
-
+    event.persist();
     dragTargetsRef.current = [].concat(_toConsumableArray(dragTargetsRef.current), [event.target]);
 
     if (isEvtWithFiles(event)) {
@@ -16141,11 +16409,9 @@ var DropzoneBase = function DropzoneBase(props) {
   var onDragLeaveCb = useCallback(function (event) {
     event.preventDefault();
     event.persist();
-    var targets = dragTargetsRef.current.filter( // @ts-ignore
-    function (target) {
+    var targets = dragTargetsRef.current.filter(function (target) {
       return rootRef.current && rootRef.current.contains(target);
-    }); // @ts-ignore
-
+    });
     var targetIdx = targets.indexOf(event.target);
 
     if (targetIdx !== -1) {
@@ -16204,11 +16470,12 @@ var DropzoneBase = function DropzoneBase(props) {
               errors = errors.concat(customErrors);
             }
 
+            var filteredErrors = errors.filter(function (e) {
+              return e;
+            });
             fileRejections.push({
               file: file,
-              errors: errors.filter(function (e) {
-                return e;
-              })
+              errors: filteredErrors
             });
           }
         });
@@ -16237,26 +16504,18 @@ var DropzoneBase = function DropzoneBase(props) {
     });
   }, [multiple, accept, minSize, maxSize, getFilesFromEvent, onDrop, onDropAccepted, onDropRejected]);
 
-  var composeHandler = function composeHandler(fn) {
-    return disabled ? null : fn;
-  };
-
-  var composeKeyboardHandler = function composeKeyboardHandler(_fn) {
-    return null;
-  };
-
   var composeDragHandler = function composeDragHandler(fn) {
-    return composeHandler(fn);
+    return disabled ? null : fn;
   };
 
   var getRootProps = useMemo(function () {
     return function () {
       var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref$refKey = _ref.refKey,
-          refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
-          onKeyDown = _ref.onKeyDown,
-          onFocus = _ref.onFocus,
-          onBlur = _ref.onBlur;
+          refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey;
+          _ref.onKeyDown;
+          _ref.onFocus;
+          _ref.onBlur;
           _ref.onClick;
           var onDragEnterCallback = _ref.onDragEnterCallback,
           onDragOverCallback = _ref.onDragOverCallback,
@@ -16265,10 +16524,6 @@ var DropzoneBase = function DropzoneBase(props) {
           rest = _objectWithoutProperties$1(_ref, _excluded$2);
 
       return _objectSpread2(_defineProperty$2({
-        onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
-        onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
-        onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
-        // onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),
         onDragEnter: composeDragHandler(composeEventHandlers(onDragEnterCallback, onDragEnterCb)),
         onDragOver: composeDragHandler(composeEventHandlers(onDragOverCallback, onDragOverCb)),
         onDragLeave: composeDragHandler(composeEventHandlers(onDragLeaveCallback, onDragLeaveCb)),
@@ -16295,8 +16550,8 @@ var DropzoneBase = function DropzoneBase(props) {
         style: {
           display: 'none'
         },
-        onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),
-        onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),
+        onChange: composeDragHandler(composeEventHandlers(onChange, onDropCb)),
+        onClick: composeDragHandler(composeEventHandlers(onClick, onInputElementClick)),
         autoComplete: 'off',
         tabIndex: -1
       }, refKey, inputRef);
@@ -16330,7 +16585,7 @@ var DropzoneBase = function DropzoneBase(props) {
     draggedFiles: draggedFiles,
     fileError: fileError,
     isFocused: isFocused && !disabled,
-    open: composeHandler(openFileDialog)
+    open: composeDragHandler(openFileDialog)
   });
 };
 DropzoneBase.displayName = 'DropzoneBase';
@@ -16407,42 +16662,42 @@ var Dropzone = function Dropzone(props) {
   var WrapperClass = classnames((_classNames3 = {}, _defineProperty$2(_classNames3, 'DropzoneWrapper', true), _defineProperty$2(_classNames3, "DropzoneWrapper--".concat(type), true), _classNames3));
 
   var renderDropzone = function renderDropzone() {
-    if (isDragReject) return /*#__PURE__*/React__default.createElement(DropzoneError, {
+    if (isDragReject) return /*#__PURE__*/React.createElement(DropzoneError, {
       type: type,
       error: fileErrorMessages[fileError]
     });
-    if (isDragActive) return /*#__PURE__*/React__default.createElement(DropzoneActive, {
+    if (isDragActive) return /*#__PURE__*/React.createElement(DropzoneActive, {
       type: type
     });
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, type !== 'tight' && /*#__PURE__*/React__default.createElement(Icon, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, type !== 'tight' && /*#__PURE__*/React.createElement(Icon, {
       name: "backup",
       size: 64,
       className: IconClass
-    }), /*#__PURE__*/React__default.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: WrapperClass,
       "data-test": "DesignSystem-Dropzone-Wrapper"
-    }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(Text, {
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Text, {
       size: "large",
       weight: "strong",
       className: "mr-2",
       appearance: disabled ? 'disabled' : 'default'
-    }, "Drag your files here or"), /*#__PURE__*/React__default.createElement("span", {
+    }, "Drag your files here or"), /*#__PURE__*/React.createElement("span", {
       className: "cursor-pointer",
       onClick: open
-    }, /*#__PURE__*/React__default.createElement(Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       size: "large",
       weight: "strong",
       appearance: disabled ? 'disabled' : 'link'
-    }, "browse files")), /*#__PURE__*/React__default.createElement("input", getInputProps())), formatLabel && /*#__PURE__*/React__default.createElement(Text, {
+    }, "browse files")), /*#__PURE__*/React.createElement("input", getInputProps())), formatLabel && /*#__PURE__*/React.createElement(Text, {
       appearance: disabled ? 'disabled' : 'subtle'
-    }, formatLabel), sizeLabel && /*#__PURE__*/React__default.createElement(Text, {
+    }, formatLabel), sizeLabel && /*#__PURE__*/React.createElement(Text, {
       appearance: disabled ? 'disabled' : 'subtle'
-    }, sizeLabel), sampleFileLink && /*#__PURE__*/React__default.createElement("div", {
+    }, sizeLabel), sampleFileLink && /*#__PURE__*/React.createElement("div", {
       className: "mt-5"
     }, sampleFileLink)));
   };
 
-  return /*#__PURE__*/React__default.createElement("div", _extends$3({}, getRootProps(), baseProps, {
+  return /*#__PURE__*/React.createElement("div", _extends$3({}, getRootProps(), baseProps, {
     className: DropzoneClass,
     "data-test": "DesignSystem-Dropzone"
   }), renderDropzone());
@@ -16597,38 +16852,43 @@ var FileUploaderItem = function FileUploaderItem(props) {
   var name = file.name;
   var baseProps = extractBaseProps(props);
   var FileItemClass = classnames(_defineProperty$2({}, 'FileUploaderItem', true), className);
-  return /*#__PURE__*/React.createElement("div", _extends$3({}, baseProps, {
-    "data-test": "DesignSystem-FileUploader--Item",
-    className: FileItemClass,
-    onClick: function onClick() {
-      return _onClick && _onClick(file, id);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "FileUploaderItem-file"
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: "FileUploaderItem-text",
-    appearance: status === 'completed' ? 'default' : 'subtle'
-  }, name), /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-center"
-  }, /*#__PURE__*/React.createElement(FileUploaderStatus, {
-    file: file,
-    id: id,
-    status: status,
-    progress: progress,
-    onRetry: function onRetry() {
-      return _onRetry && _onRetry(file, id);
-    }
-  }), /*#__PURE__*/React.createElement(Button, {
-    "data-test": "DesignSystem-FileUploader--CancelButton",
-    appearance: "transparent",
-    size: "regular",
-    onClick: function onClick() {
-      return onDelete && onDelete(file, id);
-    },
-    icon: "close"
-  }))), status === 'error' && /*#__PURE__*/React.createElement(Caption, {
-    error: true
-  }, errorMessage));
+  return (
+    /*#__PURE__*/
+    // TODO(a11y)
+    //  eslint-disable-next-line
+    React.createElement("div", _extends$3({}, baseProps, {
+      "data-test": "DesignSystem-FileUploader--Item",
+      className: FileItemClass,
+      onClick: function onClick() {
+        return _onClick && _onClick(file, id);
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "FileUploaderItem-file"
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: "FileUploaderItem-text",
+      appearance: status === 'completed' ? 'default' : 'subtle'
+    }, name), /*#__PURE__*/React.createElement("div", {
+      className: "d-flex align-items-center"
+    }, /*#__PURE__*/React.createElement(FileUploaderStatus, {
+      file: file,
+      id: id,
+      status: status,
+      progress: progress,
+      onRetry: function onRetry() {
+        return _onRetry && _onRetry(file, id);
+      }
+    }), /*#__PURE__*/React.createElement(Button, {
+      "data-test": "DesignSystem-FileUploader--CancelButton",
+      appearance: "transparent",
+      size: "regular",
+      onClick: function onClick() {
+        return onDelete && onDelete(file, id);
+      },
+      icon: "close"
+    }))), status === 'error' && /*#__PURE__*/React.createElement(Caption, {
+      error: true
+    }, errorMessage))
+  );
 };
 FileUploaderItem.defaultProps = {
   status: 'completed',
@@ -16922,7 +17182,7 @@ var defaultProps$1 = {
   showFilters: true
 };
 
-var context = /*#__PURE__*/React__default.createContext(_objectSpread2(_objectSpread2({}, defaultProps$1), {}, {
+var context = /*#__PURE__*/React.createContext(_objectSpread2(_objectSpread2({}, defaultProps$1), {}, {
   ref: null
 }));
 var GridProvider = context.Provider;
@@ -17124,7 +17384,11 @@ var HeaderCell = function HeaderCell(props) {
       return onMenuChange(name, selected);
     },
     minWidth: 176
-  }))), schema.resizable && /*#__PURE__*/React.createElement("span", {
+  }))), schema.resizable &&
+  /*#__PURE__*/
+  //TODO(a11y)
+  //eslint-disable-next-line
+  React.createElement("span", {
     className: "Grid-cellResize",
     onMouseDown: function onMouseDown() {
       resizeCol({
@@ -17185,18 +17449,19 @@ var BodyCell = function BodyCell(props) {
 
 var Cell = function Cell(props) {
   var context$1 = React.useContext(context);
-  var isHead = props.isHead,
-      firstCell = props.firstCell,
-      schema = props.schema,
-      data = props.data,
-      rowIndex = props.rowIndex,
-      colIndex = props.colIndex,
-      expandedState = props.expandedState,
-      onSelectAll = props.onSelectAll,
-      onMenuChange = props.onMenuChange,
-      onFilterChange = props.onFilterChange,
-      updateColumnSchema = props.updateColumnSchema,
-      reorderColumn = props.reorderColumn;
+  var _ref = props,
+      isHead = _ref.isHead,
+      firstCell = _ref.firstCell,
+      schema = _ref.schema,
+      data = _ref.data,
+      rowIndex = _ref.rowIndex,
+      colIndex = _ref.colIndex,
+      expandedState = _ref.expandedState,
+      onSelectAll = _ref.onSelectAll,
+      onMenuChange = _ref.onMenuChange,
+      onFilterChange = _ref.onFilterChange,
+      updateColumnSchema = _ref.updateColumnSchema,
+      reorderColumn = _ref.reorderColumn;
   var draggable = context$1.draggable,
       separator = context$1.separator,
       nestedRows = context$1.nestedRows,
@@ -17246,7 +17511,7 @@ var Cell = function Cell(props) {
           name: name,
           type: pinned || ''
         };
-        if (from.type === to.type) reorderColumn(from.name, to.name);
+        if (from.type === to.type && reorderColumn) reorderColumn(from.name, to.name);
       }
     },
     style: {
@@ -17699,10 +17964,10 @@ var VirtualScroll = /*#__PURE__*/function (_React$Component) {
           length = _this$props2.length,
           buffer = _this$props2.buffer;
           _this$props2.offset;
-          _this$props2.renderItem;
+          _this$props2.renderItems;
           _this$props2.minItemHeight;
           var forwardRef = _this$props2.forwardRef,
-          rest = _objectWithoutProperties(_this$props2, ["totalLength", "length", "buffer", "offset", "renderItem", "minItemHeight", "forwardRef"]);
+          rest = _objectWithoutProperties(_this$props2, ["totalLength", "length", "buffer", "offset", "renderItems", "minItemHeight", "forwardRef"]);
 
       var _this$state = this.state,
           init = _this$state.init,
@@ -17746,6 +18011,7 @@ _defineProperty(VirtualScroll, "defaultProps", {
 
 var index = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(VirtualScroll, _extends({
+    key: props.totalLength,
     forwardRef: ref
   }, props));
 });
@@ -17794,17 +18060,22 @@ var GridRow = function GridRow(props) {
 
   var renderCheckbox = function renderCheckbox(show) {
     if (!show || !withCheckbox) return null;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "Grid-cell Grid-cell--body Grid-cell--checkbox",
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    }, loading ? /*#__PURE__*/React.createElement(Placeholder, null) : /*#__PURE__*/React.createElement(Checkbox, {
-      checked: !!data._selected,
-      onChange: function onChange(event) {
-        onSelect(rI, event.target.checked);
-      }
-    }));
+    return (
+      /*#__PURE__*/
+      // TODO(a11y)
+      // eslint-disable-next-line
+      React.createElement("div", {
+        className: "Grid-cell Grid-cell--body Grid-cell--checkbox",
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, loading ? /*#__PURE__*/React.createElement(Placeholder, null) : /*#__PURE__*/React.createElement(Checkbox, {
+        checked: !!data._selected,
+        onChange: function onChange(event) {
+          onSelect(rI, event.target.checked);
+        }
+      }))
+    );
   };
 
   var renderSchema = function renderSchema(currSchema, shouldRenderCheckbox, pinned) {
@@ -19174,6 +19445,7 @@ var Table = /*#__PURE__*/function (_React$Component) {
       }, headerAttr), headerChildren)), /*#__PURE__*/React.createElement("div", {
         className: "Table-grid"
       }, /*#__PURE__*/React.createElement(Grid, _extends$3({}, this.state, {
+        key: this.state.searchTerm,
         updateData: this.updateData,
         updateSchema: this.updateSchema,
         updateSortingList: this.updateSortingList,
@@ -19331,16 +19603,21 @@ var VerticalNavigation = function VerticalNavigation(props) {
 
       var isActive = isMenuActive(menus, subMenu, active);
       var subMenuClasses = classnames(menuClasses, (_classNames2 = {}, _defineProperty$2(_classNames2, 'Navigation-menu--subMenu', true), _defineProperty$2(_classNames2, 'Navigation-menu--active', isActive), _classNames2));
-      return /*#__PURE__*/React.createElement("div", {
-        "data-test": "DesignSystem-Navigation-VerticalNavigation--subMenu",
-        key: ind,
-        className: subMenuClasses,
-        onClick: function onClick() {
-          return onClickHandler(subMenu);
-        }
-      }, /*#__PURE__*/React.createElement(Text, {
-        appearance: getTextAppearance(isActive, subMenu.disabled)
-      }, subMenu.label));
+      return (
+        /*#__PURE__*/
+        // TODO(a11y)
+        // eslint-disable-next-line
+        React.createElement("div", {
+          "data-test": "DesignSystem-Navigation-VerticalNavigation--subMenu",
+          key: ind,
+          className: subMenuClasses,
+          onClick: function onClick() {
+            return onClickHandler(subMenu);
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          appearance: getTextAppearance(isActive, subMenu.disabled)
+        }, subMenu.label))
+      );
     })));
   });
   var footerClasses = classnames(_defineProperty$2({
@@ -19550,32 +19827,37 @@ var FileListItem = function FileListItem(props) {
     }
   };
 
-  return /*#__PURE__*/React.createElement("div", _extends$3({}, baseProps, {
-    className: FileItemClass,
-    onClick: onClickHandler,
-    "data-test": "DesignSystem-FileListItem"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "FileItem-file"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "FileItem-fileContent"
-  }, /*#__PURE__*/React.createElement(FileIcon, {
-    file: file,
-    status: status,
-    progress: progress
-  }), /*#__PURE__*/React.createElement(Text, {
-    "data-test": "DesignSystem-FileListItem--Name",
-    className: "FileItem-text",
-    appearance: status === 'completed' ? 'default' : 'subtle'
-  }, name)), /*#__PURE__*/React.createElement("div", {
-    className: "FileItem-actions"
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: "FileItem-size",
-    appearance: 'subtle',
-    "data-test": "DesignSystem-FileListItem--Size"
-  }, fileSize || file.size), !!actions && actions)), status === 'error' && /*#__PURE__*/React.createElement(Caption, {
-    className: 'FileItem-error',
-    error: true
-  }, errorMessage));
+  return (
+    /*#__PURE__*/
+    // TODO(a11y)
+    //  eslint-disable-next-line
+    React.createElement("div", _extends$3({}, baseProps, {
+      className: FileItemClass,
+      onClick: onClickHandler,
+      "data-test": "DesignSystem-FileListItem"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "FileItem-file"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "FileItem-fileContent"
+    }, /*#__PURE__*/React.createElement(FileIcon, {
+      file: file,
+      status: status,
+      progress: progress
+    }), /*#__PURE__*/React.createElement(Text, {
+      "data-test": "DesignSystem-FileListItem--Name",
+      className: "FileItem-text",
+      appearance: status === 'completed' ? 'default' : 'subtle'
+    }, name)), /*#__PURE__*/React.createElement("div", {
+      className: "FileItem-actions"
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: "FileItem-size",
+      appearance: 'subtle',
+      "data-test": "DesignSystem-FileListItem--Size"
+    }, fileSize || file.size), !!actions && actions)), status === 'error' && /*#__PURE__*/React.createElement(Caption, {
+      className: 'FileItem-error',
+      error: true
+    }, errorMessage))
+  );
 };
 FileListItem.defaultProps = {
   progress: 0,
@@ -19739,54 +20021,62 @@ var VerificationCodeInput = function VerificationCodeInput(props) {
 
     switch (e.key) {
       case KEY_CODE.backspace:
-        e.preventDefault();
+        {
+          e.preventDefault();
 
-        var vals = _toConsumableArray(values);
+          var vals = _toConsumableArray(values);
 
-        if (values[index]) {
-          vals[index] = '';
-          setValues(vals);
-        } else if (prev && prev.current) {
-          vals[prevIndex] = '';
-          prev.current.focus({
-            preventScroll: true
-          });
-          setValues(vals);
-        }
+          if (values[index]) {
+            vals[index] = '';
+            setValues(vals);
+          } else if (prev && prev.current) {
+            vals[prevIndex] = '';
+            prev.current.focus({
+              preventScroll: true
+            });
+            setValues(vals);
+          }
 
-        break;
+          break;
+        }
 
       case KEY_CODE.left:
-        e.preventDefault();
+        {
+          e.preventDefault();
 
-        if (prev && prev.current) {
-          prev.current.focus({
-            preventScroll: true
-          });
-        }
+          if (prev && prev.current) {
+            prev.current.focus({
+              preventScroll: true
+            });
+          }
 
-        break;
+          break;
+        }
 
       case KEY_CODE.right:
-        e.preventDefault();
+        {
+          e.preventDefault();
 
-        if (nextRef && nextRef.current) {
-          nextRef.current.focus({
-            preventScroll: true
-          });
-        }
+          if (nextRef && nextRef.current) {
+            nextRef.current.focus({
+              preventScroll: true
+            });
+          }
 
-        break;
+          break;
+        }
 
       case KEY_CODE.up:
       case KEY_CODE.down:
       case KEY_CODE.e:
       case KEY_CODE.E:
-        if (type === 'number') {
-          e.preventDefault();
-        }
+        {
+          if (type === 'number') {
+            e.preventDefault();
+          }
 
-        break;
+          break;
+        }
     }
   };
 
@@ -19845,10 +20135,10 @@ var InlineMessage = function InlineMessage(props) {
     name: IconMapping[appearance],
     appearance: appearance,
     className: IconClass
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+  }), /*#__PURE__*/React.createElement(Text, {
     "data-test": "DesignSystem-InlineMessage--Description",
     className: DescriptionClass
-  }, description)));
+  }, description));
 };
 InlineMessage.displayName = 'InlineMessage';
 InlineMessage.defaultProps = {
@@ -19957,7 +20247,7 @@ var ChoiceList = function ChoiceList(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("fieldset", {
     className: ChoiceListClass,
     "data-test": "DesignSystem-ChoiceList-Wrapper"
-  }, title && title.trim() && /*#__PURE__*/React.createElement(Label, null, title.trim()), !!allowMultiple ? /*#__PURE__*/React.createElement("div", {
+  }, title && title.trim() && /*#__PURE__*/React.createElement(Label, null, title.trim()), allowMultiple ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(alignment === 'horizontal' ? ChoiceHorizontalClass : ChoiceListVerticalClass)
   }, renderCheckbox(choices, handleOnChange, disabled, size, alignment, selected)) : /*#__PURE__*/React.createElement("div", {
     className: "".concat(alignment === 'horizontal' ? ChoiceHorizontalClass : ChoiceListVerticalClass)
@@ -19971,6 +20261,26 @@ ChoiceList.defaultProps = {
   disabled: false
 };
 
-var version = "2.5.0";
+var Divider = function Divider(props) {
+  var _classNames;
+
+  var vertical = props.vertical,
+      appearance = props.appearance,
+      className = props.className;
+  var baseProps = extractBaseProps(props);
+  var DividerClass = classnames((_classNames = {}, _defineProperty$2(_classNames, 'Divider', true), _defineProperty$2(_classNames, 'Divider--horizontal', !vertical), _defineProperty$2(_classNames, 'Divider--vertical', vertical), _defineProperty$2(_classNames, 'Divider--basic', appearance !== 'header'), _defineProperty$2(_classNames, 'Divider--header', !vertical && appearance === 'header'), _classNames), className);
+  return /*#__PURE__*/React.createElement("hr", _extends$3({
+    "data-test": "DesignSystem-Divider"
+  }, baseProps, {
+    className: DividerClass
+  }));
+};
+Divider.displayName = 'Divider';
+Divider.defaultProps = {
+  appearance: 'basic',
+  vertical: false
+};
+
+var version = "2.7.0-0";
 
-export { Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, DatePicker, DateRangePicker, Dialog, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HorizontalNav, Icon, InlineMessage, Input, InputMask, Label, Legend, Link, List, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, Textarea, TimePicker, Toast, Tooltip, index$1 as Utils, VerificationCodeInput, VerticalNav, version };
+export { Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, Label, Legend, Link, List, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, Textarea, TimePicker, Toast, Tooltip, index$1 as Utils, VerificationCodeInput, VerticalNav, version };