@sheerid/jslib 1.126.0 → 1.128.0

package/sheerides6.js

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback, useEffect, useMemo, cloneElement, Component, useLayoutEffect, useReducer, PureComponent, Children, useState, forwardRef, useImperativeHandle, Fragment as Fragment$4, Suspense as Suspense$4 } from 'react';
+import React, { useRef, useEffect, useCallback, useMemo, Component, cloneElement, useLayoutEffect, useReducer, PureComponent, Children, useState, forwardRef, useImperativeHandle, Fragment as Fragment$4, Suspense as Suspense$4 } from 'react';
 import { FormattedHTMLMessage, injectIntl, IntlProvider } from 'react-intl';
 import 'react-intl/locale-data/en.js';
 import ReactDOMServer from 'react-dom/server';
@@ -525,6 +525,7 @@ var VerificationStepsEnum;
     VerificationStepsEnum["cancelEmailLoop"] = "cancelEmailLoop";
     VerificationStepsEnum["consolation"] = "consolation";
     VerificationStepsEnum["override"] = "override";
+    VerificationStepsEnum["cancelDocUpload"] = "cancelDocUpload";
 })(VerificationStepsEnum || (VerificationStepsEnum = {}));
 const VerificationSteps = Object.values(VerificationStepsEnum); // For runtime checks
 // This depends on all collect steps starting with the string 'collect' if that
@@ -600,6 +601,7 @@ var SubSegmentEnum;
     SubSegmentEnum["SNAP_BENEFITS"] = "snapBenefits";
     SubSegmentEnum["OTHER_GOVERNMENT_ASSISTANCE"] = "otherGovernmentAssistance";
     SubSegmentEnum["CHILD_CARE_WORKER"] = "childCareWorker";
+    SubSegmentEnum["LIBRARIAN"] = "librarian";
 })(SubSegmentEnum || (SubSegmentEnum = {}));
 Object.values(SubSegmentEnum); // For runtime checks
 var MilitaryStatusDefaultMessagesEnum;
@@ -1720,44 +1722,44 @@ function arrayUnique(array) {
     return array.sort().filter((item, pos, ary) => !pos || item !== ary[pos - 1]);
 }
 
-/*!
- * Determine if an object is a Buffer
- *
- * @author   Feross Aboukhadijeh <https://feross.org>
- * @license  MIT
- */
-
-var isBuffer = function isBuffer (obj) {
-  return obj != null && obj.constructor != null &&
-    typeof obj.constructor.isBuffer === 'function' && obj.constructor.isBuffer(obj)
-};
-
 var flat = flatten$1;
 flatten$1.flatten = flatten$1;
 flatten$1.unflatten = unflatten;
 
+function isBuffer (obj) {
+  return obj &&
+    obj.constructor &&
+    (typeof obj.constructor.isBuffer === 'function') &&
+    obj.constructor.isBuffer(obj)
+}
+
+function keyIdentity (key) {
+  return key
+}
+
 function flatten$1 (target, opts) {
   opts = opts || {};
 
-  var delimiter = opts.delimiter || '.';
-  var maxDepth = opts.maxDepth;
-  var output = {};
+  const delimiter = opts.delimiter || '.';
+  const maxDepth = opts.maxDepth;
+  const transformKey = opts.transformKey || keyIdentity;
+  const output = {};
 
   function step (object, prev, currentDepth) {
     currentDepth = currentDepth || 1;
     Object.keys(object).forEach(function (key) {
-      var value = object[key];
-      var isarray = opts.safe && Array.isArray(value);
-      var type = Object.prototype.toString.call(value);
-      var isbuffer = isBuffer(value);
-      var isobject = (
+      const value = object[key];
+      const isarray = opts.safe && Array.isArray(value);
+      const type = Object.prototype.toString.call(value);
+      const isbuffer = isBuffer(value);
+      const isobject = (
         type === '[object Object]' ||
         type === '[object Array]'
       );
 
-      var newKey = prev
-        ? prev + delimiter + key
-        : key;
+      const newKey = prev
+        ? prev + delimiter + transformKey(key)
+        : transformKey(key);
 
       if (!isarray && !isbuffer && isobject && Object.keys(value).length &&
         (!opts.maxDepth || currentDepth < maxDepth)) {
@@ -1776,11 +1778,12 @@ function flatten$1 (target, opts) {
 function unflatten (target, opts) {
   opts = opts || {};
 
-  var delimiter = opts.delimiter || '.';
-  var overwrite = opts.overwrite || false;
-  var result = {};
+  const delimiter = opts.delimiter || '.';
+  const overwrite = opts.overwrite || false;
+  const transformKey = opts.transformKey || keyIdentity;
+  const result = {};
 
-  var isbuffer = isBuffer(target);
+  const isbuffer = isBuffer(target);
   if (isbuffer || Object.prototype.toString.call(target) !== '[object Object]') {
     return target
   }
@@ -1788,7 +1791,7 @@ function unflatten (target, opts) {
   // safely ensure that the key is
   // an integer.
   function getkey (key) {
-    var parsedKey = Number(key);
+    const parsedKey = Number(key);
 
     return (
       isNaN(parsedKey) ||
@@ -1798,22 +1801,56 @@ function unflatten (target, opts) {
       : parsedKey
   }
 
-  var sortedKeys = Object.keys(target).sort(function (keyA, keyB) {
-    return keyA.length - keyB.length
-  });
+  function addKeys (keyPrefix, recipient, target) {
+    return Object.keys(target).reduce(function (result, key) {
+      result[keyPrefix + delimiter + key] = target[key];
 
-  sortedKeys.forEach(function (key) {
-    var split = key.split(delimiter);
-    var key1 = getkey(split.shift());
-    var key2 = getkey(split[0]);
-    var recipient = result;
+      return result
+    }, recipient)
+  }
+
+  function isEmpty (val) {
+    const type = Object.prototype.toString.call(val);
+    const isArray = type === '[object Array]';
+    const isObject = type === '[object Object]';
+
+    if (!val) {
+      return true
+    } else if (isArray) {
+      return !val.length
+    } else if (isObject) {
+      return !Object.keys(val).length
+    }
+  }
+
+  target = Object.keys(target).reduce(function (result, key) {
+    const type = Object.prototype.toString.call(target[key]);
+    const isObject = (type === '[object Object]' || type === '[object Array]');
+    if (!isObject || isEmpty(target[key])) {
+      result[key] = target[key];
+      return result
+    } else {
+      return addKeys(
+        key,
+        result,
+        flatten$1(target[key], opts)
+      )
+    }
+  }, {});
+
+  Object.keys(target).forEach(function (key) {
+    const split = key.split(delimiter).map(transformKey);
+    let key1 = getkey(split.shift());
+    let key2 = getkey(split[0]);
+    let recipient = result;
 
     while (key2 !== undefined) {
       if (key1 === '__proto__') {
         return
       }
-      var type = Object.prototype.toString.call(recipient[key1]);
-      var isobject = (
+
+      const type = Object.prototype.toString.call(recipient[key1]);
+      const isobject = (
         type === '[object Object]' ||
         type === '[object Array]'
       );
@@ -1854,6 +1891,7 @@ var enUSMessages = {
 	"defaultMessages.FIREFIGHTER": "Firefighter",
 	"defaultMessages.GOLD_STAR_FAMILY": "Gold Star Family",
 	"defaultMessages.HOME_BUYER": "Home Buyer",
+	"defaultMessages.LIBRARIAN": "Librarian",
 	"defaultMessages.LICENSED_COSMETOLOGIST": "Licensed Cosmetologist",
 	"defaultMessages.LICENSED_REAL_ESTATE_AGENT": "Licensed Real Estate Agent",
 	"defaultMessages.MILITARY_FAMILY": "Military Family",
@@ -2424,6 +2462,7 @@ var enUSMessages = {
 	"defaultMessages.step.docUpload.addFile": "Add file",
 	"defaultMessages.step.docUpload.allowedDocuments": "Please only upload documents you are legally allowed to provide.",
 	"defaultMessages.step.docUpload.cancelButtonLabel": "Cancel",
+	"defaultMessages.step.docUpload.cancelDocUploadLabel": "Click here if you are unable to verify with a document",
 	"defaultMessages.step.docUpload.fileInstructions": "Drag &amp; drop your files here or <span class=\"sid-dropzone-wrap--link\">browse</span>",
 	"defaultMessages.step.docUpload.nameChanged": "If your name has changed since the document was issued, upload a 2nd document showing your official name change.",
 	"defaultMessages.step.docUpload.rejectedSubtitle": "We were unable to confirm your eligibility due to:",
@@ -2833,154 +2872,154 @@ const getMessagesModuleByLocale = async (locale) => {
     switch (locale) {
         case "ar":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_ar" */ './es6/ar-bab1b035.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_ar" */ './es6/ar-2a0ea0a2.es.js').then((m) => m.default);
             break;
         case "bg":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_bg" */ './es6/bg-e2e1c20e.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_bg" */ './es6/bg-377290da.es.js').then((m) => m.default);
             break;
         case "cs":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_cs" */ './es6/cs-5719c099.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_cs" */ './es6/cs-3f62949a.es.js').then((m) => m.default);
             break;
         case "da":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_da" */ './es6/da-5c334bf6.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_da" */ './es6/da-d179d5c7.es.js').then((m) => m.default);
             break;
         case "de":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_de" */ './es6/de-99bcfcd6.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_de" */ './es6/de-e195240d.es.js').then((m) => m.default);
             break;
         case "el":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_el" */ './es6/el-50365c9c.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_el" */ './es6/el-a8c40916.es.js').then((m) => m.default);
             break;
         case "en-GB":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_en-GB" */ './es6/en-GB-3190f9c5.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_en-GB" */ './es6/en-GB-e6ff4f1e.es.js').then((m) => m.default);
             break;
         case "en-US":
             localizedMessages = enUSMessages;
             break;
         case "es-ES":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_es-ES" */ './es6/es-ES-8e81bf89.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_es-ES" */ './es6/es-ES-44ea68e4.es.js').then((m) => m.default);
             break;
         case "es":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_es" */ './es6/es-f9815891.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_es" */ './es6/es-6087a4fc.es.js').then((m) => m.default);
             break;
         case "fi":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_fi" */ './es6/fi-f85170e8.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_fi" */ './es6/fi-3464525e.es.js').then((m) => m.default);
             break;
         case "fr-CA":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_fr-CA" */ './es6/fr-CA-7fb05572.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_fr-CA" */ './es6/fr-CA-f866402a.es.js').then((m) => m.default);
             break;
         case "fr":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_fr" */ './es6/fr-d75091bb.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_fr" */ './es6/fr-f593680c.es.js').then((m) => m.default);
             break;
         case "ga":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_ga" */ './es6/ga-1f24f896.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_ga" */ './es6/ga-6f8cbfc2.es.js').then((m) => m.default);
             break;
         case "hr":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_hr" */ './es6/hr-25a2d454.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_hr" */ './es6/hr-626d1c31.es.js').then((m) => m.default);
             break;
         case "hu":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_hu" */ './es6/hu-dab0cd65.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_hu" */ './es6/hu-4aa2549e.es.js').then((m) => m.default);
             break;
         case "id":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_id" */ './es6/id-ca56da7f.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_id" */ './es6/id-2ba07070.es.js').then((m) => m.default);
             break;
         case "it":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_it" */ './es6/it-67990c57.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_it" */ './es6/it-0e555eec.es.js').then((m) => m.default);
             break;
         case "iw":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_iw" */ './es6/iw-f603181c.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_iw" */ './es6/iw-91688793.es.js').then((m) => m.default);
             break;
         case "ja":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_ja" */ './es6/ja-c4079a32.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_ja" */ './es6/ja-ebdbf86f.es.js').then((m) => m.default);
             break;
         case "ko":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_ko" */ './es6/ko-a298b847.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_ko" */ './es6/ko-939af24c.es.js').then((m) => m.default);
             break;
         case "lo":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_lo" */ './es6/lo-1d1b5d06.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_lo" */ './es6/lo-08fdfe3a.es.js').then((m) => m.default);
             break;
         case "lt":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_lt" */ './es6/lt-4af7334d.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_lt" */ './es6/lt-c4941c10.es.js').then((m) => m.default);
             break;
         case "ms":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_ms" */ './es6/ms-7084dd0e.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_ms" */ './es6/ms-9441eded.es.js').then((m) => m.default);
             break;
         case "nl":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_nl" */ './es6/nl-112d7daa.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_nl" */ './es6/nl-89a503f5.es.js').then((m) => m.default);
             break;
         case "no":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_no" */ './es6/no-d9bbfe9b.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_no" */ './es6/no-fa64abdb.es.js').then((m) => m.default);
             break;
         case "pl":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_pl" */ './es6/pl-80661fea.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_pl" */ './es6/pl-b934b04b.es.js').then((m) => m.default);
             break;
         case "pt-BR":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_pt-BR" */ './es6/pt-BR-52f1e3dd.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_pt-BR" */ './es6/pt-BR-5222d627.es.js').then((m) => m.default);
             break;
         case "pt":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_pt" */ './es6/pt-768cfc70.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_pt" */ './es6/pt-5c797098.es.js').then((m) => m.default);
             break;
         case "ru":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_ru" */ './es6/ru-dfbcc89f.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_ru" */ './es6/ru-c9925608.es.js').then((m) => m.default);
             break;
         case "sk":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_sk" */ './es6/sk-2d857318.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_sk" */ './es6/sk-a264f056.es.js').then((m) => m.default);
             break;
         case "sl":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_sl" */ './es6/sl-b242951a.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_sl" */ './es6/sl-51754511.es.js').then((m) => m.default);
             break;
         case "sr":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_sr" */ './es6/sr-6c9eb7c9.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_sr" */ './es6/sr-850a9b5e.es.js').then((m) => m.default);
             break;
         case "sv":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_sv" */ './es6/sv-e7068235.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_sv" */ './es6/sv-fedc1d6f.es.js').then((m) => m.default);
             break;
         case "th":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_th" */ './es6/th-c9e74f5c.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_th" */ './es6/th-4b9590bb.es.js').then((m) => m.default);
             break;
         case "tr":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_tr" */ './es6/tr-2bba52b9.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_tr" */ './es6/tr-15c9df31.es.js').then((m) => m.default);
             break;
         case "zh-HK":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_zh-HK" */ './es6/zh-HK-42498244.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_zh-HK" */ './es6/zh-HK-9e038504.es.js').then((m) => m.default);
             break;
         case "zh":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_zh" */ './es6/zh-04e15385.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_zh" */ './es6/zh-548784ee.es.js').then((m) => m.default);
             break;
         default:
             logger.warn(`getMessagesModuleByLocale: Unable to load messages for ${locale}, falling back to en-US`);
@@ -3718,6 +3757,7 @@ const getAllEmptyViewModels = () => ({
     error: deepClone(emptyViewModel),
     cancelSocialSecurityNumber: deepClone(emptyViewModel),
     docReviewLimitExceeded: deepClone(emptyViewModel),
+    cancelDocUpload: deepClone(emptyViewModel),
 });
 const getFieldValidationErrorsEmpty = () => deepClone(initialErrorStructure);
 const getExtendedFieldValidationErrorsEmpty = () => {
@@ -5081,7 +5121,14 @@ const InputText = ({ id, isErrored, className = undefined, hidePlaceholder = tru
     if (isErrored)
         internalClassName += " sid-text-input--error";
     const finalRefId = refId || id;
-    return (React.createElement("input", Object.assign({ className: internalClassName, id: `sid-${id}`, name: `sid-${id}`, type: type, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-required": required, "aria-invalid": isErrored, ref: (input) => setRef(finalRefId, input) }, props)));
+    const inputRef = useRef(null);
+    // NOTE: Dependency array omitted to account for use of resetRef(), as useEffect with dep arr
+    // will only trigger on initial render leaving the refs empty, this replicates prior version
+    // where ref callback would trigger with each re-render
+    useEffect(() => {
+        setRef(finalRefId, inputRef.current);
+    });
+    return (React.createElement("input", Object.assign({ className: internalClassName, id: `sid-${id}`, name: `sid-${id}`, type: type, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-required": required, "aria-invalid": isErrored, ref: inputRef }, props)));
 };
 // DO NOT INJECT INTL. Localize your strings pass them down as props
 const InputTextComponent = InputText;
@@ -5223,62 +5270,6 @@ const SearchFieldComponent = ({ name, label, value, placeholder, isErrored, onCh
                 React.createElement(FormattedHTMLMessage, { id: `errorId.${isErrored}`, defaultMessage: "An unexpected error occurred" })))) : null));
 };
 
-function _objectWithoutPropertiesLoose$1(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
-}
-
 /** @license React v16.13.1
  * react-is.production.min.js
  *
@@ -6690,7 +6681,95 @@ var reactIs_3 = reactIs$2.isForwardRef;
 
 function t$2(t){return "object"==typeof t&&null!=t&&1===t.nodeType}function e$2(t,e){return (!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function n$2(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var r=getComputedStyle(t,null);return e$2(r.overflowY,n)||e$2(r.overflowX,n)||function(t){var e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return !!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return !1}function r$2(t,e,n,r,i,o,l,d){return o<t&&l>e||o>t&&l<e?0:o<=t&&d<=n||l>=e&&d>=n?o-t-r:l>e&&d<n||o<t&&d>n?l-e+i:0}function computeScrollIntoView(e,i){var o=window,l=i.scrollMode,d=i.block,u=i.inline,h=i.boundary,a=i.skipOverflowHiddenElements,c="function"==typeof h?h:function(t){return t!==h};if(!t$2(e))throw new TypeError("Invalid target");for(var f=document.scrollingElement||document.documentElement,s=[],p=e;t$2(p)&&c(p);){if((p=p.parentElement)===f){s.push(p);break}null!=p&&p===document.body&&n$2(p)&&!n$2(document.documentElement)||null!=p&&n$2(p,a)&&s.push(p);}for(var m=o.visualViewport?o.visualViewport.width:innerWidth,g=o.visualViewport?o.visualViewport.height:innerHeight,w=window.scrollX||pageXOffset,v=window.scrollY||pageYOffset,W=e.getBoundingClientRect(),b=W.height,H=W.width,y=W.top,E=W.right,M=W.bottom,V=W.left,x="start"===d||"nearest"===d?y:"end"===d?M:y+b/2,I="center"===u?V+H/2:"end"===u?E:V,C=[],T=0;T<s.length;T++){var k=s[T],B=k.getBoundingClientRect(),D=B.height,O=B.width,R=B.top,X=B.right,Y=B.bottom,L=B.left;if("if-needed"===l&&y>=0&&V>=0&&M<=g&&E<=m&&y>=R&&M<=Y&&V>=L&&E<=X)return C;var S=getComputedStyle(k),j=parseInt(S.borderLeftWidth,10),q=parseInt(S.borderTopWidth,10),z=parseInt(S.borderRightWidth,10),A=parseInt(S.borderBottomWidth,10),F=0,G=0,J="offsetWidth"in k?k.offsetWidth-k.clientWidth-j-z:0,K="offsetHeight"in k?k.offsetHeight-k.clientHeight-q-A:0;if(f===k)F="start"===d?x:"end"===d?x-g:"nearest"===d?r$2(v,v+g,g,q,A,v+x,v+x+b,b):x-g/2,G="start"===u?I:"center"===u?I-m/2:"end"===u?I-m:r$2(w,w+m,m,j,z,w+I,w+I+H,H),F=Math.max(0,F+v),G=Math.max(0,G+w);else {F="start"===d?x-R-q:"end"===d?x-Y+A+K:"nearest"===d?r$2(R,Y,D,q,A+K,x,x+b,b):x-(R+D/2)+K/2,G="start"===u?I-L-j:"center"===u?I-(L+O/2)+J/2:"end"===u?I-X+z+J:r$2(L,X,O,j,z+J,I,I+H,H);var N=k.scrollLeft,P=k.scrollTop;x+=P-(F=Math.max(0,Math.min(P+F,k.scrollHeight-D+K))),I+=N-(G=Math.max(0,Math.min(N+G,k.scrollWidth-O+J)));}C.push({el:k,top:F,left:G});}return C}
 
-var idCounter = 0;
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __read(o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+}
+
+/** @deprecated */
+function __spread() {
+    for (var ar = [], i = 0; i < arguments.length; i++)
+        ar = ar.concat(__read(arguments[i]));
+    return ar;
+}
+
+let idCounter = 0;
 /**
  * Accepts a parameter and returns it if it's a function
  * or a noop function if it's not. This allows us to
@@ -6717,15 +6796,17 @@ function scrollIntoView(node, menuNode) {
     return;
   }
 
-  var actions = computeScrollIntoView(node, {
+  const actions = computeScrollIntoView(node, {
     boundary: menuNode,
     block: 'nearest',
     scrollMode: 'if-needed'
   });
-  actions.forEach(function (_ref) {
-    var el = _ref.el,
-        top = _ref.top,
-        left = _ref.left;
+  actions.forEach(_ref => {
+    let {
+      el,
+      top,
+      left
+    } = _ref;
     el.scrollTop = top;
     el.scrollLeft = left;
   });
@@ -6739,7 +6820,7 @@ function scrollIntoView(node, menuNode) {
 
 
 function isOrContainsNode(parent, child, environment) {
-  var result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
+  const result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
   return result;
 }
 /**
@@ -6753,7 +6834,7 @@ function isOrContainsNode(parent, child, environment) {
 
 
 function debounce$1(fn, time) {
-  var timeoutId;
+  let timeoutId;
 
   function cancel() {
     if (timeoutId) {
@@ -6767,9 +6848,9 @@ function debounce$1(fn, time) {
     }
 
     cancel();
-    timeoutId = setTimeout(function () {
+    timeoutId = setTimeout(() => {
       timeoutId = null;
-      fn.apply(void 0, args);
+      fn(...args);
     }, time);
   }
 
@@ -6795,9 +6876,9 @@ function callAllEventHandlers() {
       args[_key3 - 1] = arguments[_key3];
     }
 
-    return fns.some(function (fn) {
+    return fns.some(fn => {
       if (fn) {
-        fn.apply(void 0, [event].concat(args));
+        fn(event, ...args);
       }
 
       return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault;
@@ -6810,8 +6891,8 @@ function handleRefs() {
     refs[_key4] = arguments[_key4];
   }
 
-  return function (node) {
-    refs.forEach(function (ref) {
+  return node => {
+    refs.forEach(ref => {
       if (typeof ref === 'function') {
         ref(node);
       } else if (ref) {
@@ -6831,7 +6912,7 @@ function generateId() {
 }
 /**
  * Default implementation for status message. Only added when menu is open.
- * Will specift if there are results in the list, and if so, how many,
+ * Will specify if there are results in the list, and if so, how many,
  * and what keys are relevant.
  *
  * @param {Object} param the downshift state and other relevant properties
@@ -6840,9 +6921,11 @@ function generateId() {
 
 
 function getA11yStatusMessage$1(_ref2) {
-  var isOpen = _ref2.isOpen,
-      resultCount = _ref2.resultCount,
-      previousResultCount = _ref2.previousResultCount;
+  let {
+    isOpen,
+    resultCount,
+    previousResultCount
+  } = _ref2;
 
   if (!isOpen) {
     return '';
@@ -6853,7 +6936,7 @@ function getA11yStatusMessage$1(_ref2) {
   }
 
   if (resultCount !== previousResultCount) {
-    return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select.";
+    return `${resultCount} result${resultCount === 1 ? ' is' : 's are'} available, use up and down arrow keys to navigate. Press Enter key to select.`;
   }
 
   return '';
@@ -6909,10 +6992,10 @@ function getElementProps(element) {
 
 function requiredProp(fnName, propName) {
   // eslint-disable-next-line no-console
-  console.error("The property \"" + propName + "\" is required in \"" + fnName + "\"");
+  console.error(`The property "${propName}" is required in "${fnName}"`);
 }
 
-var stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
+const stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
 /**
  * @param {Object} state the state object
  * @return {Object} state that is relevant to downshift
@@ -6923,8 +7006,8 @@ function pickState(state) {
     state = {};
   }
 
-  var result = {};
-  stateKeys.forEach(function (k) {
+  const result = {};
+  stateKeys.forEach(k => {
     if (state.hasOwnProperty(k)) {
       result[k] = state[k];
     }
@@ -6945,7 +7028,7 @@ function pickState(state) {
 
 
 function getState(state, props) {
-  return Object.keys(state).reduce(function (prevState, key) {
+  return Object.keys(state).reduce((prevState, key) => {
     prevState[key] = isControlledProp(props, key) ? props[key] : state[key];
     return prevState;
   }, {});
@@ -6972,12 +7055,14 @@ function isControlledProp(props, key) {
 
 
 function normalizeArrowKey(event) {
-  var key = event.key,
-      keyCode = event.keyCode;
+  const {
+    key,
+    keyCode
+  } = event;
   /* istanbul ignore next (ie) */
 
   if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
-    return "Arrow" + key;
+    return `Arrow${key}`;
   }
 
   return key;
@@ -7014,13 +7099,13 @@ function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromI
     return -1;
   }
 
-  var itemsLastIndex = itemCount - 1;
+  const itemsLastIndex = itemCount - 1;
 
   if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) {
     baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1;
   }
 
-  var newIndex = baseIndex + moveAmount;
+  let newIndex = baseIndex + moveAmount;
 
   if (newIndex < 0) {
     newIndex = circular ? itemsLastIndex : 0;
@@ -7028,7 +7113,7 @@ function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromI
     newIndex = circular ? 0 : itemsLastIndex;
   }
 
-  var nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);
+  const nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);
 
   if (nonDisabledNewIndex === -1) {
     return baseIndex >= itemCount ? -1 : baseIndex;
@@ -7049,22 +7134,22 @@ function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromI
 
 
 function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
-  var currentElementNode = getItemNodeFromIndex(baseIndex);
+  const currentElementNode = getItemNodeFromIndex(baseIndex);
 
   if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) {
     return baseIndex;
   }
 
   if (moveAmount > 0) {
-    for (var index = baseIndex + 1; index < itemCount; index++) {
+    for (let index = baseIndex + 1; index < itemCount; index++) {
       if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
         return index;
       }
     }
   } else {
-    for (var _index = baseIndex - 1; _index >= 0; _index--) {
-      if (!getItemNodeFromIndex(_index).hasAttribute('disabled')) {
-        return _index;
+    for (let index = baseIndex - 1; index >= 0; index--) {
+      if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
+        return index;
       }
     }
   }
@@ -7092,31 +7177,29 @@ function targetWithinDownshift(target, downshiftElements, environment, checkActi
     checkActiveElement = true;
   }
 
-  return downshiftElements.some(function (contextNode) {
-    return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment));
-  });
+  return downshiftElements.some(contextNode => contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment)));
 } // eslint-disable-next-line import/no-mutable-exports
 
 
-var validateControlledUnchanged = noop;
+let validateControlledUnchanged = noop;
 /* istanbul ignore next */
 
 if (process.env.NODE_ENV !== 'production') {
-  validateControlledUnchanged = function validateControlledUnchanged(state, prevProps, nextProps) {
-    var warningDescription = "This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props";
-    Object.keys(state).forEach(function (propKey) {
+  validateControlledUnchanged = (state, prevProps, nextProps) => {
+    const warningDescription = `This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props`;
+    Object.keys(state).forEach(propKey => {
       if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
         // eslint-disable-next-line no-console
-        console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
+        console.error(`downshift: A component has changed the controlled prop "${propKey}" to be uncontrolled. ${warningDescription}`);
       } else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
         // eslint-disable-next-line no-console
-        console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
+        console.error(`downshift: A component has changed the uncontrolled prop "${propKey}" to be controlled. ${warningDescription}`);
       }
     });
   };
 }
 
-var cleanupStatus = debounce$1(function (documentProp) {
+const cleanupStatus = debounce$1(documentProp => {
   getStatusDiv(documentProp).textContent = '';
 }, 500);
 /**
@@ -7125,7 +7208,7 @@ var cleanupStatus = debounce$1(function (documentProp) {
  */
 
 function setStatus(status, documentProp) {
-  var div = getStatusDiv(documentProp);
+  const div = getStatusDiv(documentProp);
 
   if (!status) {
     return;
@@ -7146,7 +7229,7 @@ function getStatusDiv(documentProp) {
     documentProp = document;
   }
 
-  var statusDiv = documentProp.getElementById('a11y-status-message');
+  let statusDiv = documentProp.getElementById('a11y-status-message');
 
   if (statusDiv) {
     return statusDiv;
@@ -7171,23 +7254,23 @@ function getStatusDiv(documentProp) {
   return statusDiv;
 }
 
-var unknown = process.env.NODE_ENV !== "production" ? '__autocomplete_unknown__' : 0;
-var mouseUp = process.env.NODE_ENV !== "production" ? '__autocomplete_mouseup__' : 1;
-var itemMouseEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_item_mouseenter__' : 2;
-var keyDownArrowUp = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_arrow_up__' : 3;
-var keyDownArrowDown = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_arrow_down__' : 4;
-var keyDownEscape = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_escape__' : 5;
-var keyDownEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_enter__' : 6;
-var keyDownHome = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_home__' : 7;
-var keyDownEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_end__' : 8;
-var clickItem = process.env.NODE_ENV !== "production" ? '__autocomplete_click_item__' : 9;
-var blurInput = process.env.NODE_ENV !== "production" ? '__autocomplete_blur_input__' : 10;
-var changeInput = process.env.NODE_ENV !== "production" ? '__autocomplete_change_input__' : 11;
-var keyDownSpaceButton = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_space_button__' : 12;
-var clickButton = process.env.NODE_ENV !== "production" ? '__autocomplete_click_button__' : 13;
-var blurButton = process.env.NODE_ENV !== "production" ? '__autocomplete_blur_button__' : 14;
-var controlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__autocomplete_controlled_prop_updated_selected_item__' : 15;
-var touchEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_touchend__' : 16;
+const unknown = process.env.NODE_ENV !== "production" ? '__autocomplete_unknown__' : 0;
+const mouseUp = process.env.NODE_ENV !== "production" ? '__autocomplete_mouseup__' : 1;
+const itemMouseEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_item_mouseenter__' : 2;
+const keyDownArrowUp = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_arrow_up__' : 3;
+const keyDownArrowDown = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_arrow_down__' : 4;
+const keyDownEscape = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_escape__' : 5;
+const keyDownEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_enter__' : 6;
+const keyDownHome = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_home__' : 7;
+const keyDownEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_end__' : 8;
+const clickItem = process.env.NODE_ENV !== "production" ? '__autocomplete_click_item__' : 9;
+const blurInput = process.env.NODE_ENV !== "production" ? '__autocomplete_blur_input__' : 10;
+const changeInput = process.env.NODE_ENV !== "production" ? '__autocomplete_change_input__' : 11;
+const keyDownSpaceButton = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_space_button__' : 12;
+const clickButton = process.env.NODE_ENV !== "production" ? '__autocomplete_click_button__' : 13;
+const blurButton = process.env.NODE_ENV !== "production" ? '__autocomplete_blur_button__' : 14;
+const controlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__autocomplete_controlled_prop_updated_selected_item__' : 15;
+const touchEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_touchend__' : 16;
 
 var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -7210,52 +7293,45 @@ var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
   touchEnd: touchEnd
 });
 
-var Downshift = /*#__PURE__*/function () {
-  var Downshift = /*#__PURE__*/function (_Component) {
-    _inheritsLoose(Downshift, _Component);
+/* eslint camelcase:0 */
 
-    function Downshift(_props) {
+const Downshift = /*#__PURE__*/(() => {
+  class Downshift extends Component {
+    constructor(_props) {
       var _this;
 
-      _this = _Component.call(this, _props) || this; // fancy destructuring + defaults + aliases
-      // this basically says each value of state should either be set to
-      // the initial value or the default value if the initial value is not provided
-
-      _this.id = _this.props.id || "downshift-" + generateId();
-      _this.menuId = _this.props.menuId || _this.id + "-menu";
-      _this.labelId = _this.props.labelId || _this.id + "-label";
-      _this.inputId = _this.props.inputId || _this.id + "-input";
+      super(_props);
+      _this = this;
+      this.id = this.props.id || `downshift-${generateId()}`;
+      this.menuId = this.props.menuId || `${this.id}-menu`;
+      this.labelId = this.props.labelId || `${this.id}-label`;
+      this.inputId = this.props.inputId || `${this.id}-input`;
 
-      _this.getItemId = _this.props.getItemId || function (index) {
-        return _this.id + "-item-" + index;
-      };
+      this.getItemId = this.props.getItemId || (index => `${this.id}-item-${index}`);
 
-      _this.input = null;
-      _this.items = [];
-      _this.itemCount = null;
-      _this.previousResultCount = 0;
-      _this.timeoutIds = [];
+      this.input = null;
+      this.items = [];
+      this.itemCount = null;
+      this.previousResultCount = 0;
+      this.timeoutIds = [];
 
-      _this.internalSetTimeout = function (fn, time) {
-        var id = setTimeout(function () {
-          _this.timeoutIds = _this.timeoutIds.filter(function (i) {
-            return i !== id;
-          });
+      this.internalSetTimeout = (fn, time) => {
+        const id = setTimeout(() => {
+          this.timeoutIds = this.timeoutIds.filter(i => i !== id);
           fn();
         }, time);
-
-        _this.timeoutIds.push(id);
+        this.timeoutIds.push(id);
       };
 
-      _this.setItemCount = function (count) {
-        _this.itemCount = count;
+      this.setItemCount = count => {
+        this.itemCount = count;
       };
 
-      _this.unsetItemCount = function () {
-        _this.itemCount = null;
+      this.unsetItemCount = () => {
+        this.itemCount = null;
       };
 
-      _this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
+      this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
         if (highlightedIndex === void 0) {
           highlightedIndex = _this.props.defaultHighlightedIndex;
         }
@@ -7266,69 +7342,72 @@ var Downshift = /*#__PURE__*/function () {
 
         otherStateToSet = pickState(otherStateToSet);
 
-        _this.internalSetState(_extends({
-          highlightedIndex: highlightedIndex
-        }, otherStateToSet));
+        _this.internalSetState({
+          highlightedIndex,
+          ...otherStateToSet
+        });
       };
 
-      _this.clearSelection = function (cb) {
-        _this.internalSetState({
+      this.clearSelection = cb => {
+        this.internalSetState({
           selectedItem: null,
           inputValue: '',
-          highlightedIndex: _this.props.defaultHighlightedIndex,
-          isOpen: _this.props.defaultIsOpen
+          highlightedIndex: this.props.defaultHighlightedIndex,
+          isOpen: this.props.defaultIsOpen
         }, cb);
       };
 
-      _this.selectItem = function (item, otherStateToSet, cb) {
+      this.selectItem = (item, otherStateToSet, cb) => {
         otherStateToSet = pickState(otherStateToSet);
-
-        _this.internalSetState(_extends({
-          isOpen: _this.props.defaultIsOpen,
-          highlightedIndex: _this.props.defaultHighlightedIndex,
+        this.internalSetState({
+          isOpen: this.props.defaultIsOpen,
+          highlightedIndex: this.props.defaultHighlightedIndex,
           selectedItem: item,
-          inputValue: _this.props.itemToString(item)
-        }, otherStateToSet), cb);
+          inputValue: this.props.itemToString(item),
+          ...otherStateToSet
+        }, cb);
       };
 
-      _this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
-        var item = _this.items[itemIndex];
+      this.selectItemAtIndex = (itemIndex, otherStateToSet, cb) => {
+        const item = this.items[itemIndex];
 
         if (item == null) {
           return;
         }
 
-        _this.selectItem(item, otherStateToSet, cb);
+        this.selectItem(item, otherStateToSet, cb);
       };
 
-      _this.selectHighlightedItem = function (otherStateToSet, cb) {
-        return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
+      this.selectHighlightedItem = (otherStateToSet, cb) => {
+        return this.selectItemAtIndex(this.getState().highlightedIndex, otherStateToSet, cb);
       };
 
-      _this.internalSetState = function (stateToSet, cb) {
-        var isItemSelected, onChangeArg;
-        var onStateChangeArg = {};
-        var isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call
+      this.internalSetState = (stateToSet, cb) => {
+        let isItemSelected, onChangeArg;
+        const onStateChangeArg = {};
+        const isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call
         // so someone controlling the `inputValue` state gets notified of
         // the input change as soon as possible. This avoids issues with
         // preserving the cursor position.
         // See https://github.com/downshift-js/downshift/issues/217 for more info.
 
         if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
-          _this.props.onInputValueChange(stateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), stateToSet));
+          this.props.onInputValueChange(stateToSet.inputValue, { ...this.getStateAndHelpers(),
+            ...stateToSet
+          });
         }
 
-        return _this.setState(function (state) {
-          state = _this.getState(state);
-          var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set.
+        return this.setState(state => {
+          state = this.getState(state);
+          let newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set.
 
-          newStateToSet = _this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from
+          newStateToSet = this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from
           // what was selected before
           // used to determine if onSelect and onChange callbacks should be called
 
           isItemSelected = newStateToSet.hasOwnProperty('selectedItem'); // this keeps track of the object we want to call with setState
 
-          var nextState = {}; // this is just used to tell whether the state changed
+          const nextState = {}; // this is just used to tell whether the state changed
           // and we're trying to update that state. OR if the selection has changed and we're
           // trying to update the selection
 
@@ -7337,7 +7416,7 @@ var Downshift = /*#__PURE__*/function () {
           }
 
           newStateToSet.type = newStateToSet.type || unknown;
-          Object.keys(newStateToSet).forEach(function (key) {
+          Object.keys(newStateToSet).forEach(key => {
             // onStateChangeArg should only have the state that is
             // actually changing
             if (state[key] !== newStateToSet[key]) {
@@ -7356,79 +7435,82 @@ var Downshift = /*#__PURE__*/function () {
 
             newStateToSet[key]; // if it's coming from props, then we don't care to set it internally
 
-            if (!isControlledProp(_this.props, key)) {
+            if (!isControlledProp(this.props, key)) {
               nextState[key] = newStateToSet[key];
             }
           }); // if stateToSet is a function, then we weren't able to call onInputValueChange
           // earlier, so we'll call it now that we know what the inputValue state will be.
 
           if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
-            _this.props.onInputValueChange(newStateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), newStateToSet));
+            this.props.onInputValueChange(newStateToSet.inputValue, { ...this.getStateAndHelpers(),
+              ...newStateToSet
+            });
           }
 
           return nextState;
-        }, function () {
+        }, () => {
           // call the provided callback if it's a function
           cbToCb(cb)(); // only call the onStateChange and onChange callbacks if
           // we have relevant information to pass them.
 
-          var hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
+          const hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
 
           if (hasMoreStateThanType) {
-            _this.props.onStateChange(onStateChangeArg, _this.getStateAndHelpers());
+            this.props.onStateChange(onStateChangeArg, this.getStateAndHelpers());
           }
 
           if (isItemSelected) {
-            _this.props.onSelect(stateToSet.selectedItem, _this.getStateAndHelpers());
+            this.props.onSelect(stateToSet.selectedItem, this.getStateAndHelpers());
           }
 
           if (onChangeArg !== undefined) {
-            _this.props.onChange(onChangeArg, _this.getStateAndHelpers());
+            this.props.onChange(onChangeArg, this.getStateAndHelpers());
           } // this is currently undocumented and therefore subject to change
           // We'll try to not break it, but just be warned.
 
 
-          _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
+          this.props.onUserAction(onStateChangeArg, this.getStateAndHelpers());
         });
       };
 
-      _this.rootRef = function (node) {
-        return _this._rootNode = node;
-      };
-
-      _this.getRootProps = function (_temp, _temp2) {
-        var _extends2;
-
-        var _ref = _temp === void 0 ? {} : _temp,
-            _ref$refKey = _ref.refKey,
-            refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
-            ref = _ref.ref,
-            rest = _objectWithoutPropertiesLoose$1(_ref, ["refKey", "ref"]);
-
-        var _ref2 = _temp2 === void 0 ? {} : _temp2,
-            _ref2$suppressRefErro = _ref2.suppressRefError,
-            suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
-
+      this.rootRef = node => this._rootNode = node;
+
+      this.getRootProps = function (_temp, _temp2) {
+        let {
+          refKey = 'ref',
+          ref,
+          ...rest
+        } = _temp === void 0 ? {} : _temp;
+        let {
+          suppressRefError = false
+        } = _temp2 === void 0 ? {} : _temp2;
         // this is used in the render to know whether the user has called getRootProps.
         // It uses that to know whether to apply the props automatically
         _this.getRootProps.called = true;
         _this.getRootProps.refKey = refKey;
         _this.getRootProps.suppressRefError = suppressRefError;
 
-        var _this$getState = _this.getState(),
-            isOpen = _this$getState.isOpen;
+        const {
+          isOpen
+        } = _this.getState();
 
-        return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
+        return {
+          [refKey]: handleRefs(ref, _this.rootRef),
+          role: 'combobox',
+          'aria-expanded': isOpen,
+          'aria-haspopup': 'listbox',
+          'aria-owns': isOpen ? _this.menuId : null,
+          'aria-labelledby': _this.labelId,
+          ...rest
+        };
       };
 
-      _this.keyDownHandlers = {
-        ArrowDown: function ArrowDown(event) {
-          var _this2 = this;
-
+      this.keyDownHandlers = {
+        ArrowDown(event) {
           event.preventDefault();
 
           if (this.getState().isOpen) {
-            var amount = event.shiftKey ? 5 : 1;
+            const amount = event.shiftKey ? 5 : 1;
             this.moveHighlightedIndex(amount, {
               type: keyDownArrowDown
             });
@@ -7436,31 +7518,27 @@ var Downshift = /*#__PURE__*/function () {
             this.internalSetState({
               isOpen: true,
               type: keyDownArrowDown
-            }, function () {
-              var itemCount = _this2.getItemCount();
+            }, () => {
+              const itemCount = this.getItemCount();
 
               if (itemCount > 0) {
-                var _this2$getState = _this2.getState(),
-                    highlightedIndex = _this2$getState.highlightedIndex;
-
-                var nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, function (index) {
-                  return _this2.getItemNodeFromIndex(index);
-                });
-
-                _this2.setHighlightedIndex(nextHighlightedIndex, {
+                const {
+                  highlightedIndex
+                } = this.getState();
+                const nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
+                this.setHighlightedIndex(nextHighlightedIndex, {
                   type: keyDownArrowDown
                 });
               }
             });
           }
         },
-        ArrowUp: function ArrowUp(event) {
-          var _this3 = this;
 
+        ArrowUp(event) {
           event.preventDefault();
 
           if (this.getState().isOpen) {
-            var amount = event.shiftKey ? -5 : -1;
+            const amount = event.shiftKey ? -5 : -1;
             this.moveHighlightedIndex(amount, {
               type: keyDownArrowUp
             });
@@ -7468,37 +7546,36 @@ var Downshift = /*#__PURE__*/function () {
             this.internalSetState({
               isOpen: true,
               type: keyDownArrowUp
-            }, function () {
-              var itemCount = _this3.getItemCount();
+            }, () => {
+              const itemCount = this.getItemCount();
 
               if (itemCount > 0) {
-                var _this3$getState = _this3.getState(),
-                    highlightedIndex = _this3$getState.highlightedIndex;
-
-                var nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, function (index) {
-                  return _this3.getItemNodeFromIndex(index);
-                });
-
-                _this3.setHighlightedIndex(nextHighlightedIndex, {
+                const {
+                  highlightedIndex
+                } = this.getState();
+                const nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
+                this.setHighlightedIndex(nextHighlightedIndex, {
                   type: keyDownArrowUp
                 });
               }
             });
           }
         },
-        Enter: function Enter(event) {
+
+        Enter(event) {
           if (event.which === 229) {
             return;
           }
 
-          var _this$getState2 = this.getState(),
-              isOpen = _this$getState2.isOpen,
-              highlightedIndex = _this$getState2.highlightedIndex;
+          const {
+            isOpen,
+            highlightedIndex
+          } = this.getState();
 
           if (isOpen && highlightedIndex != null) {
             event.preventDefault();
-            var item = this.items[highlightedIndex];
-            var itemNode = this.getItemNodeFromIndex(highlightedIndex);
+            const item = this.items[highlightedIndex];
+            const itemNode = this.getItemNodeFromIndex(highlightedIndex);
 
             if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
               return;
@@ -7509,125 +7586,131 @@ var Downshift = /*#__PURE__*/function () {
             });
           }
         },
-        Escape: function Escape(event) {
+
+        Escape(event) {
           event.preventDefault();
-          this.reset(_extends({
-            type: keyDownEscape
-          }, !this.state.isOpen && {
-            selectedItem: null,
-            inputValue: ''
-          }));
+          this.reset({
+            type: keyDownEscape,
+            ...(!this.state.isOpen && {
+              selectedItem: null,
+              inputValue: ''
+            })
+          });
         }
+
       };
-      _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
-        ' ': function _(event) {
+      this.buttonKeyDownHandlers = { ...this.keyDownHandlers,
+
+        ' '(event) {
           event.preventDefault();
           this.toggleMenu({
             type: keyDownSpaceButton
           });
         }
-      });
-      _this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
-        Home: function Home(event) {
-          var _this4 = this;
 
-          var _this$getState3 = this.getState(),
-              isOpen = _this$getState3.isOpen;
+      };
+      this.inputKeyDownHandlers = { ...this.keyDownHandlers,
+
+        Home(event) {
+          const {
+            isOpen
+          } = this.getState();
 
           if (!isOpen) {
             return;
           }
 
           event.preventDefault();
-          var itemCount = this.getItemCount();
+          const itemCount = this.getItemCount();
 
           if (itemCount <= 0 || !isOpen) {
             return;
           } // get next non-disabled starting downwards from 0 if that's disabled.
 
 
-          var newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, function (index) {
-            return _this4.getItemNodeFromIndex(index);
-          }, false);
+          const newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, index => this.getItemNodeFromIndex(index), false);
           this.setHighlightedIndex(newHighlightedIndex, {
             type: keyDownHome
           });
         },
-        End: function End(event) {
-          var _this5 = this;
 
-          var _this$getState4 = this.getState(),
-              isOpen = _this$getState4.isOpen;
+        End(event) {
+          const {
+            isOpen
+          } = this.getState();
 
           if (!isOpen) {
             return;
           }
 
           event.preventDefault();
-          var itemCount = this.getItemCount();
+          const itemCount = this.getItemCount();
 
           if (itemCount <= 0 || !isOpen) {
             return;
           } // get next non-disabled starting upwards from last index if that's disabled.
 
 
-          var newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, function (index) {
-            return _this5.getItemNodeFromIndex(index);
-          }, false);
+          const newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, index => this.getItemNodeFromIndex(index), false);
           this.setHighlightedIndex(newHighlightedIndex, {
             type: keyDownEnd
           });
         }
-      });
 
-      _this.getToggleButtonProps = function (_temp3) {
-        var _ref3 = _temp3 === void 0 ? {} : _temp3,
-            onClick = _ref3.onClick;
-            _ref3.onPress;
-            var onKeyDown = _ref3.onKeyDown,
-            onKeyUp = _ref3.onKeyUp,
-            onBlur = _ref3.onBlur,
-            rest = _objectWithoutPropertiesLoose$1(_ref3, ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"]);
-
-        var _this$getState5 = _this.getState(),
-            isOpen = _this$getState5.isOpen;
+      };
 
-        var enabledEventHandlers = {
+      this.getToggleButtonProps = function (_temp3) {
+        let {
+          onClick,
+          onPress,
+          onKeyDown,
+          onKeyUp,
+          onBlur,
+          ...rest
+        } = _temp3 === void 0 ? {} : _temp3;
+
+        const {
+          isOpen
+        } = _this.getState();
+
+        const enabledEventHandlers = {
           onClick: callAllEventHandlers(onClick, _this.buttonHandleClick),
           onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown),
           onKeyUp: callAllEventHandlers(onKeyUp, _this.buttonHandleKeyUp),
           onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur)
         };
-        var eventHandlers = rest.disabled ? {} : enabledEventHandlers;
-        return _extends({
+        const eventHandlers = rest.disabled ? {} : enabledEventHandlers;
+        return {
           type: 'button',
           role: 'button',
           'aria-label': isOpen ? 'close menu' : 'open menu',
           'aria-haspopup': true,
-          'data-toggle': true
-        }, eventHandlers, rest);
+          'data-toggle': true,
+          ...eventHandlers,
+          ...rest
+        };
       };
 
-      _this.buttonHandleKeyUp = function (event) {
+      this.buttonHandleKeyUp = event => {
         // Prevent click event from emitting in Firefox
         event.preventDefault();
       };
 
-      _this.buttonHandleKeyDown = function (event) {
-        var key = normalizeArrowKey(event);
+      this.buttonHandleKeyDown = event => {
+        const key = normalizeArrowKey(event);
 
-        if (_this.buttonKeyDownHandlers[key]) {
-          _this.buttonKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
+        if (this.buttonKeyDownHandlers[key]) {
+          this.buttonKeyDownHandlers[key].call(this, event);
         }
       };
 
-      _this.buttonHandleClick = function (event) {
+      this.buttonHandleClick = event => {
         event.preventDefault(); // handle odd case for Safari and Firefox which
         // don't give the button the focus properly.
 
         /* istanbul ignore if (can't reasonably test this) */
 
-        if (_this.props.environment.document.activeElement === _this.props.environment.document.body) {
+        if (this.props.environment.document.activeElement === this.props.environment.document.body) {
           event.target.focus();
         } // to simplify testing components that use downshift, we'll not wrap this in a setTimeout
         // if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
@@ -7635,69 +7718,71 @@ var Downshift = /*#__PURE__*/function () {
 
 
         if (process.env.NODE_ENV === 'test') {
-          _this.toggleMenu({
+          this.toggleMenu({
             type: clickButton
           });
         } else {
           // Ensure that toggle of menu occurs after the potential blur event in iOS
-          _this.internalSetTimeout(function () {
-            return _this.toggleMenu({
-              type: clickButton
-            });
-          });
+          this.internalSetTimeout(() => this.toggleMenu({
+            type: clickButton
+          }));
         }
       };
 
-      _this.buttonHandleBlur = function (event) {
-        var blurTarget = event.target; // Save blur target for comparison with activeElement later
+      this.buttonHandleBlur = event => {
+        const blurTarget = event.target; // Save blur target for comparison with activeElement later
         // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
 
-        _this.internalSetTimeout(function () {
-          if (!_this.isMouseDown && (_this.props.environment.document.activeElement == null || _this.props.environment.document.activeElement.id !== _this.inputId) && _this.props.environment.document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
+        this.internalSetTimeout(() => {
+          if (!this.isMouseDown && (this.props.environment.document.activeElement == null || this.props.environment.document.activeElement.id !== this.inputId) && this.props.environment.document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
           ) {
-              _this.reset({
-                type: blurButton
-              });
-            }
+            this.reset({
+              type: blurButton
+            });
+          }
         });
       };
 
-      _this.getLabelProps = function (props) {
-        return _extends({
-          htmlFor: _this.inputId,
-          id: _this.labelId
-        }, props);
+      this.getLabelProps = props => {
+        return {
+          htmlFor: this.inputId,
+          id: this.labelId,
+          ...props
+        };
       };
 
-      _this.getInputProps = function (_temp4) {
-        var _ref4 = _temp4 === void 0 ? {} : _temp4,
-            onKeyDown = _ref4.onKeyDown,
-            onBlur = _ref4.onBlur,
-            onChange = _ref4.onChange,
-            onInput = _ref4.onInput;
-            _ref4.onChangeText;
-            var rest = _objectWithoutPropertiesLoose$1(_ref4, ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"]);
-
-        var onChangeKey;
-        var eventHandlers = {};
+      this.getInputProps = function (_temp4) {
+        let {
+          onKeyDown,
+          onBlur,
+          onChange,
+          onInput,
+          onChangeText,
+          ...rest
+        } = _temp4 === void 0 ? {} : _temp4;
+        let onChangeKey;
+        let eventHandlers = {};
         /* istanbul ignore next (preact) */
 
         {
           onChangeKey = 'onChange';
         }
 
-        var _this$getState6 = _this.getState(),
-            inputValue = _this$getState6.inputValue,
-            isOpen = _this$getState6.isOpen,
-            highlightedIndex = _this$getState6.highlightedIndex;
+        const {
+          inputValue,
+          isOpen,
+          highlightedIndex
+        } = _this.getState();
 
         if (!rest.disabled) {
-          var _eventHandlers;
-
-          eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, _this.inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, _this.inputHandleBlur), _eventHandlers);
+          eventHandlers = {
+            [onChangeKey]: callAllEventHandlers(onChange, onInput, _this.inputHandleChange),
+            onKeyDown: callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown),
+            onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
+          };
         }
 
-        return _extends({
+        return {
           'aria-autocomplete': 'list',
           'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
           'aria-controls': isOpen ? _this.menuId : null,
@@ -7706,77 +7791,79 @@ var Downshift = /*#__PURE__*/function () {
           // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
           autoComplete: 'off',
           value: inputValue,
-          id: _this.inputId
-        }, eventHandlers, rest);
+          id: _this.inputId,
+          ...eventHandlers,
+          ...rest
+        };
       };
 
-      _this.inputHandleKeyDown = function (event) {
-        var key = normalizeArrowKey(event);
+      this.inputHandleKeyDown = event => {
+        const key = normalizeArrowKey(event);
 
-        if (key && _this.inputKeyDownHandlers[key]) {
-          _this.inputKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
+        if (key && this.inputKeyDownHandlers[key]) {
+          this.inputKeyDownHandlers[key].call(this, event);
         }
       };
 
-      _this.inputHandleChange = function (event) {
-        _this.internalSetState({
+      this.inputHandleChange = event => {
+        this.internalSetState({
           type: changeInput,
           isOpen: true,
           inputValue: event.target.value,
-          highlightedIndex: _this.props.defaultHighlightedIndex
+          highlightedIndex: this.props.defaultHighlightedIndex
         });
       };
 
-      _this.inputHandleBlur = function () {
+      this.inputHandleBlur = () => {
         // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
-        _this.internalSetTimeout(function () {
-          var downshiftButtonIsActive = _this.props.environment.document && !!_this.props.environment.document.activeElement && !!_this.props.environment.document.activeElement.dataset && _this.props.environment.document.activeElement.dataset.toggle && _this._rootNode && _this._rootNode.contains(_this.props.environment.document.activeElement);
+        this.internalSetTimeout(() => {
+          const downshiftButtonIsActive = this.props.environment.document && !!this.props.environment.document.activeElement && !!this.props.environment.document.activeElement.dataset && this.props.environment.document.activeElement.dataset.toggle && this._rootNode && this._rootNode.contains(this.props.environment.document.activeElement);
 
-          if (!_this.isMouseDown && !downshiftButtonIsActive) {
-            _this.reset({
+          if (!this.isMouseDown && !downshiftButtonIsActive) {
+            this.reset({
               type: blurInput
             });
           }
         });
       };
 
-      _this.menuRef = function (node) {
-        _this._menuNode = node;
+      this.menuRef = node => {
+        this._menuNode = node;
       };
 
-      _this.getMenuProps = function (_temp5, _temp6) {
-        var _extends3;
-
-        var _ref5 = _temp5 === void 0 ? {} : _temp5,
-            _ref5$refKey = _ref5.refKey,
-            refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
-            ref = _ref5.ref,
-            props = _objectWithoutPropertiesLoose$1(_ref5, ["refKey", "ref"]);
-
-        var _ref6 = _temp6 === void 0 ? {} : _temp6,
-            _ref6$suppressRefErro = _ref6.suppressRefError,
-            suppressRefError = _ref6$suppressRefErro === void 0 ? false : _ref6$suppressRefErro;
-
+      this.getMenuProps = function (_temp5, _temp6) {
+        let {
+          refKey = 'ref',
+          ref,
+          ...props
+        } = _temp5 === void 0 ? {} : _temp5;
+        let {
+          suppressRefError = false
+        } = _temp6 === void 0 ? {} : _temp6;
         _this.getMenuProps.called = true;
         _this.getMenuProps.refKey = refKey;
         _this.getMenuProps.suppressRefError = suppressRefError;
-        return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? null : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
+        return {
+          [refKey]: handleRefs(ref, _this.menuRef),
+          role: 'listbox',
+          'aria-labelledby': props && props['aria-label'] ? null : _this.labelId,
+          id: _this.menuId,
+          ...props
+        };
       };
 
-      _this.getItemProps = function (_temp7) {
-        var _enabledEventHandlers;
-
-        var _ref7 = _temp7 === void 0 ? {} : _temp7,
-            onMouseMove = _ref7.onMouseMove,
-            onMouseDown = _ref7.onMouseDown,
-            onClick = _ref7.onClick;
-            _ref7.onPress;
-            var index = _ref7.index,
-            _ref7$item = _ref7.item,
-            item = _ref7$item === void 0 ? process.env.NODE_ENV === 'production' ?
-        /* istanbul ignore next */
-        undefined : requiredProp('getItemProps', 'item') : _ref7$item,
-            rest = _objectWithoutPropertiesLoose$1(_ref7, ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"]);
+      this.getItemProps = function (_temp7) {
+        let {
+          onMouseMove,
+          onMouseDown,
+          onClick,
+          onPress,
+          index,
+          item = process.env.NODE_ENV === 'production' ?
+          /* istanbul ignore next */
+          undefined : requiredProp('getItemProps', 'item'),
+          ...rest
+        } = _temp7 === void 0 ? {} : _temp7;
 
         if (index === undefined) {
           _this.items.push(item);
@@ -7786,13 +7873,13 @@ var Downshift = /*#__PURE__*/function () {
           _this.items[index] = item;
         }
 
-        var onSelectKey = 'onClick';
-        var customClickHandler = onClick;
-        var enabledEventHandlers = (_enabledEventHandlers = {
+        const onSelectKey = 'onClick';
+        const customClickHandler = onClick;
+        const enabledEventHandlers = {
           // onMouseMove is used over onMouseEnter here. onMouseMove
           // is only triggered on actual mouse movement while onMouseEnter
           // can fire on DOM changes, interrupting keyboard navigation
-          onMouseMove: callAllEventHandlers(onMouseMove, function () {
+          onMouseMove: callAllEventHandlers(onMouseMove, () => {
             if (index === _this.getState().highlightedIndex) {
               return;
             }
@@ -7807,72 +7894,81 @@ var Downshift = /*#__PURE__*/function () {
 
             _this.avoidScrolling = true;
 
-            _this.internalSetTimeout(function () {
-              return _this.avoidScrolling = false;
-            }, 250);
+            _this.internalSetTimeout(() => _this.avoidScrolling = false, 250);
           }),
-          onMouseDown: callAllEventHandlers(onMouseDown, function (event) {
+          onMouseDown: callAllEventHandlers(onMouseDown, event => {
             // This prevents the activeElement from being changed
             // to the item so it can remain with the current activeElement
             // which is a more common use case.
             event.preventDefault();
+          }),
+          [onSelectKey]: callAllEventHandlers(customClickHandler, () => {
+            _this.selectItemAtIndex(index, {
+              type: clickItem
+            });
           })
-        }, _enabledEventHandlers[onSelectKey] = callAllEventHandlers(customClickHandler, function () {
-          _this.selectItemAtIndex(index, {
-            type: clickItem
-          });
-        }), _enabledEventHandlers); // Passing down the onMouseDown handler to prevent redirect
+        }; // Passing down the onMouseDown handler to prevent redirect
         // of the activeElement if clicking on disabled items
 
-        var eventHandlers = rest.disabled ? {
+        const eventHandlers = rest.disabled ? {
           onMouseDown: enabledEventHandlers.onMouseDown
         } : enabledEventHandlers;
-        return _extends({
+        return {
           id: _this.getItemId(index),
           role: 'option',
-          'aria-selected': _this.getState().highlightedIndex === index
-        }, eventHandlers, rest);
+          'aria-selected': _this.getState().highlightedIndex === index,
+          ...eventHandlers,
+          ...rest
+        };
       };
 
-      _this.clearItems = function () {
-        _this.items = [];
+      this.clearItems = () => {
+        this.items = [];
       };
 
-      _this.reset = function (otherStateToSet, cb) {
+      this.reset = function (otherStateToSet, cb) {
         if (otherStateToSet === void 0) {
           otherStateToSet = {};
         }
 
         otherStateToSet = pickState(otherStateToSet);
 
-        _this.internalSetState(function (_ref8) {
-          var selectedItem = _ref8.selectedItem;
-          return _extends({
+        _this.internalSetState(_ref => {
+          let {
+            selectedItem
+          } = _ref;
+          return {
             isOpen: _this.props.defaultIsOpen,
             highlightedIndex: _this.props.defaultHighlightedIndex,
-            inputValue: _this.props.itemToString(selectedItem)
-          }, otherStateToSet);
+            inputValue: _this.props.itemToString(selectedItem),
+            ...otherStateToSet
+          };
         }, cb);
       };
 
-      _this.toggleMenu = function (otherStateToSet, cb) {
+      this.toggleMenu = function (otherStateToSet, cb) {
         if (otherStateToSet === void 0) {
           otherStateToSet = {};
         }
 
         otherStateToSet = pickState(otherStateToSet);
 
-        _this.internalSetState(function (_ref9) {
-          var isOpen = _ref9.isOpen;
-          return _extends({
-            isOpen: !isOpen
-          }, isOpen && {
-            highlightedIndex: _this.props.defaultHighlightedIndex
-          }, otherStateToSet);
-        }, function () {
-          var _this$getState7 = _this.getState(),
-              isOpen = _this$getState7.isOpen,
-              highlightedIndex = _this$getState7.highlightedIndex;
+        _this.internalSetState(_ref2 => {
+          let {
+            isOpen
+          } = _ref2;
+          return {
+            isOpen: !isOpen,
+            ...(isOpen && {
+              highlightedIndex: _this.props.defaultHighlightedIndex
+            }),
+            ...otherStateToSet
+          };
+        }, () => {
+          const {
+            isOpen,
+            highlightedIndex
+          } = _this.getState();
 
           if (isOpen) {
             if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
@@ -7884,70 +7980,63 @@ var Downshift = /*#__PURE__*/function () {
         });
       };
 
-      _this.openMenu = function (cb) {
-        _this.internalSetState({
+      this.openMenu = cb => {
+        this.internalSetState({
           isOpen: true
         }, cb);
       };
 
-      _this.closeMenu = function (cb) {
-        _this.internalSetState({
+      this.closeMenu = cb => {
+        this.internalSetState({
           isOpen: false
         }, cb);
       };
 
-      _this.updateStatus = debounce$1(function () {
-        var state = _this.getState();
-
-        var item = _this.items[state.highlightedIndex];
-
-        var resultCount = _this.getItemCount();
-
-        var status = _this.props.getA11yStatusMessage(_extends({
-          itemToString: _this.props.itemToString,
-          previousResultCount: _this.previousResultCount,
-          resultCount: resultCount,
-          highlightedItem: item
-        }, state));
-
-        _this.previousResultCount = resultCount;
-        setStatus(status, _this.props.environment.document);
+      this.updateStatus = debounce$1(() => {
+        const state = this.getState();
+        const item = this.items[state.highlightedIndex];
+        const resultCount = this.getItemCount();
+        const status = this.props.getA11yStatusMessage({
+          itemToString: this.props.itemToString,
+          previousResultCount: this.previousResultCount,
+          resultCount,
+          highlightedItem: item,
+          ...state
+        });
+        this.previousResultCount = resultCount;
+        setStatus(status, this.props.environment.document);
       }, 200);
-
-      var _this$props = _this.props,
-          defaultHighlightedIndex = _this$props.defaultHighlightedIndex,
-          _this$props$initialHi = _this$props.initialHighlightedIndex,
-          _highlightedIndex = _this$props$initialHi === void 0 ? defaultHighlightedIndex : _this$props$initialHi,
-          defaultIsOpen = _this$props.defaultIsOpen,
-          _this$props$initialIs = _this$props.initialIsOpen,
-          _isOpen = _this$props$initialIs === void 0 ? defaultIsOpen : _this$props$initialIs,
-          _this$props$initialIn = _this$props.initialInputValue,
-          _inputValue = _this$props$initialIn === void 0 ? '' : _this$props$initialIn,
-          _this$props$initialSe = _this$props.initialSelectedItem,
-          _selectedItem = _this$props$initialSe === void 0 ? null : _this$props$initialSe;
-
-      var _state = _this.getState({
+      // fancy destructuring + defaults + aliases
+      // this basically says each value of state should either be set to
+      // the initial value or the default value if the initial value is not provided
+      const {
+        defaultHighlightedIndex,
+        initialHighlightedIndex: _highlightedIndex = defaultHighlightedIndex,
+        defaultIsOpen,
+        initialIsOpen: _isOpen = defaultIsOpen,
+        initialInputValue: _inputValue = '',
+        initialSelectedItem: _selectedItem = null
+      } = this.props;
+
+      const _state = this.getState({
         highlightedIndex: _highlightedIndex,
         isOpen: _isOpen,
         inputValue: _inputValue,
         selectedItem: _selectedItem
       });
 
-      if (_state.selectedItem != null && _this.props.initialInputValue === undefined) {
-        _state.inputValue = _this.props.itemToString(_state.selectedItem);
+      if (_state.selectedItem != null && this.props.initialInputValue === undefined) {
+        _state.inputValue = this.props.itemToString(_state.selectedItem);
       }
 
-      _this.state = _state;
-      return _this;
+      this.state = _state;
     }
 
-    var _proto = Downshift.prototype;
-
     /**
      * Clear all running timeouts
      */
-    _proto.internalClearTimeouts = function internalClearTimeouts() {
-      this.timeoutIds.forEach(function (id) {
+    internalClearTimeouts() {
+      this.timeoutIds.forEach(id => {
         clearTimeout(id);
       });
       this.timeoutIds = [];
@@ -7961,22 +8050,22 @@ var Downshift = /*#__PURE__*/function () {
      * @param {Object} stateToMerge defaults to this.state
      * @return {Object} the state
      */
-    ;
 
-    _proto.getState = function getState$1(stateToMerge) {
+
+    getState(stateToMerge) {
       if (stateToMerge === void 0) {
         stateToMerge = this.state;
       }
 
       return getState(stateToMerge, this.props);
-    };
+    }
 
-    _proto.getItemCount = function getItemCount() {
+    getItemCount() {
       // things read better this way. They're in priority order:
       // 1. `this.itemCount`
       // 2. `this.props.itemCount`
       // 3. `this.items.length`
-      var itemCount = this.items.length;
+      let itemCount = this.items.length;
 
       if (this.itemCount != null) {
         itemCount = this.itemCount;
@@ -7985,102 +8074,102 @@ var Downshift = /*#__PURE__*/function () {
       }
 
       return itemCount;
-    };
+    }
 
-    _proto.getItemNodeFromIndex = function getItemNodeFromIndex(index) {
+    getItemNodeFromIndex(index) {
       return this.props.environment.document.getElementById(this.getItemId(index));
-    };
+    }
 
-    _proto.scrollHighlightedItemIntoView = function scrollHighlightedItemIntoView() {
+    scrollHighlightedItemIntoView() {
       /* istanbul ignore else (react-native) */
       {
-        var node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
+        const node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
         this.props.scrollIntoView(node, this._menuNode);
       }
-    };
-
-    _proto.moveHighlightedIndex = function moveHighlightedIndex(amount, otherStateToSet) {
-      var _this6 = this;
-
-      var itemCount = this.getItemCount();
+    }
 
-      var _this$getState8 = this.getState(),
-          highlightedIndex = _this$getState8.highlightedIndex;
+    moveHighlightedIndex(amount, otherStateToSet) {
+      const itemCount = this.getItemCount();
+      const {
+        highlightedIndex
+      } = this.getState();
 
       if (itemCount > 0) {
-        var nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, function (index) {
-          return _this6.getItemNodeFromIndex(index);
-        });
+        const nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
         this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
       }
-    };
+    }
 
-    _proto.getStateAndHelpers = function getStateAndHelpers() {
-      var _this$getState9 = this.getState(),
-          highlightedIndex = _this$getState9.highlightedIndex,
-          inputValue = _this$getState9.inputValue,
-          selectedItem = _this$getState9.selectedItem,
-          isOpen = _this$getState9.isOpen;
-
-      var itemToString = this.props.itemToString;
-      var id = this.id;
-      var getRootProps = this.getRootProps,
-          getToggleButtonProps = this.getToggleButtonProps,
-          getLabelProps = this.getLabelProps,
-          getMenuProps = this.getMenuProps,
-          getInputProps = this.getInputProps,
-          getItemProps = this.getItemProps,
-          openMenu = this.openMenu,
-          closeMenu = this.closeMenu,
-          toggleMenu = this.toggleMenu,
-          selectItem = this.selectItem,
-          selectItemAtIndex = this.selectItemAtIndex,
-          selectHighlightedItem = this.selectHighlightedItem,
-          setHighlightedIndex = this.setHighlightedIndex,
-          clearSelection = this.clearSelection,
-          clearItems = this.clearItems,
-          reset = this.reset,
-          setItemCount = this.setItemCount,
-          unsetItemCount = this.unsetItemCount,
-          setState = this.internalSetState;
+    getStateAndHelpers() {
+      const {
+        highlightedIndex,
+        inputValue,
+        selectedItem,
+        isOpen
+      } = this.getState();
+      const {
+        itemToString
+      } = this.props;
+      const {
+        id
+      } = this;
+      const {
+        getRootProps,
+        getToggleButtonProps,
+        getLabelProps,
+        getMenuProps,
+        getInputProps,
+        getItemProps,
+        openMenu,
+        closeMenu,
+        toggleMenu,
+        selectItem,
+        selectItemAtIndex,
+        selectHighlightedItem,
+        setHighlightedIndex,
+        clearSelection,
+        clearItems,
+        reset,
+        setItemCount,
+        unsetItemCount,
+        internalSetState: setState
+      } = this;
       return {
         // prop getters
-        getRootProps: getRootProps,
-        getToggleButtonProps: getToggleButtonProps,
-        getLabelProps: getLabelProps,
-        getMenuProps: getMenuProps,
-        getInputProps: getInputProps,
-        getItemProps: getItemProps,
+        getRootProps,
+        getToggleButtonProps,
+        getLabelProps,
+        getMenuProps,
+        getInputProps,
+        getItemProps,
         // actions
-        reset: reset,
-        openMenu: openMenu,
-        closeMenu: closeMenu,
-        toggleMenu: toggleMenu,
-        selectItem: selectItem,
-        selectItemAtIndex: selectItemAtIndex,
-        selectHighlightedItem: selectHighlightedItem,
-        setHighlightedIndex: setHighlightedIndex,
-        clearSelection: clearSelection,
-        clearItems: clearItems,
-        setItemCount: setItemCount,
-        unsetItemCount: unsetItemCount,
-        setState: setState,
+        reset,
+        openMenu,
+        closeMenu,
+        toggleMenu,
+        selectItem,
+        selectItemAtIndex,
+        selectHighlightedItem,
+        setHighlightedIndex,
+        clearSelection,
+        clearItems,
+        setItemCount,
+        unsetItemCount,
+        setState,
         // props
-        itemToString: itemToString,
+        itemToString,
         // derived
-        id: id,
+        id,
         // state
-        highlightedIndex: highlightedIndex,
-        inputValue: inputValue,
-        isOpen: isOpen,
-        selectedItem: selectedItem
+        highlightedIndex,
+        inputValue,
+        isOpen,
+        selectedItem
       };
     } //////////////////////////// ROOT
-    ;
 
-    _proto.componentDidMount = function componentDidMount() {
-      var _this7 = this;
 
+    componentDidMount() {
       /* istanbul ignore if (react-native) */
       if (process.env.NODE_ENV !== 'production' && !false && this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
         validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
@@ -8094,22 +8183,20 @@ var Downshift = /*#__PURE__*/function () {
         // down long enough for the list to disappear (because the blur event fires on the input)
         // this.isMouseDown is used in the blur handler on the input to determine whether the blur event should
         // trigger hiding the menu.
-        var onMouseDown = function onMouseDown() {
-          _this7.isMouseDown = true;
+        const onMouseDown = () => {
+          this.isMouseDown = true;
         };
 
-        var onMouseUp = function onMouseUp(event) {
-          _this7.isMouseDown = false; // if the target element or the activeElement is within a downshift node
+        const onMouseUp = event => {
+          this.isMouseDown = false; // if the target element or the activeElement is within a downshift node
           // then we don't want to reset downshift
 
-          var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment);
+          const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment);
 
-          if (!contextWithinDownshift && _this7.getState().isOpen) {
-            _this7.reset({
+          if (!contextWithinDownshift && this.getState().isOpen) {
+            this.reset({
               type: mouseUp
-            }, function () {
-              return _this7.props.onOuterClick(_this7.getStateAndHelpers());
-            });
+            }, () => this.props.onOuterClick(this.getStateAndHelpers()));
           }
         }; // Touching an element in iOS gives focus and hover states, but touching out of
         // the element will remove hover, and persist the focus state, resulting in the
@@ -8119,38 +8206,36 @@ var Downshift = /*#__PURE__*/function () {
         // but not if the user is swiping
 
 
-        var onTouchStart = function onTouchStart() {
-          _this7.isTouchMove = false;
+        const onTouchStart = () => {
+          this.isTouchMove = false;
         };
 
-        var onTouchMove = function onTouchMove() {
-          _this7.isTouchMove = true;
+        const onTouchMove = () => {
+          this.isTouchMove = true;
         };
 
-        var onTouchEnd = function onTouchEnd(event) {
-          var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment, false);
+        const onTouchEnd = event => {
+          const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment, false);
 
-          if (!_this7.isTouchMove && !contextWithinDownshift && _this7.getState().isOpen) {
-            _this7.reset({
+          if (!this.isTouchMove && !contextWithinDownshift && this.getState().isOpen) {
+            this.reset({
               type: touchEnd
-            }, function () {
-              return _this7.props.onOuterClick(_this7.getStateAndHelpers());
-            });
+            }, () => this.props.onOuterClick(this.getStateAndHelpers()));
           }
         };
 
-        var environment = this.props.environment;
+        const {
+          environment
+        } = this.props;
         environment.addEventListener('mousedown', onMouseDown);
         environment.addEventListener('mouseup', onMouseUp);
         environment.addEventListener('touchstart', onTouchStart);
         environment.addEventListener('touchmove', onTouchMove);
         environment.addEventListener('touchend', onTouchEnd);
 
-        this.cleanup = function () {
-          _this7.internalClearTimeouts();
-
-          _this7.updateStatus.cancel();
-
+        this.cleanup = () => {
+          this.internalClearTimeouts();
+          this.updateStatus.cancel();
           environment.removeEventListener('mousedown', onMouseDown);
           environment.removeEventListener('mouseup', onMouseUp);
           environment.removeEventListener('touchstart', onTouchStart);
@@ -8158,21 +8243,21 @@ var Downshift = /*#__PURE__*/function () {
           environment.removeEventListener('touchend', onTouchEnd);
         };
       }
-    };
-
-    _proto.shouldScroll = function shouldScroll(prevState, prevProps) {
-      var _ref10 = this.props.highlightedIndex === undefined ? this.getState() : this.props,
-          currentHighlightedIndex = _ref10.highlightedIndex;
-
-      var _ref11 = prevProps.highlightedIndex === undefined ? prevState : prevProps,
-          prevHighlightedIndex = _ref11.highlightedIndex;
+    }
 
-      var scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
-      var scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
+    shouldScroll(prevState, prevProps) {
+      const {
+        highlightedIndex: currentHighlightedIndex
+      } = this.props.highlightedIndex === undefined ? this.getState() : this.props;
+      const {
+        highlightedIndex: prevHighlightedIndex
+      } = prevProps.highlightedIndex === undefined ? prevState : prevProps;
+      const scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
+      const scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
       return scrollWhenOpen || scrollWhenNavigating;
-    };
+    }
 
-    _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    componentDidUpdate(prevProps, prevState) {
       if (process.env.NODE_ENV !== 'production') {
         validateControlledUnchanged(this.state, prevProps, this.props);
         /* istanbul ignore if (react-native) */
@@ -8198,14 +8283,14 @@ var Downshift = /*#__PURE__*/function () {
       {
         this.updateStatus();
       }
-    };
+    }
 
-    _proto.componentWillUnmount = function componentWillUnmount() {
+    componentWillUnmount() {
       this.cleanup(); // avoids memory leak
-    };
+    }
 
-    _proto.render = function render() {
-      var children = unwrapArray(this.props.children, noop); // because the items are rerendered every time we call the children
+    render() {
+      const children = unwrapArray(this.props.children, noop); // because the items are rerendered every time we call the children
       // we clear this out each render and it will be populated again as
       // getItemProps is called.
 
@@ -8225,7 +8310,7 @@ var Downshift = /*#__PURE__*/function () {
       this.getLabelProps.called = false; // and something similar for getInputProps
 
       this.getInputProps.called = false;
-      var element = unwrapArray(children(this.getStateAndHelpers()));
+      const element = unwrapArray(children(this.getStateAndHelpers()));
 
       if (!element) {
         return null;
@@ -8254,16 +8339,15 @@ var Downshift = /*#__PURE__*/function () {
 
 
       return undefined;
-    };
+    }
 
-    return Downshift;
-  }(Component);
+  }
 
   Downshift.defaultProps = {
     defaultHighlightedIndex: null,
     defaultIsOpen: false,
     getA11yStatusMessage: getA11yStatusMessage$1,
-    itemToString: function itemToString(i) {
+    itemToString: i => {
       if (i == null) {
         return '';
       }
@@ -8281,21 +8365,17 @@ var Downshift = /*#__PURE__*/function () {
     onChange: noop,
     onSelect: noop,
     onOuterClick: noop,
-    selectedItemChanged: function selectedItemChanged(prevItem, item) {
-      return prevItem !== item;
-    },
-    environment: typeof window === 'undefined'
+    selectedItemChanged: (prevItem, item) => prevItem !== item,
+    environment:
     /* istanbul ignore next (ssr) */
-    ? {} : window,
-    stateReducer: function stateReducer(state, stateToSet) {
-      return stateToSet;
-    },
+    typeof window === 'undefined' ? {} : window,
+    stateReducer: (state, stateToSet) => stateToSet,
     suppressRefError: false,
-    scrollIntoView: scrollIntoView
+    scrollIntoView
   };
   Downshift.stateChangeTypes = stateChangeTypes$3;
   return Downshift;
-}();
+})();
 
 process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
   children: propTypes.func,
@@ -8343,36 +8423,41 @@ process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
   /* eslint-enable react/no-unused-prop-types */
 
 } : void 0;
+var Downshift$1 = Downshift;
 
-function validateGetMenuPropsCalledCorrectly(node, _ref12) {
-  var refKey = _ref12.refKey;
+function validateGetMenuPropsCalledCorrectly(node, _ref3) {
+  let {
+    refKey
+  } = _ref3;
 
   if (!node) {
     // eslint-disable-next-line no-console
-    console.error("downshift: The ref prop \"" + refKey + "\" from getMenuProps was not applied correctly on your menu element.");
+    console.error(`downshift: The ref prop "${refKey}" from getMenuProps was not applied correctly on your menu element.`);
   }
 }
 
-function validateGetRootPropsCalledCorrectly(element, _ref13) {
-  var refKey = _ref13.refKey;
-  var refKeySpecified = refKey !== 'ref';
-  var isComposite = !isDOMElement(element);
+function validateGetRootPropsCalledCorrectly(element, _ref4) {
+  let {
+    refKey
+  } = _ref4;
+  const refKeySpecified = refKey !== 'ref';
+  const isComposite = !isDOMElement(element);
 
   if (isComposite && !refKeySpecified && !reactIs_3(element)) {
     // eslint-disable-next-line no-console
     console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
   } else if (!isComposite && refKeySpecified) {
     // eslint-disable-next-line no-console
-    console.error("downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified \"" + refKey + "\"");
+    console.error(`downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "${refKey}"`);
   }
 
   if (!reactIs_3(element) && !getElementProps(element)[refKey]) {
     // eslint-disable-next-line no-console
-    console.error("downshift: You must apply the ref prop \"" + refKey + "\" from getRootProps onto your root element.");
+    console.error(`downshift: You must apply the ref prop "${refKey}" from getRootProps onto your root element.`);
   }
 }
 
-var dropdownDefaultStateValues = {
+const dropdownDefaultStateValues = {
   highlightedIndex: -1,
   isOpen: false,
   selectedItem: null,
@@ -8380,10 +8465,12 @@ var dropdownDefaultStateValues = {
 };
 
 function callOnChangeProps(action, state, newState) {
-  var props = action.props,
-      type = action.type;
-  var changes = {};
-  Object.keys(state).forEach(function (key) {
+  const {
+    props,
+    type
+  } = action;
+  const changes = {};
+  Object.keys(state).forEach(key => {
     invokeOnChangeHandler(key, action, state, newState);
 
     if (newState[key] !== state[key]) {
@@ -8392,21 +8479,25 @@ function callOnChangeProps(action, state, newState) {
   });
 
   if (props.onStateChange && Object.keys(changes).length) {
-    props.onStateChange(_extends({
-      type: type
-    }, changes));
+    props.onStateChange({
+      type,
+      ...changes
+    });
   }
 }
 
 function invokeOnChangeHandler(key, action, state, newState) {
-  var props = action.props,
-      type = action.type;
-  var handler = "on" + capitalizeString(key) + "Change";
+  const {
+    props,
+    type
+  } = action;
+  const handler = `on${capitalizeString(key)}Change`;
 
   if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
-    props[handler](_extends({
-      type: type
-    }, newState));
+    props[handler]({
+      type,
+      ...newState
+    });
   }
 }
 /**
@@ -8430,37 +8521,38 @@ function stateReducer(s, a) {
 
 
 function getA11ySelectionMessage(selectionParameters) {
-  var selectedItem = selectionParameters.selectedItem,
-      itemToStringLocal = selectionParameters.itemToString;
-  return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
+  const {
+    selectedItem,
+    itemToString: itemToStringLocal
+  } = selectionParameters;
+  return selectedItem ? `${itemToStringLocal(selectedItem)} has been selected.` : '';
 }
 /**
  * Debounced call for updating the a11y message.
  */
 
 
-var updateA11yStatus = debounce$1(function (getA11yMessage, document) {
+const updateA11yStatus = debounce$1((getA11yMessage, document) => {
   setStatus(getA11yMessage(), document);
 }, 200); // istanbul ignore next
 
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
 
 function useElementIds(_ref) {
-  var _ref$id = _ref.id,
-      id = _ref$id === void 0 ? "downshift-" + generateId() : _ref$id,
-      labelId = _ref.labelId,
-      menuId = _ref.menuId,
-      getItemId = _ref.getItemId,
-      toggleButtonId = _ref.toggleButtonId,
-      inputId = _ref.inputId;
-  var elementIdsRef = useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
+  let {
+    id = `downshift-${generateId()}`,
+    labelId,
+    menuId,
+    getItemId,
+    toggleButtonId,
+    inputId
+  } = _ref;
+  const elementIdsRef = useRef({
+    labelId: labelId || `${id}-label`,
+    menuId: menuId || `${id}-menu`,
+    getItemId: getItemId || (index => `${id}-item-${index}`),
+    toggleButtonId: toggleButtonId || `${id}-toggle-button`,
+    inputId: inputId || `${id}-input`
   });
   return elementIdsRef.current;
 }
@@ -8482,11 +8574,11 @@ function itemToString(item) {
 }
 
 function capitalizeString(string) {
-  return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
+  return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
 }
 
 function useLatestRef(val) {
-  var ref = useRef(val); // technically this is not "concurrent mode safe" because we're manipulating
+  const ref = useRef(val); // technically this is not "concurrent mode safe" because we're manipulating
   // the value during render (so it's not idempotent). However, the places this
   // hook is used is to support memoizing callbacks which will be called
   // *during* render, so we need the latest values *during* render.
@@ -8508,30 +8600,25 @@ function useLatestRef(val) {
 
 
 function useEnhancedReducer(reducer, initialState, props) {
-  var prevStateRef = useRef();
-  var actionRef = useRef();
-  var enhancedReducer = useCallback(function (state, action) {
+  const prevStateRef = useRef();
+  const actionRef = useRef();
+  const enhancedReducer = useCallback((state, action) => {
     actionRef.current = action;
     state = getState(state, action.props);
-    var changes = reducer(state, action);
-    var newState = action.props.stateReducer(state, _extends({}, action, {
-      changes: changes
-    }));
+    const changes = reducer(state, action);
+    const newState = action.props.stateReducer(state, { ...action,
+      changes
+    });
     return newState;
   }, [reducer]);
-
-  var _useReducer = useReducer(enhancedReducer, initialState),
-      state = _useReducer[0],
-      dispatch = _useReducer[1];
-
-  var propsRef = useLatestRef(props);
-  var dispatchWithProps = useCallback(function (action) {
-    return dispatch(_extends({
-      props: propsRef.current
-    }, action));
-  }, [propsRef]);
-  var action = actionRef.current;
-  useEffect(function () {
+  const [state, dispatch] = useReducer(enhancedReducer, initialState);
+  const propsRef = useLatestRef(props);
+  const dispatchWithProps = useCallback(action => dispatch({
+    props: propsRef.current,
+    ...action
+  }), [propsRef]);
+  const action = actionRef.current;
+  useEffect(() => {
     if (action && prevStateRef.current && prevStateRef.current !== state) {
       callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
     }
@@ -8541,15 +8628,15 @@ function useEnhancedReducer(reducer, initialState, props) {
   return [state, dispatchWithProps];
 }
 
-var defaultProps$3 = {
-  itemToString: itemToString,
-  stateReducer: stateReducer,
-  getA11ySelectionMessage: getA11ySelectionMessage,
-  scrollIntoView: scrollIntoView,
+const defaultProps$3 = {
+  itemToString,
+  stateReducer,
+  getA11ySelectionMessage,
+  scrollIntoView,
   circularNavigation: false,
-  environment: typeof window === 'undefined'
+  environment:
   /* istanbul ignore next (ssr) */
-  ? {} : window
+  typeof window === 'undefined' ? {} : window
 };
 
 function getDefaultValue$1(props, propKey, defaultStateValues) {
@@ -8557,10 +8644,10 @@ function getDefaultValue$1(props, propKey, defaultStateValues) {
     defaultStateValues = dropdownDefaultStateValues;
   }
 
-  var defaultPropKey = "default" + capitalizeString(propKey);
+  const defaultValue = props[`default${capitalizeString(propKey)}`];
 
-  if (defaultPropKey in props) {
-    return props[defaultPropKey];
+  if (defaultValue !== undefined) {
+    return defaultValue;
   }
 
   return defaultStateValues[propKey];
@@ -8571,38 +8658,44 @@ function getInitialValue$1(props, propKey, defaultStateValues) {
     defaultStateValues = dropdownDefaultStateValues;
   }
 
-  if (propKey in props) {
-    return props[propKey];
+  const value = props[propKey];
+
+  if (value !== undefined) {
+    return value;
   }
 
-  var initialPropKey = "initial" + capitalizeString(propKey);
+  const initialValue = props[`initial${capitalizeString(propKey)}`];
 
-  if (initialPropKey in props) {
-    return props[initialPropKey];
+  if (initialValue !== undefined) {
+    return initialValue;
   }
 
   return getDefaultValue$1(props, propKey, defaultStateValues);
 }
 
 function getInitialState$2(props) {
-  var selectedItem = getInitialValue$1(props, 'selectedItem');
-  var isOpen = getInitialValue$1(props, 'isOpen');
-  var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
-  var inputValue = getInitialValue$1(props, 'inputValue');
+  const selectedItem = getInitialValue$1(props, 'selectedItem');
+  const isOpen = getInitialValue$1(props, 'isOpen');
+  const highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
+  const inputValue = getInitialValue$1(props, 'inputValue');
   return {
     highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
-    isOpen: isOpen,
-    selectedItem: selectedItem,
-    inputValue: inputValue
+    isOpen,
+    selectedItem,
+    inputValue
   };
 }
 
 function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
-  var items = props.items,
-      initialHighlightedIndex = props.initialHighlightedIndex,
-      defaultHighlightedIndex = props.defaultHighlightedIndex;
-  var selectedItem = state.selectedItem,
-      highlightedIndex = state.highlightedIndex;
+  const {
+    items,
+    initialHighlightedIndex,
+    defaultHighlightedIndex
+  } = props;
+  const {
+    selectedItem,
+    highlightedIndex
+  } = state;
 
   if (items.length === 0) {
     return -1;
@@ -8643,39 +8736,35 @@ function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
 
 
 function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
-  var mouseAndTouchTrackersRef = useRef({
+  const mouseAndTouchTrackersRef = useRef({
     isMouseDown: false,
     isTouchMove: false
   });
-  useEffect(function () {
+  useEffect(() => {
     // The same strategy for checking if a click occurred inside or outside downsift
     // as in downshift.js.
-    var onMouseDown = function onMouseDown() {
+    const onMouseDown = () => {
       mouseAndTouchTrackersRef.current.isMouseDown = true;
     };
 
-    var onMouseUp = function onMouseUp(event) {
+    const onMouseUp = event => {
       mouseAndTouchTrackersRef.current.isMouseDown = false;
 
-      if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-        return ref.current;
-      }), environment)) {
+      if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment)) {
         handleBlur();
       }
     };
 
-    var onTouchStart = function onTouchStart() {
+    const onTouchStart = () => {
       mouseAndTouchTrackersRef.current.isTouchMove = false;
     };
 
-    var onTouchMove = function onTouchMove() {
+    const onTouchMove = () => {
       mouseAndTouchTrackersRef.current.isTouchMove = true;
     };
 
-    var onTouchEnd = function onTouchEnd(event) {
-      if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-        return ref.current;
-      }), environment, false)) {
+    const onTouchEnd = event => {
+      if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment, false)) {
         handleBlur();
       }
     };
@@ -8699,9 +8788,7 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
 // eslint-disable-next-line import/no-mutable-exports
 
 
-var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
-  return noop;
-};
+let useGetterPropsCalledChecker = () => noop;
 /**
  * Custom hook that checks if getter props are called correctly.
  *
@@ -8713,45 +8800,47 @@ var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
 
 
 if (process.env.NODE_ENV !== 'production') {
-  useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
-    var isInitialMountRef = useRef(true);
+  useGetterPropsCalledChecker = function () {
+    const isInitialMountRef = useRef(true);
 
     for (var _len = arguments.length, propKeys = new Array(_len), _key = 0; _key < _len; _key++) {
       propKeys[_key] = arguments[_key];
     }
 
-    var getterPropsCalledRef = useRef(propKeys.reduce(function (acc, propKey) {
+    const getterPropsCalledRef = useRef(propKeys.reduce((acc, propKey) => {
       acc[propKey] = {};
       return acc;
     }, {}));
-    useEffect(function () {
-      Object.keys(getterPropsCalledRef.current).forEach(function (propKey) {
-        var propCallInfo = getterPropsCalledRef.current[propKey];
+    useEffect(() => {
+      Object.keys(getterPropsCalledRef.current).forEach(propKey => {
+        const propCallInfo = getterPropsCalledRef.current[propKey];
 
         if (isInitialMountRef.current) {
           if (!Object.keys(propCallInfo).length) {
             // eslint-disable-next-line no-console
-            console.error("downshift: You forgot to call the " + propKey + " getter function on your component / element.");
+            console.error(`downshift: You forgot to call the ${propKey} getter function on your component / element.`);
             return;
           }
         }
 
-        var suppressRefError = propCallInfo.suppressRefError,
-            refKey = propCallInfo.refKey,
-            elementRef = propCallInfo.elementRef;
+        const {
+          suppressRefError,
+          refKey,
+          elementRef
+        } = propCallInfo;
 
         if ((!elementRef || !elementRef.current) && !suppressRefError) {
           // eslint-disable-next-line no-console
-          console.error("downshift: The ref prop \"" + refKey + "\" from " + propKey + " was not applied correctly on your element.");
+          console.error(`downshift: The ref prop "${refKey}" from ${propKey} was not applied correctly on your element.`);
         }
       });
       isInitialMountRef.current = false;
     });
-    var setGetterPropCallInfo = useCallback(function (propKey, suppressRefError, refKey, elementRef) {
+    const setGetterPropCallInfo = useCallback((propKey, suppressRefError, refKey, elementRef) => {
       getterPropsCalledRef.current[propKey] = {
-        suppressRefError: suppressRefError,
-        refKey: refKey,
-        elementRef: elementRef
+        suppressRefError,
+        refKey,
+        elementRef
       };
     }, []);
     return setGetterPropCallInfo;
@@ -8759,39 +8848,41 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
-  var isInitialMount = _ref2.isInitialMount,
-      highlightedIndex = _ref2.highlightedIndex,
-      items = _ref2.items,
-      environment = _ref2.environment,
-      rest = _objectWithoutPropertiesLoose$1(_ref2, ["isInitialMount", "highlightedIndex", "items", "environment"]);
-
+  let {
+    isInitialMount,
+    highlightedIndex,
+    items,
+    environment,
+    ...rest
+  } = _ref2;
   // Sets a11y status message on changes in state.
-  useEffect(function () {
-    if (isInitialMount) {
+  useEffect(() => {
+    if (isInitialMount || false) {
       return;
     }
 
-    updateA11yStatus(function () {
-      return getA11yMessage(_extends({
-        highlightedIndex: highlightedIndex,
-        highlightedItem: items[highlightedIndex],
-        resultCount: items.length
-      }, rest));
-    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
+    updateA11yStatus(() => getA11yMessage({
+      highlightedIndex,
+      highlightedItem: items[highlightedIndex],
+      resultCount: items.length,
+      ...rest
+    }), environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, dependencyArray);
 }
 
 function useScrollIntoView(_ref3) {
-  var highlightedIndex = _ref3.highlightedIndex,
-      isOpen = _ref3.isOpen,
-      itemRefs = _ref3.itemRefs,
-      getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
-      menuElement = _ref3.menuElement,
-      scrollIntoViewProp = _ref3.scrollIntoView;
+  let {
+    highlightedIndex,
+    isOpen,
+    itemRefs,
+    getItemNodeFromIndex,
+    menuElement,
+    scrollIntoView: scrollIntoViewProp
+  } = _ref3;
   // used not to scroll on highlight by mouse.
-  var shouldScrollRef = useRef(true); // Scroll on highlighted item if change comes from keyboard.
+  const shouldScrollRef = useRef(true); // Scroll on highlighted item if change comes from keyboard.
 
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
       return;
     }
@@ -8807,17 +8898,19 @@ function useScrollIntoView(_ref3) {
 } // eslint-disable-next-line import/no-mutable-exports
 
 
-var useControlPropsValidator = noop;
+let useControlPropsValidator = noop;
 /* istanbul ignore next */
 
 if (process.env.NODE_ENV !== 'production') {
-  useControlPropsValidator = function useControlPropsValidator(_ref4) {
-    var isInitialMount = _ref4.isInitialMount,
-        props = _ref4.props,
-        state = _ref4.state;
+  useControlPropsValidator = _ref4 => {
+    let {
+      isInitialMount,
+      props,
+      state
+    } = _ref4;
     // used for checking when props are moving from controlled to uncontrolled.
-    var prevPropsRef = useRef(props);
-    useEffect(function () {
+    const prevPropsRef = useRef(props);
+    useEffect(() => {
       if (isInitialMount) {
         return;
       }
@@ -8831,14 +8924,16 @@ if (process.env.NODE_ENV !== 'production') {
 /* eslint-disable complexity */
 
 function downshiftCommonReducer(state, action, stateChangeTypes) {
-  var type = action.type,
-      props = action.props;
-  var changes;
+  const {
+    type,
+    props
+  } = action;
+  let changes;
 
   switch (type) {
     case stateChangeTypes.ItemMouseMove:
       changes = {
-        highlightedIndex: action.index
+        highlightedIndex: action.disabled ? -1 : action.index
       };
       break;
 
@@ -8894,43 +8989,44 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
       throw new Error('Reducer called without proper action type.');
   }
 
-  return _extends({}, state, changes);
+  return { ...state,
+    ...changes
+  };
 }
-
 ({
-  items: propTypes.array.isRequired,
-  itemToString: propTypes.func,
-  getA11yStatusMessage: propTypes.func,
-  getA11ySelectionMessage: propTypes.func,
-  circularNavigation: propTypes.bool,
-  highlightedIndex: propTypes.number,
-  defaultHighlightedIndex: propTypes.number,
-  initialHighlightedIndex: propTypes.number,
-  isOpen: propTypes.bool,
-  defaultIsOpen: propTypes.bool,
-  initialIsOpen: propTypes.bool,
-  selectedItem: propTypes.any,
-  initialSelectedItem: propTypes.any,
-  defaultSelectedItem: propTypes.any,
-  id: propTypes.string,
-  labelId: propTypes.string,
-  menuId: propTypes.string,
-  getItemId: propTypes.func,
-  toggleButtonId: propTypes.string,
-  stateReducer: propTypes.func,
-  onSelectedItemChange: propTypes.func,
-  onHighlightedIndexChange: propTypes.func,
-  onStateChange: propTypes.func,
-  onIsOpenChange: propTypes.func,
-  environment: propTypes.shape({
-    addEventListener: propTypes.func,
-    removeEventListener: propTypes.func,
-    document: propTypes.shape({
-      getElementById: propTypes.func,
-      activeElement: propTypes.any,
-      body: propTypes.any
+    items: propTypes.array.isRequired,
+    itemToString: propTypes.func,
+    getA11yStatusMessage: propTypes.func,
+    getA11ySelectionMessage: propTypes.func,
+    circularNavigation: propTypes.bool,
+    highlightedIndex: propTypes.number,
+    defaultHighlightedIndex: propTypes.number,
+    initialHighlightedIndex: propTypes.number,
+    isOpen: propTypes.bool,
+    defaultIsOpen: propTypes.bool,
+    initialIsOpen: propTypes.bool,
+    selectedItem: propTypes.any,
+    initialSelectedItem: propTypes.any,
+    defaultSelectedItem: propTypes.any,
+    id: propTypes.string,
+    labelId: propTypes.string,
+    menuId: propTypes.string,
+    getItemId: propTypes.func,
+    toggleButtonId: propTypes.string,
+    stateReducer: propTypes.func,
+    onSelectedItemChange: propTypes.func,
+    onHighlightedIndexChange: propTypes.func,
+    onStateChange: propTypes.func,
+    onIsOpenChange: propTypes.func,
+    environment: propTypes.shape({
+        addEventListener: propTypes.func,
+        removeEventListener: propTypes.func,
+        document: propTypes.shape({
+            getElementById: propTypes.func,
+            activeElement: propTypes.any,
+            body: propTypes.any
+        })
     })
-  })
 });
 /**
  * Default implementation for status message. Only added when menu is open.
@@ -8940,32 +9036,21 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
  * @param {Object} param the downshift state and other relevant properties
  * @return {String} the a11y status message
  */
-
-function getA11yStatusMessage(_ref) {
-  var isOpen = _ref.isOpen,
-      resultCount = _ref.resultCount,
-      previousResultCount = _ref.previousResultCount;
-
-  if (!isOpen) {
+function getA11yStatusMessage(_a) {
+    var isOpen = _a.isOpen, resultCount = _a.resultCount, previousResultCount = _a.previousResultCount;
+    if (!isOpen) {
+        return '';
+    }
+    if (!resultCount) {
+        return 'No results are available.';
+    }
+    if (resultCount !== previousResultCount) {
+        return "".concat(resultCount, " result").concat(resultCount === 1 ? ' is' : 's are', " available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select.");
+    }
     return '';
-  }
-
-  if (!resultCount) {
-    return 'No results are available.';
-  }
-
-  if (resultCount !== previousResultCount) {
-    return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select.";
-  }
-
-  return '';
 }
-
-_extends({}, defaultProps$3, {
-  getA11yStatusMessage: getA11yStatusMessage
-}); // eslint-disable-next-line import/no-mutable-exports
+__assign(__assign({}, defaultProps$3), { getA11yStatusMessage: getA11yStatusMessage });
 /* istanbul ignore next */
-
 if (process.env.NODE_ENV !== 'production') ;
 
 process.env.NODE_ENV !== "production" ? '__menu_keydown_arrow_down__' : 0;
@@ -8992,26 +9077,26 @@ process.env.NODE_ENV !== "production" ? '__function_select_item__' : 20;
 process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 21;
 process.env.NODE_ENV !== "production" ? '__function_reset__' : 22;
 
-var InputKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_down__' : 0;
-var InputKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_up__' : 1;
-var InputKeyDownEscape = process.env.NODE_ENV !== "production" ? '__input_keydown_escape__' : 2;
-var InputKeyDownHome = process.env.NODE_ENV !== "production" ? '__input_keydown_home__' : 3;
-var InputKeyDownEnd = process.env.NODE_ENV !== "production" ? '__input_keydown_end__' : 4;
-var InputKeyDownEnter = process.env.NODE_ENV !== "production" ? '__input_keydown_enter__' : 5;
-var InputChange = process.env.NODE_ENV !== "production" ? '__input_change__' : 6;
-var InputBlur = process.env.NODE_ENV !== "production" ? '__input_blur__' : 7;
-var MenuMouseLeave = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 8;
-var ItemMouseMove = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 9;
-var ItemClick = process.env.NODE_ENV !== "production" ? '__item_click__' : 10;
-var ToggleButtonClick = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 11;
-var FunctionToggleMenu = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 12;
-var FunctionOpenMenu = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 13;
-var FunctionCloseMenu = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 14;
-var FunctionSetHighlightedIndex = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 15;
-var FunctionSelectItem = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 16;
-var FunctionSetInputValue = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 17;
-var FunctionReset$1 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 18;
-var ControlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__controlled_prop_updated_selected_item__' : 19;
+const InputKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_down__' : 0;
+const InputKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_up__' : 1;
+const InputKeyDownEscape = process.env.NODE_ENV !== "production" ? '__input_keydown_escape__' : 2;
+const InputKeyDownHome = process.env.NODE_ENV !== "production" ? '__input_keydown_home__' : 3;
+const InputKeyDownEnd = process.env.NODE_ENV !== "production" ? '__input_keydown_end__' : 4;
+const InputKeyDownEnter = process.env.NODE_ENV !== "production" ? '__input_keydown_enter__' : 5;
+const InputChange = process.env.NODE_ENV !== "production" ? '__input_change__' : 6;
+const InputBlur = process.env.NODE_ENV !== "production" ? '__input_blur__' : 7;
+const MenuMouseLeave = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 8;
+const ItemMouseMove = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 9;
+const ItemClick = process.env.NODE_ENV !== "production" ? '__item_click__' : 10;
+const ToggleButtonClick = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 11;
+const FunctionToggleMenu = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 12;
+const FunctionOpenMenu = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 13;
+const FunctionCloseMenu = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 14;
+const FunctionSetHighlightedIndex = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 15;
+const FunctionSelectItem = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 16;
+const FunctionSetInputValue = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 17;
+const FunctionReset$1 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 18;
+const ControlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__controlled_prop_updated_selected_item__' : 19;
 
 var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9038,20 +9123,24 @@ var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
 });
 
 function getInitialState$1(props) {
-  var initialState = getInitialState$2(props);
-  var selectedItem = initialState.selectedItem;
-  var inputValue = initialState.inputValue;
+  const initialState = getInitialState$2(props);
+  const {
+    selectedItem
+  } = initialState;
+  let {
+    inputValue
+  } = initialState;
 
   if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) {
     inputValue = props.itemToString(selectedItem);
   }
 
-  return _extends({}, initialState, {
-    inputValue: inputValue
-  });
+  return { ...initialState,
+    inputValue
+  };
 }
 
-var propTypes$1 = {
+const propTypes$1 = {
   items: propTypes.array.isRequired,
   itemToString: propTypes.func,
   getA11yStatusMessage: propTypes.func,
@@ -9105,14 +9194,10 @@ var propTypes$1 = {
  */
 
 function useControlledReducer(reducer, initialState, props) {
-  var previousSelectedItemRef = useRef();
-
-  var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
-      state = _useEnhancedReducer[0],
-      dispatch = _useEnhancedReducer[1]; // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
+  const previousSelectedItemRef = useRef();
+  const [state, dispatch] = useEnhancedReducer(reducer, initialState, props); // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
 
-
-  useEffect(function () {
+  useEffect(() => {
     if (isControlledProp(props, 'selectedItem')) {
       if (previousSelectedItemRef.current !== props.selectedItem) {
         dispatch({
@@ -9128,27 +9213,29 @@ function useControlledReducer(reducer, initialState, props) {
 } // eslint-disable-next-line import/no-mutable-exports
 
 
-var validatePropTypes$1 = noop;
+let validatePropTypes$1 = noop;
 /* istanbul ignore next */
 
 if (process.env.NODE_ENV !== 'production') {
-  validatePropTypes$1 = function validatePropTypes(options, caller) {
+  validatePropTypes$1 = (options, caller) => {
     propTypes.checkPropTypes(propTypes$1, options, 'prop', caller.name);
   };
 }
 
-var defaultProps$1 = _extends({}, defaultProps$3, {
+const defaultProps$1 = { ...defaultProps$3,
   getA11yStatusMessage: getA11yStatusMessage$1,
   circularNavigation: true
-});
+};
 
 /* eslint-disable complexity */
 
 function downshiftUseComboboxReducer(state, action) {
-  var type = action.type,
-      props = action.props,
-      shiftKey = action.shiftKey;
-  var changes;
+  const {
+    type,
+    props,
+    shiftKey
+  } = action;
+  let changes;
 
   switch (type) {
     case ItemClick:
@@ -9189,22 +9276,24 @@ function downshiftUseComboboxReducer(state, action) {
       break;
 
     case InputKeyDownEnter:
-      changes = _extends({}, state.isOpen && state.highlightedIndex >= 0 && {
-        selectedItem: props.items[state.highlightedIndex],
-        isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
-        inputValue: props.itemToString(props.items[state.highlightedIndex])
-      });
+      changes = { ...(state.isOpen && state.highlightedIndex >= 0 && {
+          selectedItem: props.items[state.highlightedIndex],
+          isOpen: getDefaultValue$1(props, 'isOpen'),
+          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
+          inputValue: props.itemToString(props.items[state.highlightedIndex])
+        })
+      };
       break;
 
     case InputKeyDownEscape:
-      changes = _extends({
+      changes = {
         isOpen: false,
-        highlightedIndex: -1
-      }, !state.isOpen && {
-        selectedItem: null,
-        inputValue: ''
-      });
+        highlightedIndex: -1,
+        ...(!state.isOpen && {
+          selectedItem: null,
+          inputValue: ''
+        })
+      };
       break;
 
     case InputKeyDownHome:
@@ -9220,13 +9309,14 @@ function downshiftUseComboboxReducer(state, action) {
       break;
 
     case InputBlur:
-      changes = _extends({
+      changes = {
         isOpen: false,
-        highlightedIndex: -1
-      }, state.highlightedIndex >= 0 && action.selectItem && {
-        selectedItem: props.items[state.highlightedIndex],
-        inputValue: props.itemToString(props.items[state.highlightedIndex])
-      });
+        highlightedIndex: -1,
+        ...(state.highlightedIndex >= 0 && action.selectItem && {
+          selectedItem: props.items[state.highlightedIndex],
+          inputValue: props.itemToString(props.items[state.highlightedIndex])
+        })
+      };
       break;
 
     case InputChange:
@@ -9254,10 +9344,13 @@ function downshiftUseComboboxReducer(state, action) {
       return downshiftCommonReducer(state, action, stateChangeTypes$1);
   }
 
-  return _extends({}, state, changes);
+  return { ...state,
+    ...changes
+  };
 }
 /* eslint-enable complexity */
 
+/* eslint-disable max-statements */
 useCombobox.stateChangeTypes = stateChangeTypes$1;
 
 function useCombobox(userProps) {
@@ -9267,87 +9360,88 @@ function useCombobox(userProps) {
 
   validatePropTypes$1(userProps, useCombobox); // Props defaults and destructuring.
 
-  var props = _extends({}, defaultProps$1, userProps);
-
-  var initialIsOpen = props.initialIsOpen,
-      defaultIsOpen = props.defaultIsOpen,
-      items = props.items,
-      scrollIntoView = props.scrollIntoView,
-      environment = props.environment,
-      getA11yStatusMessage = props.getA11yStatusMessage,
-      getA11ySelectionMessage = props.getA11ySelectionMessage,
-      itemToString = props.itemToString; // Initial state depending on controlled props.
-
-  var initialState = getInitialState$1(props);
-
-  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, initialState, props),
-      state = _useControlledReducer[0],
-      dispatch = _useControlledReducer[1];
-
-  var isOpen = state.isOpen,
-      highlightedIndex = state.highlightedIndex,
-      selectedItem = state.selectedItem,
-      inputValue = state.inputValue; // Element refs.
-
-  var menuRef = useRef(null);
-  var itemRefs = useRef({});
-  var inputRef = useRef(null);
-  var toggleButtonRef = useRef(null);
-  var comboboxRef = useRef(null);
-  var isInitialMountRef = useRef(true); // prevent id re-generation between renders.
-
-  var elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
-
-  var previousResultCountRef = useRef(); // utility callback to get item element.
-
-  var latest = useLatestRef({
-    state: state,
-    props: props
+  const props = { ...defaultProps$1,
+    ...userProps
+  };
+  const {
+    initialIsOpen,
+    defaultIsOpen,
+    items,
+    scrollIntoView,
+    environment,
+    getA11yStatusMessage,
+    getA11ySelectionMessage,
+    itemToString
+  } = props; // Initial state depending on controlled props.
+
+  const initialState = getInitialState$1(props);
+  const [state, dispatch] = useControlledReducer(downshiftUseComboboxReducer, initialState, props);
+  const {
+    isOpen,
+    highlightedIndex,
+    selectedItem,
+    inputValue
+  } = state; // Element refs.
+
+  const menuRef = useRef(null);
+  const itemRefs = useRef({});
+  const inputRef = useRef(null);
+  const toggleButtonRef = useRef(null);
+  const comboboxRef = useRef(null);
+  const isInitialMountRef = useRef(true); // prevent id re-generation between renders.
+
+  const elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
+
+  const previousResultCountRef = useRef(); // utility callback to get item element.
+
+  const latest = useLatestRef({
+    state,
+    props
   });
-  var getItemNodeFromIndex = useCallback(function (index) {
-    return itemRefs.current[elementIds.getItemId(index)];
-  }, [elementIds]); // Effects.
+  const getItemNodeFromIndex = useCallback(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]); // Effects.
   // Sets a11y status message on changes in state.
 
-  useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
+  useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
     isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
-    items: items,
-    environment: environment,
-    itemToString: itemToString
-  }, state)); // Sets a11y status message on changes in selectedItem.
+    items,
+    environment,
+    itemToString,
+    ...state
+  }); // Sets a11y status message on changes in selectedItem.
 
-  useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends({
+  useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
     isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
-    items: items,
-    environment: environment,
-    itemToString: itemToString
-  }, state)); // Scroll on highlighted item if change comes from keyboard.
+    items,
+    environment,
+    itemToString,
+    ...state
+  }); // Scroll on highlighted item if change comes from keyboard.
 
-  var shouldScrollRef = useScrollIntoView({
+  const shouldScrollRef = useScrollIntoView({
     menuElement: menuRef.current,
-    highlightedIndex: highlightedIndex,
-    isOpen: isOpen,
-    itemRefs: itemRefs,
-    scrollIntoView: scrollIntoView,
-    getItemNodeFromIndex: getItemNodeFromIndex
+    highlightedIndex,
+    isOpen,
+    itemRefs,
+    scrollIntoView,
+    getItemNodeFromIndex
   });
   useControlPropsValidator({
     isInitialMount: isInitialMountRef.current,
-    props: props,
-    state: state
+    props,
+    state
   }); // Focus the input on first render if required.
 
-  useEffect(function () {
-    var focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
+  useEffect(() => {
+    const focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
 
     if (focusOnOpen && inputRef.current) {
       inputRef.current.focus();
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     if (isInitialMountRef.current) {
       return;
     }
@@ -9355,147 +9449,154 @@ function useCombobox(userProps) {
     previousResultCountRef.current = items.length;
   }); // Add mouse/touch events to document.
 
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [comboboxRef, menuRef, toggleButtonRef], environment, function () {
+  const mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [comboboxRef, menuRef, toggleButtonRef], environment, () => {
     dispatch({
       type: InputBlur,
       selectItem: false
     });
   });
-  var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getComboboxProps', 'getMenuProps'); // Make initial ref false.
+  const setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getComboboxProps', 'getMenuProps'); // Make initial ref false.
 
-  useEffect(function () {
+  useEffect(() => {
     isInitialMountRef.current = false;
   }, []); // Reset itemRefs on close.
 
-  useEffect(function () {
+  useEffect(() => {
     if (!isOpen) {
       itemRefs.current = {};
     }
   }, [isOpen]);
   /* Event handler functions */
 
-  var inputKeyDownHandlers = useMemo(function () {
-    return {
-      ArrowDown: function ArrowDown(event) {
-        event.preventDefault();
-        dispatch({
-          type: InputKeyDownArrowDown,
-          shiftKey: event.shiftKey,
-          getItemNodeFromIndex: getItemNodeFromIndex
-        });
-      },
-      ArrowUp: function ArrowUp(event) {
-        event.preventDefault();
-        dispatch({
-          type: InputKeyDownArrowUp,
-          shiftKey: event.shiftKey,
-          getItemNodeFromIndex: getItemNodeFromIndex
-        });
-      },
-      Home: function Home(event) {
-        if (!latest.current.state.isOpen) {
-          return;
-        }
+  const inputKeyDownHandlers = useMemo(() => ({
+    ArrowDown(event) {
+      event.preventDefault();
+      dispatch({
+        type: InputKeyDownArrowDown,
+        shiftKey: event.shiftKey,
+        getItemNodeFromIndex
+      });
+    },
+
+    ArrowUp(event) {
+      event.preventDefault();
+      dispatch({
+        type: InputKeyDownArrowUp,
+        shiftKey: event.shiftKey,
+        getItemNodeFromIndex
+      });
+    },
+
+    Home(event) {
+      if (!latest.current.state.isOpen) {
+        return;
+      }
 
-        event.preventDefault();
-        dispatch({
-          type: InputKeyDownHome,
-          getItemNodeFromIndex: getItemNodeFromIndex
-        });
-      },
-      End: function End(event) {
-        if (!latest.current.state.isOpen) {
-          return;
-        }
+      event.preventDefault();
+      dispatch({
+        type: InputKeyDownHome,
+        getItemNodeFromIndex
+      });
+    },
 
-        event.preventDefault();
-        dispatch({
-          type: InputKeyDownEnd,
-          getItemNodeFromIndex: getItemNodeFromIndex
-        });
-      },
-      Escape: function Escape() {
-        var latestState = latest.current.state;
+    End(event) {
+      if (!latest.current.state.isOpen) {
+        return;
+      }
 
-        if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
-          dispatch({
-            type: InputKeyDownEscape
-          });
-        }
-      },
-      Enter: function Enter(event) {
-        var latestState = latest.current.state; // if closed or no highlighted index, do nothing.
+      event.preventDefault();
+      dispatch({
+        type: InputKeyDownEnd,
+        getItemNodeFromIndex
+      });
+    },
 
-        if (!latestState.isOpen || latestState.highlightedIndex < 0 || event.which === 229 // if IME composing, wait for next Enter keydown event.
-        ) {
-            return;
-          }
+    Escape(event) {
+      const latestState = latest.current.state;
 
+      if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
         event.preventDefault();
         dispatch({
-          type: InputKeyDownEnter,
-          getItemNodeFromIndex: getItemNodeFromIndex
+          type: InputKeyDownEscape
         });
       }
-    };
-  }, [dispatch, latest, getItemNodeFromIndex]); // Getter props.
-
-  var getLabelProps = useCallback(function (labelProps) {
-    return _extends({
-      id: elementIds.labelId,
-      htmlFor: elementIds.inputId
-    }, labelProps);
-  }, [elementIds]);
-  var getMenuProps = useCallback(function (_temp, _temp2) {
-    var _extends2;
-
-    var _ref = _temp === void 0 ? {} : _temp,
-        onMouseLeave = _ref.onMouseLeave,
-        _ref$refKey = _ref.refKey,
-        refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
-        ref = _ref.ref,
-        rest = _objectWithoutPropertiesLoose$1(_ref, ["onMouseLeave", "refKey", "ref"]);
-
-    var _ref2 = _temp2 === void 0 ? {} : _temp2,
-        _ref2$suppressRefErro = _ref2.suppressRefError,
-        suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
+    },
 
-    setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
-    return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
-      menuRef.current = menuNode;
-    }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () {
+    Enter(event) {
+      const latestState = latest.current.state; // if closed or no highlighted index, do nothing.
+
+      if (!latestState.isOpen || latestState.highlightedIndex < 0 || event.which === 229 // if IME composing, wait for next Enter keydown event.
+      ) {
+        return;
+      }
+
+      event.preventDefault();
       dispatch({
-        type: MenuMouseLeave
+        type: InputKeyDownEnter,
+        getItemNodeFromIndex
       });
-    }), _extends2), rest);
+    }
+
+  }), [dispatch, latest, getItemNodeFromIndex]); // Getter props.
+
+  const getLabelProps = useCallback(labelProps => ({
+    id: elementIds.labelId,
+    htmlFor: elementIds.inputId,
+    ...labelProps
+  }), [elementIds]);
+  const getMenuProps = useCallback(function (_temp, _temp2) {
+    let {
+      onMouseLeave,
+      refKey = 'ref',
+      ref,
+      ...rest
+    } = _temp === void 0 ? {} : _temp;
+    let {
+      suppressRefError = false
+    } = _temp2 === void 0 ? {} : _temp2;
+    setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
+    return {
+      [refKey]: handleRefs(ref, menuNode => {
+        menuRef.current = menuNode;
+      }),
+      id: elementIds.menuId,
+      role: 'listbox',
+      'aria-labelledby': elementIds.labelId,
+      onMouseLeave: callAllEventHandlers(onMouseLeave, () => {
+        dispatch({
+          type: MenuMouseLeave
+        });
+      }),
+      ...rest
+    };
   }, [dispatch, setGetterPropCallInfo, elementIds]);
-  var getItemProps = useCallback(function (_temp3) {
-    var _extends3, _ref4;
-
-    var _ref3 = _temp3 === void 0 ? {} : _temp3,
-        item = _ref3.item,
-        index = _ref3.index,
-        _ref3$refKey = _ref3.refKey,
-        refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
-        ref = _ref3.ref,
-        onMouseMove = _ref3.onMouseMove,
-        onClick = _ref3.onClick;
-        _ref3.onPress;
-        var rest = _objectWithoutPropertiesLoose$1(_ref3, ["item", "index", "refKey", "ref", "onMouseMove", "onClick", "onPress"]);
-
-    var _latest$current = latest.current,
-        latestProps = _latest$current.props,
-        latestState = _latest$current.state;
-    var itemIndex = getItemIndex(index, item, latestProps.items);
+  const getItemProps = useCallback(function (_temp3) {
+    let {
+      item,
+      index,
+      refKey = 'ref',
+      ref,
+      onMouseMove,
+      onMouseDown,
+      onClick,
+      onPress,
+      disabled,
+      ...rest
+    } = _temp3 === void 0 ? {} : _temp3;
+    const {
+      props: latestProps,
+      state: latestState
+    } = latest.current;
+    const itemIndex = getItemIndex(index, item, latestProps.items);
 
     if (itemIndex < 0) {
       throw new Error('Pass either item or item index in getItemProps!');
     }
 
-    var onSelectKey = 'onClick';
-    var customClickHandler = onClick;
+    const onSelectKey = 'onClick';
+    const customClickHandler = onClick;
 
-    var itemHandleMouseMove = function itemHandleMouseMove() {
+    const itemHandleMouseMove = () => {
       if (index === latestState.highlightedIndex) {
         return;
       }
@@ -9503,41 +9604,48 @@ function useCombobox(userProps) {
       shouldScrollRef.current = false;
       dispatch({
         type: ItemMouseMove,
-        index: index
+        index,
+        disabled
       });
     };
 
-    var itemHandleClick = function itemHandleClick() {
+    const itemHandleClick = () => {
       dispatch({
         type: ItemClick,
-        index: index
+        index
       });
-
-      if (inputRef.current) {
-        inputRef.current.focus();
-      }
     };
 
-    return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
-      if (itemNode) {
-        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
-      }
-    }), _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !rest.disabled && (_ref4 = {
-      onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove)
-    }, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), rest);
+    const itemHandleMouseDown = e => e.preventDefault();
+
+    return {
+      [refKey]: handleRefs(ref, itemNode => {
+        if (itemNode) {
+          itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+        }
+      }),
+      disabled,
+      role: 'option',
+      'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
+      id: elementIds.getItemId(itemIndex),
+      ...(!disabled && {
+        [onSelectKey]: callAllEventHandlers(customClickHandler, itemHandleClick)
+      }),
+      onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
+      onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown),
+      ...rest
+    };
   }, [dispatch, latest, shouldScrollRef, elementIds]);
-  var getToggleButtonProps = useCallback(function (_temp4) {
-    var _extends4;
-
-    var _ref5 = _temp4 === void 0 ? {} : _temp4,
-        onClick = _ref5.onClick;
-        _ref5.onPress;
-        var _ref5$refKey = _ref5.refKey,
-        refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
-        ref = _ref5.ref,
-        rest = _objectWithoutPropertiesLoose$1(_ref5, ["onClick", "onPress", "refKey", "ref"]);
-
-    var toggleButtonHandleClick = function toggleButtonHandleClick() {
+  const getToggleButtonProps = useCallback(function (_temp4) {
+    let {
+      onClick,
+      onPress,
+      refKey = 'ref',
+      ref,
+      ...rest
+    } = _temp4 === void 0 ? {} : _temp4;
+
+    const toggleButtonHandleClick = () => {
       dispatch({
         type: ToggleButtonClick
       });
@@ -9547,49 +9655,52 @@ function useCombobox(userProps) {
       }
     };
 
-    return _extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
-      toggleButtonRef.current = toggleButtonNode;
-    }), _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends({}, {
-      onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
-    }), rest);
+    return {
+      [refKey]: handleRefs(ref, toggleButtonNode => {
+        toggleButtonRef.current = toggleButtonNode;
+      }),
+      id: elementIds.toggleButtonId,
+      tabIndex: -1,
+      ...(!rest.disabled && { ...({
+          onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
+        })
+      }),
+      ...rest
+    };
   }, [dispatch, latest, elementIds]);
-  var getInputProps = useCallback(function (_temp5, _temp6) {
-    var _extends5;
-
-    var _ref6 = _temp5 === void 0 ? {} : _temp5,
-        onKeyDown = _ref6.onKeyDown,
-        onChange = _ref6.onChange,
-        onInput = _ref6.onInput,
-        onBlur = _ref6.onBlur;
-        _ref6.onChangeText;
-        var _ref6$refKey = _ref6.refKey,
-        refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey,
-        ref = _ref6.ref,
-        rest = _objectWithoutPropertiesLoose$1(_ref6, ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "refKey", "ref"]);
-
-    var _ref7 = _temp6 === void 0 ? {} : _temp6,
-        _ref7$suppressRefErro = _ref7.suppressRefError,
-        suppressRefError = _ref7$suppressRefErro === void 0 ? false : _ref7$suppressRefErro;
-
+  const getInputProps = useCallback(function (_temp5, _temp6) {
+    let {
+      onKeyDown,
+      onChange,
+      onInput,
+      onBlur,
+      onChangeText,
+      refKey = 'ref',
+      ref,
+      ...rest
+    } = _temp5 === void 0 ? {} : _temp5;
+    let {
+      suppressRefError = false
+    } = _temp6 === void 0 ? {} : _temp6;
     setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef);
-    var latestState = latest.current.state;
+    const latestState = latest.current.state;
 
-    var inputHandleKeyDown = function inputHandleKeyDown(event) {
-      var key = normalizeArrowKey(event);
+    const inputHandleKeyDown = event => {
+      const key = normalizeArrowKey(event);
 
       if (key && inputKeyDownHandlers[key]) {
         inputKeyDownHandlers[key](event);
       }
     };
 
-    var inputHandleChange = function inputHandleChange(event) {
+    const inputHandleChange = event => {
       dispatch({
         type: InputChange,
         inputValue: event.target.value
       });
     };
 
-    var inputHandleBlur = function inputHandleBlur() {
+    const inputHandleBlur = () => {
       /* istanbul ignore else */
       if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
         dispatch({
@@ -9601,105 +9712,117 @@ function useCombobox(userProps) {
     /* istanbul ignore next (preact) */
 
 
-    var onChangeKey = 'onChange';
-    var eventHandlers = {};
+    const onChangeKey = 'onChange';
+    let eventHandlers = {};
 
     if (!rest.disabled) {
-      var _eventHandlers;
-
-      eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers);
+      eventHandlers = {
+        [onChangeKey]: callAllEventHandlers(onChange, onInput, inputHandleChange),
+        onKeyDown: callAllEventHandlers(onKeyDown, inputHandleKeyDown),
+        onBlur: callAllEventHandlers(onBlur, inputHandleBlur)
+      };
     }
 
-    return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
-      inputRef.current = inputNode;
-    }), _extends5.id = elementIds.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5), latestState.isOpen && latestState.highlightedIndex > -1 && {
-      'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
-    }, {
+    return {
+      [refKey]: handleRefs(ref, inputNode => {
+        inputRef.current = inputNode;
+      }),
+      id: elementIds.inputId,
+      'aria-autocomplete': 'list',
+      'aria-controls': elementIds.menuId,
+      ...(latestState.isOpen && latestState.highlightedIndex > -1 && {
+        'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
+      }),
       'aria-labelledby': elementIds.labelId,
       // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
       // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
       autoComplete: 'off',
-      value: latestState.inputValue
-    }, eventHandlers, rest);
+      value: latestState.inputValue,
+      ...eventHandlers,
+      ...rest
+    };
   }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
-  var getComboboxProps = useCallback(function (_temp7, _temp8) {
-    var _extends6;
-
-    var _ref8 = _temp7 === void 0 ? {} : _temp7,
-        _ref8$refKey = _ref8.refKey,
-        refKey = _ref8$refKey === void 0 ? 'ref' : _ref8$refKey,
-        ref = _ref8.ref,
-        rest = _objectWithoutPropertiesLoose$1(_ref8, ["refKey", "ref"]);
-
-    var _ref9 = _temp8 === void 0 ? {} : _temp8,
-        _ref9$suppressRefErro = _ref9.suppressRefError,
-        suppressRefError = _ref9$suppressRefErro === void 0 ? false : _ref9$suppressRefErro;
-
+  const getComboboxProps = useCallback(function (_temp7, _temp8) {
+    let {
+      refKey = 'ref',
+      ref,
+      ...rest
+    } = _temp7 === void 0 ? {} : _temp7;
+    let {
+      suppressRefError = false
+    } = _temp8 === void 0 ? {} : _temp8;
     setGetterPropCallInfo('getComboboxProps', suppressRefError, refKey, comboboxRef);
-    return _extends((_extends6 = {}, _extends6[refKey] = handleRefs(ref, function (comboboxNode) {
-      comboboxRef.current = comboboxNode;
-    }), _extends6.role = 'combobox', _extends6['aria-haspopup'] = 'listbox', _extends6['aria-owns'] = elementIds.menuId, _extends6['aria-expanded'] = latest.current.state.isOpen, _extends6), rest);
+    return {
+      [refKey]: handleRefs(ref, comboboxNode => {
+        comboboxRef.current = comboboxNode;
+      }),
+      role: 'combobox',
+      'aria-haspopup': 'listbox',
+      'aria-owns': elementIds.menuId,
+      'aria-expanded': latest.current.state.isOpen,
+      ...rest
+    };
   }, [latest, setGetterPropCallInfo, elementIds]); // returns
 
-  var toggleMenu = useCallback(function () {
+  const toggleMenu = useCallback(() => {
     dispatch({
       type: FunctionToggleMenu
     });
   }, [dispatch]);
-  var closeMenu = useCallback(function () {
+  const closeMenu = useCallback(() => {
     dispatch({
       type: FunctionCloseMenu
     });
   }, [dispatch]);
-  var openMenu = useCallback(function () {
+  const openMenu = useCallback(() => {
     dispatch({
       type: FunctionOpenMenu
     });
   }, [dispatch]);
-  var setHighlightedIndex = useCallback(function (newHighlightedIndex) {
+  const setHighlightedIndex = useCallback(newHighlightedIndex => {
     dispatch({
       type: FunctionSetHighlightedIndex,
       highlightedIndex: newHighlightedIndex
     });
   }, [dispatch]);
-  var selectItem = useCallback(function (newSelectedItem) {
+  const selectItem = useCallback(newSelectedItem => {
     dispatch({
       type: FunctionSelectItem,
       selectedItem: newSelectedItem
     });
   }, [dispatch]);
-  var setInputValue = useCallback(function (newInputValue) {
+  const setInputValue = useCallback(newInputValue => {
     dispatch({
       type: FunctionSetInputValue,
       inputValue: newInputValue
     });
   }, [dispatch]);
-  var reset = useCallback(function () {
+  const reset = useCallback(() => {
     dispatch({
       type: FunctionReset$1
     });
   }, [dispatch]);
   return {
     // prop getters.
-    getItemProps: getItemProps,
-    getLabelProps: getLabelProps,
-    getMenuProps: getMenuProps,
-    getInputProps: getInputProps,
-    getComboboxProps: getComboboxProps,
-    getToggleButtonProps: getToggleButtonProps,
+    getItemProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getComboboxProps,
+    getToggleButtonProps,
     // actions.
-    toggleMenu: toggleMenu,
-    openMenu: openMenu,
-    closeMenu: closeMenu,
-    setHighlightedIndex: setHighlightedIndex,
-    setInputValue: setInputValue,
-    selectItem: selectItem,
-    reset: reset,
+    toggleMenu,
+    openMenu,
+    closeMenu,
+    setHighlightedIndex,
+    setInputValue,
+    selectItem,
+    reset,
     // state.
-    highlightedIndex: highlightedIndex,
-    isOpen: isOpen,
-    selectedItem: selectedItem,
-    inputValue: inputValue
+    highlightedIndex,
+    isOpen,
+    selectedItem,
+    inputValue
   };
 }
 /**
@@ -9711,9 +9834,11 @@ function useCombobox(userProps) {
 
 
 function getA11yRemovalMessage(selectionParameters) {
-  var removedSelectedItem = selectionParameters.removedSelectedItem,
-      itemToStringLocal = selectionParameters.itemToString;
-  return itemToStringLocal(removedSelectedItem) + " has been removed.";
+  const {
+    removedSelectedItem,
+    itemToString: itemToStringLocal
+  } = selectionParameters;
+  return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
 }
 
 ({
@@ -9744,7 +9869,7 @@ function getA11yRemovalMessage(selectionParameters) {
   itemToString: defaultProps$3.itemToString,
   stateReducer: defaultProps$3.stateReducer,
   environment: defaultProps$3.environment,
-  getA11yRemovalMessage: getA11yRemovalMessage,
+  getA11yRemovalMessage,
   keyNavigationNext: 'ArrowRight',
   keyNavigationPrevious: 'ArrowLeft'
 }); // eslint-disable-next-line import/no-mutable-exports
@@ -9766,25 +9891,25 @@ process.env.NODE_ENV !== "production" ? '__function_set_selected_items__' : 10;
 process.env.NODE_ENV !== "production" ? '__function_set_active_index__' : 11;
 process.env.NODE_ENV !== "production" ? '__function_reset__' : 12;
 
-const ROW_HEIGHT$2 = 42;
-const InputSelectList = ({ getItemProps, getMenuProps, highlightedIndex, options, itemToString, }) => {
-    const fullHeight = options.length * ROW_HEIGHT$2;
-    const item = (item, index) => (React.createElement("div", Object.assign({ className: `sid-input-select-list__item ${highlightedIndex === index ? "sid-input-select-list__item--highlighted" : ""}`, key: index }, getItemProps({
-        index,
+const InputSelectList = ({ getItemProps, getMenuProps, highlightedIndex, options, itemToString, ariaLabel, isOpen, }) => {
+    const listItem = (item, index) => (React.createElement("div", Object.assign({ className: `sid-input-select-list__item ${highlightedIndex === index ? "sid-input-select-list__item--highlighted" : ""}` }, getItemProps({
         item,
+        index,
+        key: item.value,
     })), itemToString(options[index])));
-    return (React.createElement("div", Object.assign({ className: "sid-input-select-list__menu" }, getMenuProps(), { tabIndex: -1, style: { height: Math.min(fullHeight, 280) } }), options.map((option, index) => item(option, index))));
+    return (React.createElement("div", Object.assign({}, getMenuProps({ "aria-label": ariaLabel })), isOpen ? (React.createElement("div", { className: "sid-input-select-list__menu" }, options.length > 0 ? (options.map((option, index) => listItem(option, index))) : (React.createElement("div", { className: "sid-input-select-list__message" },
+        React.createElement(FormattedHTMLMessage, { id: "noOptions", defaultMessage: "No Options" }))))) : null));
 };
 const InputSelectListComponent = InputSelectList;
 
-const InputSelectButton = ({ clearSelection, disabled, getToggleButtonProps, isOpen, buttonRef, }) => {
+const InputSelectButton = ({ clearSelection, disabled, getToggleButtonProps, isOpen, }) => {
     if (clearSelection) {
-        return (React.createElement("button", { "aria-label": "clear selection", className: "sid-input-select-button", disabled: disabled, onClick: clearSelection, type: "button", tabIndex: 0, ref: (input) => setRef(buttonRef, input) },
+        return (React.createElement("button", { "aria-label": "clear selection", className: "sid-input-select-button", disabled: disabled, onClick: clearSelection, type: "button", tabIndex: 0 },
             React.createElement("svg", { viewBox: "0 0 20 20", preserveAspectRatio: "none", width: 12, fill: "transparent", stroke: "#5A5A5A", strokeWidth: "1.1px" },
                 React.createElement("path", { d: "M1,1 L19,19" }),
                 React.createElement("path", { d: "M19,1 L1,19" }))));
     }
-    return (React.createElement("button", Object.assign({}, getToggleButtonProps(), { className: "sid-input-select-button", disabled: disabled, type: "button", tabIndex: 0, ref: (input) => setRef(buttonRef, input) }),
+    return (React.createElement("button", Object.assign({}, getToggleButtonProps(), { className: "sid-input-select-button", disabled: disabled, type: "button", tabIndex: 0 }),
         React.createElement("svg", { viewBox: "0 0 20 20", preserveAspectRatio: "none", width: 16, fill: "transparent", stroke: "#5A5A5A", strokeWidth: "1.1px", transform: isOpen ? "rotate(180)" : undefined },
             React.createElement("path", { d: "M1,6 L10,15 L19,6" }))));
 };
@@ -9812,8 +9937,14 @@ suppressPlaceholder = true, value, autoFocus, ariaLabel, isRequired, buttonRef,
             onKeyDown(event);
         }
     };
-    const inputRef = React.createRef();
-    return (React.createElement(Downshift, { id: inputId, onChange: onChange, itemToString: itemToString, selectedItem: value && value.value && value.label ? value : "", defaultHighlightedIndex: 0 }, ({ clearSelection, getInputProps, getItemProps, getMenuProps, getToggleButtonProps, highlightedIndex, inputValue, isOpen, openMenu, selectedItem, selectHighlightedItem, }) => (React.createElement("div", { className: `sid-input-select-list ${className}` },
+    const inputRef = useRef(null);
+    // NOTE: Dependency array omitted to account for use of resetRef(), as useEffect with dep arr
+    // will only trigger on initial render leaving the refs empty, this replicates prior version
+    // where ref callback would trigger with each re-render
+    useEffect(() => {
+        setRef(fieldId, inputRef.current);
+    });
+    return (React.createElement(Downshift$1, { id: inputId, onChange: onChange, itemToString: itemToString, selectedItem: value && value.value && value.label ? value : "", defaultHighlightedIndex: 0 }, ({ clearSelection, getInputProps, getItemProps, getMenuProps, getToggleButtonProps, highlightedIndex, inputValue, isOpen, openMenu, selectedItem, selectHighlightedItem, }) => (React.createElement("div", { className: `sid-input-select-list ${className || ""}` },
         React.createElement("input", Object.assign({}, getInputProps({
             ref: inputRef,
             onClick: () => openMenu(),
@@ -9822,11 +9953,9 @@ suppressPlaceholder = true, value, autoFocus, ariaLabel, isRequired, buttonRef,
         }), { 
             // TODO resolve next line. Product needs this to autofocus, but linter says bad for accessibility
             // eslint-disable-next-line
-            autoFocus: autoFocus, id: inputId, className: `sid-l-full-width sid-text-input ${suppressPlaceholder ? "sid-hidden-placeholder" : ""} ${isErrored ? "sid-text-input--error" : ""}`, disabled: disabled, placeholder: placeholder, ref: (input) => setRef(fieldId, input), "aria-required": isRequired, "aria-labelledby": fieldLabelId, role: role })),
+            autoFocus: autoFocus, id: inputId, className: `sid-l-full-width sid-text-input ${suppressPlaceholder ? "sid-hidden-placeholder" : ""} ${isErrored ? "sid-text-input--error" : ""}`, disabled: disabled, placeholder: placeholder, "aria-required": isRequired, "aria-labelledby": fieldLabelId, role: role })),
         React.createElement(InputSelectButtonComponent, { disabled: disabled, getToggleButtonProps: getToggleButtonProps, isOpen: isOpen, clearSelection: selectedItem ? clearSelection : undefined, buttonRef: buttonRef }),
-        React.createElement("div", Object.assign({}, getMenuProps()), isOpen ? (React.createElement("div", null, filterOptions(options, inputValue).length > 0 ? (React.createElement(InputSelectListComponent, { highlightedIndex: highlightedIndex, itemToString: itemToString, options: filterOptions(options, inputValue), getItemProps: getItemProps, getMenuProps: getMenuProps })) : (React.createElement("div", Object.assign({ className: "sid-input-select-list__menu" }, getMenuProps({ "aria-label": ariaLabel })),
-            React.createElement("div", { className: "sid-input-select-list__message" },
-                React.createElement(FormattedHTMLMessage, { id: "noOptions", defaultMessage: "No Options" })))))) : null)))));
+        React.createElement(InputSelectListComponent, { highlightedIndex: highlightedIndex, itemToString: itemToString, options: filterOptions(options, inputValue), getItemProps: getItemProps, getMenuProps: getMenuProps, ariaLabel: ariaLabel, isOpen: isOpen })))));
 };
 InputSelect.defaultProps = {
     className: undefined,
@@ -9845,15 +9974,7 @@ const Country = ({ value, isErrored, options, onChange, onKeyDown, intl, placeho
         React.createElement("div", { className: "sid-l-space-top-md" }),
         React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "country", defaultMessage: "Country" }), htmlForLabel: inputId, id: `${inputId}-label`, isRequired: isRequired }),
         React.createElement(InputSelectComponent, { fieldId: "country", inputId: inputId, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: options, onChange: (country) => onChange(country), onKeyDown: onKeyDown, placeholder: placeholder ||
-                intl.formatHTMLMessage({ id: "countryPlaceholder", defaultMessage: "Country" }), value: value
-                ? {
-                    value: value.value,
-                    label: intl.formatHTMLMessage({
-                        id: `countries.${value.value}`,
-                        defaultMessage: value.label || value.value,
-                    }),
-                }
-                : undefined, isRequired: true }),
+                intl.formatHTMLMessage({ id: "countryPlaceholder", defaultMessage: "Country" }), value: options.find((option) => option.value === (value && value.value)), isRequired: true }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidCountry", defaultMessage: "Invalid country" }))) : null));
 };
@@ -9877,7 +9998,7 @@ const SelectButtonComponent = SelectButton;
 
 const Select = ({ className, hideDropDownButton, isErrored, options, onChange, overrideInputClassName, placeholder, value, }) => {
     const itemToString = (item) => (item ? item.label : "");
-    return (React.createElement(Downshift, { onChange: onChange, itemToString: itemToString, initialSelectedItem: value && value.value && value.label ? value : undefined, defaultHighlightedIndex: 0 }, ({ getInputProps, getItemProps, getMenuProps, getToggleButtonProps, highlightedIndex, isOpen, openMenu, }) => (React.createElement("div", { className: `sid-select-list ${className}` },
+    return (React.createElement(Downshift$1, { onChange: onChange, itemToString: itemToString, initialSelectedItem: value && value.value && value.label ? value : undefined, defaultHighlightedIndex: 0 }, ({ getInputProps, getItemProps, getMenuProps, getToggleButtonProps, highlightedIndex, isOpen, openMenu, }) => (React.createElement("div", { className: `sid-select-list ${className}` },
         React.createElement("input", Object.assign({}, getInputProps({ onFocus: openMenu }), getToggleButtonProps, { className: `
                         sid-l-full-width
                         ${overrideInputClassName || "sid-select-input"}
@@ -9909,13 +10030,7 @@ const ChangeLocale = ({ value, options, onChange, intl, }) => {
     return (React.createElement("div", { className: "sid-change-locale" },
         React.createElement("div", { className: "sid-field__label sid-change-locale__label " },
             React.createElement(FormattedHTMLMessage, { id: "changeLanguage", defaultMessage: "Change language" })),
-        React.createElement(SelectComponent, { className: "sid-change-locale__select", hideDropDownButton: true, options: newOptions, onChange: (locale) => onChange(locale), overrideInputClassName: "sid-change-locale__input", value: {
-                value: value.value,
-                label: intl.formatHTMLMessage({
-                    id: `locales.${value.value}`,
-                    defaultMessage: "Label not found",
-                }),
-            } }),
+        React.createElement(SelectComponent, { className: "sid-change-locale__select", hideDropDownButton: true, options: newOptions, onChange: (locale) => onChange(locale), overrideInputClassName: "sid-change-locale__input", value: newOptions.find((option) => option.value === (value && value.value)) }),
         React.createElement("div", { className: "sid-l-space-btm-sm" })));
 };
 const ChangeLocaleComponent = injectIntl(ChangeLocale);
@@ -10966,6 +11081,14 @@ const mockCancelEmailLoopResponse = {
     subSegment: null,
     locale: "en-US",
 };
+const mockCancelDocUploadResponse = {
+    submissionUrl: "",
+    verificationId: "63a22b25e7501047aa05bc3a",
+    currentStep: "override",
+    segment: "student",
+    subSegment: null,
+    locale: "en-US",
+};
 const allMockedResponses = {
     collectStudentPersonalInfo: mockStudentPersonalInfoResponse,
     collectTeacherPersonalInfo: mockTeacherPersonalInfoResponse,
@@ -10997,6 +11120,7 @@ const allMockedResponses = {
     collectAgePersonalInfo: mockAgePersonalInfoResponse,
     collectMedicalProfessionalPersonalInfo: mockMedicalProfessionalPersonalInfoResponse,
     cancelSocialSecurityNumber: {},
+    cancelDocUpload: mockCancelDocUploadResponse,
 };
 
 /**
@@ -11936,7 +12060,7 @@ const stepToRequest = {
 };
 async function submitFromVerificationStep(step, previousResponse, viewModel) {
     let response;
-    const { docUpload, cancelSocialSecurityNumber, sso, cancelEmailLoop } = VerificationStepsEnum;
+    const { docUpload, cancelSocialSecurityNumber, sso, cancelEmailLoop, cancelDocUpload } = VerificationStepsEnum;
     try {
         if (step === docUpload) {
             const requestBody = viewModel;
@@ -11956,6 +12080,10 @@ async function submitFromVerificationStep(step, previousResponse, viewModel) {
             response = await DeleteJson(previousResponse.cancelUrl);
             return response;
         }
+        if (step === cancelDocUpload) {
+            response = await DeleteJson(previousResponse.submissionUrl);
+            return response;
+        }
         const requestBody = stepToRequest[step](viewModel);
         response = await PostJson(previousResponse.submissionUrl, requestBody);
         return response;
@@ -14871,6 +14999,20 @@ const removeAllFiles = (viewModel) => fn(viewModel, (draft) => {
     }
 });
 
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
 var ReactReduxContext = React.createContext(null);
 
 var Provider =
@@ -14961,6 +15103,41 @@ Provider.propTypes = {
   children: propTypes.any
 };
 
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+  return self;
+}
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose$1(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
 /** @license React v16.13.1
  * react-is.production.min.js
  *
@@ -16393,8 +16570,15 @@ rtlDetect_1.getLangDir;
 
 const OptInInput = ({ id = "new", isErrored, onChange, value, ariaLabelledby, }) => {
     const a = ariaLabelledby ? { "aria-labelledby": ariaLabelledby } : {};
+    const inputRef = useRef(null);
+    // NOTE: Dependency array omitted to account for use of resetRef(), as useEffect with dep arr
+    // will only trigger on initial render leaving the refs empty, this replicates prior version
+    // where ref callback would trigger with each re-render
+    useEffect(() => {
+        setRef("optIn", inputRef.current);
+    });
     return (React.createElement("div", { className: "sid-checkbox" },
-        React.createElement("input", { className: "sid-checkbox__input", id: `sid-opt-in__${id}`, name: "sid-opt-in", type: "checkbox", checked: value, ref: (ref) => setRef("optIn", ref), onChange: (e) => onChange(e.target.checked), "aria-hidden": true }),
+        React.createElement("input", { className: "sid-checkbox__input", id: `sid-opt-in__${id}`, name: "sid-opt-in", type: "checkbox", checked: value, ref: inputRef, onChange: (e) => onChange(e.target.checked), "aria-hidden": true }),
         React.createElement("span", Object.assign({}, a, { className: `sid-checkbox__input-like ${isErrored ? "sid-checkbox__input-like--error" : ""}`, onClick: onChange, onKeyUp: onChange, role: "checkbox", "aria-checked": value, tabIndex: 0, "data-testid": "stylable-checkbox-input" }))));
 };
 const OptInInputComponent = OptInInput;
@@ -16466,17 +16650,24 @@ isRequired = false, onKeyDown = undefined, placeholder = "", displaySmsConsent =
 internationalSupport = false, // deprecated
 selectedCountryCode = "us", }) => {
     const getDefaultExplanation = () => !isRequired ? (React.createElement(FormattedHTMLMessage, { id: "phoneNumberExplanation", defaultMessage: "Optional - get text notifications of status updates" })) : ("");
+    const inputRef = useRef(null);
+    // NOTE: Dependency array omitted to account for use of resetRef(), as useEffect with dep arr
+    // will only trigger on initial render leaving the refs empty, this replicates prior version
+    // where ref callback would trigger with each re-render
+    useEffect(() => {
+        setRef("phoneNumber", inputRef.current);
+    });
     return (React.createElement("div", { className: "sid-field sid-phone-number" },
         React.createElement("div", { className: "sid-l-space-top-md" }),
         React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "phoneNumber", defaultMessage: "Mobile Number" }), htmlForLabel: "sid-phone-number", id: "sid-phone-number-label", displayClasses: `sid-field__label-with-explanation${placeholder && "sid-h-screen-reader-only"}`, isRequired: isRequired }, explanation || getDefaultExplanation()),
         React.createElement(React.Fragment, null,
             React.createElement(PhoneInput, { country: selectedCountryCode.toLowerCase(), containerClass: "react-tel-input sid-phone-number__wrapper", inputClass: `sid-text-input sid-phone-number__field sid-phone-number__field--intl ${isRequired ? "sid-text-input--required" : ""} sid-l-full-width ${isErrored ? "sid-text-input--error" : ""}`, autoFormat: false, value: value, onChange: (value) => onChange(value), placeholder: placeholder, 
                 // @ts-ignore
-                ref: (input) => setRef("phoneNumber", input), inputProps: {
+                ref: inputRef, inputProps: {
                     id: "sid-phone-number",
                     name: "sid-phone-number",
                     onKeyDown: (e) => (onKeyDown ? onKeyDown(e) : undefined),
-                }, "aria-labelledby": "sid-phone-number-label" })),
+                }, "aria-labelledby": "sid-phone-number-label", countryCodeEditable: false })),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidPhoneNumber", defaultMessage: "Invalid mobile number" }))) : null,
         displaySmsConsent && (React.createElement("div", { className: "sid-h-small-text sid-l-space-top-md sid-sms-consent" },
@@ -16718,10 +16909,16 @@ const Typeahead = ({ onChange, programId, className, countryCode, disabled, mini
     });
     // Maintain same labelledby value as previous versions even though label has "for" attribute
     const comboboxArgs = { "aria-labelledby": `${inputHtmlId}-label` };
-    const inputRef = React.createRef();
+    const inputRef = useRef(null);
+    // NOTE: Dependency array omitted to account for use of resetRef(), as useEffect with dep arr
+    // will only trigger on initial render leaving the refs empty, this replicates prior version
+    // where ref callback would trigger with each re-render
+    useEffect(() => {
+        setRef("organization", inputRef.current);
+    });
     return (React.createElement(React.Fragment, null,
         React.createElement("div", Object.assign({ className: "sid-organization-list" }, getComboboxProps(comboboxArgs)),
-            React.createElement("input", Object.assign({}, getInputProps({ ref: inputRef }), { className: `sid-l-full-width sid-hidden-placeholder sid-text-input ${className}`, disabled: disabled, id: inputHtmlId, placeholder: placeholder, "aria-required": isRequired, ref: (input) => setRef("organization", input) })),
+            React.createElement("input", Object.assign({}, getInputProps({ ref: inputRef }), { className: `sid-l-full-width sid-hidden-placeholder sid-text-input ${className}`, disabled: disabled, id: inputHtmlId, placeholder: placeholder, "aria-required": isRequired })),
             React.createElement("div", Object.assign({}, getMenuProps()), isOpen ? (React.createElement(FetchOrganizationsComponent, { countryCode: countryCode, getItemProps: getItemProps, highlightedIndex: highlightedIndex, itemToString: itemToString, minimumSearchValueLength: minimumSearchValueLength, onLoaded: (loadedOrganizations) => setLoadedOrgs(loadedOrganizations), programId: programId, searchValue: inputValue, orgSearchUrl: orgSearchUrl, orgSearchTags: orgSearchTags, locale: locale, urlAddSchoolForm: urlAddSchoolForm, openOrgSearchEnabled: openOrgSearchEnabled })) : null))));
 };
 const TypeaheadComponent = Typeahead;
@@ -16758,46 +16955,20 @@ const BirthDate = ({ onChange, intl, isErrored, isRequired = true, errorId, valu
     const birthDateDay = Number.parseInt(birthDateParts[2], 10) || undefined;
     const minBirthYear = 1900;
     const thisYear = new Date().getFullYear();
+    /* prettier-ignore */
     const months = [
-        {
-            value: "1",
-            label: intl.formatHTMLMessage({ id: "dateTime.january", defaultMessage: "January" }),
-        },
-        {
-            value: "2",
-            label: intl.formatHTMLMessage({ id: "dateTime.february", defaultMessage: "February" }),
-        },
-        {
-            value: "3",
-            label: intl.formatHTMLMessage({ id: "dateTime.march", defaultMessage: "March" }),
-        },
-        {
-            value: "4",
-            label: intl.formatHTMLMessage({ id: "dateTime.april", defaultMessage: "April" }),
-        },
+        { value: "1", label: intl.formatHTMLMessage({ id: "dateTime.january", defaultMessage: "January" }) },
+        { value: "2", label: intl.formatHTMLMessage({ id: "dateTime.february", defaultMessage: "February" }) },
+        { value: "3", label: intl.formatHTMLMessage({ id: "dateTime.march", defaultMessage: "March" }) },
+        { value: "4", label: intl.formatHTMLMessage({ id: "dateTime.april", defaultMessage: "April" }) },
         { value: "5", label: intl.formatHTMLMessage({ id: "dateTime.may", defaultMessage: "May" }) },
         { value: "6", label: intl.formatHTMLMessage({ id: "dateTime.june", defaultMessage: "June" }) },
         { value: "7", label: intl.formatHTMLMessage({ id: "dateTime.july", defaultMessage: "July" }) },
-        {
-            value: "8",
-            label: intl.formatHTMLMessage({ id: "dateTime.august", defaultMessage: "August" }),
-        },
-        {
-            value: "9",
-            label: intl.formatHTMLMessage({ id: "dateTime.september", defaultMessage: "September" }),
-        },
-        {
-            value: "10",
-            label: intl.formatHTMLMessage({ id: "dateTime.october", defaultMessage: "October" }),
-        },
-        {
-            value: "11",
-            label: intl.formatHTMLMessage({ id: "dateTime.november", defaultMessage: "November" }),
-        },
-        {
-            value: "12",
-            label: intl.formatHTMLMessage({ id: "dateTime.december", defaultMessage: "December" }),
-        },
+        { value: "8", label: intl.formatHTMLMessage({ id: "dateTime.august", defaultMessage: "August" }) },
+        { value: "9", label: intl.formatHTMLMessage({ id: "dateTime.september", defaultMessage: "September" }) },
+        { value: "10", label: intl.formatHTMLMessage({ id: "dateTime.october", defaultMessage: "October" }) },
+        { value: "11", label: intl.formatHTMLMessage({ id: "dateTime.november", defaultMessage: "November" }) },
+        { value: "12", label: intl.formatHTMLMessage({ id: "dateTime.december", defaultMessage: "December" }) },
     ];
     const isDateFieldEmpty = (year, month, day) => (!day || day === "") && (!month || month === "") && (!year || year === "");
     const updateBirthMonth = (month) => {
@@ -16856,23 +17027,26 @@ const BirthDate = ({ onChange, intl, isErrored, isRequired = true, errorId, valu
             onChange(`${birthDateYear}-${formatTwoDigitValues(birthDateMonth)}-${formatTwoDigitValues(birthDateDay)}`);
         }
     };
-    const handleOnKeyDown = (event) => {
-        if (event.key === "Tab" && !event.shiftKey) {
-            event.preventDefault();
-            setFocus("inputSelectButtonBirthDate");
-        }
-    };
     const monthFieldId = "sid-birthdate__month";
     const fieldLabelId = "sid-birthdate-label";
     const errMsg = errorId ? (React.createElement("div", { className: "sid-field-error" },
         React.createElement(FormattedHTMLMessage, { id: `errorId.${errorId}`, defaultMessage: "Invalid birth date" }))) : (React.createElement("div", { className: "sid-field-error" },
         React.createElement(FormattedHTMLMessage, { id: "errorId.invalidBirthDate", defaultMessage: "Invalid birth date" })));
+    const birthDateDayRef = useRef(null);
+    const birthDateYearRef = useRef(null);
+    // NOTE: Dependency array omitted to account for use of resetRef(), as useEffect with dep arr
+    // will only trigger on initial render leaving the refs empty, this replicates prior version
+    // where ref callback would trigger with each re-render
+    useEffect(() => {
+        setRef("birthDateDay", birthDateDayRef.current);
+        setRef("birthDateYear", birthDateYearRef.current);
+    });
     return (React.createElement("div", { className: "sid-field sid-birthdate" },
         React.createElement("div", { className: "sid-l-space-top-md" }),
         React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "birthDate", defaultMessage: "Date of birth" }), htmlForLabel: monthFieldId, id: fieldLabelId, displayClasses: "sid-field__label-with-explanation", isRequired: isRequired },
             React.createElement(FormattedHTMLMessage, { id: "verificationPurposesOnly", defaultMessage: "Used for verification purposes only" })),
         React.createElement("div", { className: "sid-birthdate__inputs" },
-            React.createElement(InputSelectComponent, { className: "sid-birthdate__month", fieldId: "birthDate", inputId: monthFieldId, fieldLabelId: fieldLabelId, isErrored: isErrored, options: months, onKeyDown: (event) => handleOnKeyDown(event), onChange: (choice) => {
+            React.createElement(InputSelectComponent, { className: "sid-birthdate__month", fieldId: "birthDate", inputId: monthFieldId, fieldLabelId: fieldLabelId, isErrored: isErrored, options: months, onChange: (choice) => {
                     if (choice) {
                         updateBirthMonth(choice.value);
                     }
@@ -16881,8 +17055,8 @@ const BirthDate = ({ onChange, intl, isErrored, isRequired = true, errorId, valu
                         updateBirthMonth(null);
                     }
                 }, placeholder: intl.formatHTMLMessage({ id: "dateTime.month", defaultMessage: "Month" }), suppressPlaceholder: false, value: birthDateMonth ? months[birthDateMonth - 1] : undefined, isRequired: isRequired, buttonRef: "inputSelectButtonBirthDate" }),
-            React.createElement("input", { className: `sid-birthdate__day sid-text-input sid-text-input--required ${isErrored ? "sid-text-input--error" : ""}`, id: "sid-birthdate-day", min: 1, max: 31, name: "sid-birthdate-day", onChange: (e) => updateBirthDay(e.target.value), onBlur: getBirthDate, pattern: "\\d*", placeholder: intl.formatHTMLMessage({ id: "dateTime.day", defaultMessage: "Day" }), "aria-label": intl.formatHTMLMessage({ id: "dateTime.day", defaultMessage: "Day" }), "aria-labelledby": "sid-birthdate", "aria-required": isRequired, ref: (input) => setRef("birthDateDay", input), type: "text", value: birthDateDay || "" }),
-            React.createElement("input", { className: `sid-birthdate__year sid-text-input sid-text-input--required ${isErrored ? "sid-text-input--error" : ""}`, id: "sid-birthdate-year", name: "sid-birthdate-year", type: "text", min: minBirthYear, max: thisYear, value: birthDateYear || "", pattern: "\\d*", placeholder: intl.formatHTMLMessage({ id: "dateTime.year", defaultMessage: "Year" }), "aria-label": intl.formatHTMLMessage({ id: "dateTime.year", defaultMessage: "Year" }), "aria-labelledby": "sid-birthdate", "aria-required": isRequired, ref: (input) => setRef("birthDateYear", input), onChange: (e) => updateBirthYear(e.target.value), onBlur: getBirthDate })),
+            React.createElement("input", { className: `sid-birthdate__day sid-text-input sid-text-input--required ${isErrored ? "sid-text-input--error" : ""}`, id: "sid-birthdate-day", min: 1, max: 31, name: "sid-birthdate-day", onChange: (e) => updateBirthDay(e.target.value), onBlur: getBirthDate, pattern: "\\d*", placeholder: intl.formatHTMLMessage({ id: "dateTime.day", defaultMessage: "Day" }), "aria-label": intl.formatHTMLMessage({ id: "dateTime.day", defaultMessage: "Day" }), "aria-labelledby": "sid-birthdate", "aria-required": isRequired, ref: birthDateDayRef, type: "text", value: birthDateDay || "" }),
+            React.createElement("input", { className: `sid-birthdate__year sid-text-input sid-text-input--required ${isErrored ? "sid-text-input--error" : ""}`, id: "sid-birthdate-year", name: "sid-birthdate-year", type: "text", min: minBirthYear, max: thisYear, value: birthDateYear || "", pattern: "\\d*", placeholder: intl.formatHTMLMessage({ id: "dateTime.year", defaultMessage: "Year" }), "aria-label": intl.formatHTMLMessage({ id: "dateTime.year", defaultMessage: "Year" }), "aria-labelledby": "sid-birthdate", "aria-required": isRequired, ref: birthDateYearRef, onChange: (e) => updateBirthYear(e.target.value), onBlur: getBirthDate })),
         isErrored ? errMsg : null));
 };
 BirthDate.defaultProps = {
@@ -17755,10 +17929,19 @@ const StepMemberPersonalInfoComponent = StepMemberPersonalInfo;
 
 const Status = ({ value, isErrored, errorId = "invalidStatus", options, onChange, intl, placeholder = "", onKeyDown = undefined, segmentId, }) => {
     const inputId = `sid-${segmentId}-status`;
+    const hasOnlyOneOption = options.length === 1;
+    React.useEffect(() => {
+        if (hasOnlyOneOption) {
+            onChange(options[0]);
+        }
+    }, []);
+    if (hasOnlyOneOption) {
+        return null;
+    }
     return (React.createElement("div", { className: `sid-field ${inputId}` },
         React.createElement("div", { className: "sid-l-space-top-md" }),
         React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "status", defaultMessage: "Status" }), htmlForLabel: inputId, id: `${inputId}-label`, displayClasses: placeholder && "sid-h-screen-reader-only" }),
-        React.createElement(InputSelectComponent, { fieldId: "status", inputId: inputId, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: options, onChange: (status) => onChange(status), onKeyDown: onKeyDown, value: value, placeholder: placeholder ||
+        React.createElement(InputSelectComponent, { fieldId: "status", inputId: inputId, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: options, onChange: (status) => onChange(status), onKeyDown: onKeyDown, value: options.find((option) => option.value === (value && value.value)), placeholder: placeholder ||
                 intl.formatHTMLMessage({ id: "statusPlaceholder", defaultMessage: "Status" }), isRequired: true }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: `errorId.${errorId}`, defaultMessage: `Invalid ${segmentId} status` }))) : null));
@@ -17840,11 +18023,11 @@ const BranchOfService = ({ autoFocus, onChange, value, isErrored, organizations,
     return (React.createElement("div", { className: `sid-field ${inputId}-id` },
         React.createElement("div", { className: "sid-l-space-top-md" }),
         React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "branchOfService", defaultMessage: "Branch Of Service" }), htmlForLabel: inputId, id: `${inputId}-label`, displayClasses: placeholder && "sid-h-screen-reader-only" }),
-        React.createElement(InputSelectComponent, { autoFocus: autoFocus, fieldId: "organization", inputId: inputId, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: SortByLabel(options), onChange: (branch) => handleStateChange(branch, onChange), value: value, isRequired: true, placeholder: placeholder ||
+        React.createElement(InputSelectComponent, { autoFocus: autoFocus, fieldId: "organization", inputId: inputId, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: SortByLabel(options), onChange: (branch) => handleStateChange(branch, onChange), value: options.find((option) => option.value === (value && value.value)), placeholder: placeholder ||
                 intl.formatHTMLMessage({
                     id: "branchOfServicePlaceholder",
                     defaultMessage: "Branch Of Service",
-                }) }),
+                }), isRequired: true }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidOrganization", defaultMessage: "You must select an organization from the list" }))) : null));
 };
@@ -17963,46 +18146,20 @@ const DischargeDate = ({ onChange, intl, isErrored, value, }) => {
     const minDischargeYear = 1900;
     const thisYear = new Date().getFullYear();
     const inputId = "sid-discharge-date";
+    /* prettier-ignore */
     const months = [
-        {
-            value: "1",
-            label: intl.formatHTMLMessage({ id: "dateTime.january", defaultMessage: "January" }),
-        },
-        {
-            value: "2",
-            label: intl.formatHTMLMessage({ id: "dateTime.february", defaultMessage: "February" }),
-        },
-        {
-            value: "3",
-            label: intl.formatHTMLMessage({ id: "dateTime.march", defaultMessage: "March" }),
-        },
-        {
-            value: "4",
-            label: intl.formatHTMLMessage({ id: "dateTime.april", defaultMessage: "April" }),
-        },
+        { value: "1", label: intl.formatHTMLMessage({ id: "dateTime.january", defaultMessage: "January" }), },
+        { value: "2", label: intl.formatHTMLMessage({ id: "dateTime.february", defaultMessage: "February" }), },
+        { value: "3", label: intl.formatHTMLMessage({ id: "dateTime.march", defaultMessage: "March" }), },
+        { value: "4", label: intl.formatHTMLMessage({ id: "dateTime.april", defaultMessage: "April" }), },
         { value: "5", label: intl.formatHTMLMessage({ id: "dateTime.may", defaultMessage: "May" }) },
         { value: "6", label: intl.formatHTMLMessage({ id: "dateTime.june", defaultMessage: "June" }) },
         { value: "7", label: intl.formatHTMLMessage({ id: "dateTime.july", defaultMessage: "July" }) },
-        {
-            value: "8",
-            label: intl.formatHTMLMessage({ id: "dateTime.august", defaultMessage: "August" }),
-        },
-        {
-            value: "9",
-            label: intl.formatHTMLMessage({ id: "dateTime.september", defaultMessage: "September" }),
-        },
-        {
-            value: "10",
-            label: intl.formatHTMLMessage({ id: "dateTime.october", defaultMessage: "October" }),
-        },
-        {
-            value: "11",
-            label: intl.formatHTMLMessage({ id: "dateTime.november", defaultMessage: "November" }),
-        },
-        {
-            value: "12",
-            label: intl.formatHTMLMessage({ id: "dateTime.december", defaultMessage: "December" }),
-        },
+        { value: "8", label: intl.formatHTMLMessage({ id: "dateTime.august", defaultMessage: "August" }), },
+        { value: "9", label: intl.formatHTMLMessage({ id: "dateTime.september", defaultMessage: "September" }), },
+        { value: "10", label: intl.formatHTMLMessage({ id: "dateTime.october", defaultMessage: "October" }), },
+        { value: "11", label: intl.formatHTMLMessage({ id: "dateTime.november", defaultMessage: "November" }), },
+        { value: "12", label: intl.formatHTMLMessage({ id: "dateTime.december", defaultMessage: "December" }), },
     ];
     const updateDischargeMonth = (month) => {
         if (month === "" || month === null) {
@@ -18031,20 +18188,12 @@ const DischargeDate = ({ onChange, intl, isErrored, value, }) => {
     const getDischargeDate = () => {
         onChange(`${dischargeDateYear}-${formatTwoDigitValues(dischargeDateMonth)}-${formatTwoDigitValues(dischargeDateDay)}`);
     };
-    const handleOnKeyDown = (event) => {
-        if (event.key === "Tab") {
-            if (!event.shiftKey) {
-                event.preventDefault();
-                setFocus("inputSelectButtonDischargeDate");
-            }
-        }
-    };
     return (React.createElement("div", { className: `sid-field ${inputId}` },
         React.createElement("div", { className: "sid-l-space-top-md" }),
         React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "dischargeDate", defaultMessage: "Discharge date" }), htmlForLabel: `${inputId}__month`, id: `${inputId}-label`, displayClasses: "sid-field__label-with-explanation" },
             React.createElement(FormattedHTMLMessage, { id: "verificationPurposesOnly", defaultMessage: "Used for verification purposes only" })),
         React.createElement("div", { className: `${inputId}__inputs` },
-            React.createElement(InputSelectComponent, { className: `${inputId}__month`, fieldId: "dischargeDate", inputId: `${inputId}__month`, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: months, onKeyDown: (event) => handleOnKeyDown(event), onChange: (choice) => {
+            React.createElement(InputSelectComponent, { className: `${inputId}__month`, fieldId: "dischargeDate", inputId: `${inputId}__month`, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: months, onChange: (choice) => {
                     if (choice) {
                         updateDischargeMonth(choice.value);
                     }
@@ -18441,27 +18590,13 @@ const StepMedicalProfessionalPersonalInfoComponent = injectIntl(StepMedicalProfe
 
 const StateSelect = ({ value, isErrored, options, onChange, intl, placeholder = "", label = "", isRequired = false, }) => {
     const stateFieldId = "sid-state";
-    const handleOnKeyDown = (event) => {
-        if (event.key === "Tab" && !event.shiftKey) {
-            event.preventDefault();
-            setFocus("inputSelectButtonState");
-        }
-    };
     return (React.createElement("div", { className: `sid-field ${stateFieldId}__select` },
         React.createElement("div", { className: "sid-l-space-top-md" }),
         React.createElement(FieldLabel, { text: label || React.createElement(FormattedHTMLMessage, { id: "state", defaultMessage: "State where you live" }), htmlForLabel: stateFieldId, id: `${stateFieldId}-label`, displayClasses: placeholder && "sid-h-screen-reader-only", isRequired: isRequired }),
-        React.createElement(InputSelectComponent, { fieldId: "state", inputId: stateFieldId, fieldLabelId: `${stateFieldId}-label`, isErrored: isErrored, options: options, onChange: (state) => onChange(state), onKeyDown: (event) => handleOnKeyDown(event), placeholder: intl.formatHTMLMessage({
+        React.createElement(InputSelectComponent, { fieldId: "state", inputId: stateFieldId, fieldLabelId: `${stateFieldId}-label`, isErrored: isErrored, options: options, onChange: (state) => onChange(state), placeholder: intl.formatHTMLMessage({
                 id: "statePlaceholder",
                 defaultMessage: "State",
-            }), value: value
-                ? {
-                    value,
-                    label: intl.formatHTMLMessage({
-                        id: `states.${value}`,
-                        defaultMessage: value.label || value,
-                    }),
-                }
-                : undefined, suppressPlaceholder: false, isRequired: isRequired, buttonRef: "inputSelectButtonState" }),
+            }), value: options.find((option) => option.value === value), suppressPlaceholder: false, isRequired: isRequired, buttonRef: "inputSelectButtonState" }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidState", defaultMessage: "Invalid state" }))) : null));
 };
@@ -18883,6 +19018,7 @@ const defaultStatusMessages$1 = {
     LICENSED_REAL_ESTATE_AGENT: "Licensed Real Estate Agent",
     VETERINARIAN: "Veterinarian",
     CHILD_CARE_WORKER: "Child Care Worker",
+    LIBRARIAN: "Librarian",
 };
 const StepLicensedProfessionalPersonalInfo = ({ intl, verificationService, }) => {
     const viewModel = verificationService.viewModel;
@@ -19397,6 +19533,7 @@ const StepSSOComponent = ({ verificationService }) => {
     const verificationResponse = verificationService.verificationResponse;
     const previousVerificationResponse = verificationService.previousVerificationResponse || undefined;
     const { verificationId } = verificationService.verificationResponse;
+    const isMockingStep = getRouteOverride();
     let timeout;
     const pollForVerificationServiceUpdates = () => setTimeout(() => {
         verificationService.fetchExistingVerificationRequest(programId, verificationId, previousVerificationResponse, previousViewModel);
@@ -19422,7 +19559,7 @@ const StepSSOComponent = ({ verificationService }) => {
         setTabRef(window.open(verificationResponse.loginUrl, "_blank"));
         getTabRef().focus();
     };
-    if (viewModel.isSSOActive) {
+    if (viewModel.isSSOActive && !isMockingStep) {
         timeout = pollForVerificationServiceUpdates();
     }
     if (!viewModel.countryChoice && previousViewModel && previousViewModel.countryChoice) {
@@ -19618,6 +19755,7 @@ const StepPending = ({ verificationService, intl }) => {
         undefined;
     const { verificationId } = verificationService.verificationResponse;
     const countdownSeconds = 20;
+    const isMockingStep = getRouteOverride();
     const isMockingPreviousStepSSO = getPreviousStepOverride() && getPreviousStepOverride() === VerificationStepsEnum.sso;
     const isMockingPreviousStepDocUpload = getPreviousStepOverride() && getPreviousStepOverride() === VerificationStepsEnum.docUpload;
     const isPreviousStepSSO = () => {
@@ -19633,9 +19771,10 @@ const StepPending = ({ verificationService, intl }) => {
         : showCountDown
             ? DOC_UPLOAD_POLL_DURATION_DURING_COUNTDOWN
             : DOC_UPLOAD_POLL_DURATION;
-    const stopPollingInterval = usePollingInterval(() => {
-        verificationService.fetchExistingVerificationRequest(programId, verificationId, verificationLastResponse, previousViewModel, false);
-    }, pollTime);
+    const stopPollingInterval = !isMockingStep &&
+        usePollingInterval(() => {
+            verificationService.fetchExistingVerificationRequest(programId, verificationId, verificationLastResponse, previousViewModel, false);
+        }, pollTime);
     const cancelSSOStep = () => {
         const nextState = fn(viewModel, () => { });
         logger.info("StepSSOComponent submitting cancel request");
@@ -19847,83 +19986,6 @@ const StepEmailLoop = ({ intl, verificationService }) => {
 };
 const StepEmailLoopComponent = injectIntl(StepEmailLoop);
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-
-function __read(o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-}
-
-/** @deprecated */
-function __spread() {
-    for (var ar = [], i = 0; i < arguments.length; i++)
-        ar = ar.concat(__read(arguments[i]));
-    return ar;
-}
-
 var COMMON_MIME_TYPES = new Map([
     ['avi', 'video/avi'],
     ['gif', 'image/gif'],
@@ -21502,6 +21564,7 @@ const StepDocUpload = ({ verificationService, intl }) => {
     const viewModel = verificationService.viewModel;
     const { fieldValidationErrors } = verificationService;
     const subSegment = getSafe(() => verificationService.verificationResponse.subSegment);
+    const { overrideEnabled } = verificationService.programTheme;
     const getFileForView = (file) => ({
         name: file.name,
         url: file.type.includes("image") ? URL.createObjectURL(file) : "",
@@ -21588,6 +21651,11 @@ const StepDocUpload = ({ verificationService, intl }) => {
         viewModel.erroredFileNames
             ? viewModel.erroredFileNames.map((filename) => React.createElement("div", null, filename))
             : null)) : null;
+    const cancelDocUpload = async () => {
+        logger.info("StepDocUploadComponent submitting form after skipping document upload");
+        const nextState = fn(viewModel, () => { });
+        verificationService.submitStep(VerificationStepsEnum.cancelDocUpload, nextState, verificationService.verificationResponse);
+    };
     return (React.createElement("div", { id: "sid-step-doc-upload", className: "sid-l-container" },
         React.createElement("div", { className: "sid-header sid-l-horz-center sid-l-space-top-md" },
             React.createElement("div", { className: "sid-l-horz-center" },
@@ -21644,6 +21712,9 @@ const StepDocUpload = ({ verificationService, intl }) => {
                     React.createElement(FormattedHTMLMessage, { id: "step.docUpload.submitButtonLabel", defaultMessage: "Continue" })),
                 React.createElement("button", { onClick: removeFilesAndUpdate, type: "button", className: "sid-btn sid-btn--light sid-submit__cancel sid-l-space-left-sm", "aria-label": "cancel", disabled: currentFileNames.length <= 0 },
                     React.createElement(FormattedHTMLMessage, { id: "step.docUpload.cancelButtonLabel", defaultMessage: "Cancel" }))))) : null),
+        overrideEnabled && (React.createElement("div", { className: "sid-submit sid-l-horz-center sid-l-space-top-sm" },
+            React.createElement("a", { href: "#", className: "sid-link", onClick: () => cancelDocUpload(), role: "button" },
+                React.createElement(FormattedHTMLMessage, { id: "step.docUpload.cancelDocUploadLabel", defaultMessage: "Click here if you are unable to verify with a document" })))),
         React.createElement(FormFooterComponent, { verificationService: verificationService })));
 };
 const StepDocUploadComponent = injectIntl(StepDocUpload);