wp/wp-includes/js/dist/vendor/react-dom.js
changeset 19 3d72ae0968f4
parent 18 be944660c56a
child 21 48c4eec2b7e6
--- a/wp/wp-includes/js/dist/vendor/react-dom.js	Wed Sep 21 18:19:35 2022 +0200
+++ b/wp/wp-includes/js/dist/vendor/react-dom.js	Tue Sep 27 16:37:53 2022 +0200
@@ -1,4 +1,4 @@
-/** @license React v16.13.1
+/** @license React v17.0.2
  * react-dom.development.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -6,30 +6,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-'use strict';
-
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
   (global = global || self, factory(global.ReactDOM = {}, global.React));
 }(this, (function (exports, React) { 'use strict';
 
-  var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; // Prevent newer renderers from RTE when used with older react package versions.
-  // Current owner and dispatcher used to share the same ref,
-  // but PR #14548 split them out to better support the react-debug-tools package.
-
-  if (!ReactSharedInternals.hasOwnProperty('ReactCurrentDispatcher')) {
-    ReactSharedInternals.ReactCurrentDispatcher = {
-      current: null
-    };
-  }
-
-  if (!ReactSharedInternals.hasOwnProperty('ReactCurrentBatchConfig')) {
-    ReactSharedInternals.ReactCurrentBatchConfig = {
-      suspense: null
-    };
-  }
+  var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
   // by calls to these methods by a Babel plugin.
   //
@@ -59,16 +42,12 @@
     // When changing this logic, you might want to also
     // update consoleWithStackDev.www.js as well.
     {
-      var hasExistingStack = args.length > 0 && typeof args[args.length - 1] === 'string' && args[args.length - 1].indexOf('\n    in') === 0;
-
-      if (!hasExistingStack) {
-        var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-        var stack = ReactDebugCurrentFrame.getStackAddendum();
-
-        if (stack !== '') {
-          format += '%s';
-          args = args.concat([stack]);
-        }
+      var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+      var stack = ReactDebugCurrentFrame.getStackAddendum();
+
+      if (stack !== '') {
+        format += '%s';
+        args = args.concat([stack]);
       }
 
       var argsWithFormat = args.map(function (item) {
@@ -80,17 +59,6 @@
       // eslint-disable-next-line react-internal/no-production-logging
 
       Function.prototype.apply.call(console[level], console, argsWithFormat);
-
-      try {
-        // --- Welcome to debugging React ---
-        // This error was thrown as a convenience so that you can use this stack
-        // to find the callsite that caused this warning to fire.
-        var argIndex = 0;
-        var message = 'Warning: ' + format.replace(/%s/g, function () {
-          return args[argIndex++];
-        });
-        throw new Error(message);
-      } catch (x) {}
     }
   }
 
@@ -100,318 +68,6 @@
     }
   }
 
-  var invokeGuardedCallbackImpl = function (name, func, context, a, b, c, d, e, f) {
-    var funcArgs = Array.prototype.slice.call(arguments, 3);
-
-    try {
-      func.apply(context, funcArgs);
-    } catch (error) {
-      this.onError(error);
-    }
-  };
-
-  {
-    // In DEV mode, we swap out invokeGuardedCallback for a special version
-    // that plays more nicely with the browser's DevTools. The idea is to preserve
-    // "Pause on exceptions" behavior. Because React wraps all user-provided
-    // functions in invokeGuardedCallback, and the production version of
-    // invokeGuardedCallback uses a try-catch, all user exceptions are treated
-    // like caught exceptions, and the DevTools won't pause unless the developer
-    // takes the extra step of enabling pause on caught exceptions. This is
-    // unintuitive, though, because even though React has caught the error, from
-    // the developer's perspective, the error is uncaught.
-    //
-    // To preserve the expected "Pause on exceptions" behavior, we don't use a
-    // try-catch in DEV. Instead, we synchronously dispatch a fake event to a fake
-    // DOM node, and call the user-provided callback from inside an event handler
-    // for that fake event. If the callback throws, the error is "captured" using
-    // a global event handler. But because the error happens in a different
-    // event loop context, it does not interrupt the normal program flow.
-    // Effectively, this gives us try-catch behavior without actually using
-    // try-catch. Neat!
-    // Check that the browser supports the APIs we need to implement our special
-    // DEV version of invokeGuardedCallback
-    if (typeof window !== 'undefined' && typeof window.dispatchEvent === 'function' && typeof document !== 'undefined' && typeof document.createEvent === 'function') {
-      var fakeNode = document.createElement('react');
-
-      var invokeGuardedCallbackDev = function (name, func, context, a, b, c, d, e, f) {
-        // If document doesn't exist we know for sure we will crash in this method
-        // when we call document.createEvent(). However this can cause confusing
-        // errors: https://github.com/facebookincubator/create-react-app/issues/3482
-        // So we preemptively throw with a better message instead.
-        if (!(typeof document !== 'undefined')) {
-          {
-            throw Error( "The `document` global was defined when React was initialized, but is not defined anymore. This can happen in a test environment if a component schedules an update from an asynchronous callback, but the test has already finished running. To solve this, you can either unmount the component at the end of your test (and ensure that any asynchronous operations get canceled in `componentWillUnmount`), or you can change the test itself to be asynchronous." );
-          }
-        }
-
-        var evt = document.createEvent('Event'); // Keeps track of whether the user-provided callback threw an error. We
-        // set this to true at the beginning, then set it to false right after
-        // calling the function. If the function errors, `didError` will never be
-        // set to false. This strategy works even if the browser is flaky and
-        // fails to call our global error handler, because it doesn't rely on
-        // the error event at all.
-
-        var didError = true; // Keeps track of the value of window.event so that we can reset it
-        // during the callback to let user code access window.event in the
-        // browsers that support it.
-
-        var windowEvent = window.event; // Keeps track of the descriptor of window.event to restore it after event
-        // dispatching: https://github.com/facebook/react/issues/13688
-
-        var windowEventDescriptor = Object.getOwnPropertyDescriptor(window, 'event'); // Create an event handler for our fake event. We will synchronously
-        // dispatch our fake event using `dispatchEvent`. Inside the handler, we
-        // call the user-provided callback.
-
-        var funcArgs = Array.prototype.slice.call(arguments, 3);
-
-        function callCallback() {
-          // We immediately remove the callback from event listeners so that
-          // nested `invokeGuardedCallback` calls do not clash. Otherwise, a
-          // nested call would trigger the fake event handlers of any call higher
-          // in the stack.
-          fakeNode.removeEventListener(evtType, callCallback, false); // We check for window.hasOwnProperty('event') to prevent the
-          // window.event assignment in both IE <= 10 as they throw an error
-          // "Member not found" in strict mode, and in Firefox which does not
-          // support window.event.
-
-          if (typeof window.event !== 'undefined' && window.hasOwnProperty('event')) {
-            window.event = windowEvent;
-          }
-
-          func.apply(context, funcArgs);
-          didError = false;
-        } // Create a global error event handler. We use this to capture the value
-        // that was thrown. It's possible that this error handler will fire more
-        // than once; for example, if non-React code also calls `dispatchEvent`
-        // and a handler for that event throws. We should be resilient to most of
-        // those cases. Even if our error event handler fires more than once, the
-        // last error event is always used. If the callback actually does error,
-        // we know that the last error event is the correct one, because it's not
-        // possible for anything else to have happened in between our callback
-        // erroring and the code that follows the `dispatchEvent` call below. If
-        // the callback doesn't error, but the error event was fired, we know to
-        // ignore it because `didError` will be false, as described above.
-
-
-        var error; // Use this to track whether the error event is ever called.
-
-        var didSetError = false;
-        var isCrossOriginError = false;
-
-        function handleWindowError(event) {
-          error = event.error;
-          didSetError = true;
-
-          if (error === null && event.colno === 0 && event.lineno === 0) {
-            isCrossOriginError = true;
-          }
-
-          if (event.defaultPrevented) {
-            // Some other error handler has prevented default.
-            // Browsers silence the error report if this happens.
-            // We'll remember this to later decide whether to log it or not.
-            if (error != null && typeof error === 'object') {
-              try {
-                error._suppressLogging = true;
-              } catch (inner) {// Ignore.
-              }
-            }
-          }
-        } // Create a fake event type.
-
-
-        var evtType = "react-" + (name ? name : 'invokeguardedcallback'); // Attach our event handlers
-
-        window.addEventListener('error', handleWindowError);
-        fakeNode.addEventListener(evtType, callCallback, false); // Synchronously dispatch our fake event. If the user-provided function
-        // errors, it will trigger our global error handler.
-
-        evt.initEvent(evtType, false, false);
-        fakeNode.dispatchEvent(evt);
-
-        if (windowEventDescriptor) {
-          Object.defineProperty(window, 'event', windowEventDescriptor);
-        }
-
-        if (didError) {
-          if (!didSetError) {
-            // The callback errored, but the error event never fired.
-            error = new Error('An error was thrown inside one of your components, but React ' + "doesn't know what it was. This is likely due to browser " + 'flakiness. React does its best to preserve the "Pause on ' + 'exceptions" behavior of the DevTools, which requires some ' + "DEV-mode only tricks. It's possible that these don't work in " + 'your browser. Try triggering the error in production mode, ' + 'or switching to a modern browser. If you suspect that this is ' + 'actually an issue with React, please file an issue.');
-          } else if (isCrossOriginError) {
-            error = new Error("A cross-origin error was thrown. React doesn't have access to " + 'the actual error object in development. ' + 'See https://fb.me/react-crossorigin-error for more information.');
-          }
-
-          this.onError(error);
-        } // Remove our event listeners
-
-
-        window.removeEventListener('error', handleWindowError);
-      };
-
-      invokeGuardedCallbackImpl = invokeGuardedCallbackDev;
-    }
-  }
-
-  var invokeGuardedCallbackImpl$1 = invokeGuardedCallbackImpl;
-
-  var hasError = false;
-  var caughtError = null; // Used by event system to capture/rethrow the first error.
-
-  var hasRethrowError = false;
-  var rethrowError = null;
-  var reporter = {
-    onError: function (error) {
-      hasError = true;
-      caughtError = error;
-    }
-  };
-  /**
-   * Call a function while guarding against errors that happens within it.
-   * Returns an error if it throws, otherwise null.
-   *
-   * In production, this is implemented using a try-catch. The reason we don't
-   * use a try-catch directly is so that we can swap out a different
-   * implementation in DEV mode.
-   *
-   * @param {String} name of the guard to use for logging or debugging
-   * @param {Function} func The function to invoke
-   * @param {*} context The context to use when calling the function
-   * @param {...*} args Arguments for function
-   */
-
-  function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
-    hasError = false;
-    caughtError = null;
-    invokeGuardedCallbackImpl$1.apply(reporter, arguments);
-  }
-  /**
-   * Same as invokeGuardedCallback, but instead of returning an error, it stores
-   * it in a global so it can be rethrown by `rethrowCaughtError` later.
-   * TODO: See if caughtError and rethrowError can be unified.
-   *
-   * @param {String} name of the guard to use for logging or debugging
-   * @param {Function} func The function to invoke
-   * @param {*} context The context to use when calling the function
-   * @param {...*} args Arguments for function
-   */
-
-  function invokeGuardedCallbackAndCatchFirstError(name, func, context, a, b, c, d, e, f) {
-    invokeGuardedCallback.apply(this, arguments);
-
-    if (hasError) {
-      var error = clearCaughtError();
-
-      if (!hasRethrowError) {
-        hasRethrowError = true;
-        rethrowError = error;
-      }
-    }
-  }
-  /**
-   * During execution of guarded functions we will capture the first error which
-   * we will rethrow to be handled by the top level error handler.
-   */
-
-  function rethrowCaughtError() {
-    if (hasRethrowError) {
-      var error = rethrowError;
-      hasRethrowError = false;
-      rethrowError = null;
-      throw error;
-    }
-  }
-  function hasCaughtError() {
-    return hasError;
-  }
-  function clearCaughtError() {
-    if (hasError) {
-      var error = caughtError;
-      hasError = false;
-      caughtError = null;
-      return error;
-    } else {
-      {
-        {
-          throw Error( "clearCaughtError was called but no error was captured. This error is likely caused by a bug in React. Please file an issue." );
-        }
-      }
-    }
-  }
-
-  var getFiberCurrentPropsFromNode = null;
-  var getInstanceFromNode = null;
-  var getNodeFromInstance = null;
-  function setComponentTree(getFiberCurrentPropsFromNodeImpl, getInstanceFromNodeImpl, getNodeFromInstanceImpl) {
-    getFiberCurrentPropsFromNode = getFiberCurrentPropsFromNodeImpl;
-    getInstanceFromNode = getInstanceFromNodeImpl;
-    getNodeFromInstance = getNodeFromInstanceImpl;
-
-    {
-      if (!getNodeFromInstance || !getInstanceFromNode) {
-        error('EventPluginUtils.setComponentTree(...): Injected ' + 'module is missing getNodeFromInstance or getInstanceFromNode.');
-      }
-    }
-  }
-  var validateEventDispatches;
-
-  {
-    validateEventDispatches = function (event) {
-      var dispatchListeners = event._dispatchListeners;
-      var dispatchInstances = event._dispatchInstances;
-      var listenersIsArr = Array.isArray(dispatchListeners);
-      var listenersLen = listenersIsArr ? dispatchListeners.length : dispatchListeners ? 1 : 0;
-      var instancesIsArr = Array.isArray(dispatchInstances);
-      var instancesLen = instancesIsArr ? dispatchInstances.length : dispatchInstances ? 1 : 0;
-
-      if (instancesIsArr !== listenersIsArr || instancesLen !== listenersLen) {
-        error('EventPluginUtils: Invalid `event`.');
-      }
-    };
-  }
-  /**
-   * Dispatch the event to the listener.
-   * @param {SyntheticEvent} event SyntheticEvent to handle
-   * @param {function} listener Application-level callback
-   * @param {*} inst Internal component instance
-   */
-
-
-  function executeDispatch(event, listener, inst) {
-    var type = event.type || 'unknown-event';
-    event.currentTarget = getNodeFromInstance(inst);
-    invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event);
-    event.currentTarget = null;
-  }
-  /**
-   * Standard/simple iteration through an event's collected dispatches.
-   */
-
-  function executeDispatchesInOrder(event) {
-    var dispatchListeners = event._dispatchListeners;
-    var dispatchInstances = event._dispatchInstances;
-
-    {
-      validateEventDispatches(event);
-    }
-
-    if (Array.isArray(dispatchListeners)) {
-      for (var i = 0; i < dispatchListeners.length; i++) {
-        if (event.isPropagationStopped()) {
-          break;
-        } // Listeners and Instances are two parallel arrays that are always in sync.
-
-
-        executeDispatch(event, dispatchListeners[i], dispatchInstances[i]);
-      }
-    } else if (dispatchListeners) {
-      executeDispatch(event, dispatchListeners, dispatchInstances);
-    }
-
-    event._dispatchListeners = null;
-    event._dispatchInstances = null;
-  }
-
   var FunctionComponent = 0;
   var ClassComponent = 1;
   var IndeterminateComponent = 2; // Before we know whether it is function or class
@@ -438,148 +94,23 @@
   var FundamentalComponent = 20;
   var ScopeComponent = 21;
   var Block = 22;
-
-  /**
-   * Injectable ordering of event plugins.
-   */
-  var eventPluginOrder = null;
-  /**
-   * Injectable mapping from names to event plugin modules.
-   */
-
-  var namesToPlugins = {};
-  /**
-   * Recomputes the plugin list using the injected plugins and plugin ordering.
-   *
-   * @private
-   */
-
-  function recomputePluginOrdering() {
-    if (!eventPluginOrder) {
-      // Wait until an `eventPluginOrder` is injected.
-      return;
-    }
-
-    for (var pluginName in namesToPlugins) {
-      var pluginModule = namesToPlugins[pluginName];
-      var pluginIndex = eventPluginOrder.indexOf(pluginName);
-
-      if (!(pluginIndex > -1)) {
-        {
-          throw Error( "EventPluginRegistry: Cannot inject event plugins that do not exist in the plugin ordering, `" + pluginName + "`." );
-        }
-      }
-
-      if (plugins[pluginIndex]) {
-        continue;
-      }
-
-      if (!pluginModule.extractEvents) {
-        {
-          throw Error( "EventPluginRegistry: Event plugins must implement an `extractEvents` method, but `" + pluginName + "` does not." );
-        }
-      }
-
-      plugins[pluginIndex] = pluginModule;
-      var publishedEvents = pluginModule.eventTypes;
-
-      for (var eventName in publishedEvents) {
-        if (!publishEventForPlugin(publishedEvents[eventName], pluginModule, eventName)) {
-          {
-            throw Error( "EventPluginRegistry: Failed to publish event `" + eventName + "` for plugin `" + pluginName + "`." );
-          }
-        }
-      }
-    }
-  }
-  /**
-   * Publishes an event so that it can be dispatched by the supplied plugin.
-   *
-   * @param {object} dispatchConfig Dispatch configuration for the event.
-   * @param {object} PluginModule Plugin publishing the event.
-   * @return {boolean} True if the event was successfully published.
-   * @private
-   */
-
-
-  function publishEventForPlugin(dispatchConfig, pluginModule, eventName) {
-    if (!!eventNameDispatchConfigs.hasOwnProperty(eventName)) {
-      {
-        throw Error( "EventPluginRegistry: More than one plugin attempted to publish the same event name, `" + eventName + "`." );
-      }
-    }
-
-    eventNameDispatchConfigs[eventName] = dispatchConfig;
-    var phasedRegistrationNames = dispatchConfig.phasedRegistrationNames;
-
-    if (phasedRegistrationNames) {
-      for (var phaseName in phasedRegistrationNames) {
-        if (phasedRegistrationNames.hasOwnProperty(phaseName)) {
-          var phasedRegistrationName = phasedRegistrationNames[phaseName];
-          publishRegistrationName(phasedRegistrationName, pluginModule, eventName);
-        }
-      }
-
-      return true;
-    } else if (dispatchConfig.registrationName) {
-      publishRegistrationName(dispatchConfig.registrationName, pluginModule, eventName);
-      return true;
-    }
-
-    return false;
-  }
-  /**
-   * Publishes a registration name that is used to identify dispatched events.
-   *
-   * @param {string} registrationName Registration name to add.
-   * @param {object} PluginModule Plugin publishing the event.
-   * @private
-   */
-
-
-  function publishRegistrationName(registrationName, pluginModule, eventName) {
-    if (!!registrationNameModules[registrationName]) {
-      {
-        throw Error( "EventPluginRegistry: More than one plugin attempted to publish the same registration name, `" + registrationName + "`." );
-      }
-    }
-
-    registrationNameModules[registrationName] = pluginModule;
-    registrationNameDependencies[registrationName] = pluginModule.eventTypes[eventName].dependencies;
-
-    {
-      var lowerCasedName = registrationName.toLowerCase();
-      possibleRegistrationNames[lowerCasedName] = registrationName;
-
-      if (registrationName === 'onDoubleClick') {
-        possibleRegistrationNames.ondblclick = registrationName;
-      }
-    }
-  }
-  /**
-   * Registers plugins so that they can extract and dispatch events.
-   */
-
-  /**
-   * Ordered list of injected plugins.
-   */
-
-
-  var plugins = [];
-  /**
-   * Mapping from event name to dispatch config
-   */
-
-  var eventNameDispatchConfigs = {};
-  /**
-   * Mapping from registration name to plugin module
-   */
-
-  var registrationNameModules = {};
+  var OffscreenComponent = 23;
+  var LegacyHiddenComponent = 24;
+
+  // Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+
+  var enableProfilerTimer = true; // Record durations for commit and passive effects phases.
+
+  var enableFundamentalAPI = false; // Experimental Scope support.
+  var enableNewReconciler = false; // Errors that are thrown while unmounting (or after in the case of passive effects)
+  var warnAboutStringRefs = false;
+
+  var allNativeEvents = new Set();
   /**
    * Mapping from registration name to event name
    */
 
+
   var registrationNameDependencies = {};
   /**
    * Mapping from lowercase registration names to the properly cased version,
@@ -590,278 +121,39 @@
 
   var possibleRegistrationNames =  {} ; // Trust the developer to only use possibleRegistrationNames in true
 
-  /**
-   * Injects an ordering of plugins (by plugin name). This allows the ordering
-   * to be decoupled from injection of the actual plugins so that ordering is
-   * always deterministic regardless of packaging, on-the-fly injection, etc.
-   *
-   * @param {array} InjectedEventPluginOrder
-   * @internal
-   */
-
-  function injectEventPluginOrder(injectedEventPluginOrder) {
-    if (!!eventPluginOrder) {
-      {
-        throw Error( "EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React." );
-      }
-    } // Clone the ordering so it cannot be dynamically mutated.
-
-
-    eventPluginOrder = Array.prototype.slice.call(injectedEventPluginOrder);
-    recomputePluginOrdering();
-  }
-  /**
-   * Injects plugins to be used by plugin event system. The plugin names must be
-   * in the ordering injected by `injectEventPluginOrder`.
-   *
-   * Plugins can be injected as part of page initialization or on-the-fly.
-   *
-   * @param {object} injectedNamesToPlugins Map from names to plugin modules.
-   * @internal
-   */
-
-  function injectEventPluginsByName(injectedNamesToPlugins) {
-    var isOrderingDirty = false;
-
-    for (var pluginName in injectedNamesToPlugins) {
-      if (!injectedNamesToPlugins.hasOwnProperty(pluginName)) {
-        continue;
-      }
-
-      var pluginModule = injectedNamesToPlugins[pluginName];
-
-      if (!namesToPlugins.hasOwnProperty(pluginName) || namesToPlugins[pluginName] !== pluginModule) {
-        if (!!namesToPlugins[pluginName]) {
-          {
-            throw Error( "EventPluginRegistry: Cannot inject two different event plugins using the same name, `" + pluginName + "`." );
-          }
-        }
-
-        namesToPlugins[pluginName] = pluginModule;
-        isOrderingDirty = true;
-      }
-    }
-
-    if (isOrderingDirty) {
-      recomputePluginOrdering();
+  function registerTwoPhaseEvent(registrationName, dependencies) {
+    registerDirectEvent(registrationName, dependencies);
+    registerDirectEvent(registrationName + 'Capture', dependencies);
+  }
+  function registerDirectEvent(registrationName, dependencies) {
+    {
+      if (registrationNameDependencies[registrationName]) {
+        error('EventRegistry: More than one plugin attempted to publish the same ' + 'registration name, `%s`.', registrationName);
+      }
+    }
+
+    registrationNameDependencies[registrationName] = dependencies;
+
+    {
+      var lowerCasedName = registrationName.toLowerCase();
+      possibleRegistrationNames[lowerCasedName] = registrationName;
+
+      if (registrationName === 'onDoubleClick') {
+        possibleRegistrationNames.ondblclick = registrationName;
+      }
+    }
+
+    for (var i = 0; i < dependencies.length; i++) {
+      allNativeEvents.add(dependencies[i]);
     }
   }
 
   var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');
 
-  var ReactInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  var _assign = ReactInternals.assign;
-
-  var PLUGIN_EVENT_SYSTEM = 1;
-  var IS_REPLAYED = 1 << 5;
-  var IS_FIRST_ANCESTOR = 1 << 6;
-
-  var restoreImpl = null;
-  var restoreTarget = null;
-  var restoreQueue = null;
-
-  function restoreStateOfTarget(target) {
-    // We perform this translation at the end of the event loop so that we
-    // always receive the correct fiber here
-    var internalInstance = getInstanceFromNode(target);
-
-    if (!internalInstance) {
-      // Unmounted
-      return;
-    }
-
-    if (!(typeof restoreImpl === 'function')) {
-      {
-        throw Error( "setRestoreImplementation() needs to be called to handle a target for controlled events. This error is likely caused by a bug in React. Please file an issue." );
-      }
-    }
-
-    var stateNode = internalInstance.stateNode; // Guard against Fiber being unmounted.
-
-    if (stateNode) {
-      var _props = getFiberCurrentPropsFromNode(stateNode);
-
-      restoreImpl(internalInstance.stateNode, internalInstance.type, _props);
-    }
-  }
-
-  function setRestoreImplementation(impl) {
-    restoreImpl = impl;
-  }
-  function enqueueStateRestore(target) {
-    if (restoreTarget) {
-      if (restoreQueue) {
-        restoreQueue.push(target);
-      } else {
-        restoreQueue = [target];
-      }
-    } else {
-      restoreTarget = target;
-    }
-  }
-  function needsStateRestore() {
-    return restoreTarget !== null || restoreQueue !== null;
-  }
-  function restoreStateIfNeeded() {
-    if (!restoreTarget) {
-      return;
-    }
-
-    var target = restoreTarget;
-    var queuedTargets = restoreQueue;
-    restoreTarget = null;
-    restoreQueue = null;
-    restoreStateOfTarget(target);
-
-    if (queuedTargets) {
-      for (var i = 0; i < queuedTargets.length; i++) {
-        restoreStateOfTarget(queuedTargets[i]);
-      }
-    }
-  }
-
-  var enableProfilerTimer = true; // Trace which interactions trigger each commit.
-
-  var enableDeprecatedFlareAPI = false; // Experimental Host Component support.
-
-  var enableFundamentalAPI = false; // Experimental Scope support.
-  var warnAboutStringRefs = false;
-
-  // the renderer. Such as when we're dispatching events or if third party
-  // libraries need to call batchedUpdates. Eventually, this API will go away when
-  // everything is batched by default. We'll then have a similar API to opt-out of
-  // scheduled work and instead do synchronous work.
-  // Defaults
-
-  var batchedUpdatesImpl = function (fn, bookkeeping) {
-    return fn(bookkeeping);
-  };
-
-  var discreteUpdatesImpl = function (fn, a, b, c, d) {
-    return fn(a, b, c, d);
-  };
-
-  var flushDiscreteUpdatesImpl = function () {};
-
-  var batchedEventUpdatesImpl = batchedUpdatesImpl;
-  var isInsideEventHandler = false;
-  var isBatchingEventUpdates = false;
-
-  function finishEventHandler() {
-    // Here we wait until all updates have propagated, which is important
-    // when using controlled components within layers:
-    // https://github.com/facebook/react/issues/1698
-    // Then we restore state of any controlled component.
-    var controlledComponentsHavePendingUpdates = needsStateRestore();
-
-    if (controlledComponentsHavePendingUpdates) {
-      // If a controlled event was fired, we may need to restore the state of
-      // the DOM node back to the controlled value. This is necessary when React
-      // bails out of the update without touching the DOM.
-      flushDiscreteUpdatesImpl();
-      restoreStateIfNeeded();
-    }
-  }
-
-  function batchedUpdates(fn, bookkeeping) {
-    if (isInsideEventHandler) {
-      // If we are currently inside another batch, we need to wait until it
-      // fully completes before restoring state.
-      return fn(bookkeeping);
-    }
-
-    isInsideEventHandler = true;
-
-    try {
-      return batchedUpdatesImpl(fn, bookkeeping);
-    } finally {
-      isInsideEventHandler = false;
-      finishEventHandler();
-    }
-  }
-  function batchedEventUpdates(fn, a, b) {
-    if (isBatchingEventUpdates) {
-      // If we are currently inside another batch, we need to wait until it
-      // fully completes before restoring state.
-      return fn(a, b);
-    }
-
-    isBatchingEventUpdates = true;
-
-    try {
-      return batchedEventUpdatesImpl(fn, a, b);
-    } finally {
-      isBatchingEventUpdates = false;
-      finishEventHandler();
-    }
-  } // This is for the React Flare event system
-  function discreteUpdates(fn, a, b, c, d) {
-    var prevIsInsideEventHandler = isInsideEventHandler;
-    isInsideEventHandler = true;
-
-    try {
-      return discreteUpdatesImpl(fn, a, b, c, d);
-    } finally {
-      isInsideEventHandler = prevIsInsideEventHandler;
-
-      if (!isInsideEventHandler) {
-        finishEventHandler();
-      }
-    }
-  }
-  function flushDiscreteUpdatesIfNeeded(timeStamp) {
-    // event.timeStamp isn't overly reliable due to inconsistencies in
-    // how different browsers have historically provided the time stamp.
-    // Some browsers provide high-resolution time stamps for all events,
-    // some provide low-resolution time stamps for all events. FF < 52
-    // even mixes both time stamps together. Some browsers even report
-    // negative time stamps or time stamps that are 0 (iOS9) in some cases.
-    // Given we are only comparing two time stamps with equality (!==),
-    // we are safe from the resolution differences. If the time stamp is 0
-    // we bail-out of preventing the flush, which can affect semantics,
-    // such as if an earlier flush removes or adds event listeners that
-    // are fired in the subsequent flush. However, this is the same
-    // behaviour as we had before this change, so the risks are low.
-    if (!isInsideEventHandler && (!enableDeprecatedFlareAPI  )) {
-      flushDiscreteUpdatesImpl();
-    }
-  }
-  function setBatchingImplementation(_batchedUpdatesImpl, _discreteUpdatesImpl, _flushDiscreteUpdatesImpl, _batchedEventUpdatesImpl) {
-    batchedUpdatesImpl = _batchedUpdatesImpl;
-    discreteUpdatesImpl = _discreteUpdatesImpl;
-    flushDiscreteUpdatesImpl = _flushDiscreteUpdatesImpl;
-    batchedEventUpdatesImpl = _batchedEventUpdatesImpl;
-  }
-
-  var DiscreteEvent = 0;
-  var UserBlockingEvent = 1;
-  var ContinuousEvent = 2;
-
-  var ReactInternals$1 = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  var _ReactInternals$Sched = ReactInternals$1.Scheduler,
-      unstable_cancelCallback = _ReactInternals$Sched.unstable_cancelCallback,
-      unstable_now = _ReactInternals$Sched.unstable_now,
-      unstable_scheduleCallback = _ReactInternals$Sched.unstable_scheduleCallback,
-      unstable_shouldYield = _ReactInternals$Sched.unstable_shouldYield,
-      unstable_requestPaint = _ReactInternals$Sched.unstable_requestPaint,
-      unstable_getFirstCallbackNode = _ReactInternals$Sched.unstable_getFirstCallbackNode,
-      unstable_runWithPriority = _ReactInternals$Sched.unstable_runWithPriority,
-      unstable_next = _ReactInternals$Sched.unstable_next,
-      unstable_continueExecution = _ReactInternals$Sched.unstable_continueExecution,
-      unstable_pauseExecution = _ReactInternals$Sched.unstable_pauseExecution,
-      unstable_getCurrentPriorityLevel = _ReactInternals$Sched.unstable_getCurrentPriorityLevel,
-      unstable_ImmediatePriority = _ReactInternals$Sched.unstable_ImmediatePriority,
-      unstable_UserBlockingPriority = _ReactInternals$Sched.unstable_UserBlockingPriority,
-      unstable_NormalPriority = _ReactInternals$Sched.unstable_NormalPriority,
-      unstable_LowPriority = _ReactInternals$Sched.unstable_LowPriority,
-      unstable_IdlePriority = _ReactInternals$Sched.unstable_IdlePriority,
-      unstable_forceFrameRate = _ReactInternals$Sched.unstable_forceFrameRate,
-      unstable_flushAllWithoutAsserting = _ReactInternals$Sched.unstable_flushAllWithoutAsserting;
-
   // A reserved attribute.
   // It is handled by React separately and shouldn't be written to the DOM.
   var RESERVED = 0; // A simple string attribute.
-  // Attributes that aren't in the whitelist are presumed to have this type.
+  // Attributes that aren't in the filter are presumed to have this type.
 
   var STRING = 1; // A string attribute that accepts booleans in React. In HTML, these are called
   // "enumerated" attributes with "true" and "false" as possible values.
@@ -976,6 +268,7 @@
     }
 
     if (propertyInfo !== null) {
+
       switch (propertyInfo.type) {
         case BOOLEAN:
           return !value;
@@ -997,7 +290,7 @@
     return properties.hasOwnProperty(name) ? properties[name] : null;
   }
 
-  function PropertyInfoRecord(name, type, mustUseProperty, attributeName, attributeNamespace, sanitizeURL) {
+  function PropertyInfoRecord(name, type, mustUseProperty, attributeName, attributeNamespace, sanitizeURL, removeEmptyString) {
     this.acceptsBooleans = type === BOOLEANISH_STRING || type === BOOLEAN || type === OVERLOADED_BOOLEAN;
     this.attributeName = attributeName;
     this.attributeNamespace = attributeNamespace;
@@ -1005,6 +298,7 @@
     this.propertyName = name;
     this.type = type;
     this.sanitizeURL = sanitizeURL;
+    this.removeEmptyString = removeEmptyString;
   } // When adding attributes to this list, be sure to also add them to
   // the `possibleStandardNames` module to ensure casing and incorrect
   // name warnings.
@@ -1016,11 +310,11 @@
   // elements (not just inputs). Now that ReactDOMInput assigns to the
   // defaultValue property -- do we need this?
   'defaultValue', 'defaultChecked', 'innerHTML', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'style'];
-
   reservedProps.forEach(function (name) {
     properties[name] = new PropertyInfoRecord(name, RESERVED, false, // mustUseProperty
     name, // attributeName
     null, // attributeNamespace
+    false, // sanitizeURL
     false);
   }); // A few React string attributes have a different name.
   // This is a mapping from React prop names to the attribute names.
@@ -1031,6 +325,7 @@
     properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
     attributeName, // attributeName
     null, // attributeNamespace
+    false, // sanitizeURL
     false);
   }); // These are "enumerated" HTML attributes that accept "true" and "false".
   // In React, we let users pass `true` and `false` even though technically
@@ -1040,6 +335,7 @@
     properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty
     name.toLowerCase(), // attributeName
     null, // attributeNamespace
+    false, // sanitizeURL
     false);
   }); // These are "enumerated" SVG attributes that accept "true" and "false".
   // In React, we let users pass `true` and `false` even though technically
@@ -1050,16 +346,18 @@
     properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty
     name, // attributeName
     null, // attributeNamespace
+    false, // sanitizeURL
     false);
   }); // These are HTML boolean attributes.
 
   ['allowFullScreen', 'async', // Note: there is a special case that prevents it from being written to the DOM
   // on the client side because the browsers are inconsistent. Instead we call focus().
-  'autoFocus', 'autoPlay', 'controls', 'default', 'defer', 'disabled', 'disablePictureInPicture', 'formNoValidate', 'hidden', 'loop', 'noModule', 'noValidate', 'open', 'playsInline', 'readOnly', 'required', 'reversed', 'scoped', 'seamless', // Microdata
+  'autoFocus', 'autoPlay', 'controls', 'default', 'defer', 'disabled', 'disablePictureInPicture', 'disableRemotePlayback', 'formNoValidate', 'hidden', 'loop', 'noModule', 'noValidate', 'open', 'playsInline', 'readOnly', 'required', 'reversed', 'scoped', 'seamless', // Microdata
   'itemScope'].forEach(function (name) {
     properties[name] = new PropertyInfoRecord(name, BOOLEAN, false, // mustUseProperty
     name.toLowerCase(), // attributeName
     null, // attributeNamespace
+    false, // sanitizeURL
     false);
   }); // These are the few React props that we set as DOM properties
   // rather than attributes. These are all booleans.
@@ -1073,6 +371,7 @@
     properties[name] = new PropertyInfoRecord(name, BOOLEAN, true, // mustUseProperty
     name, // attributeName
     null, // attributeNamespace
+    false, // sanitizeURL
     false);
   }); // These are HTML attributes that are "overloaded booleans": they behave like
   // booleans, but can also accept a string value.
@@ -1084,6 +383,7 @@
     properties[name] = new PropertyInfoRecord(name, OVERLOADED_BOOLEAN, false, // mustUseProperty
     name, // attributeName
     null, // attributeNamespace
+    false, // sanitizeURL
     false);
   }); // These are HTML attributes that must be positive numbers.
 
@@ -1094,6 +394,7 @@
     properties[name] = new PropertyInfoRecord(name, POSITIVE_NUMERIC, false, // mustUseProperty
     name, // attributeName
     null, // attributeNamespace
+    false, // sanitizeURL
     false);
   }); // These are HTML attributes that must be numbers.
 
@@ -1101,6 +402,7 @@
     properties[name] = new PropertyInfoRecord(name, NUMERIC, false, // mustUseProperty
     name.toLowerCase(), // attributeName
     null, // attributeNamespace
+    false, // sanitizeURL
     false);
   });
   var CAMELIZE = /[\-\:]([a-z])/g;
@@ -1109,7 +411,7 @@
     return token[1].toUpperCase();
   }; // This is a list of all SVG attributes that need special casing, namespacing,
   // or boolean value assignment. Regular attributes that just accept strings
-  // and have the same names are omitted, just like in the HTML whitelist.
+  // and have the same names are omitted, just like in the HTML attribute filter.
   // Some of these attributes can be hard to find. This list was created by
   // scraping the MDN documentation.
 
@@ -1121,6 +423,7 @@
     var name = attributeName.replace(CAMELIZE, capitalize);
     properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
     attributeName, null, // attributeNamespace
+    false, // sanitizeURL
     false);
   }); // String SVG attributes with the xlink namespace.
 
@@ -1130,7 +433,8 @@
   ].forEach(function (attributeName) {
     var name = attributeName.replace(CAMELIZE, capitalize);
     properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
-    attributeName, 'http://www.w3.org/1999/xlink', false);
+    attributeName, 'http://www.w3.org/1999/xlink', false, // sanitizeURL
+    false);
   }); // String SVG attributes with the xml namespace.
 
   ['xml:base', 'xml:lang', 'xml:space' // NOTE: if you add a camelCased prop to this list,
@@ -1139,7 +443,8 @@
   ].forEach(function (attributeName) {
     var name = attributeName.replace(CAMELIZE, capitalize);
     properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
-    attributeName, 'http://www.w3.org/XML/1998/namespace', false);
+    attributeName, 'http://www.w3.org/XML/1998/namespace', false, // sanitizeURL
+    false);
   }); // These attribute exists both in HTML and SVG.
   // The attribute name is case-sensitive in SVG so we can't just use
   // the React name like we do for attributes that exist only in HTML.
@@ -1148,25 +453,23 @@
     properties[attributeName] = new PropertyInfoRecord(attributeName, STRING, false, // mustUseProperty
     attributeName.toLowerCase(), // attributeName
     null, // attributeNamespace
+    false, // sanitizeURL
     false);
   }); // These attributes accept URLs. These must not allow javascript: URLS.
   // These will also need to accept Trusted Types object in the future.
 
   var xlinkHref = 'xlinkHref';
   properties[xlinkHref] = new PropertyInfoRecord('xlinkHref', STRING, false, // mustUseProperty
-  'xlink:href', 'http://www.w3.org/1999/xlink', true);
+  'xlink:href', 'http://www.w3.org/1999/xlink', true, // sanitizeURL
+  false);
   ['src', 'href', 'action', 'formAction'].forEach(function (attributeName) {
     properties[attributeName] = new PropertyInfoRecord(attributeName, STRING, false, // mustUseProperty
     attributeName.toLowerCase(), // attributeName
     null, // attributeNamespace
+    true, // sanitizeURL
     true);
   });
 
-  var ReactDebugCurrentFrame = null;
-
-  {
-    ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-  } // A javascript: URL can contain leading C0 control or \u0020 SPACE,
   // and any newline or tab are filtered out as if they're not part of the URL.
   // https://url.spec.whatwg.org/#url-parsing
   // Tab or newline are defined as \r\n\t:
@@ -1177,7 +480,6 @@
 
   /* eslint-disable max-len */
 
-
   var isJavaScriptProtocol = /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*\:/i;
   var didWarn = false;
 
@@ -1270,6 +572,13 @@
     {
       if (!isAttributeNameSafe(name)) {
         return;
+      } // If the object is an opaque reference ID, it's expected that
+      // the next prop is different than the server value, so just return
+      // expected
+
+
+      if (isOpaqueHydratingObject(expected)) {
+        return expected;
       }
 
       if (!node.hasAttribute(name)) {
@@ -1370,56 +679,59 @@
     }
   }
 
-  var BEFORE_SLASH_RE = /^(.*)[\\\/]/;
-  function describeComponentFrame (name, source, ownerName) {
-    var sourceInfo = '';
-
-    if (source) {
-      var path = source.fileName;
-      var fileName = path.replace(BEFORE_SLASH_RE, '');
-
-      {
-        // In DEV, include code for a common special case:
-        // prefer "folder/index.js" instead of just "index.js".
-        if (/^index\./.test(fileName)) {
-          var match = path.match(BEFORE_SLASH_RE);
-
-          if (match) {
-            var pathBeforeSlash = match[1];
-
-            if (pathBeforeSlash) {
-              var folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
-              fileName = folderName + '/' + fileName;
-            }
-          }
-        }
-      }
-
-      sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
-    } else if (ownerName) {
-      sourceInfo = ' (created by ' + ownerName + ')';
-    }
-
-    return '\n    in ' + (name || 'Unknown') + sourceInfo;
-  }
-
+  var ReactInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  var _assign = ReactInternals.assign;
+
+  // ATTENTION
+  // When adding new symbols to this file,
+  // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
   // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
   // nor polyfill, then a plain number is used for performance.
-  var hasSymbol = typeof Symbol === 'function' && Symbol.for;
-  var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
-  var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
-  var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
-  var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
-  var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
-  var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
-  var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
-  var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
-  var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
-  var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
-  var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
-  var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
-  var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-  var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+  var REACT_ELEMENT_TYPE = 0xeac7;
+  var REACT_PORTAL_TYPE = 0xeaca;
+  var REACT_FRAGMENT_TYPE = 0xeacb;
+  var REACT_STRICT_MODE_TYPE = 0xeacc;
+  var REACT_PROFILER_TYPE = 0xead2;
+  var REACT_PROVIDER_TYPE = 0xeacd;
+  var REACT_CONTEXT_TYPE = 0xeace;
+  var REACT_FORWARD_REF_TYPE = 0xead0;
+  var REACT_SUSPENSE_TYPE = 0xead1;
+  var REACT_SUSPENSE_LIST_TYPE = 0xead8;
+  var REACT_MEMO_TYPE = 0xead3;
+  var REACT_LAZY_TYPE = 0xead4;
+  var REACT_BLOCK_TYPE = 0xead9;
+  var REACT_SERVER_BLOCK_TYPE = 0xeada;
+  var REACT_FUNDAMENTAL_TYPE = 0xead5;
+  var REACT_SCOPE_TYPE = 0xead7;
+  var REACT_OPAQUE_ID_TYPE = 0xeae0;
+  var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
+  var REACT_OFFSCREEN_TYPE = 0xeae2;
+  var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
+
+  if (typeof Symbol === 'function' && Symbol.for) {
+    var symbolFor = Symbol.for;
+    REACT_ELEMENT_TYPE = symbolFor('react.element');
+    REACT_PORTAL_TYPE = symbolFor('react.portal');
+    REACT_FRAGMENT_TYPE = symbolFor('react.fragment');
+    REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
+    REACT_PROFILER_TYPE = symbolFor('react.profiler');
+    REACT_PROVIDER_TYPE = symbolFor('react.provider');
+    REACT_CONTEXT_TYPE = symbolFor('react.context');
+    REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
+    REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
+    REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
+    REACT_MEMO_TYPE = symbolFor('react.memo');
+    REACT_LAZY_TYPE = symbolFor('react.lazy');
+    REACT_BLOCK_TYPE = symbolFor('react.block');
+    REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
+    REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
+    REACT_SCOPE_TYPE = symbolFor('react.scope');
+    REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');
+    REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
+    REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
+    REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
+  }
+
   var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
   var FAUX_ITERATOR_SYMBOL = '@@iterator';
   function getIteratorFn(maybeIterable) {
@@ -1436,38 +748,397 @@
     return null;
   }
 
-  var Uninitialized = -1;
-  var Pending = 0;
-  var Resolved = 1;
-  var Rejected = 2;
-  function refineResolvedLazyComponent(lazyComponent) {
-    return lazyComponent._status === Resolved ? lazyComponent._result : null;
-  }
-  function initializeLazyComponentType(lazyComponent) {
-    if (lazyComponent._status === Uninitialized) {
-      lazyComponent._status = Pending;
-      var ctor = lazyComponent._ctor;
-      var thenable = ctor();
-      lazyComponent._result = thenable;
-      thenable.then(function (moduleObject) {
-        if (lazyComponent._status === Pending) {
-          var defaultExport = moduleObject.default;
-
-          {
-            if (defaultExport === undefined) {
-              error('lazy: Expected the result of a dynamic import() call. ' + 'Instead received: %s\n\nYour code should look like: \n  ' + "const MyComponent = lazy(() => import('./MyComponent'))", moduleObject);
-            }
-          }
-
-          lazyComponent._status = Resolved;
-          lazyComponent._result = defaultExport;
-        }
-      }, function (error) {
-        if (lazyComponent._status === Pending) {
-          lazyComponent._status = Rejected;
-          lazyComponent._result = error;
-        }
-      });
+  // Helpers to patch console.logs to avoid logging during side-effect free
+  // replaying on render function. This currently only patches the object
+  // lazily which won't cover if the log function was extracted eagerly.
+  // We could also eagerly patch the method.
+  var disabledDepth = 0;
+  var prevLog;
+  var prevInfo;
+  var prevWarn;
+  var prevError;
+  var prevGroup;
+  var prevGroupCollapsed;
+  var prevGroupEnd;
+
+  function disabledLog() {}
+
+  disabledLog.__reactDisabledLog = true;
+  function disableLogs() {
+    {
+      if (disabledDepth === 0) {
+        /* eslint-disable react-internal/no-production-logging */
+        prevLog = console.log;
+        prevInfo = console.info;
+        prevWarn = console.warn;
+        prevError = console.error;
+        prevGroup = console.group;
+        prevGroupCollapsed = console.groupCollapsed;
+        prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099
+
+        var props = {
+          configurable: true,
+          enumerable: true,
+          value: disabledLog,
+          writable: true
+        }; // $FlowFixMe Flow thinks console is immutable.
+
+        Object.defineProperties(console, {
+          info: props,
+          log: props,
+          warn: props,
+          error: props,
+          group: props,
+          groupCollapsed: props,
+          groupEnd: props
+        });
+        /* eslint-enable react-internal/no-production-logging */
+      }
+
+      disabledDepth++;
+    }
+  }
+  function reenableLogs() {
+    {
+      disabledDepth--;
+
+      if (disabledDepth === 0) {
+        /* eslint-disable react-internal/no-production-logging */
+        var props = {
+          configurable: true,
+          enumerable: true,
+          writable: true
+        }; // $FlowFixMe Flow thinks console is immutable.
+
+        Object.defineProperties(console, {
+          log: _assign({}, props, {
+            value: prevLog
+          }),
+          info: _assign({}, props, {
+            value: prevInfo
+          }),
+          warn: _assign({}, props, {
+            value: prevWarn
+          }),
+          error: _assign({}, props, {
+            value: prevError
+          }),
+          group: _assign({}, props, {
+            value: prevGroup
+          }),
+          groupCollapsed: _assign({}, props, {
+            value: prevGroupCollapsed
+          }),
+          groupEnd: _assign({}, props, {
+            value: prevGroupEnd
+          })
+        });
+        /* eslint-enable react-internal/no-production-logging */
+      }
+
+      if (disabledDepth < 0) {
+        error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.');
+      }
+    }
+  }
+
+  var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+  var prefix;
+  function describeBuiltInComponentFrame(name, source, ownerFn) {
+    {
+      if (prefix === undefined) {
+        // Extract the VM specific prefix used by each line.
+        try {
+          throw Error();
+        } catch (x) {
+          var match = x.stack.trim().match(/\n( *(at )?)/);
+          prefix = match && match[1] || '';
+        }
+      } // We use the prefix to ensure our stacks line up with native stack frames.
+
+
+      return '\n' + prefix + name;
+    }
+  }
+  var reentry = false;
+  var componentFrameCache;
+
+  {
+    var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+    componentFrameCache = new PossiblyWeakMap();
+  }
+
+  function describeNativeComponentFrame(fn, construct) {
+    // If something asked for a stack inside a fake render, it should get ignored.
+    if (!fn || reentry) {
+      return '';
+    }
+
+    {
+      var frame = componentFrameCache.get(fn);
+
+      if (frame !== undefined) {
+        return frame;
+      }
+    }
+
+    var control;
+    reentry = true;
+    var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined.
+
+    Error.prepareStackTrace = undefined;
+    var previousDispatcher;
+
+    {
+      previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function
+      // for warnings.
+
+      ReactCurrentDispatcher.current = null;
+      disableLogs();
+    }
+
+    try {
+      // This should throw.
+      if (construct) {
+        // Something should be setting the props in the constructor.
+        var Fake = function () {
+          throw Error();
+        }; // $FlowFixMe
+
+
+        Object.defineProperty(Fake.prototype, 'props', {
+          set: function () {
+            // We use a throwing setter instead of frozen or non-writable props
+            // because that won't throw in a non-strict mode function.
+            throw Error();
+          }
+        });
+
+        if (typeof Reflect === 'object' && Reflect.construct) {
+          // We construct a different control for this case to include any extra
+          // frames added by the construct call.
+          try {
+            Reflect.construct(Fake, []);
+          } catch (x) {
+            control = x;
+          }
+
+          Reflect.construct(fn, [], Fake);
+        } else {
+          try {
+            Fake.call();
+          } catch (x) {
+            control = x;
+          }
+
+          fn.call(Fake.prototype);
+        }
+      } else {
+        try {
+          throw Error();
+        } catch (x) {
+          control = x;
+        }
+
+        fn();
+      }
+    } catch (sample) {
+      // This is inlined manually because closure doesn't do it for us.
+      if (sample && control && typeof sample.stack === 'string') {
+        // This extracts the first frame from the sample that isn't also in the control.
+        // Skipping one frame that we assume is the frame that calls the two.
+        var sampleLines = sample.stack.split('\n');
+        var controlLines = control.stack.split('\n');
+        var s = sampleLines.length - 1;
+        var c = controlLines.length - 1;
+
+        while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
+          // We expect at least one stack frame to be shared.
+          // Typically this will be the root most one. However, stack frames may be
+          // cut off due to maximum stack limits. In this case, one maybe cut off
+          // earlier than the other. We assume that the sample is longer or the same
+          // and there for cut off earlier. So we should find the root most frame in
+          // the sample somewhere in the control.
+          c--;
+        }
+
+        for (; s >= 1 && c >= 0; s--, c--) {
+          // Next we find the first one that isn't the same which should be the
+          // frame that called our sample function and the control.
+          if (sampleLines[s] !== controlLines[c]) {
+            // In V8, the first line is describing the message but other VMs don't.
+            // If we're about to return the first line, and the control is also on the same
+            // line, that's a pretty good indicator that our sample threw at same line as
+            // the control. I.e. before we entered the sample frame. So we ignore this result.
+            // This can happen if you passed a class to function component, or non-function.
+            if (s !== 1 || c !== 1) {
+              do {
+                s--;
+                c--; // We may still have similar intermediate frames from the construct call.
+                // The next one that isn't the same should be our match though.
+
+                if (c < 0 || sampleLines[s] !== controlLines[c]) {
+                  // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
+                  var _frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+
+                  {
+                    if (typeof fn === 'function') {
+                      componentFrameCache.set(fn, _frame);
+                    }
+                  } // Return the line we found.
+
+
+                  return _frame;
+                }
+              } while (s >= 1 && c >= 0);
+            }
+
+            break;
+          }
+        }
+      }
+    } finally {
+      reentry = false;
+
+      {
+        ReactCurrentDispatcher.current = previousDispatcher;
+        reenableLogs();
+      }
+
+      Error.prepareStackTrace = previousPrepareStackTrace;
+    } // Fallback to just using the name if we couldn't make it throw.
+
+
+    var name = fn ? fn.displayName || fn.name : '';
+    var syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
+
+    {
+      if (typeof fn === 'function') {
+        componentFrameCache.set(fn, syntheticFrame);
+      }
+    }
+
+    return syntheticFrame;
+  }
+
+  function describeClassComponentFrame(ctor, source, ownerFn) {
+    {
+      return describeNativeComponentFrame(ctor, true);
+    }
+  }
+  function describeFunctionComponentFrame(fn, source, ownerFn) {
+    {
+      return describeNativeComponentFrame(fn, false);
+    }
+  }
+
+  function shouldConstruct(Component) {
+    var prototype = Component.prototype;
+    return !!(prototype && prototype.isReactComponent);
+  }
+
+  function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
+
+    if (type == null) {
+      return '';
+    }
+
+    if (typeof type === 'function') {
+      {
+        return describeNativeComponentFrame(type, shouldConstruct(type));
+      }
+    }
+
+    if (typeof type === 'string') {
+      return describeBuiltInComponentFrame(type);
+    }
+
+    switch (type) {
+      case REACT_SUSPENSE_TYPE:
+        return describeBuiltInComponentFrame('Suspense');
+
+      case REACT_SUSPENSE_LIST_TYPE:
+        return describeBuiltInComponentFrame('SuspenseList');
+    }
+
+    if (typeof type === 'object') {
+      switch (type.$$typeof) {
+        case REACT_FORWARD_REF_TYPE:
+          return describeFunctionComponentFrame(type.render);
+
+        case REACT_MEMO_TYPE:
+          // Memo may contain any component type so we recursively resolve it.
+          return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
+
+        case REACT_BLOCK_TYPE:
+          return describeFunctionComponentFrame(type._render);
+
+        case REACT_LAZY_TYPE:
+          {
+            var lazyComponent = type;
+            var payload = lazyComponent._payload;
+            var init = lazyComponent._init;
+
+            try {
+              // Lazy may contain any component type so we recursively resolve it.
+              return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn);
+            } catch (x) {}
+          }
+      }
+    }
+
+    return '';
+  }
+
+  function describeFiber(fiber) {
+    var owner =  fiber._debugOwner ? fiber._debugOwner.type : null ;
+    var source =  fiber._debugSource ;
+
+    switch (fiber.tag) {
+      case HostComponent:
+        return describeBuiltInComponentFrame(fiber.type);
+
+      case LazyComponent:
+        return describeBuiltInComponentFrame('Lazy');
+
+      case SuspenseComponent:
+        return describeBuiltInComponentFrame('Suspense');
+
+      case SuspenseListComponent:
+        return describeBuiltInComponentFrame('SuspenseList');
+
+      case FunctionComponent:
+      case IndeterminateComponent:
+      case SimpleMemoComponent:
+        return describeFunctionComponentFrame(fiber.type);
+
+      case ForwardRef:
+        return describeFunctionComponentFrame(fiber.type.render);
+
+      case Block:
+        return describeFunctionComponentFrame(fiber.type._render);
+
+      case ClassComponent:
+        return describeClassComponentFrame(fiber.type);
+
+      default:
+        return '';
+    }
+  }
+
+  function getStackByFiberInDevAndProd(workInProgress) {
+    try {
+      var info = '';
+      var node = workInProgress;
+
+      do {
+        info += describeFiber(node);
+        node = node.return;
+      } while (node);
+
+      return info;
+    } catch (x) {
+      return '\nError generating stack: ' + x.message + '\n' + x.stack;
     }
   }
 
@@ -1476,6 +1147,10 @@
     return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
   }
 
+  function getContextName(type) {
+    return type.displayName || 'Context';
+  }
+
   function getComponentName(type) {
     if (type == null) {
       // Host root, text node or just invalid type.
@@ -1504,7 +1179,7 @@
         return 'Portal';
 
       case REACT_PROFILER_TYPE:
-        return "Profiler";
+        return 'Profiler';
 
       case REACT_STRICT_MODE_TYPE:
         return 'StrictMode';
@@ -1519,10 +1194,12 @@
     if (typeof type === 'object') {
       switch (type.$$typeof) {
         case REACT_CONTEXT_TYPE:
-          return 'Context.Consumer';
+          var context = type;
+          return getContextName(context) + '.Consumer';
 
         case REACT_PROVIDER_TYPE:
-          return 'Context.Provider';
+          var provider = type;
+          return getContextName(provider._context) + '.Provider';
 
         case REACT_FORWARD_REF_TYPE:
           return getWrappedName(type, type.render, 'ForwardRef');
@@ -1531,18 +1208,19 @@
           return getComponentName(type.type);
 
         case REACT_BLOCK_TYPE:
-          return getComponentName(type.render);
+          return getComponentName(type._render);
 
         case REACT_LAZY_TYPE:
           {
-            var thenable = type;
-            var resolvedThenable = refineResolvedLazyComponent(thenable);
-
-            if (resolvedThenable) {
-              return getComponentName(resolvedThenable);
-            }
-
-            break;
+            var lazyComponent = type;
+            var payload = lazyComponent._payload;
+            var init = lazyComponent._init;
+
+            try {
+              return getComponentName(init(payload));
+            } catch (x) {
+              return null;
+            }
           }
       }
     }
@@ -1550,43 +1228,7 @@
     return null;
   }
 
-  var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
-
-  function describeFiber(fiber) {
-    switch (fiber.tag) {
-      case HostRoot:
-      case HostPortal:
-      case HostText:
-      case Fragment:
-      case ContextProvider:
-      case ContextConsumer:
-        return '';
-
-      default:
-        var owner = fiber._debugOwner;
-        var source = fiber._debugSource;
-        var name = getComponentName(fiber.type);
-        var ownerName = null;
-
-        if (owner) {
-          ownerName = getComponentName(owner.type);
-        }
-
-        return describeComponentFrame(name, source, ownerName);
-    }
-  }
-
-  function getStackByFiberInDevAndProd(workInProgress) {
-    var info = '';
-    var node = workInProgress;
-
-    do {
-      info += describeFiber(node);
-      node = node.return;
-    } while (node);
-
-    return info;
-  }
+  var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
   var current = null;
   var isRendering = false;
   function getCurrentFiberOwnerNameInDevOrNull() {
@@ -1604,6 +1246,7 @@
 
     return null;
   }
+
   function getCurrentFiberStackInDev() {
     {
       if (current === null) {
@@ -1615,16 +1258,17 @@
       return getStackByFiberInDevAndProd(current);
     }
   }
+
   function resetCurrentFiber() {
     {
-      ReactDebugCurrentFrame$1.getCurrentStack = null;
+      ReactDebugCurrentFrame.getCurrentStack = null;
       current = null;
       isRendering = false;
     }
   }
   function setCurrentFiber(fiber) {
     {
-      ReactDebugCurrentFrame$1.getCurrentStack = getCurrentFiberStackInDev;
+      ReactDebugCurrentFrame.getCurrentStack = getCurrentFiberStackInDev;
       current = fiber;
       isRendering = false;
     }
@@ -1634,6 +1278,11 @@
       isRendering = rendering;
     }
   }
+  function getIsRendering() {
+    {
+      return isRendering;
+    }
+  }
 
   // Flow does not allow string concatenation of most non-string types. To work
   // around this limitation, we use an opaque type that can only be obtained by
@@ -1656,151 +1305,25 @@
     }
   }
 
-  /**
-   * Copyright (c) 2013-present, Facebook, Inc.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
-
-  var ReactPropTypesSecret_1 = ReactPropTypesSecret;
-
-  var printWarning$1 = function() {};
-
-  {
-    var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
-    var loggedTypeFailures = {};
-    var has = Function.call.bind(Object.prototype.hasOwnProperty);
-
-    printWarning$1 = function(text) {
-      var message = 'Warning: ' + text;
-      if (typeof console !== 'undefined') {
-        console.error(message);
-      }
-      try {
-        // --- Welcome to debugging React ---
-        // This error was thrown as a convenience so that you can use this stack
-        // to find the callsite that caused this warning to fire.
-        throw new Error(message);
-      } catch (x) {}
-    };
-  }
-
-  /**
-   * Assert that the values match with the type specs.
-   * Error messages are memorized and will only be shown once.
-   *
-   * @param {object} typeSpecs Map of name to a ReactPropType
-   * @param {object} values Runtime values that need to be type-checked
-   * @param {string} location e.g. "prop", "context", "child context"
-   * @param {string} componentName Name of the component for error messages.
-   * @param {?Function} getStack Returns the component stack.
-   * @private
-   */
-  function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
-    {
-      for (var typeSpecName in typeSpecs) {
-        if (has(typeSpecs, typeSpecName)) {
-          var error;
-          // Prop type validation may throw. In case they do, we don't want to
-          // fail the render phase where it didn't fail before. So we log it.
-          // After these have been cleaned up, we'll let them throw.
-          try {
-            // This is intentionally an invariant that gets caught. It's the same
-            // behavior as without this statement except with a better message.
-            if (typeof typeSpecs[typeSpecName] !== 'function') {
-              var err = Error(
-                (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
-                'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
-              );
-              err.name = 'Invariant Violation';
-              throw err;
-            }
-            error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$1);
-          } catch (ex) {
-            error = ex;
-          }
-          if (error && !(error instanceof Error)) {
-            printWarning$1(
-              (componentName || 'React class') + ': type specification of ' +
-              location + ' `' + typeSpecName + '` is invalid; the type checker ' +
-              'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
-              'You may have forgotten to pass an argument to the type checker ' +
-              'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
-              'shape all require an argument).'
-            );
-          }
-          if (error instanceof Error && !(error.message in loggedTypeFailures)) {
-            // Only monitor this failure once because there tends to be a lot of the
-            // same error.
-            loggedTypeFailures[error.message] = true;
-
-            var stack = getStack ? getStack() : '';
-
-            printWarning$1(
-              'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
-            );
-          }
-        }
-      }
-    }
-  }
-
-  /**
-   * Resets warning cache when testing.
-   *
-   * @private
-   */
-  checkPropTypes.resetWarningCache = function() {
-    {
-      loggedTypeFailures = {};
-    }
+  var hasReadOnlyValue = {
+    button: true,
+    checkbox: true,
+    image: true,
+    hidden: true,
+    radio: true,
+    reset: true,
+    submit: true
   };
-
-  var checkPropTypes_1 = checkPropTypes;
-
-  var ReactDebugCurrentFrame$2 = null;
-  var ReactControlledValuePropTypes = {
-    checkPropTypes: null
-  };
-
-  {
-    ReactDebugCurrentFrame$2 = ReactSharedInternals.ReactDebugCurrentFrame;
-    var hasReadOnlyValue = {
-      button: true,
-      checkbox: true,
-      image: true,
-      hidden: true,
-      radio: true,
-      reset: true,
-      submit: true
-    };
-    var propTypes = {
-      value: function (props, propName, componentName) {
-        if (hasReadOnlyValue[props.type] || props.onChange || props.readOnly || props.disabled || props[propName] == null || enableDeprecatedFlareAPI ) {
-          return null;
-        }
-
-        return new Error('You provided a `value` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultValue`. Otherwise, ' + 'set either `onChange` or `readOnly`.');
-      },
-      checked: function (props, propName, componentName) {
-        if (props.onChange || props.readOnly || props.disabled || props[propName] == null || enableDeprecatedFlareAPI ) {
-          return null;
-        }
-
-        return new Error('You provided a `checked` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultChecked`. Otherwise, ' + 'set either `onChange` or `readOnly`.');
-      }
-    };
-    /**
-     * Provide a linked `value` attribute for controlled forms. You should not use
-     * this outside of the ReactDOM controlled form components.
-     */
-
-    ReactControlledValuePropTypes.checkPropTypes = function (tagName, props) {
-      checkPropTypes_1(propTypes, props, 'prop', tagName, ReactDebugCurrentFrame$2.getStackAddendum);
-    };
+  function checkControlledValueProps(tagName, props) {
+    {
+      if (!(hasReadOnlyValue[props.type] || props.onChange || props.onInput || props.readOnly || props.disabled || props.value == null)) {
+        error('You provided a `value` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultValue`. Otherwise, ' + 'set either `onChange` or `readOnly`.');
+      }
+
+      if (!(props.onChange || props.readOnly || props.disabled || props.checked == null)) {
+        error('You provided a `checked` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultChecked`. Otherwise, ' + 'set either `onChange` or `readOnly`.');
+      }
+    }
   }
 
   function isCheckable(elem) {
@@ -1910,6 +1433,20 @@
     return false;
   }
 
+  function getActiveElement(doc) {
+    doc = doc || (typeof document !== 'undefined' ? document : undefined);
+
+    if (typeof doc === 'undefined') {
+      return null;
+    }
+
+    try {
+      return doc.activeElement || doc.body;
+    } catch (e) {
+      return doc.body;
+    }
+  }
+
   var didWarnValueDefaultValue = false;
   var didWarnCheckedDefaultChecked = false;
   var didWarnControlledToUncontrolled = false;
@@ -1952,16 +1489,16 @@
   }
   function initWrapperState(element, props) {
     {
-      ReactControlledValuePropTypes.checkPropTypes('input', props);
+      checkControlledValueProps('input', props);
 
       if (props.checked !== undefined && props.defaultChecked !== undefined && !didWarnCheckedDefaultChecked) {
-        error('%s contains an input of type %s with both checked and defaultChecked props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the checked prop, or the defaultChecked prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components', getCurrentFiberOwnerNameInDevOrNull() || 'A component', props.type);
+        error('%s contains an input of type %s with both checked and defaultChecked props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the checked prop, or the defaultChecked prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://reactjs.org/link/controlled-components', getCurrentFiberOwnerNameInDevOrNull() || 'A component', props.type);
 
         didWarnCheckedDefaultChecked = true;
       }
 
       if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValueDefaultValue) {
-        error('%s contains an input of type %s with both value and defaultValue props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components', getCurrentFiberOwnerNameInDevOrNull() || 'A component', props.type);
+        error('%s contains an input of type %s with both value and defaultValue props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://reactjs.org/link/controlled-components', getCurrentFiberOwnerNameInDevOrNull() || 'A component', props.type);
 
         didWarnValueDefaultValue = true;
       }
@@ -1990,13 +1527,13 @@
       var controlled = isControlled(props);
 
       if (!node._wrapperState.controlled && controlled && !didWarnUncontrolledToControlled) {
-        error('A component is changing an uncontrolled input of type %s to be controlled. ' + 'Input elements should not switch from uncontrolled to controlled (or vice versa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components', props.type);
+        error('A component is changing an uncontrolled input to be controlled. ' + 'This is likely caused by the value changing from undefined to ' + 'a defined value, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components');
 
         didWarnUncontrolledToControlled = true;
       }
 
       if (node._wrapperState.controlled && !controlled && !didWarnControlledToUncontrolled) {
-        error('A component is changing a controlled input of type %s to be uncontrolled. ' + 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components', props.type);
+        error('A component is changing a controlled input to be uncontrolled. ' + 'This is likely caused by the value changing from a defined to ' + 'undefined, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components');
 
         didWarnControlledToUncontrolled = true;
       }
@@ -2144,7 +1681,7 @@
         // mixing React radio buttons with non-React ones.
 
 
-        var otherProps = getFiberCurrentPropsFromNode$1(otherNode);
+        var otherProps = getFiberCurrentPropsFromNode(otherNode);
 
         if (!otherProps) {
           {
@@ -2173,7 +1710,7 @@
 
   function setDefaultValue(node, type, value) {
     if ( // Focused number inputs synchronize on blur. See ChangeEventPlugin.js
-    type !== 'number' || node.ownerDocument.activeElement !== node) {
+    type !== 'number' || getActiveElement(node.ownerDocument) !== node) {
       if (value == null) {
         node.defaultValue = toString(node._wrapperState.initialValue);
       } else if (node.defaultValue !== toString(value)) {
@@ -2199,7 +1736,7 @@
 
       content += child; // Note: we don't warn about invalid children here.
       // Instead, this is done separately below so that
-      // it happens during the hydration codepath too.
+      // it happens during the hydration code path too.
     });
     return content;
   }
@@ -2210,7 +1747,7 @@
 
   function validateProps(element, props) {
     {
-      // This mirrors the codepath above, but runs for hydration too.
+      // This mirrors the code path above, but runs for hydration too.
       // Warn about invalid children here so that client and hydration are consistent.
       // TODO: this seems like it could cause a DEV-only throw for hydration
       // if children contains a non-element object. We should try to avoid that.
@@ -2287,7 +1824,7 @@
 
   function checkSelectPropTypes(props) {
     {
-      ReactControlledValuePropTypes.checkPropTypes('select', props);
+      checkControlledValueProps('select', props);
 
       for (var i = 0; i < valuePropNames.length; i++) {
         var propName = valuePropNames[i];
@@ -2393,7 +1930,7 @@
 
     {
       if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValueDefaultValue$1) {
-        error('Select elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled select ' + 'element and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components');
+        error('Select elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled select ' + 'element and remove one of these props. More info: ' + 'https://reactjs.org/link/controlled-components');
 
         didWarnValueDefaultValue$1 = true;
       }
@@ -2481,10 +2018,10 @@
     var node = element;
 
     {
-      ReactControlledValuePropTypes.checkPropTypes('textarea', props);
+      checkControlledValueProps('textarea', props);
 
       if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValDefaultVal) {
-        error('%s contains a textarea with both value and defaultValue props. ' + 'Textarea elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled textarea ' + 'and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components', getCurrentFiberOwnerNameInDevOrNull() || 'A component');
+        error('%s contains a textarea with both value and defaultValue props. ' + 'Textarea elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled textarea ' + 'and remove one of these props. More info: ' + 'https://reactjs.org/link/controlled-components', getCurrentFiberOwnerNameInDevOrNull() || 'A component');
 
         didWarnValDefaultVal = true;
       }
@@ -2696,1704 +2233,6 @@
     node.textContent = text;
   };
 
-  // Do not use the below two methods directly!
-  // Instead use constants exported from DOMTopLevelEventTypes in ReactDOM.
-  // (It is the only module that is allowed to access these methods.)
-  function unsafeCastStringToDOMTopLevelType(topLevelType) {
-    return topLevelType;
-  }
-  function unsafeCastDOMTopLevelTypeToString(topLevelType) {
-    return topLevelType;
-  }
-
-  /**
-   * Generate a mapping of standard vendor prefixes using the defined style property and event name.
-   *
-   * @param {string} styleProp
-   * @param {string} eventName
-   * @returns {object}
-   */
-
-  function makePrefixMap(styleProp, eventName) {
-    var prefixes = {};
-    prefixes[styleProp.toLowerCase()] = eventName.toLowerCase();
-    prefixes['Webkit' + styleProp] = 'webkit' + eventName;
-    prefixes['Moz' + styleProp] = 'moz' + eventName;
-    return prefixes;
-  }
-  /**
-   * A list of event names to a configurable list of vendor prefixes.
-   */
-
-
-  var vendorPrefixes = {
-    animationend: makePrefixMap('Animation', 'AnimationEnd'),
-    animationiteration: makePrefixMap('Animation', 'AnimationIteration'),
-    animationstart: makePrefixMap('Animation', 'AnimationStart'),
-    transitionend: makePrefixMap('Transition', 'TransitionEnd')
-  };
-  /**
-   * Event names that have already been detected and prefixed (if applicable).
-   */
-
-  var prefixedEventNames = {};
-  /**
-   * Element to check for prefixes on.
-   */
-
-  var style = {};
-  /**
-   * Bootstrap if a DOM exists.
-   */
-
-  if (canUseDOM) {
-    style = document.createElement('div').style; // On some platforms, in particular some releases of Android 4.x,
-    // the un-prefixed "animation" and "transition" properties are defined on the
-    // style object but the events that fire will still be prefixed, so we need
-    // to check if the un-prefixed events are usable, and if not remove them from the map.
-
-    if (!('AnimationEvent' in window)) {
-      delete vendorPrefixes.animationend.animation;
-      delete vendorPrefixes.animationiteration.animation;
-      delete vendorPrefixes.animationstart.animation;
-    } // Same as above
-
-
-    if (!('TransitionEvent' in window)) {
-      delete vendorPrefixes.transitionend.transition;
-    }
-  }
-  /**
-   * Attempts to determine the correct vendor prefixed event name.
-   *
-   * @param {string} eventName
-   * @returns {string}
-   */
-
-
-  function getVendorPrefixedEventName(eventName) {
-    if (prefixedEventNames[eventName]) {
-      return prefixedEventNames[eventName];
-    } else if (!vendorPrefixes[eventName]) {
-      return eventName;
-    }
-
-    var prefixMap = vendorPrefixes[eventName];
-
-    for (var styleProp in prefixMap) {
-      if (prefixMap.hasOwnProperty(styleProp) && styleProp in style) {
-        return prefixedEventNames[eventName] = prefixMap[styleProp];
-      }
-    }
-
-    return eventName;
-  }
-
-  /**
-   * To identify top level events in ReactDOM, we use constants defined by this
-   * module. This is the only module that uses the unsafe* methods to express
-   * that the constants actually correspond to the browser event names. This lets
-   * us save some bundle size by avoiding a top level type -> event name map.
-   * The rest of ReactDOM code should import top level types from this file.
-   */
-
-  var TOP_ABORT = unsafeCastStringToDOMTopLevelType('abort');
-  var TOP_ANIMATION_END = unsafeCastStringToDOMTopLevelType(getVendorPrefixedEventName('animationend'));
-  var TOP_ANIMATION_ITERATION = unsafeCastStringToDOMTopLevelType(getVendorPrefixedEventName('animationiteration'));
-  var TOP_ANIMATION_START = unsafeCastStringToDOMTopLevelType(getVendorPrefixedEventName('animationstart'));
-  var TOP_BLUR = unsafeCastStringToDOMTopLevelType('blur');
-  var TOP_CAN_PLAY = unsafeCastStringToDOMTopLevelType('canplay');
-  var TOP_CAN_PLAY_THROUGH = unsafeCastStringToDOMTopLevelType('canplaythrough');
-  var TOP_CANCEL = unsafeCastStringToDOMTopLevelType('cancel');
-  var TOP_CHANGE = unsafeCastStringToDOMTopLevelType('change');
-  var TOP_CLICK = unsafeCastStringToDOMTopLevelType('click');
-  var TOP_CLOSE = unsafeCastStringToDOMTopLevelType('close');
-  var TOP_COMPOSITION_END = unsafeCastStringToDOMTopLevelType('compositionend');
-  var TOP_COMPOSITION_START = unsafeCastStringToDOMTopLevelType('compositionstart');
-  var TOP_COMPOSITION_UPDATE = unsafeCastStringToDOMTopLevelType('compositionupdate');
-  var TOP_CONTEXT_MENU = unsafeCastStringToDOMTopLevelType('contextmenu');
-  var TOP_COPY = unsafeCastStringToDOMTopLevelType('copy');
-  var TOP_CUT = unsafeCastStringToDOMTopLevelType('cut');
-  var TOP_DOUBLE_CLICK = unsafeCastStringToDOMTopLevelType('dblclick');
-  var TOP_AUX_CLICK = unsafeCastStringToDOMTopLevelType('auxclick');
-  var TOP_DRAG = unsafeCastStringToDOMTopLevelType('drag');
-  var TOP_DRAG_END = unsafeCastStringToDOMTopLevelType('dragend');
-  var TOP_DRAG_ENTER = unsafeCastStringToDOMTopLevelType('dragenter');
-  var TOP_DRAG_EXIT = unsafeCastStringToDOMTopLevelType('dragexit');
-  var TOP_DRAG_LEAVE = unsafeCastStringToDOMTopLevelType('dragleave');
-  var TOP_DRAG_OVER = unsafeCastStringToDOMTopLevelType('dragover');
-  var TOP_DRAG_START = unsafeCastStringToDOMTopLevelType('dragstart');
-  var TOP_DROP = unsafeCastStringToDOMTopLevelType('drop');
-  var TOP_DURATION_CHANGE = unsafeCastStringToDOMTopLevelType('durationchange');
-  var TOP_EMPTIED = unsafeCastStringToDOMTopLevelType('emptied');
-  var TOP_ENCRYPTED = unsafeCastStringToDOMTopLevelType('encrypted');
-  var TOP_ENDED = unsafeCastStringToDOMTopLevelType('ended');
-  var TOP_ERROR = unsafeCastStringToDOMTopLevelType('error');
-  var TOP_FOCUS = unsafeCastStringToDOMTopLevelType('focus');
-  var TOP_GOT_POINTER_CAPTURE = unsafeCastStringToDOMTopLevelType('gotpointercapture');
-  var TOP_INPUT = unsafeCastStringToDOMTopLevelType('input');
-  var TOP_INVALID = unsafeCastStringToDOMTopLevelType('invalid');
-  var TOP_KEY_DOWN = unsafeCastStringToDOMTopLevelType('keydown');
-  var TOP_KEY_PRESS = unsafeCastStringToDOMTopLevelType('keypress');
-  var TOP_KEY_UP = unsafeCastStringToDOMTopLevelType('keyup');
-  var TOP_LOAD = unsafeCastStringToDOMTopLevelType('load');
-  var TOP_LOAD_START = unsafeCastStringToDOMTopLevelType('loadstart');
-  var TOP_LOADED_DATA = unsafeCastStringToDOMTopLevelType('loadeddata');
-  var TOP_LOADED_METADATA = unsafeCastStringToDOMTopLevelType('loadedmetadata');
-  var TOP_LOST_POINTER_CAPTURE = unsafeCastStringToDOMTopLevelType('lostpointercapture');
-  var TOP_MOUSE_DOWN = unsafeCastStringToDOMTopLevelType('mousedown');
-  var TOP_MOUSE_MOVE = unsafeCastStringToDOMTopLevelType('mousemove');
-  var TOP_MOUSE_OUT = unsafeCastStringToDOMTopLevelType('mouseout');
-  var TOP_MOUSE_OVER = unsafeCastStringToDOMTopLevelType('mouseover');
-  var TOP_MOUSE_UP = unsafeCastStringToDOMTopLevelType('mouseup');
-  var TOP_PASTE = unsafeCastStringToDOMTopLevelType('paste');
-  var TOP_PAUSE = unsafeCastStringToDOMTopLevelType('pause');
-  var TOP_PLAY = unsafeCastStringToDOMTopLevelType('play');
-  var TOP_PLAYING = unsafeCastStringToDOMTopLevelType('playing');
-  var TOP_POINTER_CANCEL = unsafeCastStringToDOMTopLevelType('pointercancel');
-  var TOP_POINTER_DOWN = unsafeCastStringToDOMTopLevelType('pointerdown');
-  var TOP_POINTER_MOVE = unsafeCastStringToDOMTopLevelType('pointermove');
-  var TOP_POINTER_OUT = unsafeCastStringToDOMTopLevelType('pointerout');
-  var TOP_POINTER_OVER = unsafeCastStringToDOMTopLevelType('pointerover');
-  var TOP_POINTER_UP = unsafeCastStringToDOMTopLevelType('pointerup');
-  var TOP_PROGRESS = unsafeCastStringToDOMTopLevelType('progress');
-  var TOP_RATE_CHANGE = unsafeCastStringToDOMTopLevelType('ratechange');
-  var TOP_RESET = unsafeCastStringToDOMTopLevelType('reset');
-  var TOP_SCROLL = unsafeCastStringToDOMTopLevelType('scroll');
-  var TOP_SEEKED = unsafeCastStringToDOMTopLevelType('seeked');
-  var TOP_SEEKING = unsafeCastStringToDOMTopLevelType('seeking');
-  var TOP_SELECTION_CHANGE = unsafeCastStringToDOMTopLevelType('selectionchange');
-  var TOP_STALLED = unsafeCastStringToDOMTopLevelType('stalled');
-  var TOP_SUBMIT = unsafeCastStringToDOMTopLevelType('submit');
-  var TOP_SUSPEND = unsafeCastStringToDOMTopLevelType('suspend');
-  var TOP_TEXT_INPUT = unsafeCastStringToDOMTopLevelType('textInput');
-  var TOP_TIME_UPDATE = unsafeCastStringToDOMTopLevelType('timeupdate');
-  var TOP_TOGGLE = unsafeCastStringToDOMTopLevelType('toggle');
-  var TOP_TOUCH_CANCEL = unsafeCastStringToDOMTopLevelType('touchcancel');
-  var TOP_TOUCH_END = unsafeCastStringToDOMTopLevelType('touchend');
-  var TOP_TOUCH_MOVE = unsafeCastStringToDOMTopLevelType('touchmove');
-  var TOP_TOUCH_START = unsafeCastStringToDOMTopLevelType('touchstart');
-  var TOP_TRANSITION_END = unsafeCastStringToDOMTopLevelType(getVendorPrefixedEventName('transitionend'));
-  var TOP_VOLUME_CHANGE = unsafeCastStringToDOMTopLevelType('volumechange');
-  var TOP_WAITING = unsafeCastStringToDOMTopLevelType('waiting');
-  var TOP_WHEEL = unsafeCastStringToDOMTopLevelType('wheel'); // List of events that need to be individually attached to media elements.
-  // Note that events in this list will *not* be listened to at the top level
-  // unless they're explicitly whitelisted in `ReactBrowserEventEmitter.listenTo`.
-
-  var mediaEventTypes = [TOP_ABORT, TOP_CAN_PLAY, TOP_CAN_PLAY_THROUGH, TOP_DURATION_CHANGE, TOP_EMPTIED, TOP_ENCRYPTED, TOP_ENDED, TOP_ERROR, TOP_LOADED_DATA, TOP_LOADED_METADATA, TOP_LOAD_START, TOP_PAUSE, TOP_PLAY, TOP_PLAYING, TOP_PROGRESS, TOP_RATE_CHANGE, TOP_SEEKED, TOP_SEEKING, TOP_STALLED, TOP_SUSPEND, TOP_TIME_UPDATE, TOP_VOLUME_CHANGE, TOP_WAITING];
-  function getRawEventName(topLevelType) {
-    return unsafeCastDOMTopLevelTypeToString(topLevelType);
-  }
-
-  var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map; // prettier-ignore
-
-  var elementListenerMap = new PossiblyWeakMap();
-  function getListenerMapForElement(element) {
-    var listenerMap = elementListenerMap.get(element);
-
-    if (listenerMap === undefined) {
-      listenerMap = new Map();
-      elementListenerMap.set(element, listenerMap);
-    }
-
-    return listenerMap;
-  }
-
-  /**
-   * `ReactInstanceMap` maintains a mapping from a public facing stateful
-   * instance (key) and the internal representation (value). This allows public
-   * methods to accept the user facing instance as an argument and map them back
-   * to internal methods.
-   *
-   * Note that this module is currently shared and assumed to be stateless.
-   * If this becomes an actual Map, that will break.
-   */
-  function get(key) {
-    return key._reactInternalFiber;
-  }
-  function has$1(key) {
-    return key._reactInternalFiber !== undefined;
-  }
-  function set(key, value) {
-    key._reactInternalFiber = value;
-  }
-
-  // Don't change these two values. They're used by React Dev Tools.
-  var NoEffect =
-  /*              */
-  0;
-  var PerformedWork =
-  /*         */
-  1; // You can change the rest (and add more).
-
-  var Placement =
-  /*             */
-  2;
-  var Update =
-  /*                */
-  4;
-  var PlacementAndUpdate =
-  /*    */
-  6;
-  var Deletion =
-  /*              */
-  8;
-  var ContentReset =
-  /*          */
-  16;
-  var Callback =
-  /*              */
-  32;
-  var DidCapture =
-  /*            */
-  64;
-  var Ref =
-  /*                   */
-  128;
-  var Snapshot =
-  /*              */
-  256;
-  var Passive =
-  /*               */
-  512;
-  var Hydrating =
-  /*             */
-  1024;
-  var HydratingAndUpdate =
-  /*    */
-  1028; // Passive & Update & Callback & Ref & Snapshot
-
-  var LifecycleEffectMask =
-  /*   */
-  932; // Union of all host effects
-
-  var HostEffectMask =
-  /*        */
-  2047;
-  var Incomplete =
-  /*            */
-  2048;
-  var ShouldCapture =
-  /*         */
-  4096;
-
-  var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
-  function getNearestMountedFiber(fiber) {
-    var node = fiber;
-    var nearestMounted = fiber;
-
-    if (!fiber.alternate) {
-      // If there is no alternate, this might be a new tree that isn't inserted
-      // yet. If it is, then it will have a pending insertion effect on it.
-      var nextNode = node;
-
-      do {
-        node = nextNode;
-
-        if ((node.effectTag & (Placement | Hydrating)) !== NoEffect) {
-          // This is an insertion or in-progress hydration. The nearest possible
-          // mounted fiber is the parent but we need to continue to figure out
-          // if that one is still mounted.
-          nearestMounted = node.return;
-        }
-
-        nextNode = node.return;
-      } while (nextNode);
-    } else {
-      while (node.return) {
-        node = node.return;
-      }
-    }
-
-    if (node.tag === HostRoot) {
-      // TODO: Check if this was a nested HostRoot when used with
-      // renderContainerIntoSubtree.
-      return nearestMounted;
-    } // If we didn't hit the root, that means that we're in an disconnected tree
-    // that has been unmounted.
-
-
-    return null;
-  }
-  function getSuspenseInstanceFromFiber(fiber) {
-    if (fiber.tag === SuspenseComponent) {
-      var suspenseState = fiber.memoizedState;
-
-      if (suspenseState === null) {
-        var current = fiber.alternate;
-
-        if (current !== null) {
-          suspenseState = current.memoizedState;
-        }
-      }
-
-      if (suspenseState !== null) {
-        return suspenseState.dehydrated;
-      }
-    }
-
-    return null;
-  }
-  function getContainerFromFiber(fiber) {
-    return fiber.tag === HostRoot ? fiber.stateNode.containerInfo : null;
-  }
-  function isFiberMounted(fiber) {
-    return getNearestMountedFiber(fiber) === fiber;
-  }
-  function isMounted(component) {
-    {
-      var owner = ReactCurrentOwner.current;
-
-      if (owner !== null && owner.tag === ClassComponent) {
-        var ownerFiber = owner;
-        var instance = ownerFiber.stateNode;
-
-        if (!instance._warnedAboutRefsInRender) {
-          error('%s is accessing isMounted inside its render() function. ' + 'render() should be a pure function of props and state. It should ' + 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', getComponentName(ownerFiber.type) || 'A component');
-        }
-
-        instance._warnedAboutRefsInRender = true;
-      }
-    }
-
-    var fiber = get(component);
-
-    if (!fiber) {
-      return false;
-    }
-
-    return getNearestMountedFiber(fiber) === fiber;
-  }
-
-  function assertIsMounted(fiber) {
-    if (!(getNearestMountedFiber(fiber) === fiber)) {
-      {
-        throw Error( "Unable to find node on an unmounted component." );
-      }
-    }
-  }
-
-  function findCurrentFiberUsingSlowPath(fiber) {
-    var alternate = fiber.alternate;
-
-    if (!alternate) {
-      // If there is no alternate, then we only need to check if it is mounted.
-      var nearestMounted = getNearestMountedFiber(fiber);
-
-      if (!(nearestMounted !== null)) {
-        {
-          throw Error( "Unable to find node on an unmounted component." );
-        }
-      }
-
-      if (nearestMounted !== fiber) {
-        return null;
-      }
-
-      return fiber;
-    } // If we have two possible branches, we'll walk backwards up to the root
-    // to see what path the root points to. On the way we may hit one of the
-    // special cases and we'll deal with them.
-
-
-    var a = fiber;
-    var b = alternate;
-
-    while (true) {
-      var parentA = a.return;
-
-      if (parentA === null) {
-        // We're at the root.
-        break;
-      }
-
-      var parentB = parentA.alternate;
-
-      if (parentB === null) {
-        // There is no alternate. This is an unusual case. Currently, it only
-        // happens when a Suspense component is hidden. An extra fragment fiber
-        // is inserted in between the Suspense fiber and its children. Skip
-        // over this extra fragment fiber and proceed to the next parent.
-        var nextParent = parentA.return;
-
-        if (nextParent !== null) {
-          a = b = nextParent;
-          continue;
-        } // If there's no parent, we're at the root.
-
-
-        break;
-      } // If both copies of the parent fiber point to the same child, we can
-      // assume that the child is current. This happens when we bailout on low
-      // priority: the bailed out fiber's child reuses the current child.
-
-
-      if (parentA.child === parentB.child) {
-        var child = parentA.child;
-
-        while (child) {
-          if (child === a) {
-            // We've determined that A is the current branch.
-            assertIsMounted(parentA);
-            return fiber;
-          }
-
-          if (child === b) {
-            // We've determined that B is the current branch.
-            assertIsMounted(parentA);
-            return alternate;
-          }
-
-          child = child.sibling;
-        } // We should never have an alternate for any mounting node. So the only
-        // way this could possibly happen is if this was unmounted, if at all.
-
-
-        {
-          {
-            throw Error( "Unable to find node on an unmounted component." );
-          }
-        }
-      }
-
-      if (a.return !== b.return) {
-        // The return pointer of A and the return pointer of B point to different
-        // fibers. We assume that return pointers never criss-cross, so A must
-        // belong to the child set of A.return, and B must belong to the child
-        // set of B.return.
-        a = parentA;
-        b = parentB;
-      } else {
-        // The return pointers point to the same fiber. We'll have to use the
-        // default, slow path: scan the child sets of each parent alternate to see
-        // which child belongs to which set.
-        //
-        // Search parent A's child set
-        var didFindChild = false;
-        var _child = parentA.child;
-
-        while (_child) {
-          if (_child === a) {
-            didFindChild = true;
-            a = parentA;
-            b = parentB;
-            break;
-          }
-
-          if (_child === b) {
-            didFindChild = true;
-            b = parentA;
-            a = parentB;
-            break;
-          }
-
-          _child = _child.sibling;
-        }
-
-        if (!didFindChild) {
-          // Search parent B's child set
-          _child = parentB.child;
-
-          while (_child) {
-            if (_child === a) {
-              didFindChild = true;
-              a = parentB;
-              b = parentA;
-              break;
-            }
-
-            if (_child === b) {
-              didFindChild = true;
-              b = parentB;
-              a = parentA;
-              break;
-            }
-
-            _child = _child.sibling;
-          }
-
-          if (!didFindChild) {
-            {
-              throw Error( "Child was not found in either parent set. This indicates a bug in React related to the return pointer. Please file an issue." );
-            }
-          }
-        }
-      }
-
-      if (!(a.alternate === b)) {
-        {
-          throw Error( "Return fibers should always be each others' alternates. This error is likely caused by a bug in React. Please file an issue." );
-        }
-      }
-    } // If the root is not a host container, we're in a disconnected tree. I.e.
-    // unmounted.
-
-
-    if (!(a.tag === HostRoot)) {
-      {
-        throw Error( "Unable to find node on an unmounted component." );
-      }
-    }
-
-    if (a.stateNode.current === a) {
-      // We've determined that A is the current branch.
-      return fiber;
-    } // Otherwise B has to be current branch.
-
-
-    return alternate;
-  }
-  function findCurrentHostFiber(parent) {
-    var currentParent = findCurrentFiberUsingSlowPath(parent);
-
-    if (!currentParent) {
-      return null;
-    } // Next we'll drill down this component to find the first HostComponent/Text.
-
-
-    var node = currentParent;
-
-    while (true) {
-      if (node.tag === HostComponent || node.tag === HostText) {
-        return node;
-      } else if (node.child) {
-        node.child.return = node;
-        node = node.child;
-        continue;
-      }
-
-      if (node === currentParent) {
-        return null;
-      }
-
-      while (!node.sibling) {
-        if (!node.return || node.return === currentParent) {
-          return null;
-        }
-
-        node = node.return;
-      }
-
-      node.sibling.return = node.return;
-      node = node.sibling;
-    } // Flow needs the return null here, but ESLint complains about it.
-    // eslint-disable-next-line no-unreachable
-
-
-    return null;
-  }
-  function findCurrentHostFiberWithNoPortals(parent) {
-    var currentParent = findCurrentFiberUsingSlowPath(parent);
-
-    if (!currentParent) {
-      return null;
-    } // Next we'll drill down this component to find the first HostComponent/Text.
-
-
-    var node = currentParent;
-
-    while (true) {
-      if (node.tag === HostComponent || node.tag === HostText || enableFundamentalAPI ) {
-        return node;
-      } else if (node.child && node.tag !== HostPortal) {
-        node.child.return = node;
-        node = node.child;
-        continue;
-      }
-
-      if (node === currentParent) {
-        return null;
-      }
-
-      while (!node.sibling) {
-        if (!node.return || node.return === currentParent) {
-          return null;
-        }
-
-        node = node.return;
-      }
-
-      node.sibling.return = node.return;
-      node = node.sibling;
-    } // Flow needs the return null here, but ESLint complains about it.
-    // eslint-disable-next-line no-unreachable
-
-
-    return null;
-  }
-
-  /**
-   * Accumulates items that must not be null or undefined into the first one. This
-   * is used to conserve memory by avoiding array allocations, and thus sacrifices
-   * API cleanness. Since `current` can be null before being passed in and not
-   * null after this function, make sure to assign it back to `current`:
-   *
-   * `a = accumulateInto(a, b);`
-   *
-   * This API should be sparingly used. Try `accumulate` for something cleaner.
-   *
-   * @return {*|array<*>} An accumulation of items.
-   */
-
-  function accumulateInto(current, next) {
-    if (!(next != null)) {
-      {
-        throw Error( "accumulateInto(...): Accumulated items must not be null or undefined." );
-      }
-    }
-
-    if (current == null) {
-      return next;
-    } // Both are not empty. Warning: Never call x.concat(y) when you are not
-    // certain that x is an Array (x could be a string with concat method).
-
-
-    if (Array.isArray(current)) {
-      if (Array.isArray(next)) {
-        current.push.apply(current, next);
-        return current;
-      }
-
-      current.push(next);
-      return current;
-    }
-
-    if (Array.isArray(next)) {
-      // A bit too dangerous to mutate `next`.
-      return [current].concat(next);
-    }
-
-    return [current, next];
-  }
-
-  /**
-   * @param {array} arr an "accumulation" of items which is either an Array or
-   * a single item. Useful when paired with the `accumulate` module. This is a
-   * simple utility that allows us to reason about a collection of items, but
-   * handling the case when there is exactly one item (and we do not need to
-   * allocate an array).
-   * @param {function} cb Callback invoked with each element or a collection.
-   * @param {?} [scope] Scope used as `this` in a callback.
-   */
-  function forEachAccumulated(arr, cb, scope) {
-    if (Array.isArray(arr)) {
-      arr.forEach(cb, scope);
-    } else if (arr) {
-      cb.call(scope, arr);
-    }
-  }
-
-  /**
-   * Internal queue of events that have accumulated their dispatches and are
-   * waiting to have their dispatches executed.
-   */
-
-  var eventQueue = null;
-  /**
-   * Dispatches an event and releases it back into the pool, unless persistent.
-   *
-   * @param {?object} event Synthetic event to be dispatched.
-   * @private
-   */
-
-  var executeDispatchesAndRelease = function (event) {
-    if (event) {
-      executeDispatchesInOrder(event);
-
-      if (!event.isPersistent()) {
-        event.constructor.release(event);
-      }
-    }
-  };
-
-  var executeDispatchesAndReleaseTopLevel = function (e) {
-    return executeDispatchesAndRelease(e);
-  };
-
-  function runEventsInBatch(events) {
-    if (events !== null) {
-      eventQueue = accumulateInto(eventQueue, events);
-    } // Set `eventQueue` to null before processing it so that we can tell if more
-    // events get enqueued while processing.
-
-
-    var processingEventQueue = eventQueue;
-    eventQueue = null;
-
-    if (!processingEventQueue) {
-      return;
-    }
-
-    forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);
-
-    if (!!eventQueue) {
-      {
-        throw Error( "processEventQueue(): Additional events were enqueued while processing an event queue. Support for this has not yet been implemented." );
-      }
-    } // This would be a good time to rethrow if any of the event handlers threw.
-
-
-    rethrowCaughtError();
-  }
-
-  /**
-   * Gets the target node from a native browser event by accounting for
-   * inconsistencies in browser DOM APIs.
-   *
-   * @param {object} nativeEvent Native browser event.
-   * @return {DOMEventTarget} Target node.
-   */
-
-  function getEventTarget(nativeEvent) {
-    // Fallback to nativeEvent.srcElement for IE9
-    // https://github.com/facebook/react/issues/12506
-    var target = nativeEvent.target || nativeEvent.srcElement || window; // Normalize SVG <use> element events #4963
-
-    if (target.correspondingUseElement) {
-      target = target.correspondingUseElement;
-    } // Safari may fire events on text nodes (Node.TEXT_NODE is 3).
-    // @see http://www.quirksmode.org/js/events_properties.html
-
-
-    return target.nodeType === TEXT_NODE ? target.parentNode : target;
-  }
-
-  /**
-   * Checks if an event is supported in the current execution environment.
-   *
-   * NOTE: This will not work correctly for non-generic events such as `change`,
-   * `reset`, `load`, `error`, and `select`.
-   *
-   * Borrows from Modernizr.
-   *
-   * @param {string} eventNameSuffix Event name, e.g. "click".
-   * @return {boolean} True if the event is supported.
-   * @internal
-   * @license Modernizr 3.0.0pre (Custom Build) | MIT
-   */
-
-  function isEventSupported(eventNameSuffix) {
-    if (!canUseDOM) {
-      return false;
-    }
-
-    var eventName = 'on' + eventNameSuffix;
-    var isSupported = eventName in document;
-
-    if (!isSupported) {
-      var element = document.createElement('div');
-      element.setAttribute(eventName, 'return;');
-      isSupported = typeof element[eventName] === 'function';
-    }
-
-    return isSupported;
-  }
-
-  /**
-   * Summary of `DOMEventPluginSystem` event handling:
-   *
-   *  - Top-level delegation is used to trap most native browser events. This
-   *    may only occur in the main thread and is the responsibility of
-   *    ReactDOMEventListener, which is injected and can therefore support
-   *    pluggable event sources. This is the only work that occurs in the main
-   *    thread.
-   *
-   *  - We normalize and de-duplicate events to account for browser quirks. This
-   *    may be done in the worker thread.
-   *
-   *  - Forward these native events (with the associated top-level type used to
-   *    trap it) to `EventPluginRegistry`, which in turn will ask plugins if they want
-   *    to extract any synthetic events.
-   *
-   *  - The `EventPluginRegistry` will then process each event by annotating them with
-   *    "dispatches", a sequence of listeners and IDs that care about that event.
-   *
-   *  - The `EventPluginRegistry` then dispatches the events.
-   *
-   * Overview of React and the event system:
-   *
-   * +------------+    .
-   * |    DOM     |    .
-   * +------------+    .
-   *       |           .
-   *       v           .
-   * +------------+    .
-   * | ReactEvent |    .
-   * |  Listener  |    .
-   * +------------+    .                         +-----------+
-   *       |           .               +--------+|SimpleEvent|
-   *       |           .               |         |Plugin     |
-   * +-----|------+    .               v         +-----------+
-   * |     |      |    .    +--------------+                    +------------+
-   * |     +-----------.--->|PluginRegistry|                    |    Event   |
-   * |            |    .    |              |     +-----------+  | Propagators|
-   * | ReactEvent |    .    |              |     |TapEvent   |  |------------|
-   * |  Emitter   |    .    |              |<---+|Plugin     |  |other plugin|
-   * |            |    .    |              |     +-----------+  |  utilities |
-   * |     +-----------.--->|              |                    +------------+
-   * |     |      |    .    +--------------+
-   * +-----|------+    .                ^        +-----------+
-   *       |           .                |        |Enter/Leave|
-   *       +           .                +-------+|Plugin     |
-   * +-------------+   .                         +-----------+
-   * | application |   .
-   * |-------------|   .
-   * |             |   .
-   * |             |   .
-   * +-------------+   .
-   *                   .
-   *    React Core     .  General Purpose Event Plugin System
-   */
-
-  var CALLBACK_BOOKKEEPING_POOL_SIZE = 10;
-  var callbackBookkeepingPool = [];
-
-  function releaseTopLevelCallbackBookKeeping(instance) {
-    instance.topLevelType = null;
-    instance.nativeEvent = null;
-    instance.targetInst = null;
-    instance.ancestors.length = 0;
-
-    if (callbackBookkeepingPool.length < CALLBACK_BOOKKEEPING_POOL_SIZE) {
-      callbackBookkeepingPool.push(instance);
-    }
-  } // Used to store ancestor hierarchy in top level callback
-
-
-  function getTopLevelCallbackBookKeeping(topLevelType, nativeEvent, targetInst, eventSystemFlags) {
-    if (callbackBookkeepingPool.length) {
-      var instance = callbackBookkeepingPool.pop();
-      instance.topLevelType = topLevelType;
-      instance.eventSystemFlags = eventSystemFlags;
-      instance.nativeEvent = nativeEvent;
-      instance.targetInst = targetInst;
-      return instance;
-    }
-
-    return {
-      topLevelType: topLevelType,
-      eventSystemFlags: eventSystemFlags,
-      nativeEvent: nativeEvent,
-      targetInst: targetInst,
-      ancestors: []
-    };
-  }
-  /**
-   * Find the deepest React component completely containing the root of the
-   * passed-in instance (for use when entire React trees are nested within each
-   * other). If React trees are not nested, returns null.
-   */
-
-
-  function findRootContainerNode(inst) {
-    if (inst.tag === HostRoot) {
-      return inst.stateNode.containerInfo;
-    } // TODO: It may be a good idea to cache this to prevent unnecessary DOM
-    // traversal, but caching is difficult to do correctly without using a
-    // mutation observer to listen for all DOM changes.
-
-
-    while (inst.return) {
-      inst = inst.return;
-    }
-
-    if (inst.tag !== HostRoot) {
-      // This can happen if we're in a detached tree.
-      return null;
-    }
-
-    return inst.stateNode.containerInfo;
-  }
-  /**
-   * Allows registered plugins an opportunity to extract events from top-level
-   * native browser events.
-   *
-   * @return {*} An accumulation of synthetic events.
-   * @internal
-   */
-
-
-  function extractPluginEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags) {
-    var events = null;
-
-    for (var i = 0; i < plugins.length; i++) {
-      // Not every plugin in the ordering may be loaded at runtime.
-      var possiblePlugin = plugins[i];
-
-      if (possiblePlugin) {
-        var extractedEvents = possiblePlugin.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags);
-
-        if (extractedEvents) {
-          events = accumulateInto(events, extractedEvents);
-        }
-      }
-    }
-
-    return events;
-  }
-
-  function runExtractedPluginEventsInBatch(topLevelType, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags) {
-    var events = extractPluginEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags);
-    runEventsInBatch(events);
-  }
-
-  function handleTopLevel(bookKeeping) {
-    var targetInst = bookKeeping.targetInst; // Loop through the hierarchy, in case there's any nested components.
-    // It's important that we build the array of ancestors before calling any
-    // event handlers, because event handlers can modify the DOM, leading to
-    // inconsistencies with ReactMount's node cache. See #1105.
-
-    var ancestor = targetInst;
-
-    do {
-      if (!ancestor) {
-        var ancestors = bookKeeping.ancestors;
-        ancestors.push(ancestor);
-        break;
-      }
-
-      var root = findRootContainerNode(ancestor);
-
-      if (!root) {
-        break;
-      }
-
-      var tag = ancestor.tag;
-
-      if (tag === HostComponent || tag === HostText) {
-        bookKeeping.ancestors.push(ancestor);
-      }
-
-      ancestor = getClosestInstanceFromNode(root);
-    } while (ancestor);
-
-    for (var i = 0; i < bookKeeping.ancestors.length; i++) {
-      targetInst = bookKeeping.ancestors[i];
-      var eventTarget = getEventTarget(bookKeeping.nativeEvent);
-      var topLevelType = bookKeeping.topLevelType;
-      var nativeEvent = bookKeeping.nativeEvent;
-      var eventSystemFlags = bookKeeping.eventSystemFlags; // If this is the first ancestor, we mark it on the system flags
-
-      if (i === 0) {
-        eventSystemFlags |= IS_FIRST_ANCESTOR;
-      }
-
-      runExtractedPluginEventsInBatch(topLevelType, targetInst, nativeEvent, eventTarget, eventSystemFlags);
-    }
-  }
-
-  function dispatchEventForLegacyPluginEventSystem(topLevelType, eventSystemFlags, nativeEvent, targetInst) {
-    var bookKeeping = getTopLevelCallbackBookKeeping(topLevelType, nativeEvent, targetInst, eventSystemFlags);
-
-    try {
-      // Event queue being processed in the same cycle allows
-      // `preventDefault`.
-      batchedEventUpdates(handleTopLevel, bookKeeping);
-    } finally {
-      releaseTopLevelCallbackBookKeeping(bookKeeping);
-    }
-  }
-  /**
-   * We listen for bubbled touch events on the document object.
-   *
-   * Firefox v8.01 (and possibly others) exhibited strange behavior when
-   * mounting `onmousemove` events at some node that was not the document
-   * element. The symptoms were that if your mouse is not moving over something
-   * contained within that mount point (for example on the background) the
-   * top-level listeners for `onmousemove` won't be called. However, if you
-   * register the `mousemove` on the document object, then it will of course
-   * catch all `mousemove`s. This along with iOS quirks, justifies restricting
-   * top-level listeners to the document object only, at least for these
-   * movement types of events and possibly all events.
-   *
-   * @see http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
-   *
-   * Also, `keyup`/`keypress`/`keydown` do not bubble to the window on IE, but
-   * they bubble to document.
-   *
-   * @param {string} registrationName Name of listener (e.g. `onClick`).
-   * @param {object} mountAt Container where to mount the listener
-   */
-
-  function legacyListenToEvent(registrationName, mountAt) {
-    var listenerMap = getListenerMapForElement(mountAt);
-    var dependencies = registrationNameDependencies[registrationName];
-
-    for (var i = 0; i < dependencies.length; i++) {
-      var dependency = dependencies[i];
-      legacyListenToTopLevelEvent(dependency, mountAt, listenerMap);
-    }
-  }
-  function legacyListenToTopLevelEvent(topLevelType, mountAt, listenerMap) {
-    if (!listenerMap.has(topLevelType)) {
-      switch (topLevelType) {
-        case TOP_SCROLL:
-          trapCapturedEvent(TOP_SCROLL, mountAt);
-          break;
-
-        case TOP_FOCUS:
-        case TOP_BLUR:
-          trapCapturedEvent(TOP_FOCUS, mountAt);
-          trapCapturedEvent(TOP_BLUR, mountAt); // We set the flag for a single dependency later in this function,
-          // but this ensures we mark both as attached rather than just one.
-
-          listenerMap.set(TOP_BLUR, null);
-          listenerMap.set(TOP_FOCUS, null);
-          break;
-
-        case TOP_CANCEL:
-        case TOP_CLOSE:
-          if (isEventSupported(getRawEventName(topLevelType))) {
-            trapCapturedEvent(topLevelType, mountAt);
-          }
-
-          break;
-
-        case TOP_INVALID:
-        case TOP_SUBMIT:
-        case TOP_RESET:
-          // We listen to them on the target DOM elements.
-          // Some of them bubble so we don't want them to fire twice.
-          break;
-
-        default:
-          // By default, listen on the top level to all non-media events.
-          // Media events don't bubble so adding the listener wouldn't do anything.
-          var isMediaEvent = mediaEventTypes.indexOf(topLevelType) !== -1;
-
-          if (!isMediaEvent) {
-            trapBubbledEvent(topLevelType, mountAt);
-          }
-
-          break;
-      }
-
-      listenerMap.set(topLevelType, null);
-    }
-  }
-  function isListeningToAllDependencies(registrationName, mountAt) {
-    var listenerMap = getListenerMapForElement(mountAt);
-    var dependencies = registrationNameDependencies[registrationName];
-
-    for (var i = 0; i < dependencies.length; i++) {
-      var dependency = dependencies[i];
-
-      if (!listenerMap.has(dependency)) {
-        return false;
-      }
-    }
-
-    return true;
-  }
-
-  var attemptUserBlockingHydration;
-  function setAttemptUserBlockingHydration(fn) {
-    attemptUserBlockingHydration = fn;
-  }
-  var attemptContinuousHydration;
-  function setAttemptContinuousHydration(fn) {
-    attemptContinuousHydration = fn;
-  }
-  var attemptHydrationAtCurrentPriority;
-  function setAttemptHydrationAtCurrentPriority(fn) {
-    attemptHydrationAtCurrentPriority = fn;
-  } // TODO: Upgrade this definition once we're on a newer version of Flow that
-  var hasScheduledReplayAttempt = false; // The queue of discrete events to be replayed.
-
-  var queuedDiscreteEvents = []; // Indicates if any continuous event targets are non-null for early bailout.
-  // if the last target was dehydrated.
-
-  var queuedFocus = null;
-  var queuedDrag = null;
-  var queuedMouse = null; // For pointer events there can be one latest event per pointerId.
-
-  var queuedPointers = new Map();
-  var queuedPointerCaptures = new Map(); // We could consider replaying selectionchange and touchmoves too.
-
-  var queuedExplicitHydrationTargets = [];
-  function hasQueuedDiscreteEvents() {
-    return queuedDiscreteEvents.length > 0;
-  }
-  var discreteReplayableEvents = [TOP_MOUSE_DOWN, TOP_MOUSE_UP, TOP_TOUCH_CANCEL, TOP_TOUCH_END, TOP_TOUCH_START, TOP_AUX_CLICK, TOP_DOUBLE_CLICK, TOP_POINTER_CANCEL, TOP_POINTER_DOWN, TOP_POINTER_UP, TOP_DRAG_END, TOP_DRAG_START, TOP_DROP, TOP_COMPOSITION_END, TOP_COMPOSITION_START, TOP_KEY_DOWN, TOP_KEY_PRESS, TOP_KEY_UP, TOP_INPUT, TOP_TEXT_INPUT, TOP_CLOSE, TOP_CANCEL, TOP_COPY, TOP_CUT, TOP_PASTE, TOP_CLICK, TOP_CHANGE, TOP_CONTEXT_MENU, TOP_RESET, TOP_SUBMIT];
-  var continuousReplayableEvents = [TOP_FOCUS, TOP_BLUR, TOP_DRAG_ENTER, TOP_DRAG_LEAVE, TOP_MOUSE_OVER, TOP_MOUSE_OUT, TOP_POINTER_OVER, TOP_POINTER_OUT, TOP_GOT_POINTER_CAPTURE, TOP_LOST_POINTER_CAPTURE];
-  function isReplayableDiscreteEvent(eventType) {
-    return discreteReplayableEvents.indexOf(eventType) > -1;
-  }
-
-  function trapReplayableEventForDocument(topLevelType, document, listenerMap) {
-    legacyListenToTopLevelEvent(topLevelType, document, listenerMap);
-  }
-
-  function eagerlyTrapReplayableEvents(container, document) {
-    var listenerMapForDoc = getListenerMapForElement(document); // Discrete
-
-    discreteReplayableEvents.forEach(function (topLevelType) {
-      trapReplayableEventForDocument(topLevelType, document, listenerMapForDoc);
-    }); // Continuous
-
-    continuousReplayableEvents.forEach(function (topLevelType) {
-      trapReplayableEventForDocument(topLevelType, document, listenerMapForDoc);
-    });
-  }
-
-  function createQueuedReplayableEvent(blockedOn, topLevelType, eventSystemFlags, container, nativeEvent) {
-    return {
-      blockedOn: blockedOn,
-      topLevelType: topLevelType,
-      eventSystemFlags: eventSystemFlags | IS_REPLAYED,
-      nativeEvent: nativeEvent,
-      container: container
-    };
-  }
-
-  function queueDiscreteEvent(blockedOn, topLevelType, eventSystemFlags, container, nativeEvent) {
-    var queuedEvent = createQueuedReplayableEvent(blockedOn, topLevelType, eventSystemFlags, container, nativeEvent);
-    queuedDiscreteEvents.push(queuedEvent);
-  } // Resets the replaying for this type of continuous event to no event.
-
-  function clearIfContinuousEvent(topLevelType, nativeEvent) {
-    switch (topLevelType) {
-      case TOP_FOCUS:
-      case TOP_BLUR:
-        queuedFocus = null;
-        break;
-
-      case TOP_DRAG_ENTER:
-      case TOP_DRAG_LEAVE:
-        queuedDrag = null;
-        break;
-
-      case TOP_MOUSE_OVER:
-      case TOP_MOUSE_OUT:
-        queuedMouse = null;
-        break;
-
-      case TOP_POINTER_OVER:
-      case TOP_POINTER_OUT:
-        {
-          var pointerId = nativeEvent.pointerId;
-          queuedPointers.delete(pointerId);
-          break;
-        }
-
-      case TOP_GOT_POINTER_CAPTURE:
-      case TOP_LOST_POINTER_CAPTURE:
-        {
-          var _pointerId = nativeEvent.pointerId;
-          queuedPointerCaptures.delete(_pointerId);
-          break;
-        }
-    }
-  }
-
-  function accumulateOrCreateContinuousQueuedReplayableEvent(existingQueuedEvent, blockedOn, topLevelType, eventSystemFlags, container, nativeEvent) {
-    if (existingQueuedEvent === null || existingQueuedEvent.nativeEvent !== nativeEvent) {
-      var queuedEvent = createQueuedReplayableEvent(blockedOn, topLevelType, eventSystemFlags, container, nativeEvent);
-
-      if (blockedOn !== null) {
-        var _fiber2 = getInstanceFromNode$1(blockedOn);
-
-        if (_fiber2 !== null) {
-          // Attempt to increase the priority of this target.
-          attemptContinuousHydration(_fiber2);
-        }
-      }
-
-      return queuedEvent;
-    } // If we have already queued this exact event, then it's because
-    // the different event systems have different DOM event listeners.
-    // We can accumulate the flags and store a single event to be
-    // replayed.
-
-
-    existingQueuedEvent.eventSystemFlags |= eventSystemFlags;
-    return existingQueuedEvent;
-  }
-
-  function queueIfContinuousEvent(blockedOn, topLevelType, eventSystemFlags, container, nativeEvent) {
-    // These set relatedTarget to null because the replayed event will be treated as if we
-    // moved from outside the window (no target) onto the target once it hydrates.
-    // Instead of mutating we could clone the event.
-    switch (topLevelType) {
-      case TOP_FOCUS:
-        {
-          var focusEvent = nativeEvent;
-          queuedFocus = accumulateOrCreateContinuousQueuedReplayableEvent(queuedFocus, blockedOn, topLevelType, eventSystemFlags, container, focusEvent);
-          return true;
-        }
-
-      case TOP_DRAG_ENTER:
-        {
-          var dragEvent = nativeEvent;
-          queuedDrag = accumulateOrCreateContinuousQueuedReplayableEvent(queuedDrag, blockedOn, topLevelType, eventSystemFlags, container, dragEvent);
-          return true;
-        }
-
-      case TOP_MOUSE_OVER:
-        {
-          var mouseEvent = nativeEvent;
-          queuedMouse = accumulateOrCreateContinuousQueuedReplayableEvent(queuedMouse, blockedOn, topLevelType, eventSystemFlags, container, mouseEvent);
-          return true;
-        }
-
-      case TOP_POINTER_OVER:
-        {
-          var pointerEvent = nativeEvent;
-          var pointerId = pointerEvent.pointerId;
-          queuedPointers.set(pointerId, accumulateOrCreateContinuousQueuedReplayableEvent(queuedPointers.get(pointerId) || null, blockedOn, topLevelType, eventSystemFlags, container, pointerEvent));
-          return true;
-        }
-
-      case TOP_GOT_POINTER_CAPTURE:
-        {
-          var _pointerEvent = nativeEvent;
-          var _pointerId2 = _pointerEvent.pointerId;
-          queuedPointerCaptures.set(_pointerId2, accumulateOrCreateContinuousQueuedReplayableEvent(queuedPointerCaptures.get(_pointerId2) || null, blockedOn, topLevelType, eventSystemFlags, container, _pointerEvent));
-          return true;
-        }
-    }
-
-    return false;
-  } // Check if this target is unblocked. Returns true if it's unblocked.
-
-  function attemptExplicitHydrationTarget(queuedTarget) {
-    // TODO: This function shares a lot of logic with attemptToDispatchEvent.
-    // Try to unify them. It's a bit tricky since it would require two return
-    // values.
-    var targetInst = getClosestInstanceFromNode(queuedTarget.target);
-
-    if (targetInst !== null) {
-      var nearestMounted = getNearestMountedFiber(targetInst);
-
-      if (nearestMounted !== null) {
-        var tag = nearestMounted.tag;
-
-        if (tag === SuspenseComponent) {
-          var instance = getSuspenseInstanceFromFiber(nearestMounted);
-
-          if (instance !== null) {
-            // We're blocked on hydrating this boundary.
-            // Increase its priority.
-            queuedTarget.blockedOn = instance;
-            unstable_runWithPriority(queuedTarget.priority, function () {
-              attemptHydrationAtCurrentPriority(nearestMounted);
-            });
-            return;
-          }
-        } else if (tag === HostRoot) {
-          var root = nearestMounted.stateNode;
-
-          if (root.hydrate) {
-            queuedTarget.blockedOn = getContainerFromFiber(nearestMounted); // We don't currently have a way to increase the priority of
-            // a root other than sync.
-
-            return;
-          }
-        }
-      }
-    }
-
-    queuedTarget.blockedOn = null;
-  }
-
-  function attemptReplayContinuousQueuedEvent(queuedEvent) {
-    if (queuedEvent.blockedOn !== null) {
-      return false;
-    }
-
-    var nextBlockedOn = attemptToDispatchEvent(queuedEvent.topLevelType, queuedEvent.eventSystemFlags, queuedEvent.container, queuedEvent.nativeEvent);
-
-    if (nextBlockedOn !== null) {
-      // We're still blocked. Try again later.
-      var _fiber3 = getInstanceFromNode$1(nextBlockedOn);
-
-      if (_fiber3 !== null) {
-        attemptContinuousHydration(_fiber3);
-      }
-
-      queuedEvent.blockedOn = nextBlockedOn;
-      return false;
-    }
-
-    return true;
-  }
-
-  function attemptReplayContinuousQueuedEventInMap(queuedEvent, key, map) {
-    if (attemptReplayContinuousQueuedEvent(queuedEvent)) {
-      map.delete(key);
-    }
-  }
-
-  function replayUnblockedEvents() {
-    hasScheduledReplayAttempt = false; // First replay discrete events.
-
-    while (queuedDiscreteEvents.length > 0) {
-      var nextDiscreteEvent = queuedDiscreteEvents[0];
-
-      if (nextDiscreteEvent.blockedOn !== null) {
-        // We're still blocked.
-        // Increase the priority of this boundary to unblock
-        // the next discrete event.
-        var _fiber4 = getInstanceFromNode$1(nextDiscreteEvent.blockedOn);
-
-        if (_fiber4 !== null) {
-          attemptUserBlockingHydration(_fiber4);
-        }
-
-        break;
-      }
-
-      var nextBlockedOn = attemptToDispatchEvent(nextDiscreteEvent.topLevelType, nextDiscreteEvent.eventSystemFlags, nextDiscreteEvent.container, nextDiscreteEvent.nativeEvent);
-
-      if (nextBlockedOn !== null) {
-        // We're still blocked. Try again later.
-        nextDiscreteEvent.blockedOn = nextBlockedOn;
-      } else {
-        // We've successfully replayed the first event. Let's try the next one.
-        queuedDiscreteEvents.shift();
-      }
-    } // Next replay any continuous events.
-
-
-    if (queuedFocus !== null && attemptReplayContinuousQueuedEvent(queuedFocus)) {
-      queuedFocus = null;
-    }
-
-    if (queuedDrag !== null && attemptReplayContinuousQueuedEvent(queuedDrag)) {
-      queuedDrag = null;
-    }
-
-    if (queuedMouse !== null && attemptReplayContinuousQueuedEvent(queuedMouse)) {
-      queuedMouse = null;
-    }
-
-    queuedPointers.forEach(attemptReplayContinuousQueuedEventInMap);
-    queuedPointerCaptures.forEach(attemptReplayContinuousQueuedEventInMap);
-  }
-
-  function scheduleCallbackIfUnblocked(queuedEvent, unblocked) {
-    if (queuedEvent.blockedOn === unblocked) {
-      queuedEvent.blockedOn = null;
-
-      if (!hasScheduledReplayAttempt) {
-        hasScheduledReplayAttempt = true; // Schedule a callback to attempt replaying as many events as are
-        // now unblocked. This first might not actually be unblocked yet.
-        // We could check it early to avoid scheduling an unnecessary callback.
-
-        unstable_scheduleCallback(unstable_NormalPriority, replayUnblockedEvents);
-      }
-    }
-  }
-
-  function retryIfBlockedOn(unblocked) {
-    // Mark anything that was blocked on this as no longer blocked
-    // and eligible for a replay.
-    if (queuedDiscreteEvents.length > 0) {
-      scheduleCallbackIfUnblocked(queuedDiscreteEvents[0], unblocked); // This is a exponential search for each boundary that commits. I think it's
-      // worth it because we expect very few discrete events to queue up and once
-      // we are actually fully unblocked it will be fast to replay them.
-
-      for (var i = 1; i < queuedDiscreteEvents.length; i++) {
-        var queuedEvent = queuedDiscreteEvents[i];
-
-        if (queuedEvent.blockedOn === unblocked) {
-          queuedEvent.blockedOn = null;
-        }
-      }
-    }
-
-    if (queuedFocus !== null) {
-      scheduleCallbackIfUnblocked(queuedFocus, unblocked);
-    }
-
-    if (queuedDrag !== null) {
-      scheduleCallbackIfUnblocked(queuedDrag, unblocked);
-    }
-
-    if (queuedMouse !== null) {
-      scheduleCallbackIfUnblocked(queuedMouse, unblocked);
-    }
-
-    var unblock = function (queuedEvent) {
-      return scheduleCallbackIfUnblocked(queuedEvent, unblocked);
-    };
-
-    queuedPointers.forEach(unblock);
-    queuedPointerCaptures.forEach(unblock);
-
-    for (var _i = 0; _i < queuedExplicitHydrationTargets.length; _i++) {
-      var queuedTarget = queuedExplicitHydrationTargets[_i];
-
-      if (queuedTarget.blockedOn === unblocked) {
-        queuedTarget.blockedOn = null;
-      }
-    }
-
-    while (queuedExplicitHydrationTargets.length > 0) {
-      var nextExplicitTarget = queuedExplicitHydrationTargets[0];
-
-      if (nextExplicitTarget.blockedOn !== null) {
-        // We're still blocked.
-        break;
-      } else {
-        attemptExplicitHydrationTarget(nextExplicitTarget);
-
-        if (nextExplicitTarget.blockedOn === null) {
-          // We're unblocked.
-          queuedExplicitHydrationTargets.shift();
-        }
-      }
-    }
-  }
-
-  function addEventBubbleListener(element, eventType, listener) {
-    element.addEventListener(eventType, listener, false);
-  }
-  function addEventCaptureListener(element, eventType, listener) {
-    element.addEventListener(eventType, listener, true);
-  }
-
-  // do it in two places, which duplicates logic
-  // and increases the bundle size, we do it all
-  // here once. If we remove or refactor the
-  // SimpleEventPlugin, we should also remove or
-  // update the below line.
-
-  var simpleEventPluginEventTypes = {};
-  var topLevelEventsToDispatchConfig = new Map();
-  var eventPriorities = new Map(); // We store most of the events in this module in pairs of two strings so we can re-use
-  // the code required to apply the same logic for event prioritization and that of the
-  // SimpleEventPlugin. This complicates things slightly, but the aim is to reduce code
-  // duplication (for which there would be quite a bit). For the events that are not needed
-  // for the SimpleEventPlugin (otherDiscreteEvents) we process them separately as an
-  // array of top level events.
-  // Lastly, we ignore prettier so we can keep the formatting sane.
-  // prettier-ignore
-
-  var discreteEventPairsForSimpleEventPlugin = [TOP_BLUR, 'blur', TOP_CANCEL, 'cancel', TOP_CLICK, 'click', TOP_CLOSE, 'close', TOP_CONTEXT_MENU, 'contextMenu', TOP_COPY, 'copy', TOP_CUT, 'cut', TOP_AUX_CLICK, 'auxClick', TOP_DOUBLE_CLICK, 'doubleClick', TOP_DRAG_END, 'dragEnd', TOP_DRAG_START, 'dragStart', TOP_DROP, 'drop', TOP_FOCUS, 'focus', TOP_INPUT, 'input', TOP_INVALID, 'invalid', TOP_KEY_DOWN, 'keyDown', TOP_KEY_PRESS, 'keyPress', TOP_KEY_UP, 'keyUp', TOP_MOUSE_DOWN, 'mouseDown', TOP_MOUSE_UP, 'mouseUp', TOP_PASTE, 'paste', TOP_PAUSE, 'pause', TOP_PLAY, 'play', TOP_POINTER_CANCEL, 'pointerCancel', TOP_POINTER_DOWN, 'pointerDown', TOP_POINTER_UP, 'pointerUp', TOP_RATE_CHANGE, 'rateChange', TOP_RESET, 'reset', TOP_SEEKED, 'seeked', TOP_SUBMIT, 'submit', TOP_TOUCH_CANCEL, 'touchCancel', TOP_TOUCH_END, 'touchEnd', TOP_TOUCH_START, 'touchStart', TOP_VOLUME_CHANGE, 'volumeChange'];
-  var otherDiscreteEvents = [TOP_CHANGE, TOP_SELECTION_CHANGE, TOP_TEXT_INPUT, TOP_COMPOSITION_START, TOP_COMPOSITION_END, TOP_COMPOSITION_UPDATE]; // prettier-ignore
-
-  var userBlockingPairsForSimpleEventPlugin = [TOP_DRAG, 'drag', TOP_DRAG_ENTER, 'dragEnter', TOP_DRAG_EXIT, 'dragExit', TOP_DRAG_LEAVE, 'dragLeave', TOP_DRAG_OVER, 'dragOver', TOP_MOUSE_MOVE, 'mouseMove', TOP_MOUSE_OUT, 'mouseOut', TOP_MOUSE_OVER, 'mouseOver', TOP_POINTER_MOVE, 'pointerMove', TOP_POINTER_OUT, 'pointerOut', TOP_POINTER_OVER, 'pointerOver', TOP_SCROLL, 'scroll', TOP_TOGGLE, 'toggle', TOP_TOUCH_MOVE, 'touchMove', TOP_WHEEL, 'wheel']; // prettier-ignore
-
-  var continuousPairsForSimpleEventPlugin = [TOP_ABORT, 'abort', TOP_ANIMATION_END, 'animationEnd', TOP_ANIMATION_ITERATION, 'animationIteration', TOP_ANIMATION_START, 'animationStart', TOP_CAN_PLAY, 'canPlay', TOP_CAN_PLAY_THROUGH, 'canPlayThrough', TOP_DURATION_CHANGE, 'durationChange', TOP_EMPTIED, 'emptied', TOP_ENCRYPTED, 'encrypted', TOP_ENDED, 'ended', TOP_ERROR, 'error', TOP_GOT_POINTER_CAPTURE, 'gotPointerCapture', TOP_LOAD, 'load', TOP_LOADED_DATA, 'loadedData', TOP_LOADED_METADATA, 'loadedMetadata', TOP_LOAD_START, 'loadStart', TOP_LOST_POINTER_CAPTURE, 'lostPointerCapture', TOP_PLAYING, 'playing', TOP_PROGRESS, 'progress', TOP_SEEKING, 'seeking', TOP_STALLED, 'stalled', TOP_SUSPEND, 'suspend', TOP_TIME_UPDATE, 'timeUpdate', TOP_TRANSITION_END, 'transitionEnd', TOP_WAITING, 'waiting'];
-  /**
-   * Turns
-   * ['abort', ...]
-   * into
-   * eventTypes = {
-   *   'abort': {
-   *     phasedRegistrationNames: {
-   *       bubbled: 'onAbort',
-   *       captured: 'onAbortCapture',
-   *     },
-   *     dependencies: [TOP_ABORT],
-   *   },
-   *   ...
-   * };
-   * topLevelEventsToDispatchConfig = new Map([
-   *   [TOP_ABORT, { sameConfig }],
-   * ]);
-   */
-
-  function processSimpleEventPluginPairsByPriority(eventTypes, priority) {
-    // As the event types are in pairs of two, we need to iterate
-    // through in twos. The events are in pairs of two to save code
-    // and improve init perf of processing this array, as it will
-    // result in far fewer object allocations and property accesses
-    // if we only use three arrays to process all the categories of
-    // instead of tuples.
-    for (var i = 0; i < eventTypes.length; i += 2) {
-      var topEvent = eventTypes[i];
-      var event = eventTypes[i + 1];
-      var capitalizedEvent = event[0].toUpperCase() + event.slice(1);
-      var onEvent = 'on' + capitalizedEvent;
-      var config = {
-        phasedRegistrationNames: {
-          bubbled: onEvent,
-          captured: onEvent + 'Capture'
-        },
-        dependencies: [topEvent],
-        eventPriority: priority
-      };
-      eventPriorities.set(topEvent, priority);
-      topLevelEventsToDispatchConfig.set(topEvent, config);
-      simpleEventPluginEventTypes[event] = config;
-    }
-  }
-
-  function processTopEventPairsByPriority(eventTypes, priority) {
-    for (var i = 0; i < eventTypes.length; i++) {
-      eventPriorities.set(eventTypes[i], priority);
-    }
-  } // SimpleEventPlugin
-
-
-  processSimpleEventPluginPairsByPriority(discreteEventPairsForSimpleEventPlugin, DiscreteEvent);
-  processSimpleEventPluginPairsByPriority(userBlockingPairsForSimpleEventPlugin, UserBlockingEvent);
-  processSimpleEventPluginPairsByPriority(continuousPairsForSimpleEventPlugin, ContinuousEvent); // Not used by SimpleEventPlugin
-
-  processTopEventPairsByPriority(otherDiscreteEvents, DiscreteEvent);
-  function getEventPriorityForPluginSystem(topLevelType) {
-    var priority = eventPriorities.get(topLevelType); // Default to a ContinuousEvent. Note: we might
-    // want to warn if we can't detect the priority
-    // for the event.
-
-    return priority === undefined ? ContinuousEvent : priority;
-  }
-
-  // Intentionally not named imports because Rollup would use dynamic dispatch for
-  var UserBlockingPriority = unstable_UserBlockingPriority,
-      runWithPriority = unstable_runWithPriority; // TODO: can we stop exporting these?
-
-  var _enabled = true;
-  function setEnabled(enabled) {
-    _enabled = !!enabled;
-  }
-  function isEnabled() {
-    return _enabled;
-  }
-  function trapBubbledEvent(topLevelType, element) {
-    trapEventForPluginEventSystem(element, topLevelType, false);
-  }
-  function trapCapturedEvent(topLevelType, element) {
-    trapEventForPluginEventSystem(element, topLevelType, true);
-  }
-
-  function trapEventForPluginEventSystem(container, topLevelType, capture) {
-    var listener;
-
-    switch (getEventPriorityForPluginSystem(topLevelType)) {
-      case DiscreteEvent:
-        listener = dispatchDiscreteEvent.bind(null, topLevelType, PLUGIN_EVENT_SYSTEM, container);
-        break;
-
-      case UserBlockingEvent:
-        listener = dispatchUserBlockingUpdate.bind(null, topLevelType, PLUGIN_EVENT_SYSTEM, container);
-        break;
-
-      case ContinuousEvent:
-      default:
-        listener = dispatchEvent.bind(null, topLevelType, PLUGIN_EVENT_SYSTEM, container);
-        break;
-    }
-
-    var rawEventName = getRawEventName(topLevelType);
-
-    if (capture) {
-      addEventCaptureListener(container, rawEventName, listener);
-    } else {
-      addEventBubbleListener(container, rawEventName, listener);
-    }
-  }
-
-  function dispatchDiscreteEvent(topLevelType, eventSystemFlags, container, nativeEvent) {
-    flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);
-    discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, container, nativeEvent);
-  }
-
-  function dispatchUserBlockingUpdate(topLevelType, eventSystemFlags, container, nativeEvent) {
-    runWithPriority(UserBlockingPriority, dispatchEvent.bind(null, topLevelType, eventSystemFlags, container, nativeEvent));
-  }
-
-  function dispatchEvent(topLevelType, eventSystemFlags, container, nativeEvent) {
-    if (!_enabled) {
-      return;
-    }
-
-    if (hasQueuedDiscreteEvents() && isReplayableDiscreteEvent(topLevelType)) {
-      // If we already have a queue of discrete events, and this is another discrete
-      // event, then we can't dispatch it regardless of its target, since they
-      // need to dispatch in order.
-      queueDiscreteEvent(null, // Flags that we're not actually blocked on anything as far as we know.
-      topLevelType, eventSystemFlags, container, nativeEvent);
-      return;
-    }
-
-    var blockedOn = attemptToDispatchEvent(topLevelType, eventSystemFlags, container, nativeEvent);
-
-    if (blockedOn === null) {
-      // We successfully dispatched this event.
-      clearIfContinuousEvent(topLevelType, nativeEvent);
-      return;
-    }
-
-    if (isReplayableDiscreteEvent(topLevelType)) {
-      // This this to be replayed later once the target is available.
-      queueDiscreteEvent(blockedOn, topLevelType, eventSystemFlags, container, nativeEvent);
-      return;
-    }
-
-    if (queueIfContinuousEvent(blockedOn, topLevelType, eventSystemFlags, container, nativeEvent)) {
-      return;
-    } // We need to clear only if we didn't queue because
-    // queueing is accummulative.
-
-
-    clearIfContinuousEvent(topLevelType, nativeEvent); // This is not replayable so we'll invoke it but without a target,
-    // in case the event system needs to trace it.
-
-    {
-      dispatchEventForLegacyPluginEventSystem(topLevelType, eventSystemFlags, nativeEvent, null);
-    }
-  } // Attempt dispatching an event. Returns a SuspenseInstance or Container if it's blocked.
-
-  function attemptToDispatchEvent(topLevelType, eventSystemFlags, container, nativeEvent) {
-    // TODO: Warn if _enabled is false.
-    var nativeEventTarget = getEventTarget(nativeEvent);
-    var targetInst = getClosestInstanceFromNode(nativeEventTarget);
-
-    if (targetInst !== null) {
-      var nearestMounted = getNearestMountedFiber(targetInst);
-
-      if (nearestMounted === null) {
-        // This tree has been unmounted already. Dispatch without a target.
-        targetInst = null;
-      } else {
-        var tag = nearestMounted.tag;
-
-        if (tag === SuspenseComponent) {
-          var instance = getSuspenseInstanceFromFiber(nearestMounted);
-
-          if (instance !== null) {
-            // Queue the event to be replayed later. Abort dispatching since we
-            // don't want this event dispatched twice through the event system.
-            // TODO: If this is the first discrete event in the queue. Schedule an increased
-            // priority for this boundary.
-            return instance;
-          } // This shouldn't happen, something went wrong but to avoid blocking
-          // the whole system, dispatch the event without a target.
-          // TODO: Warn.
-
-
-          targetInst = null;
-        } else if (tag === HostRoot) {
-          var root = nearestMounted.stateNode;
-
-          if (root.hydrate) {
-            // If this happens during a replay something went wrong and it might block
-            // the whole system.
-            return getContainerFromFiber(nearestMounted);
-          }
-
-          targetInst = null;
-        } else if (nearestMounted !== targetInst) {
-          // If we get an event (ex: img onload) before committing that
-          // component's mount, ignore it for now (that is, treat it as if it was an
-          // event on a non-React tree). We might also consider queueing events and
-          // dispatching them after the mount.
-          targetInst = null;
-        }
-      }
-    }
-
-    {
-      dispatchEventForLegacyPluginEventSystem(topLevelType, eventSystemFlags, nativeEvent, targetInst);
-    } // We're not blocked on anything.
-
-
-    return null;
-  }
-
   // List derived from Gecko source code:
   // https://github.com/mozilla/gecko-dev/blob/4e638efc71/layout/style/test/property_database.js
   var shorthandToLonghand = {
@@ -4782,7 +2621,6 @@
 
   function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) {
     {
-
       if (!nextStyles) {
         return;
       }
@@ -4810,7 +2648,7 @@
     }
   }
 
-  // For HTML, certain tags should omit their close tag. We keep a whitelist for
+  // For HTML, certain tags should omit their close tag. We keep a list for
   // those special-case tags.
   var omittedCloseTags = {
     area: true,
@@ -4838,11 +2676,6 @@
   }, omittedCloseTags);
 
   var HTML = '__html';
-  var ReactDebugCurrentFrame$3 = null;
-
-  {
-    ReactDebugCurrentFrame$3 = ReactSharedInternals.ReactDebugCurrentFrame;
-  }
 
   function assertValidProps(tag, props) {
     if (!props) {
@@ -4853,7 +2686,7 @@
     if (voidElementTags[tag]) {
       if (!(props.children == null && props.dangerouslySetInnerHTML == null)) {
         {
-          throw Error( tag + " is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`." + ( ReactDebugCurrentFrame$3.getStackAddendum() ) );
+          throw Error( tag + " is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`." );
         }
       }
     }
@@ -4867,7 +2700,7 @@
 
       if (!(typeof props.dangerouslySetInnerHTML === 'object' && HTML in props.dangerouslySetInnerHTML)) {
         {
-          throw Error( "`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information." );
+          throw Error( "`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://reactjs.org/link/dangerously-set-inner-html for more information." );
         }
       }
     }
@@ -4880,7 +2713,7 @@
 
     if (!(props.style == null || typeof props.style === 'object')) {
       {
-        throw Error( "The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX." + ( ReactDebugCurrentFrame$3.getStackAddendum() ) );
+        throw Error( "The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX." );
       }
     }
   }
@@ -4892,7 +2725,7 @@
 
     switch (tagName) {
       // These are reserved SVG and MathML elements.
-      // We don't mind this whitelist too much because we expect it to never grow.
+      // We don't mind this list too much because we expect it to never grow.
       // The alternative is to track the namespace in a few places which is convoluted.
       // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
       case 'annotation-xml':
@@ -4910,7 +2743,7 @@
     }
   }
 
-  // When adding attributes to the HTML or SVG whitelist, be sure to
+  // When adding attributes to the HTML or SVG allowed attribute list, be sure to
   // also add them to this module to ensure casing and incorrect name
   // warnings.
   var possibleStandardNames = {
@@ -4960,9 +2793,11 @@
     dir: 'dir',
     disabled: 'disabled',
     disablepictureinpicture: 'disablePictureInPicture',
+    disableremoteplayback: 'disableRemotePlayback',
     download: 'download',
     draggable: 'draggable',
     enctype: 'encType',
+    enterkeyhint: 'enterKeyHint',
     for: 'htmlFor',
     form: 'form',
     formmethod: 'formMethod',
@@ -5530,9 +3365,9 @@
       }).join(', ');
 
       if (invalidProps.length === 1) {
-        error('Invalid aria prop %s on <%s> tag. ' + 'For details, see https://fb.me/invalid-aria-prop', unknownPropString, type);
+        error('Invalid aria prop %s on <%s> tag. ' + 'For details, see https://reactjs.org/link/invalid-aria-props', unknownPropString, type);
       } else if (invalidProps.length > 1) {
-        error('Invalid aria props %s on <%s> tag. ' + 'For details, see https://fb.me/invalid-aria-prop', unknownPropString, type);
+        error('Invalid aria props %s on <%s> tag. ' + 'For details, see https://reactjs.org/link/invalid-aria-props', unknownPropString, type);
       }
     }
   }
@@ -5574,7 +3409,7 @@
     var rARIA$1 = new RegExp('^(aria)-[' + ATTRIBUTE_NAME_CHAR + ']*$');
     var rARIACamel$1 = new RegExp('^(aria)[A-Z][' + ATTRIBUTE_NAME_CHAR + ']*$');
 
-    validateProperty$1 = function (tagName, name, value, canUseEventSystem) {
+    validateProperty$1 = function (tagName, name, value, eventRegistry) {
       if (_hasOwnProperty.call(warnedProperties$1, name) && warnedProperties$1[name]) {
         return true;
       }
@@ -5589,8 +3424,11 @@
       } // We can't rely on the event system being injected on the server.
 
 
-      if (canUseEventSystem) {
-        if (registrationNameModules.hasOwnProperty(name)) {
+      if (eventRegistry != null) {
+        var registrationNameDependencies = eventRegistry.registrationNameDependencies,
+            possibleRegistrationNames = eventRegistry.possibleRegistrationNames;
+
+        if (registrationNameDependencies.hasOwnProperty(name)) {
           return true;
         }
 
@@ -5710,12 +3548,12 @@
     };
   }
 
-  var warnUnknownProperties = function (type, props, canUseEventSystem) {
+  var warnUnknownProperties = function (type, props, eventRegistry) {
     {
       var unknownProps = [];
 
       for (var key in props) {
-        var isValid = validateProperty$1(type, key, props[key], canUseEventSystem);
+        var isValid = validateProperty$1(type, key, props[key], eventRegistry);
 
         if (!isValid) {
           unknownProps.push(key);
@@ -5727,1052 +3565,3949 @@
       }).join(', ');
 
       if (unknownProps.length === 1) {
-        error('Invalid value for prop %s on <%s> tag. Either remove it from the element, ' + 'or pass a string or number value to keep it in the DOM. ' + 'For details, see https://fb.me/react-attribute-behavior', unknownPropString, type);
+        error('Invalid value for prop %s on <%s> tag. Either remove it from the element, ' + 'or pass a string or number value to keep it in the DOM. ' + 'For details, see https://reactjs.org/link/attribute-behavior ', unknownPropString, type);
       } else if (unknownProps.length > 1) {
-        error('Invalid values for props %s on <%s> tag. Either remove them from the element, ' + 'or pass a string or number value to keep them in the DOM. ' + 'For details, see https://fb.me/react-attribute-behavior', unknownPropString, type);
+        error('Invalid values for props %s on <%s> tag. Either remove them from the element, ' + 'or pass a string or number value to keep them in the DOM. ' + 'For details, see https://reactjs.org/link/attribute-behavior ', unknownPropString, type);
       }
     }
   };
 
-  function validateProperties$2(type, props, canUseEventSystem) {
+  function validateProperties$2(type, props, eventRegistry) {
     if (isCustomComponent(type, props)) {
       return;
     }
 
-    warnUnknownProperties(type, props, canUseEventSystem);
-  }
-
-  var didWarnInvalidHydration = false;
-  var DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
-  var SUPPRESS_CONTENT_EDITABLE_WARNING = 'suppressContentEditableWarning';
-  var SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
-  var AUTOFOCUS = 'autoFocus';
-  var CHILDREN = 'children';
-  var STYLE = 'style';
-  var HTML$1 = '__html';
-  var HTML_NAMESPACE$1 = Namespaces.html;
-  var warnedUnknownTags;
-  var suppressHydrationWarning;
-  var validatePropertiesInDevelopment;
-  var warnForTextDifference;
-  var warnForPropDifference;
-  var warnForExtraAttributes;
-  var warnForInvalidEventListener;
-  var canDiffStyleForHydrationWarning;
-  var normalizeMarkupForTextOrAttribute;
-  var normalizeHTML;
+    warnUnknownProperties(type, props, eventRegistry);
+  }
+
+  var IS_EVENT_HANDLE_NON_MANAGED_NODE = 1;
+  var IS_NON_DELEGATED = 1 << 1;
+  var IS_CAPTURE_PHASE = 1 << 2;
+  var IS_REPLAYED = 1 << 4;
+  // set to LEGACY_FB_SUPPORT. LEGACY_FB_SUPPORT only gets set when
+  // we call willDeferLaterForLegacyFBSupport, thus not bailing out
+  // will result in endless cycles like an infinite loop.
+  // We also don't want to defer during event replaying.
+
+  var SHOULD_NOT_PROCESS_POLYFILL_EVENT_PLUGINS = IS_EVENT_HANDLE_NON_MANAGED_NODE | IS_NON_DELEGATED | IS_CAPTURE_PHASE;
+
+  /**
+   * Gets the target node from a native browser event by accounting for
+   * inconsistencies in browser DOM APIs.
+   *
+   * @param {object} nativeEvent Native browser event.
+   * @return {DOMEventTarget} Target node.
+   */
+
+  function getEventTarget(nativeEvent) {
+    // Fallback to nativeEvent.srcElement for IE9
+    // https://github.com/facebook/react/issues/12506
+    var target = nativeEvent.target || nativeEvent.srcElement || window; // Normalize SVG <use> element events #4963
+
+    if (target.correspondingUseElement) {
+      target = target.correspondingUseElement;
+    } // Safari may fire events on text nodes (Node.TEXT_NODE is 3).
+    // @see http://www.quirksmode.org/js/events_properties.html
+
+
+    return target.nodeType === TEXT_NODE ? target.parentNode : target;
+  }
+
+  var restoreImpl = null;
+  var restoreTarget = null;
+  var restoreQueue = null;
+
+  function restoreStateOfTarget(target) {
+    // We perform this translation at the end of the event loop so that we
+    // always receive the correct fiber here
+    var internalInstance = getInstanceFromNode(target);
+
+    if (!internalInstance) {
+      // Unmounted
+      return;
+    }
+
+    if (!(typeof restoreImpl === 'function')) {
+      {
+        throw Error( "setRestoreImplementation() needs to be called to handle a target for controlled events. This error is likely caused by a bug in React. Please file an issue." );
+      }
+    }
+
+    var stateNode = internalInstance.stateNode; // Guard against Fiber being unmounted.
+
+    if (stateNode) {
+      var _props = getFiberCurrentPropsFromNode(stateNode);
+
+      restoreImpl(internalInstance.stateNode, internalInstance.type, _props);
+    }
+  }
+
+  function setRestoreImplementation(impl) {
+    restoreImpl = impl;
+  }
+  function enqueueStateRestore(target) {
+    if (restoreTarget) {
+      if (restoreQueue) {
+        restoreQueue.push(target);
+      } else {
+        restoreQueue = [target];
+      }
+    } else {
+      restoreTarget = target;
+    }
+  }
+  function needsStateRestore() {
+    return restoreTarget !== null || restoreQueue !== null;
+  }
+  function restoreStateIfNeeded() {
+    if (!restoreTarget) {
+      return;
+    }
+
+    var target = restoreTarget;
+    var queuedTargets = restoreQueue;
+    restoreTarget = null;
+    restoreQueue = null;
+    restoreStateOfTarget(target);
+
+    if (queuedTargets) {
+      for (var i = 0; i < queuedTargets.length; i++) {
+        restoreStateOfTarget(queuedTargets[i]);
+      }
+    }
+  }
+
+  // the renderer. Such as when we're dispatching events or if third party
+  // libraries need to call batchedUpdates. Eventually, this API will go away when
+  // everything is batched by default. We'll then have a similar API to opt-out of
+  // scheduled work and instead do synchronous work.
+  // Defaults
+
+  var batchedUpdatesImpl = function (fn, bookkeeping) {
+    return fn(bookkeeping);
+  };
+
+  var discreteUpdatesImpl = function (fn, a, b, c, d) {
+    return fn(a, b, c, d);
+  };
+
+  var flushDiscreteUpdatesImpl = function () {};
+
+  var batchedEventUpdatesImpl = batchedUpdatesImpl;
+  var isInsideEventHandler = false;
+  var isBatchingEventUpdates = false;
+
+  function finishEventHandler() {
+    // Here we wait until all updates have propagated, which is important
+    // when using controlled components within layers:
+    // https://github.com/facebook/react/issues/1698
+    // Then we restore state of any controlled component.
+    var controlledComponentsHavePendingUpdates = needsStateRestore();
+
+    if (controlledComponentsHavePendingUpdates) {
+      // If a controlled event was fired, we may need to restore the state of
+      // the DOM node back to the controlled value. This is necessary when React
+      // bails out of the update without touching the DOM.
+      flushDiscreteUpdatesImpl();
+      restoreStateIfNeeded();
+    }
+  }
+
+  function batchedUpdates(fn, bookkeeping) {
+    if (isInsideEventHandler) {
+      // If we are currently inside another batch, we need to wait until it
+      // fully completes before restoring state.
+      return fn(bookkeeping);
+    }
+
+    isInsideEventHandler = true;
+
+    try {
+      return batchedUpdatesImpl(fn, bookkeeping);
+    } finally {
+      isInsideEventHandler = false;
+      finishEventHandler();
+    }
+  }
+  function batchedEventUpdates(fn, a, b) {
+    if (isBatchingEventUpdates) {
+      // If we are currently inside another batch, we need to wait until it
+      // fully completes before restoring state.
+      return fn(a, b);
+    }
+
+    isBatchingEventUpdates = true;
+
+    try {
+      return batchedEventUpdatesImpl(fn, a, b);
+    } finally {
+      isBatchingEventUpdates = false;
+      finishEventHandler();
+    }
+  }
+  function discreteUpdates(fn, a, b, c, d) {
+    var prevIsInsideEventHandler = isInsideEventHandler;
+    isInsideEventHandler = true;
+
+    try {
+      return discreteUpdatesImpl(fn, a, b, c, d);
+    } finally {
+      isInsideEventHandler = prevIsInsideEventHandler;
+
+      if (!isInsideEventHandler) {
+        finishEventHandler();
+      }
+    }
+  }
+  function flushDiscreteUpdatesIfNeeded(timeStamp) {
+    {
+      if (!isInsideEventHandler) {
+        flushDiscreteUpdatesImpl();
+      }
+    }
+  }
+  function setBatchingImplementation(_batchedUpdatesImpl, _discreteUpdatesImpl, _flushDiscreteUpdatesImpl, _batchedEventUpdatesImpl) {
+    batchedUpdatesImpl = _batchedUpdatesImpl;
+    discreteUpdatesImpl = _discreteUpdatesImpl;
+    flushDiscreteUpdatesImpl = _flushDiscreteUpdatesImpl;
+    batchedEventUpdatesImpl = _batchedEventUpdatesImpl;
+  }
+
+  function isInteractive(tag) {
+    return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';
+  }
+
+  function shouldPreventMouseEvent(name, type, props) {
+    switch (name) {
+      case 'onClick':
+      case 'onClickCapture':
+      case 'onDoubleClick':
+      case 'onDoubleClickCapture':
+      case 'onMouseDown':
+      case 'onMouseDownCapture':
+      case 'onMouseMove':
+      case 'onMouseMoveCapture':
+      case 'onMouseUp':
+      case 'onMouseUpCapture':
+      case 'onMouseEnter':
+        return !!(props.disabled && isInteractive(type));
+
+      default:
+        return false;
+    }
+  }
+  /**
+   * @param {object} inst The instance, which is the source of events.
+   * @param {string} registrationName Name of listener (e.g. `onClick`).
+   * @return {?function} The stored callback.
+   */
+
+
+  function getListener(inst, registrationName) {
+    var stateNode = inst.stateNode;
+
+    if (stateNode === null) {
+      // Work in progress (ex: onload events in incremental mode).
+      return null;
+    }
+
+    var props = getFiberCurrentPropsFromNode(stateNode);
+
+    if (props === null) {
+      // Work in progress.
+      return null;
+    }
+
+    var listener = props[registrationName];
+
+    if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
+      return null;
+    }
+
+    if (!(!listener || typeof listener === 'function')) {
+      {
+        throw Error( "Expected `" + registrationName + "` listener to be a function, instead got a value of `" + typeof listener + "` type." );
+      }
+    }
+
+    return listener;
+  }
+
+  var passiveBrowserEventsSupported = false; // Check if browser support events with passive listeners
+  // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
+
+  if (canUseDOM) {
+    try {
+      var options = {}; // $FlowFixMe: Ignore Flow complaining about needing a value
+
+      Object.defineProperty(options, 'passive', {
+        get: function () {
+          passiveBrowserEventsSupported = true;
+        }
+      });
+      window.addEventListener('test', options, options);
+      window.removeEventListener('test', options, options);
+    } catch (e) {
+      passiveBrowserEventsSupported = false;
+    }
+  }
+
+  function invokeGuardedCallbackProd(name, func, context, a, b, c, d, e, f) {
+    var funcArgs = Array.prototype.slice.call(arguments, 3);
+
+    try {
+      func.apply(context, funcArgs);
+    } catch (error) {
+      this.onError(error);
+    }
+  }
+
+  var invokeGuardedCallbackImpl = invokeGuardedCallbackProd;
 
   {
-    warnedUnknownTags = {
-      // Chrome is the only major browser not shipping <time>. But as of July
-      // 2017 it intends to ship it due to widespread usage. We intentionally
-      // *don't* warn for <time> even if it's unrecognized by Chrome because
-      // it soon will be, and many apps have been using it anyway.
-      time: true,
-      // There are working polyfills for <dialog>. Let people use it.
-      dialog: true,
-      // Electron ships a custom <webview> tag to display external web content in
-      // an isolated frame and process.
-      // This tag is not present in non Electron environments such as JSDom which
-      // is often used for testing purposes.
-      // @see https://electronjs.org/docs/api/webview-tag
-      webview: true
-    };
-
-    validatePropertiesInDevelopment = function (type, props) {
-      validateProperties(type, props);
-      validateProperties$1(type, props);
-      validateProperties$2(type, props,
-      /* canUseEventSystem */
-      true);
-    }; // IE 11 parses & normalizes the style attribute as opposed to other
-    // browsers. It adds spaces and sorts the properties in some
-    // non-alphabetical order. Handling that would require sorting CSS
-    // properties in the client & server versions or applying
-    // `expectedStyle` to a temporary DOM node to read its `style` attribute
-    // normalized. Since it only affects IE, we're skipping style warnings
-    // in that browser completely in favor of doing all that work.
-    // See https://github.com/facebook/react/issues/11807
-
-
-    canDiffStyleForHydrationWarning = canUseDOM && !document.documentMode; // HTML parsing normalizes CR and CRLF to LF.
-    // It also can turn \u0000 into \uFFFD inside attributes.
-    // https://www.w3.org/TR/html5/single-page.html#preprocessing-the-input-stream
-    // If we have a mismatch, it might be caused by that.
-    // We will still patch up in this case but not fire the warning.
-
-    var NORMALIZE_NEWLINES_REGEX = /\r\n?/g;
-    var NORMALIZE_NULL_AND_REPLACEMENT_REGEX = /\u0000|\uFFFD/g;
-
-    normalizeMarkupForTextOrAttribute = function (markup) {
-      var markupString = typeof markup === 'string' ? markup : '' + markup;
-      return markupString.replace(NORMALIZE_NEWLINES_REGEX, '\n').replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, '');
-    };
-
-    warnForTextDifference = function (serverText, clientText) {
-      if (didWarnInvalidHydration) {
-        return;
-      }
-
-      var normalizedClientText = normalizeMarkupForTextOrAttribute(clientText);
-      var normalizedServerText = normalizeMarkupForTextOrAttribute(serverText);
-
-      if (normalizedServerText === normalizedClientText) {
-        return;
-      }
-
-      didWarnInvalidHydration = true;
-
-      error('Text content did not match. Server: "%s" Client: "%s"', normalizedServerText, normalizedClientText);
-    };
-
-    warnForPropDifference = function (propName, serverValue, clientValue) {
-      if (didWarnInvalidHydration) {
-        return;
-      }
-
-      var normalizedClientValue = normalizeMarkupForTextOrAttribute(clientValue);
-      var normalizedServerValue = normalizeMarkupForTextOrAttribute(serverValue);
-
-      if (normalizedServerValue === normalizedClientValue) {
-        return;
-      }
-
-      didWarnInvalidHydration = true;
-
-      error('Prop `%s` did not match. Server: %s Client: %s', propName, JSON.stringify(normalizedServerValue), JSON.stringify(normalizedClientValue));
-    };
-
-    warnForExtraAttributes = function (attributeNames) {
-      if (didWarnInvalidHydration) {
-        return;
-      }
-
-      didWarnInvalidHydration = true;
-      var names = [];
-      attributeNames.forEach(function (name) {
-        names.push(name);
-      });
-
-      error('Extra attributes from the server: %s', names);
-    };
-
-    warnForInvalidEventListener = function (registrationName, listener) {
-      if (listener === false) {
-        error('Expected `%s` listener to be a function, instead got `false`.\n\n' + 'If you used to conditionally omit it with %s={condition && value}, ' + 'pass %s={condition ? value : undefined} instead.', registrationName, registrationName, registrationName);
-      } else {
-        error('Expected `%s` listener to be a function, instead got a value of `%s` type.', registrationName, typeof listener);
-      }
-    }; // Parse the HTML and read it back to normalize the HTML string so that it
-    // can be used for comparison.
-
-
-    normalizeHTML = function (parent, html) {
-      // We could have created a separate document here to avoid
-      // re-initializing custom elements if they exist. But this breaks
-      // how <noscript> is being handled. So we use the same document.
-      // See the discussion in https://github.com/facebook/react/pull/11157.
-      var testElement = parent.namespaceURI === HTML_NAMESPACE$1 ? parent.ownerDocument.createElement(parent.tagName) : parent.ownerDocument.createElementNS(parent.namespaceURI, parent.tagName);
-      testElement.innerHTML = html;
-      return testElement.innerHTML;
-    };
-  }
-
-  function ensureListeningTo(rootContainerElement, registrationName) {
-    var isDocumentOrFragment = rootContainerElement.nodeType === DOCUMENT_NODE || rootContainerElement.nodeType === DOCUMENT_FRAGMENT_NODE;
-    var doc = isDocumentOrFragment ? rootContainerElement : rootContainerElement.ownerDocument;
-    legacyListenToEvent(registrationName, doc);
-  }
-
-  function getOwnerDocumentFromRootContainer(rootContainerElement) {
-    return rootContainerElement.nodeType === DOCUMENT_NODE ? rootContainerElement : rootContainerElement.ownerDocument;
-  }
-
-  function noop() {}
-
-  function trapClickOnNonInteractiveElement(node) {
-    // Mobile Safari does not fire properly bubble click events on
-    // non-interactive elements, which means delegated click listeners do not
-    // fire. The workaround for this bug involves attaching an empty click
-    // listener on the target node.
-    // http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
-    // Just set it using the onclick property so that we don't have to manage any
-    // bookkeeping for it. Not sure if we need to clear it when the listener is
-    // removed.
-    // TODO: Only do this for the relevant Safaris maybe?
-    node.onclick = noop;
-  }
-
-  function setInitialDOMProperties(tag, domElement, rootContainerElement, nextProps, isCustomComponentTag) {
-    for (var propKey in nextProps) {
-      if (!nextProps.hasOwnProperty(propKey)) {
+    // In DEV mode, we swap out invokeGuardedCallback for a special version
+    // that plays more nicely with the browser's DevTools. The idea is to preserve
+    // "Pause on exceptions" behavior. Because React wraps all user-provided
+    // functions in invokeGuardedCallback, and the production version of
+    // invokeGuardedCallback uses a try-catch, all user exceptions are treated
+    // like caught exceptions, and the DevTools won't pause unless the developer
+    // takes the extra step of enabling pause on caught exceptions. This is
+    // unintuitive, though, because even though React has caught the error, from
+    // the developer's perspective, the error is uncaught.
+    //
+    // To preserve the expected "Pause on exceptions" behavior, we don't use a
+    // try-catch in DEV. Instead, we synchronously dispatch a fake event to a fake
+    // DOM node, and call the user-provided callback from inside an event handler
+    // for that fake event. If the callback throws, the error is "captured" using
+    // a global event handler. But because the error happens in a different
+    // event loop context, it does not interrupt the normal program flow.
+    // Effectively, this gives us try-catch behavior without actually using
+    // try-catch. Neat!
+    // Check that the browser supports the APIs we need to implement our special
+    // DEV version of invokeGuardedCallback
+    if (typeof window !== 'undefined' && typeof window.dispatchEvent === 'function' && typeof document !== 'undefined' && typeof document.createEvent === 'function') {
+      var fakeNode = document.createElement('react');
+
+      invokeGuardedCallbackImpl = function invokeGuardedCallbackDev(name, func, context, a, b, c, d, e, f) {
+        // If document doesn't exist we know for sure we will crash in this method
+        // when we call document.createEvent(). However this can cause confusing
+        // errors: https://github.com/facebookincubator/create-react-app/issues/3482
+        // So we preemptively throw with a better message instead.
+        if (!(typeof document !== 'undefined')) {
+          {
+            throw Error( "The `document` global was defined when React was initialized, but is not defined anymore. This can happen in a test environment if a component schedules an update from an asynchronous callback, but the test has already finished running. To solve this, you can either unmount the component at the end of your test (and ensure that any asynchronous operations get canceled in `componentWillUnmount`), or you can change the test itself to be asynchronous." );
+          }
+        }
+
+        var evt = document.createEvent('Event');
+        var didCall = false; // Keeps track of whether the user-provided callback threw an error. We
+        // set this to true at the beginning, then set it to false right after
+        // calling the function. If the function errors, `didError` will never be
+        // set to false. This strategy works even if the browser is flaky and
+        // fails to call our global error handler, because it doesn't rely on
+        // the error event at all.
+
+        var didError = true; // Keeps track of the value of window.event so that we can reset it
+        // during the callback to let user code access window.event in the
+        // browsers that support it.
+
+        var windowEvent = window.event; // Keeps track of the descriptor of window.event to restore it after event
+        // dispatching: https://github.com/facebook/react/issues/13688
+
+        var windowEventDescriptor = Object.getOwnPropertyDescriptor(window, 'event');
+
+        function restoreAfterDispatch() {
+          // We immediately remove the callback from event listeners so that
+          // nested `invokeGuardedCallback` calls do not clash. Otherwise, a
+          // nested call would trigger the fake event handlers of any call higher
+          // in the stack.
+          fakeNode.removeEventListener(evtType, callCallback, false); // We check for window.hasOwnProperty('event') to prevent the
+          // window.event assignment in both IE <= 10 as they throw an error
+          // "Member not found" in strict mode, and in Firefox which does not
+          // support window.event.
+
+          if (typeof window.event !== 'undefined' && window.hasOwnProperty('event')) {
+            window.event = windowEvent;
+          }
+        } // Create an event handler for our fake event. We will synchronously
+        // dispatch our fake event using `dispatchEvent`. Inside the handler, we
+        // call the user-provided callback.
+
+
+        var funcArgs = Array.prototype.slice.call(arguments, 3);
+
+        function callCallback() {
+          didCall = true;
+          restoreAfterDispatch();
+          func.apply(context, funcArgs);
+          didError = false;
+        } // Create a global error event handler. We use this to capture the value
+        // that was thrown. It's possible that this error handler will fire more
+        // than once; for example, if non-React code also calls `dispatchEvent`
+        // and a handler for that event throws. We should be resilient to most of
+        // those cases. Even if our error event handler fires more than once, the
+        // last error event is always used. If the callback actually does error,
+        // we know that the last error event is the correct one, because it's not
+        // possible for anything else to have happened in between our callback
+        // erroring and the code that follows the `dispatchEvent` call below. If
+        // the callback doesn't error, but the error event was fired, we know to
+        // ignore it because `didError` will be false, as described above.
+
+
+        var error; // Use this to track whether the error event is ever called.
+
+        var didSetError = false;
+        var isCrossOriginError = false;
+
+        function handleWindowError(event) {
+          error = event.error;
+          didSetError = true;
+
+          if (error === null && event.colno === 0 && event.lineno === 0) {
+            isCrossOriginError = true;
+          }
+
+          if (event.defaultPrevented) {
+            // Some other error handler has prevented default.
+            // Browsers silence the error report if this happens.
+            // We'll remember this to later decide whether to log it or not.
+            if (error != null && typeof error === 'object') {
+              try {
+                error._suppressLogging = true;
+              } catch (inner) {// Ignore.
+              }
+            }
+          }
+        } // Create a fake event type.
+
+
+        var evtType = "react-" + (name ? name : 'invokeguardedcallback'); // Attach our event handlers
+
+        window.addEventListener('error', handleWindowError);
+        fakeNode.addEventListener(evtType, callCallback, false); // Synchronously dispatch our fake event. If the user-provided function
+        // errors, it will trigger our global error handler.
+
+        evt.initEvent(evtType, false, false);
+        fakeNode.dispatchEvent(evt);
+
+        if (windowEventDescriptor) {
+          Object.defineProperty(window, 'event', windowEventDescriptor);
+        }
+
+        if (didCall && didError) {
+          if (!didSetError) {
+            // The callback errored, but the error event never fired.
+            error = new Error('An error was thrown inside one of your components, but React ' + "doesn't know what it was. This is likely due to browser " + 'flakiness. React does its best to preserve the "Pause on ' + 'exceptions" behavior of the DevTools, which requires some ' + "DEV-mode only tricks. It's possible that these don't work in " + 'your browser. Try triggering the error in production mode, ' + 'or switching to a modern browser. If you suspect that this is ' + 'actually an issue with React, please file an issue.');
+          } else if (isCrossOriginError) {
+            error = new Error("A cross-origin error was thrown. React doesn't have access to " + 'the actual error object in development. ' + 'See https://reactjs.org/link/crossorigin-error for more information.');
+          }
+
+          this.onError(error);
+        } // Remove our event listeners
+
+
+        window.removeEventListener('error', handleWindowError);
+
+        if (!didCall) {
+          // Something went really wrong, and our event was not dispatched.
+          // https://github.com/facebook/react/issues/16734
+          // https://github.com/facebook/react/issues/16585
+          // Fall back to the production implementation.
+          restoreAfterDispatch();
+          return invokeGuardedCallbackProd.apply(this, arguments);
+        }
+      };
+    }
+  }
+
+  var invokeGuardedCallbackImpl$1 = invokeGuardedCallbackImpl;
+
+  var hasError = false;
+  var caughtError = null; // Used by event system to capture/rethrow the first error.
+
+  var hasRethrowError = false;
+  var rethrowError = null;
+  var reporter = {
+    onError: function (error) {
+      hasError = true;
+      caughtError = error;
+    }
+  };
+  /**
+   * Call a function while guarding against errors that happens within it.
+   * Returns an error if it throws, otherwise null.
+   *
+   * In production, this is implemented using a try-catch. The reason we don't
+   * use a try-catch directly is so that we can swap out a different
+   * implementation in DEV mode.
+   *
+   * @param {String} name of the guard to use for logging or debugging
+   * @param {Function} func The function to invoke
+   * @param {*} context The context to use when calling the function
+   * @param {...*} args Arguments for function
+   */
+
+  function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
+    hasError = false;
+    caughtError = null;
+    invokeGuardedCallbackImpl$1.apply(reporter, arguments);
+  }
+  /**
+   * Same as invokeGuardedCallback, but instead of returning an error, it stores
+   * it in a global so it can be rethrown by `rethrowCaughtError` later.
+   * TODO: See if caughtError and rethrowError can be unified.
+   *
+   * @param {String} name of the guard to use for logging or debugging
+   * @param {Function} func The function to invoke
+   * @param {*} context The context to use when calling the function
+   * @param {...*} args Arguments for function
+   */
+
+  function invokeGuardedCallbackAndCatchFirstError(name, func, context, a, b, c, d, e, f) {
+    invokeGuardedCallback.apply(this, arguments);
+
+    if (hasError) {
+      var error = clearCaughtError();
+
+      if (!hasRethrowError) {
+        hasRethrowError = true;
+        rethrowError = error;
+      }
+    }
+  }
+  /**
+   * During execution of guarded functions we will capture the first error which
+   * we will rethrow to be handled by the top level error handler.
+   */
+
+  function rethrowCaughtError() {
+    if (hasRethrowError) {
+      var error = rethrowError;
+      hasRethrowError = false;
+      rethrowError = null;
+      throw error;
+    }
+  }
+  function hasCaughtError() {
+    return hasError;
+  }
+  function clearCaughtError() {
+    if (hasError) {
+      var error = caughtError;
+      hasError = false;
+      caughtError = null;
+      return error;
+    } else {
+      {
+        {
+          throw Error( "clearCaughtError was called but no error was captured. This error is likely caused by a bug in React. Please file an issue." );
+        }
+      }
+    }
+  }
+
+  var ReactInternals$1 = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  var _ReactInternals$Sched = ReactInternals$1.Scheduler,
+      unstable_cancelCallback = _ReactInternals$Sched.unstable_cancelCallback,
+      unstable_now = _ReactInternals$Sched.unstable_now,
+      unstable_scheduleCallback = _ReactInternals$Sched.unstable_scheduleCallback,
+      unstable_shouldYield = _ReactInternals$Sched.unstable_shouldYield,
+      unstable_requestPaint = _ReactInternals$Sched.unstable_requestPaint,
+      unstable_getFirstCallbackNode = _ReactInternals$Sched.unstable_getFirstCallbackNode,
+      unstable_runWithPriority = _ReactInternals$Sched.unstable_runWithPriority,
+      unstable_next = _ReactInternals$Sched.unstable_next,
+      unstable_continueExecution = _ReactInternals$Sched.unstable_continueExecution,
+      unstable_pauseExecution = _ReactInternals$Sched.unstable_pauseExecution,
+      unstable_getCurrentPriorityLevel = _ReactInternals$Sched.unstable_getCurrentPriorityLevel,
+      unstable_ImmediatePriority = _ReactInternals$Sched.unstable_ImmediatePriority,
+      unstable_UserBlockingPriority = _ReactInternals$Sched.unstable_UserBlockingPriority,
+      unstable_NormalPriority = _ReactInternals$Sched.unstable_NormalPriority,
+      unstable_LowPriority = _ReactInternals$Sched.unstable_LowPriority,
+      unstable_IdlePriority = _ReactInternals$Sched.unstable_IdlePriority,
+      unstable_forceFrameRate = _ReactInternals$Sched.unstable_forceFrameRate,
+      unstable_flushAllWithoutAsserting = _ReactInternals$Sched.unstable_flushAllWithoutAsserting;
+
+  /**
+   * `ReactInstanceMap` maintains a mapping from a public facing stateful
+   * instance (key) and the internal representation (value). This allows public
+   * methods to accept the user facing instance as an argument and map them back
+   * to internal methods.
+   *
+   * Note that this module is currently shared and assumed to be stateless.
+   * If this becomes an actual Map, that will break.
+   */
+  function get(key) {
+    return key._reactInternals;
+  }
+  function has(key) {
+    return key._reactInternals !== undefined;
+  }
+  function set(key, value) {
+    key._reactInternals = value;
+  }
+
+  // Don't change these two values. They're used by React Dev Tools.
+  var NoFlags =
+  /*                      */
+  0;
+  var PerformedWork =
+  /*                */
+  1; // You can change the rest (and add more).
+
+  var Placement =
+  /*                    */
+  2;
+  var Update =
+  /*                       */
+  4;
+  var PlacementAndUpdate =
+  /*           */
+  6;
+  var Deletion =
+  /*                     */
+  8;
+  var ContentReset =
+  /*                 */
+  16;
+  var Callback =
+  /*                     */
+  32;
+  var DidCapture =
+  /*                   */
+  64;
+  var Ref =
+  /*                          */
+  128;
+  var Snapshot =
+  /*                     */
+  256;
+  var Passive =
+  /*                      */
+  512; // TODO (effects) Remove this bit once the new reconciler is synced to the old.
+
+  var PassiveUnmountPendingDev =
+  /*     */
+  8192;
+  var Hydrating =
+  /*                    */
+  1024;
+  var HydratingAndUpdate =
+  /*           */
+  1028; // Passive & Update & Callback & Ref & Snapshot
+
+  var LifecycleEffectMask =
+  /*          */
+  932; // Union of all host effects
+
+  var HostEffectMask =
+  /*               */
+  2047; // These are not really side effects, but we still reuse this field.
+
+  var Incomplete =
+  /*                   */
+  2048;
+  var ShouldCapture =
+  /*                */
+  4096;
+  var ForceUpdateForLegacySuspense =
+  /* */
+  16384; // Static tags describe aspects of a fiber that are not specific to a render,
+
+  var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
+  function getNearestMountedFiber(fiber) {
+    var node = fiber;
+    var nearestMounted = fiber;
+
+    if (!fiber.alternate) {
+      // If there is no alternate, this might be a new tree that isn't inserted
+      // yet. If it is, then it will have a pending insertion effect on it.
+      var nextNode = node;
+
+      do {
+        node = nextNode;
+
+        if ((node.flags & (Placement | Hydrating)) !== NoFlags) {
+          // This is an insertion or in-progress hydration. The nearest possible
+          // mounted fiber is the parent but we need to continue to figure out
+          // if that one is still mounted.
+          nearestMounted = node.return;
+        }
+
+        nextNode = node.return;
+      } while (nextNode);
+    } else {
+      while (node.return) {
+        node = node.return;
+      }
+    }
+
+    if (node.tag === HostRoot) {
+      // TODO: Check if this was a nested HostRoot when used with
+      // renderContainerIntoSubtree.
+      return nearestMounted;
+    } // If we didn't hit the root, that means that we're in an disconnected tree
+    // that has been unmounted.
+
+
+    return null;
+  }
+  function getSuspenseInstanceFromFiber(fiber) {
+    if (fiber.tag === SuspenseComponent) {
+      var suspenseState = fiber.memoizedState;
+
+      if (suspenseState === null) {
+        var current = fiber.alternate;
+
+        if (current !== null) {
+          suspenseState = current.memoizedState;
+        }
+      }
+
+      if (suspenseState !== null) {
+        return suspenseState.dehydrated;
+      }
+    }
+
+    return null;
+  }
+  function getContainerFromFiber(fiber) {
+    return fiber.tag === HostRoot ? fiber.stateNode.containerInfo : null;
+  }
+  function isFiberMounted(fiber) {
+    return getNearestMountedFiber(fiber) === fiber;
+  }
+  function isMounted(component) {
+    {
+      var owner = ReactCurrentOwner.current;
+
+      if (owner !== null && owner.tag === ClassComponent) {
+        var ownerFiber = owner;
+        var instance = ownerFiber.stateNode;
+
+        if (!instance._warnedAboutRefsInRender) {
+          error('%s is accessing isMounted inside its render() function. ' + 'render() should be a pure function of props and state. It should ' + 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', getComponentName(ownerFiber.type) || 'A component');
+        }
+
+        instance._warnedAboutRefsInRender = true;
+      }
+    }
+
+    var fiber = get(component);
+
+    if (!fiber) {
+      return false;
+    }
+
+    return getNearestMountedFiber(fiber) === fiber;
+  }
+
+  function assertIsMounted(fiber) {
+    if (!(getNearestMountedFiber(fiber) === fiber)) {
+      {
+        throw Error( "Unable to find node on an unmounted component." );
+      }
+    }
+  }
+
+  function findCurrentFiberUsingSlowPath(fiber) {
+    var alternate = fiber.alternate;
+
+    if (!alternate) {
+      // If there is no alternate, then we only need to check if it is mounted.
+      var nearestMounted = getNearestMountedFiber(fiber);
+
+      if (!(nearestMounted !== null)) {
+        {
+          throw Error( "Unable to find node on an unmounted component." );
+        }
+      }
+
+      if (nearestMounted !== fiber) {
+        return null;
+      }
+
+      return fiber;
+    } // If we have two possible branches, we'll walk backwards up to the root
+    // to see what path the root points to. On the way we may hit one of the
+    // special cases and we'll deal with them.
+
+
+    var a = fiber;
+    var b = alternate;
+
+    while (true) {
+      var parentA = a.return;
+
+      if (parentA === null) {
+        // We're at the root.
+        break;
+      }
+
+      var parentB = parentA.alternate;
+
+      if (parentB === null) {
+        // There is no alternate. This is an unusual case. Currently, it only
+        // happens when a Suspense component is hidden. An extra fragment fiber
+        // is inserted in between the Suspense fiber and its children. Skip
+        // over this extra fragment fiber and proceed to the next parent.
+        var nextParent = parentA.return;
+
+        if (nextParent !== null) {
+          a = b = nextParent;
+          continue;
+        } // If there's no parent, we're at the root.
+
+
+        break;
+      } // If both copies of the parent fiber point to the same child, we can
+      // assume that the child is current. This happens when we bailout on low
+      // priority: the bailed out fiber's child reuses the current child.
+
+
+      if (parentA.child === parentB.child) {
+        var child = parentA.child;
+
+        while (child) {
+          if (child === a) {
+            // We've determined that A is the current branch.
+            assertIsMounted(parentA);
+            return fiber;
+          }
+
+          if (child === b) {
+            // We've determined that B is the current branch.
+            assertIsMounted(parentA);
+            return alternate;
+          }
+
+          child = child.sibling;
+        } // We should never have an alternate for any mounting node. So the only
+        // way this could possibly happen is if this was unmounted, if at all.
+
+
+        {
+          {
+            throw Error( "Unable to find node on an unmounted component." );
+          }
+        }
+      }
+
+      if (a.return !== b.return) {
+        // The return pointer of A and the return pointer of B point to different
+        // fibers. We assume that return pointers never criss-cross, so A must
+        // belong to the child set of A.return, and B must belong to the child
+        // set of B.return.
+        a = parentA;
+        b = parentB;
+      } else {
+        // The return pointers point to the same fiber. We'll have to use the
+        // default, slow path: scan the child sets of each parent alternate to see
+        // which child belongs to which set.
+        //
+        // Search parent A's child set
+        var didFindChild = false;
+        var _child = parentA.child;
+
+        while (_child) {
+          if (_child === a) {
+            didFindChild = true;
+            a = parentA;
+            b = parentB;
+            break;
+          }
+
+          if (_child === b) {
+            didFindChild = true;
+            b = parentA;
+            a = parentB;
+            break;
+          }
+
+          _child = _child.sibling;
+        }
+
+        if (!didFindChild) {
+          // Search parent B's child set
+          _child = parentB.child;
+
+          while (_child) {
+            if (_child === a) {
+              didFindChild = true;
+              a = parentB;
+              b = parentA;
+              break;
+            }
+
+            if (_child === b) {
+              didFindChild = true;
+              b = parentB;
+              a = parentA;
+              break;
+            }
+
+            _child = _child.sibling;
+          }
+
+          if (!didFindChild) {
+            {
+              throw Error( "Child was not found in either parent set. This indicates a bug in React related to the return pointer. Please file an issue." );
+            }
+          }
+        }
+      }
+
+      if (!(a.alternate === b)) {
+        {
+          throw Error( "Return fibers should always be each others' alternates. This error is likely caused by a bug in React. Please file an issue." );
+        }
+      }
+    } // If the root is not a host container, we're in a disconnected tree. I.e.
+    // unmounted.
+
+
+    if (!(a.tag === HostRoot)) {
+      {
+        throw Error( "Unable to find node on an unmounted component." );
+      }
+    }
+
+    if (a.stateNode.current === a) {
+      // We've determined that A is the current branch.
+      return fiber;
+    } // Otherwise B has to be current branch.
+
+
+    return alternate;
+  }
+  function findCurrentHostFiber(parent) {
+    var currentParent = findCurrentFiberUsingSlowPath(parent);
+
+    if (!currentParent) {
+      return null;
+    } // Next we'll drill down this component to find the first HostComponent/Text.
+
+
+    var node = currentParent;
+
+    while (true) {
+      if (node.tag === HostComponent || node.tag === HostText) {
+        return node;
+      } else if (node.child) {
+        node.child.return = node;
+        node = node.child;
+        continue;
+      }
+
+      if (node === currentParent) {
+        return null;
+      }
+
+      while (!node.sibling) {
+        if (!node.return || node.return === currentParent) {
+          return null;
+        }
+
+        node = node.return;
+      }
+
+      node.sibling.return = node.return;
+      node = node.sibling;
+    } // Flow needs the return null here, but ESLint complains about it.
+    // eslint-disable-next-line no-unreachable
+
+
+    return null;
+  }
+  function findCurrentHostFiberWithNoPortals(parent) {
+    var currentParent = findCurrentFiberUsingSlowPath(parent);
+
+    if (!currentParent) {
+      return null;
+    } // Next we'll drill down this component to find the first HostComponent/Text.
+
+
+    var node = currentParent;
+
+    while (true) {
+      if (node.tag === HostComponent || node.tag === HostText || enableFundamentalAPI ) {
+        return node;
+      } else if (node.child && node.tag !== HostPortal) {
+        node.child.return = node;
+        node = node.child;
         continue;
       }
 
-      var nextProp = nextProps[propKey];
-
-      if (propKey === STYLE) {
-        {
-          if (nextProp) {
-            // Freeze the next style object so that we can assume it won't be
-            // mutated. We have already warned for this in the past.
-            Object.freeze(nextProp);
-          }
-        } // Relies on `updateStylesByID` not mutating `styleUpdates`.
-
-
-        setValueForStyles(domElement, nextProp);
-      } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
-        var nextHtml = nextProp ? nextProp[HTML$1] : undefined;
-
-        if (nextHtml != null) {
-          setInnerHTML(domElement, nextHtml);
-        }
-      } else if (propKey === CHILDREN) {
-        if (typeof nextProp === 'string') {
-          // Avoid setting initial textContent when the text is empty. In IE11 setting
-          // textContent on a <textarea> will cause the placeholder to not
-          // show within the <textarea> until it has been focused and blurred again.
-          // https://github.com/facebook/react/issues/6731#issuecomment-254874553
-          var canSetTextContent = tag !== 'textarea' || nextProp !== '';
-
-          if (canSetTextContent) {
-            setTextContent(domElement, nextProp);
-          }
-        } else if (typeof nextProp === 'number') {
-          setTextContent(domElement, '' + nextProp);
-        }
-      } else if ( propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING) ; else if (propKey === AUTOFOCUS) ; else if (registrationNameModules.hasOwnProperty(propKey)) {
-        if (nextProp != null) {
-          if ( typeof nextProp !== 'function') {
-            warnForInvalidEventListener(propKey, nextProp);
-          }
-
-          ensureListeningTo(rootContainerElement, propKey);
-        }
-      } else if (nextProp != null) {
-        setValueForProperty(domElement, propKey, nextProp, isCustomComponentTag);
-      }
-    }
-  }
-
-  function updateDOMProperties(domElement, updatePayload, wasCustomComponentTag, isCustomComponentTag) {
-    // TODO: Handle wasCustomComponentTag
-    for (var i = 0; i < updatePayload.length; i += 2) {
-      var propKey = updatePayload[i];
-      var propValue = updatePayload[i + 1];
-
-      if (propKey === STYLE) {
-        setValueForStyles(domElement, propValue);
-      } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
-        setInnerHTML(domElement, propValue);
-      } else if (propKey === CHILDREN) {
-        setTextContent(domElement, propValue);
-      } else {
-        setValueForProperty(domElement, propKey, propValue, isCustomComponentTag);
-      }
-    }
-  }
-
-  function createElement(type, props, rootContainerElement, parentNamespace) {
-    var isCustomComponentTag; // We create tags in the namespace of their parent container, except HTML
-    // tags get no namespace.
-
-    var ownerDocument = getOwnerDocumentFromRootContainer(rootContainerElement);
-    var domElement;
-    var namespaceURI = parentNamespace;
-
-    if (namespaceURI === HTML_NAMESPACE$1) {
-      namespaceURI = getIntrinsicNamespace(type);
-    }
-
-    if (namespaceURI === HTML_NAMESPACE$1) {
-      {
-        isCustomComponentTag = isCustomComponent(type, props); // Should this check be gated by parent namespace? Not sure we want to
-        // allow <SVG> or <mATH>.
-
-        if (!isCustomComponentTag && type !== type.toLowerCase()) {
-          error('<%s /> is using incorrect casing. ' + 'Use PascalCase for React components, ' + 'or lowercase for HTML elements.', type);
-        }
-      }
-
-      if (type === 'script') {
-        // Create the script via .innerHTML so its "parser-inserted" flag is
-        // set to true and it does not execute
-        var div = ownerDocument.createElement('div');
-
-        div.innerHTML = '<script><' + '/script>'; // eslint-disable-line
-        // This is guaranteed to yield a script element.
-
-        var firstChild = div.firstChild;
-        domElement = div.removeChild(firstChild);
-      } else if (typeof props.is === 'string') {
-        // $FlowIssue `createElement` should be updated for Web Components
-        domElement = ownerDocument.createElement(type, {
-          is: props.is
-        });
-      } else {
-        // Separate else branch instead of using `props.is || undefined` above because of a Firefox bug.
-        // See discussion in https://github.com/facebook/react/pull/6896
-        // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240
-        domElement = ownerDocument.createElement(type); // Normally attributes are assigned in `setInitialDOMProperties`, however the `multiple` and `size`
-        // attributes on `select`s needs to be added before `option`s are inserted.
-        // This prevents:
-        // - a bug where the `select` does not scroll to the correct option because singular
-        //  `select` elements automatically pick the first item #13222
-        // - a bug where the `select` set the first item as selected despite the `size` attribute #14239
-        // See https://github.com/facebook/react/issues/13222
-        // and https://github.com/facebook/react/issues/14239
-
-        if (type === 'select') {
-          var node = domElement;
-
-          if (props.multiple) {
-            node.multiple = true;
-          } else if (props.size) {
-            // Setting a size greater than 1 causes a select to behave like `multiple=true`, where
-            // it is possible that no option is selected.
-            //
-            // This is only necessary when a select in "single selection mode".
-            node.size = props.size;
-          }
-        }
-      }
-    } else {
-      domElement = ownerDocument.createElementNS(namespaceURI, type);
-    }
-
-    {
-      if (namespaceURI === HTML_NAMESPACE$1) {
-        if (!isCustomComponentTag && Object.prototype.toString.call(domElement) === '[object HTMLUnknownElement]' && !Object.prototype.hasOwnProperty.call(warnedUnknownTags, type)) {
-          warnedUnknownTags[type] = true;
-
-          error('The tag <%s> is unrecognized in this browser. ' + 'If you meant to render a React component, start its name with ' + 'an uppercase letter.', type);
-        }
-      }
-    }
-
-    return domElement;
-  }
-  function createTextNode(text, rootContainerElement) {
-    return getOwnerDocumentFromRootContainer(rootContainerElement).createTextNode(text);
-  }
-  function setInitialProperties(domElement, tag, rawProps, rootContainerElement) {
-    var isCustomComponentTag = isCustomComponent(tag, rawProps);
-
-    {
-      validatePropertiesInDevelopment(tag, rawProps);
-    } // TODO: Make sure that we check isMounted before firing any of these events.
-
-
-    var props;
-
-    switch (tag) {
-      case 'iframe':
-      case 'object':
-      case 'embed':
-        trapBubbledEvent(TOP_LOAD, domElement);
-        props = rawProps;
-        break;
-
-      case 'video':
-      case 'audio':
-        // Create listener for each media event
-        for (var i = 0; i < mediaEventTypes.length; i++) {
-          trapBubbledEvent(mediaEventTypes[i], domElement);
-        }
-
-        props = rawProps;
-        break;
-
-      case 'source':
-        trapBubbledEvent(TOP_ERROR, domElement);
-        props = rawProps;
-        break;
-
-      case 'img':
-      case 'image':
-      case 'link':
-        trapBubbledEvent(TOP_ERROR, domElement);
-        trapBubbledEvent(TOP_LOAD, domElement);
-        props = rawProps;
-        break;
-
-      case 'form':
-        trapBubbledEvent(TOP_RESET, domElement);
-        trapBubbledEvent(TOP_SUBMIT, domElement);
-        props = rawProps;
-        break;
-
-      case 'details':
-        trapBubbledEvent(TOP_TOGGLE, domElement);
-        props = rawProps;
-        break;
-
-      case 'input':
-        initWrapperState(domElement, rawProps);
-        props = getHostProps(domElement, rawProps);
-        trapBubbledEvent(TOP_INVALID, domElement); // For controlled components we always need to ensure we're listening
-        // to onChange. Even if there is no listener.
-
-        ensureListeningTo(rootContainerElement, 'onChange');
-        break;
-
-      case 'option':
-        validateProps(domElement, rawProps);
-        props = getHostProps$1(domElement, rawProps);
-        break;
-
-      case 'select':
-        initWrapperState$1(domElement, rawProps);
-        props = getHostProps$2(domElement, rawProps);
-        trapBubbledEvent(TOP_INVALID, domElement); // For controlled components we always need to ensure we're listening
-        // to onChange. Even if there is no listener.
-
-        ensureListeningTo(rootContainerElement, 'onChange');
-        break;
-
-      case 'textarea':
-        initWrapperState$2(domElement, rawProps);
-        props = getHostProps$3(domElement, rawProps);
-        trapBubbledEvent(TOP_INVALID, domElement); // For controlled components we always need to ensure we're listening
-        // to onChange. Even if there is no listener.
-
-        ensureListeningTo(rootContainerElement, 'onChange');
-        break;
+      if (node === currentParent) {
+        return null;
+      }
+
+      while (!node.sibling) {
+        if (!node.return || node.return === currentParent) {
+          return null;
+        }
+
+        node = node.return;
+      }
+
+      node.sibling.return = node.return;
+      node = node.sibling;
+    } // Flow needs the return null here, but ESLint complains about it.
+    // eslint-disable-next-line no-unreachable
+
+
+    return null;
+  }
+  function doesFiberContain(parentFiber, childFiber) {
+    var node = childFiber;
+    var parentFiberAlternate = parentFiber.alternate;
+
+    while (node !== null) {
+      if (node === parentFiber || node === parentFiberAlternate) {
+        return true;
+      }
+
+      node = node.return;
+    }
+
+    return false;
+  }
+
+  var attemptUserBlockingHydration;
+  function setAttemptUserBlockingHydration(fn) {
+    attemptUserBlockingHydration = fn;
+  }
+  var attemptContinuousHydration;
+  function setAttemptContinuousHydration(fn) {
+    attemptContinuousHydration = fn;
+  }
+  var attemptHydrationAtCurrentPriority;
+  function setAttemptHydrationAtCurrentPriority(fn) {
+    attemptHydrationAtCurrentPriority = fn;
+  }
+  var attemptHydrationAtPriority;
+  function setAttemptHydrationAtPriority(fn) {
+    attemptHydrationAtPriority = fn;
+  } // TODO: Upgrade this definition once we're on a newer version of Flow that
+  var hasScheduledReplayAttempt = false; // The queue of discrete events to be replayed.
+
+  var queuedDiscreteEvents = []; // Indicates if any continuous event targets are non-null for early bailout.
+  // if the last target was dehydrated.
+
+  var queuedFocus = null;
+  var queuedDrag = null;
+  var queuedMouse = null; // For pointer events there can be one latest event per pointerId.
+
+  var queuedPointers = new Map();
+  var queuedPointerCaptures = new Map(); // We could consider replaying selectionchange and touchmoves too.
+
+  var queuedExplicitHydrationTargets = [];
+  function hasQueuedDiscreteEvents() {
+    return queuedDiscreteEvents.length > 0;
+  }
+  var discreteReplayableEvents = ['mousedown', 'mouseup', 'touchcancel', 'touchend', 'touchstart', 'auxclick', 'dblclick', 'pointercancel', 'pointerdown', 'pointerup', 'dragend', 'dragstart', 'drop', 'compositionend', 'compositionstart', 'keydown', 'keypress', 'keyup', 'input', 'textInput', // Intentionally camelCase
+  'copy', 'cut', 'paste', 'click', 'change', 'contextmenu', 'reset', 'submit'];
+  function isReplayableDiscreteEvent(eventType) {
+    return discreteReplayableEvents.indexOf(eventType) > -1;
+  }
+
+  function createQueuedReplayableEvent(blockedOn, domEventName, eventSystemFlags, targetContainer, nativeEvent) {
+    return {
+      blockedOn: blockedOn,
+      domEventName: domEventName,
+      eventSystemFlags: eventSystemFlags | IS_REPLAYED,
+      nativeEvent: nativeEvent,
+      targetContainers: [targetContainer]
+    };
+  }
+
+  function queueDiscreteEvent(blockedOn, domEventName, eventSystemFlags, targetContainer, nativeEvent) {
+    var queuedEvent = createQueuedReplayableEvent(blockedOn, domEventName, eventSystemFlags, targetContainer, nativeEvent);
+    queuedDiscreteEvents.push(queuedEvent);
+  } // Resets the replaying for this type of continuous event to no event.
+
+  function clearIfContinuousEvent(domEventName, nativeEvent) {
+    switch (domEventName) {
+      case 'focusin':
+      case 'focusout':
+        queuedFocus = null;
+        break;
+
+      case 'dragenter':
+      case 'dragleave':
+        queuedDrag = null;
+        break;
+
+      case 'mouseover':
+      case 'mouseout':
+        queuedMouse = null;
+        break;
+
+      case 'pointerover':
+      case 'pointerout':
+        {
+          var pointerId = nativeEvent.pointerId;
+          queuedPointers.delete(pointerId);
+          break;
+        }
+
+      case 'gotpointercapture':
+      case 'lostpointercapture':
+        {
+          var _pointerId = nativeEvent.pointerId;
+          queuedPointerCaptures.delete(_pointerId);
+          break;
+        }
+    }
+  }
+
+  function accumulateOrCreateContinuousQueuedReplayableEvent(existingQueuedEvent, blockedOn, domEventName, eventSystemFlags, targetContainer, nativeEvent) {
+    if (existingQueuedEvent === null || existingQueuedEvent.nativeEvent !== nativeEvent) {
+      var queuedEvent = createQueuedReplayableEvent(blockedOn, domEventName, eventSystemFlags, targetContainer, nativeEvent);
+
+      if (blockedOn !== null) {
+        var _fiber2 = getInstanceFromNode(blockedOn);
+
+        if (_fiber2 !== null) {
+          // Attempt to increase the priority of this target.
+          attemptContinuousHydration(_fiber2);
+        }
+      }
+
+      return queuedEvent;
+    } // If we have already queued this exact event, then it's because
+    // the different event systems have different DOM event listeners.
+    // We can accumulate the flags, and the targetContainers, and
+    // store a single event to be replayed.
+
+
+    existingQueuedEvent.eventSystemFlags |= eventSystemFlags;
+    var targetContainers = existingQueuedEvent.targetContainers;
+
+    if (targetContainer !== null && targetContainers.indexOf(targetContainer) === -1) {
+      targetContainers.push(targetContainer);
+    }
+
+    return existingQueuedEvent;
+  }
+
+  function queueIfContinuousEvent(blockedOn, domEventName, eventSystemFlags, targetContainer, nativeEvent) {
+    // These set relatedTarget to null because the replayed event will be treated as if we
+    // moved from outside the window (no target) onto the target once it hydrates.
+    // Instead of mutating we could clone the event.
+    switch (domEventName) {
+      case 'focusin':
+        {
+          var focusEvent = nativeEvent;
+          queuedFocus = accumulateOrCreateContinuousQueuedReplayableEvent(queuedFocus, blockedOn, domEventName, eventSystemFlags, targetContainer, focusEvent);
+          return true;
+        }
+
+      case 'dragenter':
+        {
+          var dragEvent = nativeEvent;
+          queuedDrag = accumulateOrCreateContinuousQueuedReplayableEvent(queuedDrag, blockedOn, domEventName, eventSystemFlags, targetContainer, dragEvent);
+          return true;
+        }
+
+      case 'mouseover':
+        {
+          var mouseEvent = nativeEvent;
+          queuedMouse = accumulateOrCreateContinuousQueuedReplayableEvent(queuedMouse, blockedOn, domEventName, eventSystemFlags, targetContainer, mouseEvent);
+          return true;
+        }
+
+      case 'pointerover':
+        {
+          var pointerEvent = nativeEvent;
+          var pointerId = pointerEvent.pointerId;
+          queuedPointers.set(pointerId, accumulateOrCreateContinuousQueuedReplayableEvent(queuedPointers.get(pointerId) || null, blockedOn, domEventName, eventSystemFlags, targetContainer, pointerEvent));
+          return true;
+        }
+
+      case 'gotpointercapture':
+        {
+          var _pointerEvent = nativeEvent;
+          var _pointerId2 = _pointerEvent.pointerId;
+          queuedPointerCaptures.set(_pointerId2, accumulateOrCreateContinuousQueuedReplayableEvent(queuedPointerCaptures.get(_pointerId2) || null, blockedOn, domEventName, eventSystemFlags, targetContainer, _pointerEvent));
+          return true;
+        }
+    }
+
+    return false;
+  } // Check if this target is unblocked. Returns true if it's unblocked.
+
+  function attemptExplicitHydrationTarget(queuedTarget) {
+    // TODO: This function shares a lot of logic with attemptToDispatchEvent.
+    // Try to unify them. It's a bit tricky since it would require two return
+    // values.
+    var targetInst = getClosestInstanceFromNode(queuedTarget.target);
+
+    if (targetInst !== null) {
+      var nearestMounted = getNearestMountedFiber(targetInst);
+
+      if (nearestMounted !== null) {
+        var tag = nearestMounted.tag;
+
+        if (tag === SuspenseComponent) {
+          var instance = getSuspenseInstanceFromFiber(nearestMounted);
+
+          if (instance !== null) {
+            // We're blocked on hydrating this boundary.
+            // Increase its priority.
+            queuedTarget.blockedOn = instance;
+            attemptHydrationAtPriority(queuedTarget.lanePriority, function () {
+              unstable_runWithPriority(queuedTarget.priority, function () {
+                attemptHydrationAtCurrentPriority(nearestMounted);
+              });
+            });
+            return;
+          }
+        } else if (tag === HostRoot) {
+          var root = nearestMounted.stateNode;
+
+          if (root.hydrate) {
+            queuedTarget.blockedOn = getContainerFromFiber(nearestMounted); // We don't currently have a way to increase the priority of
+            // a root other than sync.
+
+            return;
+          }
+        }
+      }
+    }
+
+    queuedTarget.blockedOn = null;
+  }
+
+  function attemptReplayContinuousQueuedEvent(queuedEvent) {
+    if (queuedEvent.blockedOn !== null) {
+      return false;
+    }
+
+    var targetContainers = queuedEvent.targetContainers;
+
+    while (targetContainers.length > 0) {
+      var targetContainer = targetContainers[0];
+      var nextBlockedOn = attemptToDispatchEvent(queuedEvent.domEventName, queuedEvent.eventSystemFlags, targetContainer, queuedEvent.nativeEvent);
+
+      if (nextBlockedOn !== null) {
+        // We're still blocked. Try again later.
+        var _fiber3 = getInstanceFromNode(nextBlockedOn);
+
+        if (_fiber3 !== null) {
+          attemptContinuousHydration(_fiber3);
+        }
+
+        queuedEvent.blockedOn = nextBlockedOn;
+        return false;
+      } // This target container was successfully dispatched. Try the next.
+
+
+      targetContainers.shift();
+    }
+
+    return true;
+  }
+
+  function attemptReplayContinuousQueuedEventInMap(queuedEvent, key, map) {
+    if (attemptReplayContinuousQueuedEvent(queuedEvent)) {
+      map.delete(key);
+    }
+  }
+
+  function replayUnblockedEvents() {
+    hasScheduledReplayAttempt = false; // First replay discrete events.
+
+    while (queuedDiscreteEvents.length > 0) {
+      var nextDiscreteEvent = queuedDiscreteEvents[0];
+
+      if (nextDiscreteEvent.blockedOn !== null) {
+        // We're still blocked.
+        // Increase the priority of this boundary to unblock
+        // the next discrete event.
+        var _fiber4 = getInstanceFromNode(nextDiscreteEvent.blockedOn);
+
+        if (_fiber4 !== null) {
+          attemptUserBlockingHydration(_fiber4);
+        }
+
+        break;
+      }
+
+      var targetContainers = nextDiscreteEvent.targetContainers;
+
+      while (targetContainers.length > 0) {
+        var targetContainer = targetContainers[0];
+        var nextBlockedOn = attemptToDispatchEvent(nextDiscreteEvent.domEventName, nextDiscreteEvent.eventSystemFlags, targetContainer, nextDiscreteEvent.nativeEvent);
+
+        if (nextBlockedOn !== null) {
+          // We're still blocked. Try again later.
+          nextDiscreteEvent.blockedOn = nextBlockedOn;
+          break;
+        } // This target container was successfully dispatched. Try the next.
+
+
+        targetContainers.shift();
+      }
+
+      if (nextDiscreteEvent.blockedOn === null) {
+        // We've successfully replayed the first event. Let's try the next one.
+        queuedDiscreteEvents.shift();
+      }
+    } // Next replay any continuous events.
+
+
+    if (queuedFocus !== null && attemptReplayContinuousQueuedEvent(queuedFocus)) {
+      queuedFocus = null;
+    }
+
+    if (queuedDrag !== null && attemptReplayContinuousQueuedEvent(queuedDrag)) {
+      queuedDrag = null;
+    }
+
+    if (queuedMouse !== null && attemptReplayContinuousQueuedEvent(queuedMouse)) {
+      queuedMouse = null;
+    }
+
+    queuedPointers.forEach(attemptReplayContinuousQueuedEventInMap);
+    queuedPointerCaptures.forEach(attemptReplayContinuousQueuedEventInMap);
+  }
+
+  function scheduleCallbackIfUnblocked(queuedEvent, unblocked) {
+    if (queuedEvent.blockedOn === unblocked) {
+      queuedEvent.blockedOn = null;
+
+      if (!hasScheduledReplayAttempt) {
+        hasScheduledReplayAttempt = true; // Schedule a callback to attempt replaying as many events as are
+        // now unblocked. This first might not actually be unblocked yet.
+        // We could check it early to avoid scheduling an unnecessary callback.
+
+        unstable_scheduleCallback(unstable_NormalPriority, replayUnblockedEvents);
+      }
+    }
+  }
+
+  function retryIfBlockedOn(unblocked) {
+    // Mark anything that was blocked on this as no longer blocked
+    // and eligible for a replay.
+    if (queuedDiscreteEvents.length > 0) {
+      scheduleCallbackIfUnblocked(queuedDiscreteEvents[0], unblocked); // This is a exponential search for each boundary that commits. I think it's
+      // worth it because we expect very few discrete events to queue up and once
+      // we are actually fully unblocked it will be fast to replay them.
+
+      for (var i = 1; i < queuedDiscreteEvents.length; i++) {
+        var queuedEvent = queuedDiscreteEvents[i];
+
+        if (queuedEvent.blockedOn === unblocked) {
+          queuedEvent.blockedOn = null;
+        }
+      }
+    }
+
+    if (queuedFocus !== null) {
+      scheduleCallbackIfUnblocked(queuedFocus, unblocked);
+    }
+
+    if (queuedDrag !== null) {
+      scheduleCallbackIfUnblocked(queuedDrag, unblocked);
+    }
+
+    if (queuedMouse !== null) {
+      scheduleCallbackIfUnblocked(queuedMouse, unblocked);
+    }
+
+    var unblock = function (queuedEvent) {
+      return scheduleCallbackIfUnblocked(queuedEvent, unblocked);
+    };
+
+    queuedPointers.forEach(unblock);
+    queuedPointerCaptures.forEach(unblock);
+
+    for (var _i = 0; _i < queuedExplicitHydrationTargets.length; _i++) {
+      var queuedTarget = queuedExplicitHydrationTargets[_i];
+
+      if (queuedTarget.blockedOn === unblocked) {
+        queuedTarget.blockedOn = null;
+      }
+    }
+
+    while (queuedExplicitHydrationTargets.length > 0) {
+      var nextExplicitTarget = queuedExplicitHydrationTargets[0];
+
+      if (nextExplicitTarget.blockedOn !== null) {
+        // We're still blocked.
+        break;
+      } else {
+        attemptExplicitHydrationTarget(nextExplicitTarget);
+
+        if (nextExplicitTarget.blockedOn === null) {
+          // We're unblocked.
+          queuedExplicitHydrationTargets.shift();
+        }
+      }
+    }
+  }
+
+  var DiscreteEvent = 0;
+  var UserBlockingEvent = 1;
+  var ContinuousEvent = 2;
+
+  /**
+   * Generate a mapping of standard vendor prefixes using the defined style property and event name.
+   *
+   * @param {string} styleProp
+   * @param {string} eventName
+   * @returns {object}
+   */
+
+  function makePrefixMap(styleProp, eventName) {
+    var prefixes = {};
+    prefixes[styleProp.toLowerCase()] = eventName.toLowerCase();
+    prefixes['Webkit' + styleProp] = 'webkit' + eventName;
+    prefixes['Moz' + styleProp] = 'moz' + eventName;
+    return prefixes;
+  }
+  /**
+   * A list of event names to a configurable list of vendor prefixes.
+   */
+
+
+  var vendorPrefixes = {
+    animationend: makePrefixMap('Animation', 'AnimationEnd'),
+    animationiteration: makePrefixMap('Animation', 'AnimationIteration'),
+    animationstart: makePrefixMap('Animation', 'AnimationStart'),
+    transitionend: makePrefixMap('Transition', 'TransitionEnd')
+  };
+  /**
+   * Event names that have already been detected and prefixed (if applicable).
+   */
+
+  var prefixedEventNames = {};
+  /**
+   * Element to check for prefixes on.
+   */
+
+  var style = {};
+  /**
+   * Bootstrap if a DOM exists.
+   */
+
+  if (canUseDOM) {
+    style = document.createElement('div').style; // On some platforms, in particular some releases of Android 4.x,
+    // the un-prefixed "animation" and "transition" properties are defined on the
+    // style object but the events that fire will still be prefixed, so we need
+    // to check if the un-prefixed events are usable, and if not remove them from the map.
+
+    if (!('AnimationEvent' in window)) {
+      delete vendorPrefixes.animationend.animation;
+      delete vendorPrefixes.animationiteration.animation;
+      delete vendorPrefixes.animationstart.animation;
+    } // Same as above
+
+
+    if (!('TransitionEvent' in window)) {
+      delete vendorPrefixes.transitionend.transition;
+    }
+  }
+  /**
+   * Attempts to determine the correct vendor prefixed event name.
+   *
+   * @param {string} eventName
+   * @returns {string}
+   */
+
+
+  function getVendorPrefixedEventName(eventName) {
+    if (prefixedEventNames[eventName]) {
+      return prefixedEventNames[eventName];
+    } else if (!vendorPrefixes[eventName]) {
+      return eventName;
+    }
+
+    var prefixMap = vendorPrefixes[eventName];
+
+    for (var styleProp in prefixMap) {
+      if (prefixMap.hasOwnProperty(styleProp) && styleProp in style) {
+        return prefixedEventNames[eventName] = prefixMap[styleProp];
+      }
+    }
+
+    return eventName;
+  }
+
+  var ANIMATION_END = getVendorPrefixedEventName('animationend');
+  var ANIMATION_ITERATION = getVendorPrefixedEventName('animationiteration');
+  var ANIMATION_START = getVendorPrefixedEventName('animationstart');
+  var TRANSITION_END = getVendorPrefixedEventName('transitionend');
+
+  var topLevelEventsToReactNames = new Map();
+  var eventPriorities = new Map(); // We store most of the events in this module in pairs of two strings so we can re-use
+  // the code required to apply the same logic for event prioritization and that of the
+  // SimpleEventPlugin. This complicates things slightly, but the aim is to reduce code
+  // duplication (for which there would be quite a bit). For the events that are not needed
+  // for the SimpleEventPlugin (otherDiscreteEvents) we process them separately as an
+  // array of top level events.
+  // Lastly, we ignore prettier so we can keep the formatting sane.
+  // prettier-ignore
+
+  var discreteEventPairsForSimpleEventPlugin = ['cancel', 'cancel', 'click', 'click', 'close', 'close', 'contextmenu', 'contextMenu', 'copy', 'copy', 'cut', 'cut', 'auxclick', 'auxClick', 'dblclick', 'doubleClick', // Careful!
+  'dragend', 'dragEnd', 'dragstart', 'dragStart', 'drop', 'drop', 'focusin', 'focus', // Careful!
+  'focusout', 'blur', // Careful!
+  'input', 'input', 'invalid', 'invalid', 'keydown', 'keyDown', 'keypress', 'keyPress', 'keyup', 'keyUp', 'mousedown', 'mouseDown', 'mouseup', 'mouseUp', 'paste', 'paste', 'pause', 'pause', 'play', 'play', 'pointercancel', 'pointerCancel', 'pointerdown', 'pointerDown', 'pointerup', 'pointerUp', 'ratechange', 'rateChange', 'reset', 'reset', 'seeked', 'seeked', 'submit', 'submit', 'touchcancel', 'touchCancel', 'touchend', 'touchEnd', 'touchstart', 'touchStart', 'volumechange', 'volumeChange'];
+  var otherDiscreteEvents = ['change', 'selectionchange', 'textInput', 'compositionstart', 'compositionend', 'compositionupdate'];
+
+
+  var userBlockingPairsForSimpleEventPlugin = ['drag', 'drag', 'dragenter', 'dragEnter', 'dragexit', 'dragExit', 'dragleave', 'dragLeave', 'dragover', 'dragOver', 'mousemove', 'mouseMove', 'mouseout', 'mouseOut', 'mouseover', 'mouseOver', 'pointermove', 'pointerMove', 'pointerout', 'pointerOut', 'pointerover', 'pointerOver', 'scroll', 'scroll', 'toggle', 'toggle', 'touchmove', 'touchMove', 'wheel', 'wheel']; // prettier-ignore
+
+  var continuousPairsForSimpleEventPlugin = ['abort', 'abort', ANIMATION_END, 'animationEnd', ANIMATION_ITERATION, 'animationIteration', ANIMATION_START, 'animationStart', 'canplay', 'canPlay', 'canplaythrough', 'canPlayThrough', 'durationchange', 'durationChange', 'emptied', 'emptied', 'encrypted', 'encrypted', 'ended', 'ended', 'error', 'error', 'gotpointercapture', 'gotPointerCapture', 'load', 'load', 'loadeddata', 'loadedData', 'loadedmetadata', 'loadedMetadata', 'loadstart', 'loadStart', 'lostpointercapture', 'lostPointerCapture', 'playing', 'playing', 'progress', 'progress', 'seeking', 'seeking', 'stalled', 'stalled', 'suspend', 'suspend', 'timeupdate', 'timeUpdate', TRANSITION_END, 'transitionEnd', 'waiting', 'waiting'];
+  /**
+   * Turns
+   * ['abort', ...]
+   *
+   * into
+   *
+   * topLevelEventsToReactNames = new Map([
+   *   ['abort', 'onAbort'],
+   * ]);
+   *
+   * and registers them.
+   */
+
+  function registerSimplePluginEventsAndSetTheirPriorities(eventTypes, priority) {
+    // As the event types are in pairs of two, we need to iterate
+    // through in twos. The events are in pairs of two to save code
+    // and improve init perf of processing this array, as it will
+    // result in far fewer object allocations and property accesses
+    // if we only use three arrays to process all the categories of
+    // instead of tuples.
+    for (var i = 0; i < eventTypes.length; i += 2) {
+      var topEvent = eventTypes[i];
+      var event = eventTypes[i + 1];
+      var capitalizedEvent = event[0].toUpperCase() + event.slice(1);
+      var reactName = 'on' + capitalizedEvent;
+      eventPriorities.set(topEvent, priority);
+      topLevelEventsToReactNames.set(topEvent, reactName);
+      registerTwoPhaseEvent(reactName, [topEvent]);
+    }
+  }
+
+  function setEventPriorities(eventTypes, priority) {
+    for (var i = 0; i < eventTypes.length; i++) {
+      eventPriorities.set(eventTypes[i], priority);
+    }
+  }
+
+  function getEventPriorityForPluginSystem(domEventName) {
+    var priority = eventPriorities.get(domEventName); // Default to a ContinuousEvent. Note: we might
+    // want to warn if we can't detect the priority
+    // for the event.
+
+    return priority === undefined ? ContinuousEvent : priority;
+  }
+  function registerSimpleEvents() {
+    registerSimplePluginEventsAndSetTheirPriorities(discreteEventPairsForSimpleEventPlugin, DiscreteEvent);
+    registerSimplePluginEventsAndSetTheirPriorities(userBlockingPairsForSimpleEventPlugin, UserBlockingEvent);
+    registerSimplePluginEventsAndSetTheirPriorities(continuousPairsForSimpleEventPlugin, ContinuousEvent);
+    setEventPriorities(otherDiscreteEvents, DiscreteEvent);
+  }
+
+  var ReactInternals$2 = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  var _ReactInternals$Sched$1 = ReactInternals$2.SchedulerTracing,
+      __interactionsRef = _ReactInternals$Sched$1.__interactionsRef,
+      __subscriberRef = _ReactInternals$Sched$1.__subscriberRef,
+      unstable_clear = _ReactInternals$Sched$1.unstable_clear,
+      unstable_getCurrent = _ReactInternals$Sched$1.unstable_getCurrent,
+      unstable_getThreadID = _ReactInternals$Sched$1.unstable_getThreadID,
+      unstable_subscribe = _ReactInternals$Sched$1.unstable_subscribe,
+      unstable_trace = _ReactInternals$Sched$1.unstable_trace,
+      unstable_unsubscribe = _ReactInternals$Sched$1.unstable_unsubscribe,
+      unstable_wrap = _ReactInternals$Sched$1.unstable_wrap;
+
+  var Scheduler_now = unstable_now;
+
+  {
+    // Provide explicit error message when production+profiling bundle of e.g.
+    // react-dom is used with production (non-profiling) bundle of
+    // scheduler/tracing
+    if (!(__interactionsRef != null && __interactionsRef.current != null)) {
+      {
+        throw Error( "It is not supported to run the profiling version of a renderer (for example, `react-dom/profiling`) without also replacing the `scheduler/tracing` module with `scheduler/tracing-profiling`. Your bundler might have a setting for aliasing both modules. Learn more at https://reactjs.org/link/profiling" );
+      }
+    }
+  }
+  // ascending numbers so we can compare them like numbers. They start at 90 to
+  // avoid clashing with Scheduler's priorities.
+
+  var ImmediatePriority = 99;
+  var UserBlockingPriority = 98;
+  var NormalPriority = 97;
+  var LowPriority = 96;
+  var IdlePriority = 95; // NoPriority is the absence of priority. Also React-only.
+
+  var NoPriority = 90;
+  var initialTimeMs = Scheduler_now(); // If the initial timestamp is reasonably small, use Scheduler's `now` directly.
+
+  var SyncLanePriority = 15;
+  var SyncBatchedLanePriority = 14;
+  var InputDiscreteHydrationLanePriority = 13;
+  var InputDiscreteLanePriority = 12;
+  var InputContinuousHydrationLanePriority = 11;
+  var InputContinuousLanePriority = 10;
+  var DefaultHydrationLanePriority = 9;
+  var DefaultLanePriority = 8;
+  var TransitionHydrationPriority = 7;
+  var TransitionPriority = 6;
+  var RetryLanePriority = 5;
+  var SelectiveHydrationLanePriority = 4;
+  var IdleHydrationLanePriority = 3;
+  var IdleLanePriority = 2;
+  var OffscreenLanePriority = 1;
+  var NoLanePriority = 0;
+  var TotalLanes = 31;
+  var NoLanes =
+  /*                        */
+  0;
+  var NoLane =
+  /*                          */
+  0;
+  var SyncLane =
+  /*                        */
+  1;
+  var SyncBatchedLane =
+  /*                 */
+  2;
+  var InputDiscreteHydrationLane =
+  /*      */
+  4;
+  var InputDiscreteLanes =
+  /*                    */
+  24;
+  var InputContinuousHydrationLane =
+  /*           */
+  32;
+  var InputContinuousLanes =
+  /*                  */
+  192;
+  var DefaultHydrationLane =
+  /*            */
+  256;
+  var DefaultLanes =
+  /*                   */
+  3584;
+  var TransitionHydrationLane =
+  /*                */
+  4096;
+  var TransitionLanes =
+  /*                       */
+  4186112;
+  var RetryLanes =
+  /*                            */
+  62914560;
+  var SomeRetryLane =
+  /*                  */
+  33554432;
+  var SelectiveHydrationLane =
+  /*          */
+  67108864;
+  var NonIdleLanes =
+  /*                                 */
+  134217727;
+  var IdleHydrationLane =
+  /*               */
+  134217728;
+  var IdleLanes =
+  /*                             */
+  805306368;
+  var OffscreenLane =
+  /*                   */
+  1073741824;
+  var NoTimestamp = -1;
+  function setCurrentUpdateLanePriority(newLanePriority) {
+  } // "Registers" used to "return" multiple values
+  // Used by getHighestPriorityLanes and getNextLanes:
+
+  var return_highestLanePriority = DefaultLanePriority;
+
+  function getHighestPriorityLanes(lanes) {
+    if ((SyncLane & lanes) !== NoLanes) {
+      return_highestLanePriority = SyncLanePriority;
+      return SyncLane;
+    }
+
+    if ((SyncBatchedLane & lanes) !== NoLanes) {
+      return_highestLanePriority = SyncBatchedLanePriority;
+      return SyncBatchedLane;
+    }
+
+    if ((InputDiscreteHydrationLane & lanes) !== NoLanes) {
+      return_highestLanePriority = InputDiscreteHydrationLanePriority;
+      return InputDiscreteHydrationLane;
+    }
+
+    var inputDiscreteLanes = InputDiscreteLanes & lanes;
+
+    if (inputDiscreteLanes !== NoLanes) {
+      return_highestLanePriority = InputDiscreteLanePriority;
+      return inputDiscreteLanes;
+    }
+
+    if ((lanes & InputContinuousHydrationLane) !== NoLanes) {
+      return_highestLanePriority = InputContinuousHydrationLanePriority;
+      return InputContinuousHydrationLane;
+    }
+
+    var inputContinuousLanes = InputContinuousLanes & lanes;
+
+    if (inputContinuousLanes !== NoLanes) {
+      return_highestLanePriority = InputContinuousLanePriority;
+      return inputContinuousLanes;
+    }
+
+    if ((lanes & DefaultHydrationLane) !== NoLanes) {
+      return_highestLanePriority = DefaultHydrationLanePriority;
+      return DefaultHydrationLane;
+    }
+
+    var defaultLanes = DefaultLanes & lanes;
+
+    if (defaultLanes !== NoLanes) {
+      return_highestLanePriority = DefaultLanePriority;
+      return defaultLanes;
+    }
+
+    if ((lanes & TransitionHydrationLane) !== NoLanes) {
+      return_highestLanePriority = TransitionHydrationPriority;
+      return TransitionHydrationLane;
+    }
+
+    var transitionLanes = TransitionLanes & lanes;
+
+    if (transitionLanes !== NoLanes) {
+      return_highestLanePriority = TransitionPriority;
+      return transitionLanes;
+    }
+
+    var retryLanes = RetryLanes & lanes;
+
+    if (retryLanes !== NoLanes) {
+      return_highestLanePriority = RetryLanePriority;
+      return retryLanes;
+    }
+
+    if (lanes & SelectiveHydrationLane) {
+      return_highestLanePriority = SelectiveHydrationLanePriority;
+      return SelectiveHydrationLane;
+    }
+
+    if ((lanes & IdleHydrationLane) !== NoLanes) {
+      return_highestLanePriority = IdleHydrationLanePriority;
+      return IdleHydrationLane;
+    }
+
+    var idleLanes = IdleLanes & lanes;
+
+    if (idleLanes !== NoLanes) {
+      return_highestLanePriority = IdleLanePriority;
+      return idleLanes;
+    }
+
+    if ((OffscreenLane & lanes) !== NoLanes) {
+      return_highestLanePriority = OffscreenLanePriority;
+      return OffscreenLane;
+    }
+
+    {
+      error('Should have found matching lanes. This is a bug in React.');
+    } // This shouldn't be reachable, but as a fallback, return the entire bitmask.
+
+
+    return_highestLanePriority = DefaultLanePriority;
+    return lanes;
+  }
+
+  function schedulerPriorityToLanePriority(schedulerPriorityLevel) {
+    switch (schedulerPriorityLevel) {
+      case ImmediatePriority:
+        return SyncLanePriority;
+
+      case UserBlockingPriority:
+        return InputContinuousLanePriority;
+
+      case NormalPriority:
+      case LowPriority:
+        // TODO: Handle LowSchedulerPriority, somehow. Maybe the same lane as hydration.
+        return DefaultLanePriority;
+
+      case IdlePriority:
+        return IdleLanePriority;
 
       default:
-        props = rawProps;
-    }
-
-    assertValidProps(tag, props);
-    setInitialDOMProperties(tag, domElement, rootContainerElement, props, isCustomComponentTag);
-
-    switch (tag) {
-      case 'input':
-        // TODO: Make sure we check if this is still unmounted or do any clean
-        // up necessary since we never stop tracking anymore.
-        track(domElement);
-        postMountWrapper(domElement, rawProps, false);
-        break;
-
-      case 'textarea':
-        // TODO: Make sure we check if this is still unmounted or do any clean
-        // up necessary since we never stop tracking anymore.
-        track(domElement);
-        postMountWrapper$3(domElement);
-        break;
-
-      case 'option':
-        postMountWrapper$1(domElement, rawProps);
-        break;
-
-      case 'select':
-        postMountWrapper$2(domElement, rawProps);
-        break;
-
-      default:
-        if (typeof props.onClick === 'function') {
-          // TODO: This cast may not be sound for SVG, MathML or custom elements.
-          trapClickOnNonInteractiveElement(domElement);
-        }
-
-        break;
-    }
-  } // Calculate the diff between the two objects.
-
-  function diffProperties(domElement, tag, lastRawProps, nextRawProps, rootContainerElement) {
-    {
-      validatePropertiesInDevelopment(tag, nextRawProps);
-    }
-
-    var updatePayload = null;
-    var lastProps;
-    var nextProps;
-
-    switch (tag) {
-      case 'input':
-        lastProps = getHostProps(domElement, lastRawProps);
-        nextProps = getHostProps(domElement, nextRawProps);
-        updatePayload = [];
-        break;
-
-      case 'option':
-        lastProps = getHostProps$1(domElement, lastRawProps);
-        nextProps = getHostProps$1(domElement, nextRawProps);
-        updatePayload = [];
-        break;
-
-      case 'select':
-        lastProps = getHostProps$2(domElement, lastRawProps);
-        nextProps = getHostProps$2(domElement, nextRawProps);
-        updatePayload = [];
-        break;
-
-      case 'textarea':
-        lastProps = getHostProps$3(domElement, lastRawProps);
-        nextProps = getHostProps$3(domElement, nextRawProps);
-        updatePayload = [];
-        break;
+        return NoLanePriority;
+    }
+  }
+  function lanePriorityToSchedulerPriority(lanePriority) {
+    switch (lanePriority) {
+      case SyncLanePriority:
+      case SyncBatchedLanePriority:
+        return ImmediatePriority;
+
+      case InputDiscreteHydrationLanePriority:
+      case InputDiscreteLanePriority:
+      case InputContinuousHydrationLanePriority:
+      case InputContinuousLanePriority:
+        return UserBlockingPriority;
+
+      case DefaultHydrationLanePriority:
+      case DefaultLanePriority:
+      case TransitionHydrationPriority:
+      case TransitionPriority:
+      case SelectiveHydrationLanePriority:
+      case RetryLanePriority:
+        return NormalPriority;
+
+      case IdleHydrationLanePriority:
+      case IdleLanePriority:
+      case OffscreenLanePriority:
+        return IdlePriority;
+
+      case NoLanePriority:
+        return NoPriority;
 
       default:
-        lastProps = lastRawProps;
-        nextProps = nextRawProps;
-
-        if (typeof lastProps.onClick !== 'function' && typeof nextProps.onClick === 'function') {
-          // TODO: This cast may not be sound for SVG, MathML or custom elements.
-          trapClickOnNonInteractiveElement(domElement);
-        }
-
-        break;
-    }
-
-    assertValidProps(tag, nextProps);
-    var propKey;
-    var styleName;
-    var styleUpdates = null;
-
-    for (propKey in lastProps) {
-      if (nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey) || lastProps[propKey] == null) {
-        continue;
-      }
-
-      if (propKey === STYLE) {
-        var lastStyle = lastProps[propKey];
-
-        for (styleName in lastStyle) {
-          if (lastStyle.hasOwnProperty(styleName)) {
-            if (!styleUpdates) {
-              styleUpdates = {};
-            }
-
-            styleUpdates[styleName] = '';
-          }
-        }
-      } else if (propKey === DANGEROUSLY_SET_INNER_HTML || propKey === CHILDREN) ; else if ( propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING) ; else if (propKey === AUTOFOCUS) ; else if (registrationNameModules.hasOwnProperty(propKey)) {
-        // This is a special case. If any listener updates we need to ensure
-        // that the "current" fiber pointer gets updated so we need a commit
-        // to update this element.
-        if (!updatePayload) {
-          updatePayload = [];
-        }
-      } else {
-        // For all other deleted properties we add it to the queue. We use
-        // the whitelist in the commit phase instead.
-        (updatePayload = updatePayload || []).push(propKey, null);
-      }
-    }
-
-    for (propKey in nextProps) {
-      var nextProp = nextProps[propKey];
-      var lastProp = lastProps != null ? lastProps[propKey] : undefined;
-
-      if (!nextProps.hasOwnProperty(propKey) || nextProp === lastProp || nextProp == null && lastProp == null) {
-        continue;
-      }
-
-      if (propKey === STYLE) {
-        {
-          if (nextProp) {
-            // Freeze the next style object so that we can assume it won't be
-            // mutated. We have already warned for this in the past.
-            Object.freeze(nextProp);
-          }
-        }
-
-        if (lastProp) {
-          // Unset styles on `lastProp` but not on `nextProp`.
-          for (styleName in lastProp) {
-            if (lastProp.hasOwnProperty(styleName) && (!nextProp || !nextProp.hasOwnProperty(styleName))) {
-              if (!styleUpdates) {
-                styleUpdates = {};
-              }
-
-              styleUpdates[styleName] = '';
-            }
-          } // Update styles that changed since `lastProp`.
-
-
-          for (styleName in nextProp) {
-            if (nextProp.hasOwnProperty(styleName) && lastProp[styleName] !== nextProp[styleName]) {
-              if (!styleUpdates) {
-                styleUpdates = {};
-              }
-
-              styleUpdates[styleName] = nextProp[styleName];
-            }
-          }
-        } else {
-          // Relies on `updateStylesByID` not mutating `styleUpdates`.
-          if (!styleUpdates) {
-            if (!updatePayload) {
-              updatePayload = [];
-            }
-
-            updatePayload.push(propKey, styleUpdates);
-          }
-
-          styleUpdates = nextProp;
-        }
-      } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
-        var nextHtml = nextProp ? nextProp[HTML$1] : undefined;
-        var lastHtml = lastProp ? lastProp[HTML$1] : undefined;
-
-        if (nextHtml != null) {
-          if (lastHtml !== nextHtml) {
-            (updatePayload = updatePayload || []).push(propKey, nextHtml);
-          }
-        }
-      } else if (propKey === CHILDREN) {
-        if (lastProp !== nextProp && (typeof nextProp === 'string' || typeof nextProp === 'number')) {
-          (updatePayload = updatePayload || []).push(propKey, '' + nextProp);
-        }
-      } else if ( propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING) ; else if (registrationNameModules.hasOwnProperty(propKey)) {
-        if (nextProp != null) {
-          // We eagerly listen to this even though we haven't committed yet.
-          if ( typeof nextProp !== 'function') {
-            warnForInvalidEventListener(propKey, nextProp);
-          }
-
-          ensureListeningTo(rootContainerElement, propKey);
-        }
-
-        if (!updatePayload && lastProp !== nextProp) {
-          // This is a special case. If any listener updates we need to ensure
-          // that the "current" props pointer gets updated so we need a commit
-          // to update this element.
-          updatePayload = [];
-        }
-      } else {
-        // For any other property we always add it to the queue and then we
-        // filter it out using the whitelist during the commit.
-        (updatePayload = updatePayload || []).push(propKey, nextProp);
-      }
-    }
-
-    if (styleUpdates) {
-      {
-        validateShorthandPropertyCollisionInDev(styleUpdates, nextProps[STYLE]);
-      }
-
-      (updatePayload = updatePayload || []).push(STYLE, styleUpdates);
-    }
-
-    return updatePayload;
-  } // Apply the diff.
-
-  function updateProperties(domElement, updatePayload, tag, lastRawProps, nextRawProps) {
-    // Update checked *before* name.
-    // In the middle of an update, it is possible to have multiple checked.
-    // When a checked radio tries to change name, browser makes another radio's checked false.
-    if (tag === 'input' && nextRawProps.type === 'radio' && nextRawProps.name != null) {
-      updateChecked(domElement, nextRawProps);
-    }
-
-    var wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
-    var isCustomComponentTag = isCustomComponent(tag, nextRawProps); // Apply the diff.
-
-    updateDOMProperties(domElement, updatePayload, wasCustomComponentTag, isCustomComponentTag); // TODO: Ensure that an update gets scheduled if any of the special props
-    // changed.
-
-    switch (tag) {
-      case 'input':
-        // Update the wrapper around inputs *after* updating props. This has to
-        // happen after `updateDOMProperties`. Otherwise HTML5 input validations
-        // raise warnings and prevent the new value from being assigned.
-        updateWrapper(domElement, nextRawProps);
-        break;
-
-      case 'textarea':
-        updateWrapper$1(domElement, nextRawProps);
-        break;
-
-      case 'select':
-        // <select> value update needs to occur after <option> children
-        // reconciliation
-        postUpdateWrapper(domElement, nextRawProps);
-        break;
-    }
-  }
-
-  function getPossibleStandardName(propName) {
-    {
-      var lowerCasedName = propName.toLowerCase();
-
-      if (!possibleStandardNames.hasOwnProperty(lowerCasedName)) {
-        return null;
-      }
-
-      return possibleStandardNames[lowerCasedName] || null;
-    }
-  }
-
-  function diffHydratedProperties(domElement, tag, rawProps, parentNamespace, rootContainerElement) {
-    var isCustomComponentTag;
-    var extraAttributeNames;
-
-    {
-      suppressHydrationWarning = rawProps[SUPPRESS_HYDRATION_WARNING] === true;
-      isCustomComponentTag = isCustomComponent(tag, rawProps);
-      validatePropertiesInDevelopment(tag, rawProps);
-    } // TODO: Make sure that we check isMounted before firing any of these events.
-
-
-    switch (tag) {
-      case 'iframe':
-      case 'object':
-      case 'embed':
-        trapBubbledEvent(TOP_LOAD, domElement);
-        break;
-
-      case 'video':
-      case 'audio':
-        // Create listener for each media event
-        for (var i = 0; i < mediaEventTypes.length; i++) {
-          trapBubbledEvent(mediaEventTypes[i], domElement);
-        }
-
-        break;
-
-      case 'source':
-        trapBubbledEvent(TOP_ERROR, domElement);
-        break;
-
-      case 'img':
-      case 'image':
-      case 'link':
-        trapBubbledEvent(TOP_ERROR, domElement);
-        trapBubbledEvent(TOP_LOAD, domElement);
-        break;
-
-      case 'form':
-        trapBubbledEvent(TOP_RESET, domElement);
-        trapBubbledEvent(TOP_SUBMIT, domElement);
-        break;
-
-      case 'details':
-        trapBubbledEvent(TOP_TOGGLE, domElement);
-        break;
-
-      case 'input':
-        initWrapperState(domElement, rawProps);
-        trapBubbledEvent(TOP_INVALID, domElement); // For controlled components we always need to ensure we're listening
-        // to onChange. Even if there is no listener.
-
-        ensureListeningTo(rootContainerElement, 'onChange');
-        break;
-
-      case 'option':
-        validateProps(domElement, rawProps);
-        break;
-
-      case 'select':
-        initWrapperState$1(domElement, rawProps);
-        trapBubbledEvent(TOP_INVALID, domElement); // For controlled components we always need to ensure we're listening
-        // to onChange. Even if there is no listener.
-
-        ensureListeningTo(rootContainerElement, 'onChange');
-        break;
-
-      case 'textarea':
-        initWrapperState$2(domElement, rawProps);
-        trapBubbledEvent(TOP_INVALID, domElement); // For controlled components we always need to ensure we're listening
-        // to onChange. Even if there is no listener.
-
-        ensureListeningTo(rootContainerElement, 'onChange');
-        break;
-    }
-
-    assertValidProps(tag, rawProps);
-
-    {
-      extraAttributeNames = new Set();
-      var attributes = domElement.attributes;
-
-      for (var _i = 0; _i < attributes.length; _i++) {
-        var name = attributes[_i].name.toLowerCase();
-
-        switch (name) {
-          // Built-in SSR attribute is whitelisted
-          case 'data-reactroot':
-            break;
-          // Controlled attributes are not validated
-          // TODO: Only ignore them on controlled tags.
-
-          case 'value':
-            break;
-
-          case 'checked':
-            break;
-
-          case 'selected':
-            break;
-
-          default:
-            // Intentionally use the original name.
-            // See discussion in https://github.com/facebook/react/pull/10676.
-            extraAttributeNames.add(attributes[_i].name);
-        }
-      }
-    }
-
-    var updatePayload = null;
-
-    for (var propKey in rawProps) {
-      if (!rawProps.hasOwnProperty(propKey)) {
-        continue;
-      }
-
-      var nextProp = rawProps[propKey];
-
-      if (propKey === CHILDREN) {
-        // For text content children we compare against textContent. This
-        // might match additional HTML that is hidden when we read it using
-        // textContent. E.g. "foo" will match "f<span>oo</span>" but that still
-        // satisfies our requirement. Our requirement is not to produce perfect
-        // HTML and attributes. Ideally we should preserve structure but it's
-        // ok not to if the visible content is still enough to indicate what
-        // even listeners these nodes might be wired up to.
-        // TODO: Warn if there is more than a single textNode as a child.
-        // TODO: Should we use domElement.firstChild.nodeValue to compare?
-        if (typeof nextProp === 'string') {
-          if (domElement.textContent !== nextProp) {
-            if ( !suppressHydrationWarning) {
-              warnForTextDifference(domElement.textContent, nextProp);
-            }
-
-            updatePayload = [CHILDREN, nextProp];
-          }
-        } else if (typeof nextProp === 'number') {
-          if (domElement.textContent !== '' + nextProp) {
-            if ( !suppressHydrationWarning) {
-              warnForTextDifference(domElement.textContent, nextProp);
-            }
-
-            updatePayload = [CHILDREN, '' + nextProp];
-          }
-        }
-      } else if (registrationNameModules.hasOwnProperty(propKey)) {
-        if (nextProp != null) {
-          if ( typeof nextProp !== 'function') {
-            warnForInvalidEventListener(propKey, nextProp);
-          }
-
-          ensureListeningTo(rootContainerElement, propKey);
-        }
-      } else if ( // Convince Flow we've calculated it (it's DEV-only in this method.)
-      typeof isCustomComponentTag === 'boolean') {
-        // Validate that the properties correspond to their expected values.
-        var serverValue = void 0;
-        var propertyInfo = getPropertyInfo(propKey);
-
-        if (suppressHydrationWarning) ; else if ( propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING || // Controlled attributes are not validated
-        // TODO: Only ignore them on controlled tags.
-        propKey === 'value' || propKey === 'checked' || propKey === 'selected') ; else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
-          var serverHTML = domElement.innerHTML;
-          var nextHtml = nextProp ? nextProp[HTML$1] : undefined;
-          var expectedHTML = normalizeHTML(domElement, nextHtml != null ? nextHtml : '');
-
-          if (expectedHTML !== serverHTML) {
-            warnForPropDifference(propKey, serverHTML, expectedHTML);
-          }
-        } else if (propKey === STYLE) {
-          // $FlowFixMe - Should be inferred as not undefined.
-          extraAttributeNames.delete(propKey);
-
-          if (canDiffStyleForHydrationWarning) {
-            var expectedStyle = createDangerousStringForStyles(nextProp);
-            serverValue = domElement.getAttribute('style');
-
-            if (expectedStyle !== serverValue) {
-              warnForPropDifference(propKey, serverValue, expectedStyle);
-            }
-          }
-        } else if (isCustomComponentTag) {
-          // $FlowFixMe - Should be inferred as not undefined.
-          extraAttributeNames.delete(propKey.toLowerCase());
-          serverValue = getValueForAttribute(domElement, propKey, nextProp);
-
-          if (nextProp !== serverValue) {
-            warnForPropDifference(propKey, serverValue, nextProp);
-          }
-        } else if (!shouldIgnoreAttribute(propKey, propertyInfo, isCustomComponentTag) && !shouldRemoveAttribute(propKey, nextProp, propertyInfo, isCustomComponentTag)) {
-          var isMismatchDueToBadCasing = false;
-
-          if (propertyInfo !== null) {
-            // $FlowFixMe - Should be inferred as not undefined.
-            extraAttributeNames.delete(propertyInfo.attributeName);
-            serverValue = getValueForProperty(domElement, propKey, nextProp, propertyInfo);
-          } else {
-            var ownNamespace = parentNamespace;
-
-            if (ownNamespace === HTML_NAMESPACE$1) {
-              ownNamespace = getIntrinsicNamespace(tag);
-            }
-
-            if (ownNamespace === HTML_NAMESPACE$1) {
-              // $FlowFixMe - Should be inferred as not undefined.
-              extraAttributeNames.delete(propKey.toLowerCase());
-            } else {
-              var standardName = getPossibleStandardName(propKey);
-
-              if (standardName !== null && standardName !== propKey) {
-                // If an SVG prop is supplied with bad casing, it will
-                // be successfully parsed from HTML, but will produce a mismatch
-                // (and would be incorrectly rendered on the client).
-                // However, we already warn about bad casing elsewhere.
-                // So we'll skip the misleading extra mismatch warning in this case.
-                isMismatchDueToBadCasing = true; // $FlowFixMe - Should be inferred as not undefined.
-
-                extraAttributeNames.delete(standardName);
-              } // $FlowFixMe - Should be inferred as not undefined.
-
-
-              extraAttributeNames.delete(propKey);
-            }
-
-            serverValue = getValueForAttribute(domElement, propKey, nextProp);
-          }
-
-          if (nextProp !== serverValue && !isMismatchDueToBadCasing) {
-            warnForPropDifference(propKey, serverValue, nextProp);
-          }
-        }
-      }
-    }
-
-    {
-      // $FlowFixMe - Should be inferred as not undefined.
-      if (extraAttributeNames.size > 0 && !suppressHydrationWarning) {
-        // $FlowFixMe - Should be inferred as not undefined.
-        warnForExtraAttributes(extraAttributeNames);
-      }
-    }
-
-    switch (tag) {
-      case 'input':
-        // TODO: Make sure we check if this is still unmounted or do any clean
-        // up necessary since we never stop tracking anymore.
-        track(domElement);
-        postMountWrapper(domElement, rawProps, true);
-        break;
-
-      case 'textarea':
-        // TODO: Make sure we check if this is still unmounted or do any clean
-        // up necessary since we never stop tracking anymore.
-        track(domElement);
-        postMountWrapper$3(domElement);
-        break;
-
-      case 'select':
-      case 'option':
-        // For input and textarea we current always set the value property at
-        // post mount to force it to diverge from attributes. However, for
-        // option and select we don't quite do the same thing and select
-        // is not resilient to the DOM state changing so we don't do that here.
-        // TODO: Consider not doing this for input and textarea.
-        break;
+        {
+          {
+            throw Error( "Invalid update priority: " + lanePriority + ". This is a bug in React." );
+          }
+        }
+
+    }
+  }
+  function getNextLanes(root, wipLanes) {
+    // Early bailout if there's no pending work left.
+    var pendingLanes = root.pendingLanes;
+
+    if (pendingLanes === NoLanes) {
+      return_highestLanePriority = NoLanePriority;
+      return NoLanes;
+    }
+
+    var nextLanes = NoLanes;
+    var nextLanePriority = NoLanePriority;
+    var expiredLanes = root.expiredLanes;
+    var suspendedLanes = root.suspendedLanes;
+    var pingedLanes = root.pingedLanes; // Check if any work has expired.
+
+    if (expiredLanes !== NoLanes) {
+      nextLanes = expiredLanes;
+      nextLanePriority = return_highestLanePriority = SyncLanePriority;
+    } else {
+      // Do not work on any idle work until all the non-idle work has finished,
+      // even if the work is suspended.
+      var nonIdlePendingLanes = pendingLanes & NonIdleLanes;
+
+      if (nonIdlePendingLanes !== NoLanes) {
+        var nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
+
+        if (nonIdleUnblockedLanes !== NoLanes) {
+          nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);
+          nextLanePriority = return_highestLanePriority;
+        } else {
+          var nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;
+
+          if (nonIdlePingedLanes !== NoLanes) {
+            nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);
+            nextLanePriority = return_highestLanePriority;
+          }
+        }
+      } else {
+        // The only remaining work is Idle.
+        var unblockedLanes = pendingLanes & ~suspendedLanes;
+
+        if (unblockedLanes !== NoLanes) {
+          nextLanes = getHighestPriorityLanes(unblockedLanes);
+          nextLanePriority = return_highestLanePriority;
+        } else {
+          if (pingedLanes !== NoLanes) {
+            nextLanes = getHighestPriorityLanes(pingedLanes);
+            nextLanePriority = return_highestLanePriority;
+          }
+        }
+      }
+    }
+
+    if (nextLanes === NoLanes) {
+      // This should only be reachable if we're suspended
+      // TODO: Consider warning in this path if a fallback timer is not scheduled.
+      return NoLanes;
+    } // If there are higher priority lanes, we'll include them even if they
+    // are suspended.
+
+
+    nextLanes = pendingLanes & getEqualOrHigherPriorityLanes(nextLanes); // If we're already in the middle of a render, switching lanes will interrupt
+    // it and we'll lose our progress. We should only do this if the new lanes are
+    // higher priority.
+
+    if (wipLanes !== NoLanes && wipLanes !== nextLanes && // If we already suspended with a delay, then interrupting is fine. Don't
+    // bother waiting until the root is complete.
+    (wipLanes & suspendedLanes) === NoLanes) {
+      getHighestPriorityLanes(wipLanes);
+      var wipLanePriority = return_highestLanePriority;
+
+      if (nextLanePriority <= wipLanePriority) {
+        return wipLanes;
+      } else {
+        return_highestLanePriority = nextLanePriority;
+      }
+    } // Check for entangled lanes and add them to the batch.
+    //
+    // A lane is said to be entangled with another when it's not allowed to render
+    // in a batch that does not also include the other lane. Typically we do this
+    // when multiple updates have the same source, and we only want to respond to
+    // the most recent event from that source.
+    //
+    // Note that we apply entanglements *after* checking for partial work above.
+    // This means that if a lane is entangled during an interleaved event while
+    // it's already rendering, we won't interrupt it. This is intentional, since
+    // entanglement is usually "best effort": we'll try our best to render the
+    // lanes in the same batch, but it's not worth throwing out partially
+    // completed work in order to do it.
+    //
+    // For those exceptions where entanglement is semantically important, like
+    // useMutableSource, we should ensure that there is no partial work at the
+    // time we apply the entanglement.
+
+
+    var entangledLanes = root.entangledLanes;
+
+    if (entangledLanes !== NoLanes) {
+      var entanglements = root.entanglements;
+      var lanes = nextLanes & entangledLanes;
+
+      while (lanes > 0) {
+        var index = pickArbitraryLaneIndex(lanes);
+        var lane = 1 << index;
+        nextLanes |= entanglements[index];
+        lanes &= ~lane;
+      }
+    }
+
+    return nextLanes;
+  }
+  function getMostRecentEventTime(root, lanes) {
+    var eventTimes = root.eventTimes;
+    var mostRecentEventTime = NoTimestamp;
+
+    while (lanes > 0) {
+      var index = pickArbitraryLaneIndex(lanes);
+      var lane = 1 << index;
+      var eventTime = eventTimes[index];
+
+      if (eventTime > mostRecentEventTime) {
+        mostRecentEventTime = eventTime;
+      }
+
+      lanes &= ~lane;
+    }
+
+    return mostRecentEventTime;
+  }
+
+  function computeExpirationTime(lane, currentTime) {
+    // TODO: Expiration heuristic is constant per lane, so could use a map.
+    getHighestPriorityLanes(lane);
+    var priority = return_highestLanePriority;
+
+    if (priority >= InputContinuousLanePriority) {
+      // User interactions should expire slightly more quickly.
+      //
+      // NOTE: This is set to the corresponding constant as in Scheduler.js. When
+      // we made it larger, a product metric in www regressed, suggesting there's
+      // a user interaction that's being starved by a series of synchronous
+      // updates. If that theory is correct, the proper solution is to fix the
+      // starvation. However, this scenario supports the idea that expiration
+      // times are an important safeguard when starvation does happen.
+      //
+      // Also note that, in the case of user input specifically, this will soon no
+      // longer be an issue because we plan to make user input synchronous by
+      // default (until you enter `startTransition`, of course.)
+      //
+      // If weren't planning to make these updates synchronous soon anyway, I
+      // would probably make this number a configurable parameter.
+      return currentTime + 250;
+    } else if (priority >= TransitionPriority) {
+      return currentTime + 5000;
+    } else {
+      // Anything idle priority or lower should never expire.
+      return NoTimestamp;
+    }
+  }
+
+  function markStarvedLanesAsExpired(root, currentTime) {
+    // TODO: This gets called every time we yield. We can optimize by storing
+    // the earliest expiration time on the root. Then use that to quickly bail out
+    // of this function.
+    var pendingLanes = root.pendingLanes;
+    var suspendedLanes = root.suspendedLanes;
+    var pingedLanes = root.pingedLanes;
+    var expirationTimes = root.expirationTimes; // Iterate through the pending lanes and check if we've reached their
+    // expiration time. If so, we'll assume the update is being starved and mark
+    // it as expired to force it to finish.
+
+    var lanes = pendingLanes;
+
+    while (lanes > 0) {
+      var index = pickArbitraryLaneIndex(lanes);
+      var lane = 1 << index;
+      var expirationTime = expirationTimes[index];
+
+      if (expirationTime === NoTimestamp) {
+        // Found a pending lane with no expiration time. If it's not suspended, or
+        // if it's pinged, assume it's CPU-bound. Compute a new expiration time
+        // using the current time.
+        if ((lane & suspendedLanes) === NoLanes || (lane & pingedLanes) !== NoLanes) {
+          // Assumes timestamps are monotonically increasing.
+          expirationTimes[index] = computeExpirationTime(lane, currentTime);
+        }
+      } else if (expirationTime <= currentTime) {
+        // This lane expired
+        root.expiredLanes |= lane;
+      }
+
+      lanes &= ~lane;
+    }
+  } // This returns the highest priority pending lanes regardless of whether they
+  function getLanesToRetrySynchronouslyOnError(root) {
+    var everythingButOffscreen = root.pendingLanes & ~OffscreenLane;
+
+    if (everythingButOffscreen !== NoLanes) {
+      return everythingButOffscreen;
+    }
+
+    if (everythingButOffscreen & OffscreenLane) {
+      return OffscreenLane;
+    }
+
+    return NoLanes;
+  }
+  function returnNextLanesPriority() {
+    return return_highestLanePriority;
+  }
+  function includesNonIdleWork(lanes) {
+    return (lanes & NonIdleLanes) !== NoLanes;
+  }
+  function includesOnlyRetries(lanes) {
+    return (lanes & RetryLanes) === lanes;
+  }
+  function includesOnlyTransitions(lanes) {
+    return (lanes & TransitionLanes) === lanes;
+  } // To ensure consistency across multiple updates in the same event, this should
+  // be a pure function, so that it always returns the same lane for given inputs.
+
+  function findUpdateLane(lanePriority, wipLanes) {
+    switch (lanePriority) {
+      case NoLanePriority:
+        break;
+
+      case SyncLanePriority:
+        return SyncLane;
+
+      case SyncBatchedLanePriority:
+        return SyncBatchedLane;
+
+      case InputDiscreteLanePriority:
+        {
+          var _lane = pickArbitraryLane(InputDiscreteLanes & ~wipLanes);
+
+          if (_lane === NoLane) {
+            // Shift to the next priority level
+            return findUpdateLane(InputContinuousLanePriority, wipLanes);
+          }
+
+          return _lane;
+        }
+
+      case InputContinuousLanePriority:
+        {
+          var _lane2 = pickArbitraryLane(InputContinuousLanes & ~wipLanes);
+
+          if (_lane2 === NoLane) {
+            // Shift to the next priority level
+            return findUpdateLane(DefaultLanePriority, wipLanes);
+          }
+
+          return _lane2;
+        }
+
+      case DefaultLanePriority:
+        {
+          var _lane3 = pickArbitraryLane(DefaultLanes & ~wipLanes);
+
+          if (_lane3 === NoLane) {
+            // If all the default lanes are already being worked on, look for a
+            // lane in the transition range.
+            _lane3 = pickArbitraryLane(TransitionLanes & ~wipLanes);
+
+            if (_lane3 === NoLane) {
+              // All the transition lanes are taken, too. This should be very
+              // rare, but as a last resort, pick a default lane. This will have
+              // the effect of interrupting the current work-in-progress render.
+              _lane3 = pickArbitraryLane(DefaultLanes);
+            }
+          }
+
+          return _lane3;
+        }
+
+      case TransitionPriority: // Should be handled by findTransitionLane instead
+
+      case RetryLanePriority:
+        // Should be handled by findRetryLane instead
+        break;
+
+      case IdleLanePriority:
+        var lane = pickArbitraryLane(IdleLanes & ~wipLanes);
+
+        if (lane === NoLane) {
+          lane = pickArbitraryLane(IdleLanes);
+        }
+
+        return lane;
+    }
+
+    {
+      {
+        throw Error( "Invalid update priority: " + lanePriority + ". This is a bug in React." );
+      }
+    }
+  } // To ensure consistency across multiple updates in the same event, this should
+  // be pure function, so that it always returns the same lane for given inputs.
+
+  function findTransitionLane(wipLanes, pendingLanes) {
+    // First look for lanes that are completely unclaimed, i.e. have no
+    // pending work.
+    var lane = pickArbitraryLane(TransitionLanes & ~pendingLanes);
+
+    if (lane === NoLane) {
+      // If all lanes have pending work, look for a lane that isn't currently
+      // being worked on.
+      lane = pickArbitraryLane(TransitionLanes & ~wipLanes);
+
+      if (lane === NoLane) {
+        // If everything is being worked on, pick any lane. This has the
+        // effect of interrupting the current work-in-progress.
+        lane = pickArbitraryLane(TransitionLanes);
+      }
+    }
+
+    return lane;
+  } // To ensure consistency across multiple updates in the same event, this should
+  // be pure function, so that it always returns the same lane for given inputs.
+
+  function findRetryLane(wipLanes) {
+    // This is a fork of `findUpdateLane` designed specifically for Suspense
+    // "retries" — a special update that attempts to flip a Suspense boundary
+    // from its placeholder state to its primary/resolved state.
+    var lane = pickArbitraryLane(RetryLanes & ~wipLanes);
+
+    if (lane === NoLane) {
+      lane = pickArbitraryLane(RetryLanes);
+    }
+
+    return lane;
+  }
+
+  function getHighestPriorityLane(lanes) {
+    return lanes & -lanes;
+  }
+
+  function getLowestPriorityLane(lanes) {
+    // This finds the most significant non-zero bit.
+    var index = 31 - clz32(lanes);
+    return index < 0 ? NoLanes : 1 << index;
+  }
+
+  function getEqualOrHigherPriorityLanes(lanes) {
+    return (getLowestPriorityLane(lanes) << 1) - 1;
+  }
+
+  function pickArbitraryLane(lanes) {
+    // This wrapper function gets inlined. Only exists so to communicate that it
+    // doesn't matter which bit is selected; you can pick any bit without
+    // affecting the algorithms where its used. Here I'm using
+    // getHighestPriorityLane because it requires the fewest operations.
+    return getHighestPriorityLane(lanes);
+  }
+
+  function pickArbitraryLaneIndex(lanes) {
+    return 31 - clz32(lanes);
+  }
+
+  function laneToIndex(lane) {
+    return pickArbitraryLaneIndex(lane);
+  }
+
+  function includesSomeLane(a, b) {
+    return (a & b) !== NoLanes;
+  }
+  function isSubsetOfLanes(set, subset) {
+    return (set & subset) === subset;
+  }
+  function mergeLanes(a, b) {
+    return a | b;
+  }
+  function removeLanes(set, subset) {
+    return set & ~subset;
+  } // Seems redundant, but it changes the type from a single lane (used for
+  // updates) to a group of lanes (used for flushing work).
+
+  function laneToLanes(lane) {
+    return lane;
+  }
+  function higherPriorityLane(a, b) {
+    // This works because the bit ranges decrease in priority as you go left.
+    return a !== NoLane && a < b ? a : b;
+  }
+  function createLaneMap(initial) {
+    // Intentionally pushing one by one.
+    // https://v8.dev/blog/elements-kinds#avoid-creating-holes
+    var laneMap = [];
+
+    for (var i = 0; i < TotalLanes; i++) {
+      laneMap.push(initial);
+    }
+
+    return laneMap;
+  }
+  function markRootUpdated(root, updateLane, eventTime) {
+    root.pendingLanes |= updateLane; // TODO: Theoretically, any update to any lane can unblock any other lane. But
+    // it's not practical to try every single possible combination. We need a
+    // heuristic to decide which lanes to attempt to render, and in which batches.
+    // For now, we use the same heuristic as in the old ExpirationTimes model:
+    // retry any lane at equal or lower priority, but don't try updates at higher
+    // priority without also including the lower priority updates. This works well
+    // when considering updates across different priority levels, but isn't
+    // sufficient for updates within the same priority, since we want to treat
+    // those updates as parallel.
+    // Unsuspend any update at equal or lower priority.
+
+    var higherPriorityLanes = updateLane - 1; // Turns 0b1000 into 0b0111
+
+    root.suspendedLanes &= higherPriorityLanes;
+    root.pingedLanes &= higherPriorityLanes;
+    var eventTimes = root.eventTimes;
+    var index = laneToIndex(updateLane); // We can always overwrite an existing timestamp because we prefer the most
+    // recent event, and we assume time is monotonically increasing.
+
+    eventTimes[index] = eventTime;
+  }
+  function markRootSuspended(root, suspendedLanes) {
+    root.suspendedLanes |= suspendedLanes;
+    root.pingedLanes &= ~suspendedLanes; // The suspended lanes are no longer CPU-bound. Clear their expiration times.
+
+    var expirationTimes = root.expirationTimes;
+    var lanes = suspendedLanes;
+
+    while (lanes > 0) {
+      var index = pickArbitraryLaneIndex(lanes);
+      var lane = 1 << index;
+      expirationTimes[index] = NoTimestamp;
+      lanes &= ~lane;
+    }
+  }
+  function markRootPinged(root, pingedLanes, eventTime) {
+    root.pingedLanes |= root.suspendedLanes & pingedLanes;
+  }
+  function markDiscreteUpdatesExpired(root) {
+    root.expiredLanes |= InputDiscreteLanes & root.pendingLanes;
+  }
+  function hasDiscreteLanes(lanes) {
+    return (lanes & InputDiscreteLanes) !== NoLanes;
+  }
+  function markRootMutableRead(root, updateLane) {
+    root.mutableReadLanes |= updateLane & root.pendingLanes;
+  }
+  function markRootFinished(root, remainingLanes) {
+    var noLongerPendingLanes = root.pendingLanes & ~remainingLanes;
+    root.pendingLanes = remainingLanes; // Let's try everything again
+
+    root.suspendedLanes = 0;
+    root.pingedLanes = 0;
+    root.expiredLanes &= remainingLanes;
+    root.mutableReadLanes &= remainingLanes;
+    root.entangledLanes &= remainingLanes;
+    var entanglements = root.entanglements;
+    var eventTimes = root.eventTimes;
+    var expirationTimes = root.expirationTimes; // Clear the lanes that no longer have pending work
+
+    var lanes = noLongerPendingLanes;
+
+    while (lanes > 0) {
+      var index = pickArbitraryLaneIndex(lanes);
+      var lane = 1 << index;
+      entanglements[index] = NoLanes;
+      eventTimes[index] = NoTimestamp;
+      expirationTimes[index] = NoTimestamp;
+      lanes &= ~lane;
+    }
+  }
+  function markRootEntangled(root, entangledLanes) {
+    root.entangledLanes |= entangledLanes;
+    var entanglements = root.entanglements;
+    var lanes = entangledLanes;
+
+    while (lanes > 0) {
+      var index = pickArbitraryLaneIndex(lanes);
+      var lane = 1 << index;
+      entanglements[index] |= entangledLanes;
+      lanes &= ~lane;
+    }
+  }
+  var clz32 = Math.clz32 ? Math.clz32 : clz32Fallback; // Count leading zeros. Only used on lanes, so assume input is an integer.
+  // Based on:
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/clz32
+
+  var log = Math.log;
+  var LN2 = Math.LN2;
+
+  function clz32Fallback(lanes) {
+    if (lanes === 0) {
+      return 32;
+    }
+
+    return 31 - (log(lanes) / LN2 | 0) | 0;
+  }
+
+  // Intentionally not named imports because Rollup would use dynamic dispatch for
+  var UserBlockingPriority$1 = unstable_UserBlockingPriority,
+      runWithPriority = unstable_runWithPriority; // TODO: can we stop exporting these?
+
+  var _enabled = true; // This is exported in FB builds for use by legacy FB layer infra.
+  // We'd like to remove this but it's not clear if this is safe.
+
+  function setEnabled(enabled) {
+    _enabled = !!enabled;
+  }
+  function isEnabled() {
+    return _enabled;
+  }
+  function createEventListenerWrapperWithPriority(targetContainer, domEventName, eventSystemFlags) {
+    var eventPriority = getEventPriorityForPluginSystem(domEventName);
+    var listenerWrapper;
+
+    switch (eventPriority) {
+      case DiscreteEvent:
+        listenerWrapper = dispatchDiscreteEvent;
+        break;
+
+      case UserBlockingEvent:
+        listenerWrapper = dispatchUserBlockingUpdate;
+        break;
+
+      case ContinuousEvent:
+      default:
+        listenerWrapper = dispatchEvent;
+        break;
+    }
+
+    return listenerWrapper.bind(null, domEventName, eventSystemFlags, targetContainer);
+  }
+
+  function dispatchDiscreteEvent(domEventName, eventSystemFlags, container, nativeEvent) {
+    {
+      flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);
+    }
+
+    discreteUpdates(dispatchEvent, domEventName, eventSystemFlags, container, nativeEvent);
+  }
+
+  function dispatchUserBlockingUpdate(domEventName, eventSystemFlags, container, nativeEvent) {
+    {
+      runWithPriority(UserBlockingPriority$1, dispatchEvent.bind(null, domEventName, eventSystemFlags, container, nativeEvent));
+    }
+  }
+
+  function dispatchEvent(domEventName, eventSystemFlags, targetContainer, nativeEvent) {
+    if (!_enabled) {
+      return;
+    }
+
+    var allowReplay = true;
+
+    {
+      // TODO: replaying capture phase events is currently broken
+      // because we used to do it during top-level native bubble handlers
+      // but now we use different bubble and capture handlers.
+      // In eager mode, we attach capture listeners early, so we need
+      // to filter them out until we fix the logic to handle them correctly.
+      // This could've been outside the flag but I put it inside to reduce risk.
+      allowReplay = (eventSystemFlags & IS_CAPTURE_PHASE) === 0;
+    }
+
+    if (allowReplay && hasQueuedDiscreteEvents() && isReplayableDiscreteEvent(domEventName)) {
+      // If we already have a queue of discrete events, and this is another discrete
+      // event, then we can't dispatch it regardless of its target, since they
+      // need to dispatch in order.
+      queueDiscreteEvent(null, // Flags that we're not actually blocked on anything as far as we know.
+      domEventName, eventSystemFlags, targetContainer, nativeEvent);
+      return;
+    }
+
+    var blockedOn = attemptToDispatchEvent(domEventName, eventSystemFlags, targetContainer, nativeEvent);
+
+    if (blockedOn === null) {
+      // We successfully dispatched this event.
+      if (allowReplay) {
+        clearIfContinuousEvent(domEventName, nativeEvent);
+      }
+
+      return;
+    }
+
+    if (allowReplay) {
+      if (isReplayableDiscreteEvent(domEventName)) {
+        // This this to be replayed later once the target is available.
+        queueDiscreteEvent(blockedOn, domEventName, eventSystemFlags, targetContainer, nativeEvent);
+        return;
+      }
+
+      if (queueIfContinuousEvent(blockedOn, domEventName, eventSystemFlags, targetContainer, nativeEvent)) {
+        return;
+      } // We need to clear only if we didn't queue because
+      // queueing is accummulative.
+
+
+      clearIfContinuousEvent(domEventName, nativeEvent);
+    } // This is not replayable so we'll invoke it but without a target,
+    // in case the event system needs to trace it.
+
+
+    dispatchEventForPluginEventSystem(domEventName, eventSystemFlags, nativeEvent, null, targetContainer);
+  } // Attempt dispatching an event. Returns a SuspenseInstance or Container if it's blocked.
+
+  function attemptToDispatchEvent(domEventName, eventSystemFlags, targetContainer, nativeEvent) {
+    // TODO: Warn if _enabled is false.
+    var nativeEventTarget = getEventTarget(nativeEvent);
+    var targetInst = getClosestInstanceFromNode(nativeEventTarget);
+
+    if (targetInst !== null) {
+      var nearestMounted = getNearestMountedFiber(targetInst);
+
+      if (nearestMounted === null) {
+        // This tree has been unmounted already. Dispatch without a target.
+        targetInst = null;
+      } else {
+        var tag = nearestMounted.tag;
+
+        if (tag === SuspenseComponent) {
+          var instance = getSuspenseInstanceFromFiber(nearestMounted);
+
+          if (instance !== null) {
+            // Queue the event to be replayed later. Abort dispatching since we
+            // don't want this event dispatched twice through the event system.
+            // TODO: If this is the first discrete event in the queue. Schedule an increased
+            // priority for this boundary.
+            return instance;
+          } // This shouldn't happen, something went wrong but to avoid blocking
+          // the whole system, dispatch the event without a target.
+          // TODO: Warn.
+
+
+          targetInst = null;
+        } else if (tag === HostRoot) {
+          var root = nearestMounted.stateNode;
+
+          if (root.hydrate) {
+            // If this happens during a replay something went wrong and it might block
+            // the whole system.
+            return getContainerFromFiber(nearestMounted);
+          }
+
+          targetInst = null;
+        } else if (nearestMounted !== targetInst) {
+          // If we get an event (ex: img onload) before committing that
+          // component's mount, ignore it for now (that is, treat it as if it was an
+          // event on a non-React tree). We might also consider queueing events and
+          // dispatching them after the mount.
+          targetInst = null;
+        }
+      }
+    }
+
+    dispatchEventForPluginEventSystem(domEventName, eventSystemFlags, nativeEvent, targetInst, targetContainer); // We're not blocked on anything.
+
+    return null;
+  }
+
+  function addEventBubbleListener(target, eventType, listener) {
+    target.addEventListener(eventType, listener, false);
+    return listener;
+  }
+  function addEventCaptureListener(target, eventType, listener) {
+    target.addEventListener(eventType, listener, true);
+    return listener;
+  }
+  function addEventCaptureListenerWithPassiveFlag(target, eventType, listener, passive) {
+    target.addEventListener(eventType, listener, {
+      capture: true,
+      passive: passive
+    });
+    return listener;
+  }
+  function addEventBubbleListenerWithPassiveFlag(target, eventType, listener, passive) {
+    target.addEventListener(eventType, listener, {
+      passive: passive
+    });
+    return listener;
+  }
+
+  /**
+   * These variables store information about text content of a target node,
+   * allowing comparison of content before and after a given event.
+   *
+   * Identify the node where selection currently begins, then observe
+   * both its text content and its current position in the DOM. Since the
+   * browser may natively replace the target node during composition, we can
+   * use its position to find its replacement.
+   *
+   *
+   */
+  var root = null;
+  var startText = null;
+  var fallbackText = null;
+  function initialize(nativeEventTarget) {
+    root = nativeEventTarget;
+    startText = getText();
+    return true;
+  }
+  function reset() {
+    root = null;
+    startText = null;
+    fallbackText = null;
+  }
+  function getData() {
+    if (fallbackText) {
+      return fallbackText;
+    }
+
+    var start;
+    var startValue = startText;
+    var startLength = startValue.length;
+    var end;
+    var endValue = getText();
+    var endLength = endValue.length;
+
+    for (start = 0; start < startLength; start++) {
+      if (startValue[start] !== endValue[start]) {
+        break;
+      }
+    }
+
+    var minEnd = startLength - start;
+
+    for (end = 1; end <= minEnd; end++) {
+      if (startValue[startLength - end] !== endValue[endLength - end]) {
+        break;
+      }
+    }
+
+    var sliceTail = end > 1 ? 1 - end : undefined;
+    fallbackText = endValue.slice(start, sliceTail);
+    return fallbackText;
+  }
+  function getText() {
+    if ('value' in root) {
+      return root.value;
+    }
+
+    return root.textContent;
+  }
+
+  /**
+   * `charCode` represents the actual "character code" and is safe to use with
+   * `String.fromCharCode`. As such, only keys that correspond to printable
+   * characters produce a valid `charCode`, the only exception to this is Enter.
+   * The Tab-key is considered non-printable and does not have a `charCode`,
+   * presumably because it does not produce a tab-character in browsers.
+   *
+   * @param {object} nativeEvent Native browser event.
+   * @return {number} Normalized `charCode` property.
+   */
+  function getEventCharCode(nativeEvent) {
+    var charCode;
+    var keyCode = nativeEvent.keyCode;
+
+    if ('charCode' in nativeEvent) {
+      charCode = nativeEvent.charCode; // FF does not set `charCode` for the Enter-key, check against `keyCode`.
+
+      if (charCode === 0 && keyCode === 13) {
+        charCode = 13;
+      }
+    } else {
+      // IE8 does not implement `charCode`, but `keyCode` has the correct value.
+      charCode = keyCode;
+    } // IE and Edge (on Windows) and Chrome / Safari (on Windows and Linux)
+    // report Enter as charCode 10 when ctrl is pressed.
+
+
+    if (charCode === 10) {
+      charCode = 13;
+    } // Some non-printable keys are reported in `charCode`/`keyCode`, discard them.
+    // Must not discard the (non-)printable Enter-key.
+
+
+    if (charCode >= 32 || charCode === 13) {
+      return charCode;
+    }
+
+    return 0;
+  }
+
+  function functionThatReturnsTrue() {
+    return true;
+  }
+
+  function functionThatReturnsFalse() {
+    return false;
+  } // This is intentionally a factory so that we have different returned constructors.
+  // If we had a single constructor, it would be megamorphic and engines would deopt.
+
+
+  function createSyntheticEvent(Interface) {
+    /**
+     * Synthetic events are dispatched by event plugins, typically in response to a
+     * top-level event delegation handler.
+     *
+     * These systems should generally use pooling to reduce the frequency of garbage
+     * collection. The system should check `isPersistent` to determine whether the
+     * event should be released into the pool after being dispatched. Users that
+     * need a persisted event should invoke `persist`.
+     *
+     * Synthetic events (and subclasses) implement the DOM Level 3 Events API by
+     * normalizing browser quirks. Subclasses do not necessarily have to implement a
+     * DOM interface; custom application-specific events can also subclass this.
+     */
+    function SyntheticBaseEvent(reactName, reactEventType, targetInst, nativeEvent, nativeEventTarget) {
+      this._reactName = reactName;
+      this._targetInst = targetInst;
+      this.type = reactEventType;
+      this.nativeEvent = nativeEvent;
+      this.target = nativeEventTarget;
+      this.currentTarget = null;
+
+      for (var _propName in Interface) {
+        if (!Interface.hasOwnProperty(_propName)) {
+          continue;
+        }
+
+        var normalize = Interface[_propName];
+
+        if (normalize) {
+          this[_propName] = normalize(nativeEvent);
+        } else {
+          this[_propName] = nativeEvent[_propName];
+        }
+      }
+
+      var defaultPrevented = nativeEvent.defaultPrevented != null ? nativeEvent.defaultPrevented : nativeEvent.returnValue === false;
+
+      if (defaultPrevented) {
+        this.isDefaultPrevented = functionThatReturnsTrue;
+      } else {
+        this.isDefaultPrevented = functionThatReturnsFalse;
+      }
+
+      this.isPropagationStopped = functionThatReturnsFalse;
+      return this;
+    }
+
+    _assign(SyntheticBaseEvent.prototype, {
+      preventDefault: function () {
+        this.defaultPrevented = true;
+        var event = this.nativeEvent;
+
+        if (!event) {
+          return;
+        }
+
+        if (event.preventDefault) {
+          event.preventDefault(); // $FlowFixMe - flow is not aware of `unknown` in IE
+        } else if (typeof event.returnValue !== 'unknown') {
+          event.returnValue = false;
+        }
+
+        this.isDefaultPrevented = functionThatReturnsTrue;
+      },
+      stopPropagation: function () {
+        var event = this.nativeEvent;
+
+        if (!event) {
+          return;
+        }
+
+        if (event.stopPropagation) {
+          event.stopPropagation(); // $FlowFixMe - flow is not aware of `unknown` in IE
+        } else if (typeof event.cancelBubble !== 'unknown') {
+          // The ChangeEventPlugin registers a "propertychange" event for
+          // IE. This event does not support bubbling or cancelling, and
+          // any references to cancelBubble throw "Member not found".  A
+          // typeof check of "unknown" circumvents this issue (and is also
+          // IE specific).
+          event.cancelBubble = true;
+        }
+
+        this.isPropagationStopped = functionThatReturnsTrue;
+      },
+
+      /**
+       * We release all dispatched `SyntheticEvent`s after each event loop, adding
+       * them back into the pool. This allows a way to hold onto a reference that
+       * won't be added back into the pool.
+       */
+      persist: function () {// Modern event system doesn't use pooling.
+      },
+
+      /**
+       * Checks if this event should be released back into the pool.
+       *
+       * @return {boolean} True if this should not be released, false otherwise.
+       */
+      isPersistent: functionThatReturnsTrue
+    });
+
+    return SyntheticBaseEvent;
+  }
+  /**
+   * @interface Event
+   * @see http://www.w3.org/TR/DOM-Level-3-Events/
+   */
+
+
+  var EventInterface = {
+    eventPhase: 0,
+    bubbles: 0,
+    cancelable: 0,
+    timeStamp: function (event) {
+      return event.timeStamp || Date.now();
+    },
+    defaultPrevented: 0,
+    isTrusted: 0
+  };
+  var SyntheticEvent = createSyntheticEvent(EventInterface);
+
+  var UIEventInterface = _assign({}, EventInterface, {
+    view: 0,
+    detail: 0
+  });
+
+  var SyntheticUIEvent = createSyntheticEvent(UIEventInterface);
+  var lastMovementX;
+  var lastMovementY;
+  var lastMouseEvent;
+
+  function updateMouseMovementPolyfillState(event) {
+    if (event !== lastMouseEvent) {
+      if (lastMouseEvent && event.type === 'mousemove') {
+        lastMovementX = event.screenX - lastMouseEvent.screenX;
+        lastMovementY = event.screenY - lastMouseEvent.screenY;
+      } else {
+        lastMovementX = 0;
+        lastMovementY = 0;
+      }
+
+      lastMouseEvent = event;
+    }
+  }
+  /**
+   * @interface MouseEvent
+   * @see http://www.w3.org/TR/DOM-Level-3-Events/
+   */
+
+
+  var MouseEventInterface = _assign({}, UIEventInterface, {
+    screenX: 0,
+    screenY: 0,
+    clientX: 0,
+    clientY: 0,
+    pageX: 0,
+    pageY: 0,
+    ctrlKey: 0,
+    shiftKey: 0,
+    altKey: 0,
+    metaKey: 0,
+    getModifierState: getEventModifierState,
+    button: 0,
+    buttons: 0,
+    relatedTarget: function (event) {
+      if (event.relatedTarget === undefined) return event.fromElement === event.srcElement ? event.toElement : event.fromElement;
+      return event.relatedTarget;
+    },
+    movementX: function (event) {
+      if ('movementX' in event) {
+        return event.movementX;
+      }
+
+      updateMouseMovementPolyfillState(event);
+      return lastMovementX;
+    },
+    movementY: function (event) {
+      if ('movementY' in event) {
+        return event.movementY;
+      } // Don't need to call updateMouseMovementPolyfillState() here
+      // because it's guaranteed to have already run when movementX
+      // was copied.
+
+
+      return lastMovementY;
+    }
+  });
+
+  var SyntheticMouseEvent = createSyntheticEvent(MouseEventInterface);
+  /**
+   * @interface DragEvent
+   * @see http://www.w3.org/TR/DOM-Level-3-Events/
+   */
+
+  var DragEventInterface = _assign({}, MouseEventInterface, {
+    dataTransfer: 0
+  });
+
+  var SyntheticDragEvent = createSyntheticEvent(DragEventInterface);
+  /**
+   * @interface FocusEvent
+   * @see http://www.w3.org/TR/DOM-Level-3-Events/
+   */
+
+  var FocusEventInterface = _assign({}, UIEventInterface, {
+    relatedTarget: 0
+  });
+
+  var SyntheticFocusEvent = createSyntheticEvent(FocusEventInterface);
+  /**
+   * @interface Event
+   * @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent
+   */
+
+  var AnimationEventInterface = _assign({}, EventInterface, {
+    animationName: 0,
+    elapsedTime: 0,
+    pseudoElement: 0
+  });
+
+  var SyntheticAnimationEvent = createSyntheticEvent(AnimationEventInterface);
+  /**
+   * @interface Event
+   * @see http://www.w3.org/TR/clipboard-apis/
+   */
+
+  var ClipboardEventInterface = _assign({}, EventInterface, {
+    clipboardData: function (event) {
+      return 'clipboardData' in event ? event.clipboardData : window.clipboardData;
+    }
+  });
+
+  var SyntheticClipboardEvent = createSyntheticEvent(ClipboardEventInterface);
+  /**
+   * @interface Event
+   * @see http://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents
+   */
+
+  var CompositionEventInterface = _assign({}, EventInterface, {
+    data: 0
+  });
+
+  var SyntheticCompositionEvent = createSyntheticEvent(CompositionEventInterface);
+  /**
+   * @interface Event
+   * @see http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105
+   *      /#events-inputevents
+   */
+  // Happens to share the same list for now.
+
+  var SyntheticInputEvent = SyntheticCompositionEvent;
+  /**
+   * Normalization of deprecated HTML5 `key` values
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
+   */
+
+  var normalizeKey = {
+    Esc: 'Escape',
+    Spacebar: ' ',
+    Left: 'ArrowLeft',
+    Up: 'ArrowUp',
+    Right: 'ArrowRight',
+    Down: 'ArrowDown',
+    Del: 'Delete',
+    Win: 'OS',
+    Menu: 'ContextMenu',
+    Apps: 'ContextMenu',
+    Scroll: 'ScrollLock',
+    MozPrintableKey: 'Unidentified'
+  };
+  /**
+   * Translation from legacy `keyCode` to HTML5 `key`
+   * Only special keys supported, all others depend on keyboard layout or browser
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
+   */
+
+  var translateToKey = {
+    '8': 'Backspace',
+    '9': 'Tab',
+    '12': 'Clear',
+    '13': 'Enter',
+    '16': 'Shift',
+    '17': 'Control',
+    '18': 'Alt',
+    '19': 'Pause',
+    '20': 'CapsLock',
+    '27': 'Escape',
+    '32': ' ',
+    '33': 'PageUp',
+    '34': 'PageDown',
+    '35': 'End',
+    '36': 'Home',
+    '37': 'ArrowLeft',
+    '38': 'ArrowUp',
+    '39': 'ArrowRight',
+    '40': 'ArrowDown',
+    '45': 'Insert',
+    '46': 'Delete',
+    '112': 'F1',
+    '113': 'F2',
+    '114': 'F3',
+    '115': 'F4',
+    '116': 'F5',
+    '117': 'F6',
+    '118': 'F7',
+    '119': 'F8',
+    '120': 'F9',
+    '121': 'F10',
+    '122': 'F11',
+    '123': 'F12',
+    '144': 'NumLock',
+    '145': 'ScrollLock',
+    '224': 'Meta'
+  };
+  /**
+   * @param {object} nativeEvent Native browser event.
+   * @return {string} Normalized `key` property.
+   */
+
+  function getEventKey(nativeEvent) {
+    if (nativeEvent.key) {
+      // Normalize inconsistent values reported by browsers due to
+      // implementations of a working draft specification.
+      // FireFox implements `key` but returns `MozPrintableKey` for all
+      // printable characters (normalized to `Unidentified`), ignore it.
+      var key = normalizeKey[nativeEvent.key] || nativeEvent.key;
+
+      if (key !== 'Unidentified') {
+        return key;
+      }
+    } // Browser does not implement `key`, polyfill as much of it as we can.
+
+
+    if (nativeEvent.type === 'keypress') {
+      var charCode = getEventCharCode(nativeEvent); // The enter-key is technically both printable and non-printable and can
+      // thus be captured by `keypress`, no other non-printable key should.
+
+      return charCode === 13 ? 'Enter' : String.fromCharCode(charCode);
+    }
+
+    if (nativeEvent.type === 'keydown' || nativeEvent.type === 'keyup') {
+      // While user keyboard layout determines the actual meaning of each
+      // `keyCode` value, almost all function keys have a universal value.
+      return translateToKey[nativeEvent.keyCode] || 'Unidentified';
+    }
+
+    return '';
+  }
+  /**
+   * Translation from modifier key to the associated property in the event.
+   * @see http://www.w3.org/TR/DOM-Level-3-Events/#keys-Modifiers
+   */
+
+
+  var modifierKeyToProp = {
+    Alt: 'altKey',
+    Control: 'ctrlKey',
+    Meta: 'metaKey',
+    Shift: 'shiftKey'
+  }; // Older browsers (Safari <= 10, iOS Safari <= 10.2) do not support
+  // getModifierState. If getModifierState is not supported, we map it to a set of
+  // modifier keys exposed by the event. In this case, Lock-keys are not supported.
+
+  function modifierStateGetter(keyArg) {
+    var syntheticEvent = this;
+    var nativeEvent = syntheticEvent.nativeEvent;
+
+    if (nativeEvent.getModifierState) {
+      return nativeEvent.getModifierState(keyArg);
+    }
+
+    var keyProp = modifierKeyToProp[keyArg];
+    return keyProp ? !!nativeEvent[keyProp] : false;
+  }
+
+  function getEventModifierState(nativeEvent) {
+    return modifierStateGetter;
+  }
+  /**
+   * @interface KeyboardEvent
+   * @see http://www.w3.org/TR/DOM-Level-3-Events/
+   */
+
+
+  var KeyboardEventInterface = _assign({}, UIEventInterface, {
+    key: getEventKey,
+    code: 0,
+    location: 0,
+    ctrlKey: 0,
+    shiftKey: 0,
+    altKey: 0,
+    metaKey: 0,
+    repeat: 0,
+    locale: 0,
+    getModifierState: getEventModifierState,
+    // Legacy Interface
+    charCode: function (event) {
+      // `charCode` is the result of a KeyPress event and represents the value of
+      // the actual printable character.
+      // KeyPress is deprecated, but its replacement is not yet final and not
+      // implemented in any major browser. Only KeyPress has charCode.
+      if (event.type === 'keypress') {
+        return getEventCharCode(event);
+      }
+
+      return 0;
+    },
+    keyCode: function (event) {
+      // `keyCode` is the result of a KeyDown/Up event and represents the value of
+      // physical keyboard key.
+      // The actual meaning of the value depends on the users' keyboard layout
+      // which cannot be detected. Assuming that it is a US keyboard layout
+      // provides a surprisingly accurate mapping for US and European users.
+      // Due to this, it is left to the user to implement at this time.
+      if (event.type === 'keydown' || event.type === 'keyup') {
+        return event.keyCode;
+      }
+
+      return 0;
+    },
+    which: function (event) {
+      // `which` is an alias for either `keyCode` or `charCode` depending on the
+      // type of the event.
+      if (event.type === 'keypress') {
+        return getEventCharCode(event);
+      }
+
+      if (event.type === 'keydown' || event.type === 'keyup') {
+        return event.keyCode;
+      }
+
+      return 0;
+    }
+  });
+
+  var SyntheticKeyboardEvent = createSyntheticEvent(KeyboardEventInterface);
+  /**
+   * @interface PointerEvent
+   * @see http://www.w3.org/TR/pointerevents/
+   */
+
+  var PointerEventInterface = _assign({}, MouseEventInterface, {
+    pointerId: 0,
+    width: 0,
+    height: 0,
+    pressure: 0,
+    tangentialPressure: 0,
+    tiltX: 0,
+    tiltY: 0,
+    twist: 0,
+    pointerType: 0,
+    isPrimary: 0
+  });
+
+  var SyntheticPointerEvent = createSyntheticEvent(PointerEventInterface);
+  /**
+   * @interface TouchEvent
+   * @see http://www.w3.org/TR/touch-events/
+   */
+
+  var TouchEventInterface = _assign({}, UIEventInterface, {
+    touches: 0,
+    targetTouches: 0,
+    changedTouches: 0,
+    altKey: 0,
+    metaKey: 0,
+    ctrlKey: 0,
+    shiftKey: 0,
+    getModifierState: getEventModifierState
+  });
+
+  var SyntheticTouchEvent = createSyntheticEvent(TouchEventInterface);
+  /**
+   * @interface Event
+   * @see http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#transition-events-
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent
+   */
+
+  var TransitionEventInterface = _assign({}, EventInterface, {
+    propertyName: 0,
+    elapsedTime: 0,
+    pseudoElement: 0
+  });
+
+  var SyntheticTransitionEvent = createSyntheticEvent(TransitionEventInterface);
+  /**
+   * @interface WheelEvent
+   * @see http://www.w3.org/TR/DOM-Level-3-Events/
+   */
+
+  var WheelEventInterface = _assign({}, MouseEventInterface, {
+    deltaX: function (event) {
+      return 'deltaX' in event ? event.deltaX : // Fallback to `wheelDeltaX` for Webkit and normalize (right is positive).
+      'wheelDeltaX' in event ? -event.wheelDeltaX : 0;
+    },
+    deltaY: function (event) {
+      return 'deltaY' in event ? event.deltaY : // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).
+      'wheelDeltaY' in event ? -event.wheelDeltaY : // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).
+      'wheelDelta' in event ? -event.wheelDelta : 0;
+    },
+    deltaZ: 0,
+    // Browsers without "deltaMode" is reporting in raw wheel delta where one
+    // notch on the scroll is always +/- 120, roughly equivalent to pixels.
+    // A good approximation of DOM_DELTA_LINE (1) is 5% of viewport size or
+    // ~40 pixels, for DOM_DELTA_SCREEN (2) it is 87.5% of viewport size.
+    deltaMode: 0
+  });
+
+  var SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface);
+
+  var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
+
+  var START_KEYCODE = 229;
+  var canUseCompositionEvent = canUseDOM && 'CompositionEvent' in window;
+  var documentMode = null;
+
+  if (canUseDOM && 'documentMode' in document) {
+    documentMode = document.documentMode;
+  } // Webkit offers a very useful `textInput` event that can be used to
+  // directly represent `beforeInput`. The IE `textinput` event is not as
+  // useful, so we don't use it.
+
+
+  var canUseTextInputEvent = canUseDOM && 'TextEvent' in window && !documentMode; // In IE9+, we have access to composition events, but the data supplied
+  // by the native compositionend event may be incorrect. Japanese ideographic
+  // spaces, for instance (\u3000) are not recorded correctly.
+
+  var useFallbackCompositionData = canUseDOM && (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11);
+  var SPACEBAR_CODE = 32;
+  var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
+
+  function registerEvents() {
+    registerTwoPhaseEvent('onBeforeInput', ['compositionend', 'keypress', 'textInput', 'paste']);
+    registerTwoPhaseEvent('onCompositionEnd', ['compositionend', 'focusout', 'keydown', 'keypress', 'keyup', 'mousedown']);
+    registerTwoPhaseEvent('onCompositionStart', ['compositionstart', 'focusout', 'keydown', 'keypress', 'keyup', 'mousedown']);
+    registerTwoPhaseEvent('onCompositionUpdate', ['compositionupdate', 'focusout', 'keydown', 'keypress', 'keyup', 'mousedown']);
+  } // Track whether we've ever handled a keypress on the space key.
+
+
+  var hasSpaceKeypress = false;
+  /**
+   * Return whether a native keypress event is assumed to be a command.
+   * This is required because Firefox fires `keypress` events for key commands
+   * (cut, copy, select-all, etc.) even though no character is inserted.
+   */
+
+  function isKeypressCommand(nativeEvent) {
+    return (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) && // ctrlKey && altKey is equivalent to AltGr, and is not a command.
+    !(nativeEvent.ctrlKey && nativeEvent.altKey);
+  }
+  /**
+   * Translate native top level events into event types.
+   */
+
+
+  function getCompositionEventType(domEventName) {
+    switch (domEventName) {
+      case 'compositionstart':
+        return 'onCompositionStart';
+
+      case 'compositionend':
+        return 'onCompositionEnd';
+
+      case 'compositionupdate':
+        return 'onCompositionUpdate';
+    }
+  }
+  /**
+   * Does our fallback best-guess model think this event signifies that
+   * composition has begun?
+   */
+
+
+  function isFallbackCompositionStart(domEventName, nativeEvent) {
+    return domEventName === 'keydown' && nativeEvent.keyCode === START_KEYCODE;
+  }
+  /**
+   * Does our fallback mode think that this event is the end of composition?
+   */
+
+
+  function isFallbackCompositionEnd(domEventName, nativeEvent) {
+    switch (domEventName) {
+      case 'keyup':
+        // Command keys insert or clear IME input.
+        return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;
+
+      case 'keydown':
+        // Expect IME keyCode on each keydown. If we get any other
+        // code we must have exited earlier.
+        return nativeEvent.keyCode !== START_KEYCODE;
+
+      case 'keypress':
+      case 'mousedown':
+      case 'focusout':
+        // Events are not possible without cancelling IME.
+        return true;
 
       default:
-        if (typeof rawProps.onClick === 'function') {
-          // TODO: This cast may not be sound for SVG, MathML or custom elements.
-          trapClickOnNonInteractiveElement(domElement);
-        }
-
-        break;
-    }
-
-    return updatePayload;
-  }
-  function diffHydratedText(textNode, text) {
-    var isDifferent = textNode.nodeValue !== text;
-    return isDifferent;
-  }
-  function warnForUnmatchedText(textNode, text) {
-    {
-      warnForTextDifference(textNode.nodeValue, text);
-    }
-  }
-  function warnForDeletedHydratableElement(parentNode, child) {
-    {
-      if (didWarnInvalidHydration) {
-        return;
-      }
-
-      didWarnInvalidHydration = true;
-
-      error('Did not expect server HTML to contain a <%s> in <%s>.', child.nodeName.toLowerCase(), parentNode.nodeName.toLowerCase());
-    }
-  }
-  function warnForDeletedHydratableText(parentNode, child) {
-    {
-      if (didWarnInvalidHydration) {
-        return;
-      }
-
-      didWarnInvalidHydration = true;
-
-      error('Did not expect server HTML to contain the text node "%s" in <%s>.', child.nodeValue, parentNode.nodeName.toLowerCase());
-    }
-  }
-  function warnForInsertedHydratedElement(parentNode, tag, props) {
-    {
-      if (didWarnInvalidHydration) {
-        return;
-      }
-
-      didWarnInvalidHydration = true;
-
-      error('Expected server HTML to contain a matching <%s> in <%s>.', tag, parentNode.nodeName.toLowerCase());
-    }
-  }
-  function warnForInsertedHydratedText(parentNode, text) {
-    {
-      if (text === '') {
-        // We expect to insert empty text nodes since they're not represented in
-        // the HTML.
-        // TODO: Remove this special case if we can just avoid inserting empty
-        // text nodes.
-        return;
-      }
-
-      if (didWarnInvalidHydration) {
-        return;
-      }
-
-      didWarnInvalidHydration = true;
-
-      error('Expected server HTML to contain a matching text node for "%s" in <%s>.', text, parentNode.nodeName.toLowerCase());
-    }
-  }
-  function restoreControlledState$3(domElement, tag, props) {
-    switch (tag) {
-      case 'input':
-        restoreControlledState(domElement, props);
-        return;
-
-      case 'textarea':
-        restoreControlledState$2(domElement, props);
-        return;
-
-      case 'select':
-        restoreControlledState$1(domElement, props);
-        return;
-    }
-  }
-
-  function getActiveElement(doc) {
-    doc = doc || (typeof document !== 'undefined' ? document : undefined);
-
-    if (typeof doc === 'undefined') {
+        return false;
+    }
+  }
+  /**
+   * Google Input Tools provides composition data via a CustomEvent,
+   * with the `data` property populated in the `detail` object. If this
+   * is available on the event object, use it. If not, this is a plain
+   * composition event and we have nothing special to extract.
+   *
+   * @param {object} nativeEvent
+   * @return {?string}
+   */
+
+
+  function getDataFromCustomEvent(nativeEvent) {
+    var detail = nativeEvent.detail;
+
+    if (typeof detail === 'object' && 'data' in detail) {
+      return detail.data;
+    }
+
+    return null;
+  }
+  /**
+   * Check if a composition event was triggered by Korean IME.
+   * Our fallback mode does not work well with IE's Korean IME,
+   * so just use native composition events when Korean IME is used.
+   * Although CompositionEvent.locale property is deprecated,
+   * it is available in IE, where our fallback mode is enabled.
+   *
+   * @param {object} nativeEvent
+   * @return {boolean}
+   */
+
+
+  function isUsingKoreanIME(nativeEvent) {
+    return nativeEvent.locale === 'ko';
+  } // Track the current IME composition status, if any.
+
+
+  var isComposing = false;
+  /**
+   * @return {?object} A SyntheticCompositionEvent.
+   */
+
+  function extractCompositionEvent(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget) {
+    var eventType;
+    var fallbackData;
+
+    if (canUseCompositionEvent) {
+      eventType = getCompositionEventType(domEventName);
+    } else if (!isComposing) {
+      if (isFallbackCompositionStart(domEventName, nativeEvent)) {
+        eventType = 'onCompositionStart';
+      }
+    } else if (isFallbackCompositionEnd(domEventName, nativeEvent)) {
+      eventType = 'onCompositionEnd';
+    }
+
+    if (!eventType) {
+      return null;
+    }
+
+    if (useFallbackCompositionData && !isUsingKoreanIME(nativeEvent)) {
+      // The current composition is stored statically and must not be
+      // overwritten while composition continues.
+      if (!isComposing && eventType === 'onCompositionStart') {
+        isComposing = initialize(nativeEventTarget);
+      } else if (eventType === 'onCompositionEnd') {
+        if (isComposing) {
+          fallbackData = getData();
+        }
+      }
+    }
+
+    var listeners = accumulateTwoPhaseListeners(targetInst, eventType);
+
+    if (listeners.length > 0) {
+      var event = new SyntheticCompositionEvent(eventType, domEventName, null, nativeEvent, nativeEventTarget);
+      dispatchQueue.push({
+        event: event,
+        listeners: listeners
+      });
+
+      if (fallbackData) {
+        // Inject data generated from fallback path into the synthetic event.
+        // This matches the property of native CompositionEventInterface.
+        event.data = fallbackData;
+      } else {
+        var customData = getDataFromCustomEvent(nativeEvent);
+
+        if (customData !== null) {
+          event.data = customData;
+        }
+      }
+    }
+  }
+
+  function getNativeBeforeInputChars(domEventName, nativeEvent) {
+    switch (domEventName) {
+      case 'compositionend':
+        return getDataFromCustomEvent(nativeEvent);
+
+      case 'keypress':
+        /**
+         * If native `textInput` events are available, our goal is to make
+         * use of them. However, there is a special case: the spacebar key.
+         * In Webkit, preventing default on a spacebar `textInput` event
+         * cancels character insertion, but it *also* causes the browser
+         * to fall back to its default spacebar behavior of scrolling the
+         * page.
+         *
+         * Tracking at:
+         * https://code.google.com/p/chromium/issues/detail?id=355103
+         *
+         * To avoid this issue, use the keypress event as if no `textInput`
+         * event is available.
+         */
+        var which = nativeEvent.which;
+
+        if (which !== SPACEBAR_CODE) {
+          return null;
+        }
+
+        hasSpaceKeypress = true;
+        return SPACEBAR_CHAR;
+
+      case 'textInput':
+        // Record the characters to be added to the DOM.
+        var chars = nativeEvent.data; // If it's a spacebar character, assume that we have already handled
+        // it at the keypress level and bail immediately. Android Chrome
+        // doesn't give us keycodes, so we need to ignore it.
+
+        if (chars === SPACEBAR_CHAR && hasSpaceKeypress) {
+          return null;
+        }
+
+        return chars;
+
+      default:
+        // For other native event types, do nothing.
+        return null;
+    }
+  }
+  /**
+   * For browsers that do not provide the `textInput` event, extract the
+   * appropriate string to use for SyntheticInputEvent.
+   */
+
+
+  function getFallbackBeforeInputChars(domEventName, nativeEvent) {
+    // If we are currently composing (IME) and using a fallback to do so,
+    // try to extract the composed characters from the fallback object.
+    // If composition event is available, we extract a string only at
+    // compositionevent, otherwise extract it at fallback events.
+    if (isComposing) {
+      if (domEventName === 'compositionend' || !canUseCompositionEvent && isFallbackCompositionEnd(domEventName, nativeEvent)) {
+        var chars = getData();
+        reset();
+        isComposing = false;
+        return chars;
+      }
+
+      return null;
+    }
+
+    switch (domEventName) {
+      case 'paste':
+        // If a paste event occurs after a keypress, throw out the input
+        // chars. Paste events should not lead to BeforeInput events.
+        return null;
+
+      case 'keypress':
+        /**
+         * As of v27, Firefox may fire keypress events even when no character
+         * will be inserted. A few possibilities:
+         *
+         * - `which` is `0`. Arrow keys, Esc key, etc.
+         *
+         * - `which` is the pressed key code, but no char is available.
+         *   Ex: 'AltGr + d` in Polish. There is no modified character for
+         *   this key combination and no character is inserted into the
+         *   document, but FF fires the keypress for char code `100` anyway.
+         *   No `input` event will occur.
+         *
+         * - `which` is the pressed key code, but a command combination is
+         *   being used. Ex: `Cmd+C`. No character is inserted, and no
+         *   `input` event will occur.
+         */
+        if (!isKeypressCommand(nativeEvent)) {
+          // IE fires the `keypress` event when a user types an emoji via
+          // Touch keyboard of Windows.  In such a case, the `char` property
+          // holds an emoji character like `\uD83D\uDE0A`.  Because its length
+          // is 2, the property `which` does not represent an emoji correctly.
+          // In such a case, we directly return the `char` property instead of
+          // using `which`.
+          if (nativeEvent.char && nativeEvent.char.length > 1) {
+            return nativeEvent.char;
+          } else if (nativeEvent.which) {
+            return String.fromCharCode(nativeEvent.which);
+          }
+        }
+
+        return null;
+
+      case 'compositionend':
+        return useFallbackCompositionData && !isUsingKoreanIME(nativeEvent) ? null : nativeEvent.data;
+
+      default:
+        return null;
+    }
+  }
+  /**
+   * Extract a SyntheticInputEvent for `beforeInput`, based on either native
+   * `textInput` or fallback behavior.
+   *
+   * @return {?object} A SyntheticInputEvent.
+   */
+
+
+  function extractBeforeInputEvent(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget) {
+    var chars;
+
+    if (canUseTextInputEvent) {
+      chars = getNativeBeforeInputChars(domEventName, nativeEvent);
+    } else {
+      chars = getFallbackBeforeInputChars(domEventName, nativeEvent);
+    } // If no characters are being inserted, no BeforeInput event should
+    // be fired.
+
+
+    if (!chars) {
       return null;
     }
 
-    try {
-      return doc.activeElement || doc.body;
-    } catch (e) {
-      return doc.body;
-    }
+    var listeners = accumulateTwoPhaseListeners(targetInst, 'onBeforeInput');
+
+    if (listeners.length > 0) {
+      var event = new SyntheticInputEvent('onBeforeInput', 'beforeinput', null, nativeEvent, nativeEventTarget);
+      dispatchQueue.push({
+        event: event,
+        listeners: listeners
+      });
+      event.data = chars;
+    }
+  }
+  /**
+   * Create an `onBeforeInput` event to match
+   * http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents.
+   *
+   * This event plugin is based on the native `textInput` event
+   * available in Chrome, Safari, Opera, and IE. This event fires after
+   * `onKeyPress` and `onCompositionEnd`, but before `onInput`.
+   *
+   * `beforeInput` is spec'd but not implemented in any browsers, and
+   * the `input` event does not provide any useful information about what has
+   * actually been added, contrary to the spec. Thus, `textInput` is the best
+   * available event to identify the characters that have actually been inserted
+   * into the target node.
+   *
+   * This plugin is also responsible for emitting `composition` events, thus
+   * allowing us to share composition fallback code for both `beforeInput` and
+   * `composition` event types.
+   */
+
+
+  function extractEvents(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags, targetContainer) {
+    extractCompositionEvent(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget);
+    extractBeforeInputEvent(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget);
+  }
+
+  /**
+   * @see http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary
+   */
+  var supportedInputTypes = {
+    color: true,
+    date: true,
+    datetime: true,
+    'datetime-local': true,
+    email: true,
+    month: true,
+    number: true,
+    password: true,
+    range: true,
+    search: true,
+    tel: true,
+    text: true,
+    time: true,
+    url: true,
+    week: true
+  };
+
+  function isTextInputElement(elem) {
+    var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
+
+    if (nodeName === 'input') {
+      return !!supportedInputTypes[elem.type];
+    }
+
+    if (nodeName === 'textarea') {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Checks if an event is supported in the current execution environment.
+   *
+   * NOTE: This will not work correctly for non-generic events such as `change`,
+   * `reset`, `load`, `error`, and `select`.
+   *
+   * Borrows from Modernizr.
+   *
+   * @param {string} eventNameSuffix Event name, e.g. "click".
+   * @return {boolean} True if the event is supported.
+   * @internal
+   * @license Modernizr 3.0.0pre (Custom Build) | MIT
+   */
+
+  function isEventSupported(eventNameSuffix) {
+    if (!canUseDOM) {
+      return false;
+    }
+
+    var eventName = 'on' + eventNameSuffix;
+    var isSupported = (eventName in document);
+
+    if (!isSupported) {
+      var element = document.createElement('div');
+      element.setAttribute(eventName, 'return;');
+      isSupported = typeof element[eventName] === 'function';
+    }
+
+    return isSupported;
+  }
+
+  function registerEvents$1() {
+    registerTwoPhaseEvent('onChange', ['change', 'click', 'focusin', 'focusout', 'input', 'keydown', 'keyup', 'selectionchange']);
+  }
+
+  function createAndAccumulateChangeEvent(dispatchQueue, inst, nativeEvent, target) {
+    // Flag this event loop as needing state restore.
+    enqueueStateRestore(target);
+    var listeners = accumulateTwoPhaseListeners(inst, 'onChange');
+
+    if (listeners.length > 0) {
+      var event = new SyntheticEvent('onChange', 'change', null, nativeEvent, target);
+      dispatchQueue.push({
+        event: event,
+        listeners: listeners
+      });
+    }
+  }
+  /**
+   * For IE shims
+   */
+
+
+  var activeElement = null;
+  var activeElementInst = null;
+  /**
+   * SECTION: handle `change` event
+   */
+
+  function shouldUseChangeEvent(elem) {
+    var nodeName = elem.nodeName && elem.nodeName.toLowerCase();
+    return nodeName === 'select' || nodeName === 'input' && elem.type === 'file';
+  }
+
+  function manualDispatchChangeEvent(nativeEvent) {
+    var dispatchQueue = [];
+    createAndAccumulateChangeEvent(dispatchQueue, activeElementInst, nativeEvent, getEventTarget(nativeEvent)); // If change and propertychange bubbled, we'd just bind to it like all the
+    // other events and have it go through ReactBrowserEventEmitter. Since it
+    // doesn't, we manually listen for the events and so we have to enqueue and
+    // process the abstract event manually.
+    //
+    // Batching is necessary here in order to ensure that all event handlers run
+    // before the next rerender (including event handlers attached to ancestor
+    // elements instead of directly on the input). Without this, controlled
+    // components don't work properly in conjunction with event bubbling because
+    // the component is rerendered and the value reverted before all the event
+    // handlers can run. See https://github.com/facebook/react/issues/708.
+
+    batchedUpdates(runEventInBatch, dispatchQueue);
+  }
+
+  function runEventInBatch(dispatchQueue) {
+    processDispatchQueue(dispatchQueue, 0);
+  }
+
+  function getInstIfValueChanged(targetInst) {
+    var targetNode = getNodeFromInstance(targetInst);
+
+    if (updateValueIfChanged(targetNode)) {
+      return targetInst;
+    }
+  }
+
+  function getTargetInstForChangeEvent(domEventName, targetInst) {
+    if (domEventName === 'change') {
+      return targetInst;
+    }
+  }
+  /**
+   * SECTION: handle `input` event
+   */
+
+
+  var isInputEventSupported = false;
+
+  if (canUseDOM) {
+    // IE9 claims to support the input event but fails to trigger it when
+    // deleting text, so we ignore its input events.
+    isInputEventSupported = isEventSupported('input') && (!document.documentMode || document.documentMode > 9);
+  }
+  /**
+   * (For IE <=9) Starts tracking propertychange events on the passed-in element
+   * and override the value property so that we can distinguish user events from
+   * value changes in JS.
+   */
+
+
+  function startWatchingForValueChange(target, targetInst) {
+    activeElement = target;
+    activeElementInst = targetInst;
+    activeElement.attachEvent('onpropertychange', handlePropertyChange);
+  }
+  /**
+   * (For IE <=9) Removes the event listeners from the currently-tracked element,
+   * if any exists.
+   */
+
+
+  function stopWatchingForValueChange() {
+    if (!activeElement) {
+      return;
+    }
+
+    activeElement.detachEvent('onpropertychange', handlePropertyChange);
+    activeElement = null;
+    activeElementInst = null;
+  }
+  /**
+   * (For IE <=9) Handles a propertychange event, sending a `change` event if
+   * the value of the active element has changed.
+   */
+
+
+  function handlePropertyChange(nativeEvent) {
+    if (nativeEvent.propertyName !== 'value') {
+      return;
+    }
+
+    if (getInstIfValueChanged(activeElementInst)) {
+      manualDispatchChangeEvent(nativeEvent);
+    }
+  }
+
+  function handleEventsForInputEventPolyfill(domEventName, target, targetInst) {
+    if (domEventName === 'focusin') {
+      // In IE9, propertychange fires for most input events but is buggy and
+      // doesn't fire when text is deleted, but conveniently, selectionchange
+      // appears to fire in all of the remaining cases so we catch those and
+      // forward the event if the value has changed
+      // In either case, we don't want to call the event handler if the value
+      // is changed from JS so we redefine a setter for `.value` that updates
+      // our activeElementValue variable, allowing us to ignore those changes
+      //
+      // stopWatching() should be a noop here but we call it just in case we
+      // missed a blur event somehow.
+      stopWatchingForValueChange();
+      startWatchingForValueChange(target, targetInst);
+    } else if (domEventName === 'focusout') {
+      stopWatchingForValueChange();
+    }
+  } // For IE8 and IE9.
+
+
+  function getTargetInstForInputEventPolyfill(domEventName, targetInst) {
+    if (domEventName === 'selectionchange' || domEventName === 'keyup' || domEventName === 'keydown') {
+      // On the selectionchange event, the target is just document which isn't
+      // helpful for us so just check activeElement instead.
+      //
+      // 99% of the time, keydown and keyup aren't necessary. IE8 fails to fire
+      // propertychange on the first input event after setting `value` from a
+      // script and fires only keydown, keypress, keyup. Catching keyup usually
+      // gets it and catching keydown lets us fire an event for the first
+      // keystroke if user does a key repeat (it'll be a little delayed: right
+      // before the second keystroke). Other input methods (e.g., paste) seem to
+      // fire selectionchange normally.
+      return getInstIfValueChanged(activeElementInst);
+    }
+  }
+  /**
+   * SECTION: handle `click` event
+   */
+
+
+  function shouldUseClickEvent(elem) {
+    // Use the `click` event to detect changes to checkbox and radio inputs.
+    // This approach works across all browsers, whereas `change` does not fire
+    // until `blur` in IE8.
+    var nodeName = elem.nodeName;
+    return nodeName && nodeName.toLowerCase() === 'input' && (elem.type === 'checkbox' || elem.type === 'radio');
+  }
+
+  function getTargetInstForClickEvent(domEventName, targetInst) {
+    if (domEventName === 'click') {
+      return getInstIfValueChanged(targetInst);
+    }
+  }
+
+  function getTargetInstForInputOrChangeEvent(domEventName, targetInst) {
+    if (domEventName === 'input' || domEventName === 'change') {
+      return getInstIfValueChanged(targetInst);
+    }
+  }
+
+  function handleControlledInputBlur(node) {
+    var state = node._wrapperState;
+
+    if (!state || !state.controlled || node.type !== 'number') {
+      return;
+    }
+
+    {
+      // If controlled, assign the value attribute to the current value on blur
+      setDefaultValue(node, 'number', node.value);
+    }
+  }
+  /**
+   * This plugin creates an `onChange` event that normalizes change events
+   * across form elements. This event fires at a time when it's possible to
+   * change the element's value without seeing a flicker.
+   *
+   * Supported elements are:
+   * - input (see `isTextInputElement`)
+   * - textarea
+   * - select
+   */
+
+
+  function extractEvents$1(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags, targetContainer) {
+    var targetNode = targetInst ? getNodeFromInstance(targetInst) : window;
+    var getTargetInstFunc, handleEventFunc;
+
+    if (shouldUseChangeEvent(targetNode)) {
+      getTargetInstFunc = getTargetInstForChangeEvent;
+    } else if (isTextInputElement(targetNode)) {
+      if (isInputEventSupported) {
+        getTargetInstFunc = getTargetInstForInputOrChangeEvent;
+      } else {
+        getTargetInstFunc = getTargetInstForInputEventPolyfill;
+        handleEventFunc = handleEventsForInputEventPolyfill;
+      }
+    } else if (shouldUseClickEvent(targetNode)) {
+      getTargetInstFunc = getTargetInstForClickEvent;
+    }
+
+    if (getTargetInstFunc) {
+      var inst = getTargetInstFunc(domEventName, targetInst);
+
+      if (inst) {
+        createAndAccumulateChangeEvent(dispatchQueue, inst, nativeEvent, nativeEventTarget);
+        return;
+      }
+    }
+
+    if (handleEventFunc) {
+      handleEventFunc(domEventName, targetNode, targetInst);
+    } // When blurring, set the value attribute for number inputs
+
+
+    if (domEventName === 'focusout') {
+      handleControlledInputBlur(targetNode);
+    }
+  }
+
+  function registerEvents$2() {
+    registerDirectEvent('onMouseEnter', ['mouseout', 'mouseover']);
+    registerDirectEvent('onMouseLeave', ['mouseout', 'mouseover']);
+    registerDirectEvent('onPointerEnter', ['pointerout', 'pointerover']);
+    registerDirectEvent('onPointerLeave', ['pointerout', 'pointerover']);
+  }
+  /**
+   * For almost every interaction we care about, there will be both a top-level
+   * `mouseover` and `mouseout` event that occurs. Only use `mouseout` so that
+   * we do not extract duplicate events. However, moving the mouse into the
+   * browser from outside will not fire a `mouseout` event. In this case, we use
+   * the `mouseover` top-level event.
+   */
+
+
+  function extractEvents$2(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags, targetContainer) {
+    var isOverEvent = domEventName === 'mouseover' || domEventName === 'pointerover';
+    var isOutEvent = domEventName === 'mouseout' || domEventName === 'pointerout';
+
+    if (isOverEvent && (eventSystemFlags & IS_REPLAYED) === 0) {
+      // If this is an over event with a target, we might have already dispatched
+      // the event in the out event of the other target. If this is replayed,
+      // then it's because we couldn't dispatch against this target previously
+      // so we have to do it now instead.
+      var related = nativeEvent.relatedTarget || nativeEvent.fromElement;
+
+      if (related) {
+        // If the related node is managed by React, we can assume that we have
+        // already dispatched the corresponding events during its mouseout.
+        if (getClosestInstanceFromNode(related) || isContainerMarkedAsRoot(related)) {
+          return;
+        }
+      }
+    }
+
+    if (!isOutEvent && !isOverEvent) {
+      // Must not be a mouse or pointer in or out - ignoring.
+      return;
+    }
+
+    var win; // TODO: why is this nullable in the types but we read from it?
+
+    if (nativeEventTarget.window === nativeEventTarget) {
+      // `nativeEventTarget` is probably a window object.
+      win = nativeEventTarget;
+    } else {
+      // TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.
+      var doc = nativeEventTarget.ownerDocument;
+
+      if (doc) {
+        win = doc.defaultView || doc.parentWindow;
+      } else {
+        win = window;
+      }
+    }
+
+    var from;
+    var to;
+
+    if (isOutEvent) {
+      var _related = nativeEvent.relatedTarget || nativeEvent.toElement;
+
+      from = targetInst;
+      to = _related ? getClosestInstanceFromNode(_related) : null;
+
+      if (to !== null) {
+        var nearestMounted = getNearestMountedFiber(to);
+
+        if (to !== nearestMounted || to.tag !== HostComponent && to.tag !== HostText) {
+          to = null;
+        }
+      }
+    } else {
+      // Moving to a node from outside the window.
+      from = null;
+      to = targetInst;
+    }
+
+    if (from === to) {
+      // Nothing pertains to our managed components.
+      return;
+    }
+
+    var SyntheticEventCtor = SyntheticMouseEvent;
+    var leaveEventType = 'onMouseLeave';
+    var enterEventType = 'onMouseEnter';
+    var eventTypePrefix = 'mouse';
+
+    if (domEventName === 'pointerout' || domEventName === 'pointerover') {
+      SyntheticEventCtor = SyntheticPointerEvent;
+      leaveEventType = 'onPointerLeave';
+      enterEventType = 'onPointerEnter';
+      eventTypePrefix = 'pointer';
+    }
+
+    var fromNode = from == null ? win : getNodeFromInstance(from);
+    var toNode = to == null ? win : getNodeFromInstance(to);
+    var leave = new SyntheticEventCtor(leaveEventType, eventTypePrefix + 'leave', from, nativeEvent, nativeEventTarget);
+    leave.target = fromNode;
+    leave.relatedTarget = toNode;
+    var enter = null; // We should only process this nativeEvent if we are processing
+    // the first ancestor. Next time, we will ignore the event.
+
+    var nativeTargetInst = getClosestInstanceFromNode(nativeEventTarget);
+
+    if (nativeTargetInst === targetInst) {
+      var enterEvent = new SyntheticEventCtor(enterEventType, eventTypePrefix + 'enter', to, nativeEvent, nativeEventTarget);
+      enterEvent.target = toNode;
+      enterEvent.relatedTarget = fromNode;
+      enter = enterEvent;
+    }
+
+    accumulateEnterLeaveTwoPhaseListeners(dispatchQueue, leave, enter, from, to);
+  }
+
+  /**
+   * inlined Object.is polyfill to avoid requiring consumers ship their own
+   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+   */
+  function is(x, y) {
+    return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
+    ;
+  }
+
+  var objectIs = typeof Object.is === 'function' ? Object.is : is;
+
+  var hasOwnProperty$2 = Object.prototype.hasOwnProperty;
+  /**
+   * Performs equality by iterating through keys on an object and returning false
+   * when any key has values which are not strictly equal between the arguments.
+   * Returns true when the values of all keys are strictly equal.
+   */
+
+  function shallowEqual(objA, objB) {
+    if (objectIs(objA, objB)) {
+      return true;
+    }
+
+    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+      return false;
+    }
+
+    var keysA = Object.keys(objA);
+    var keysB = Object.keys(objB);
+
+    if (keysA.length !== keysB.length) {
+      return false;
+    } // Test for A's keys different from B.
+
+
+    for (var i = 0; i < keysA.length; i++) {
+      if (!hasOwnProperty$2.call(objB, keysA[i]) || !objectIs(objA[keysA[i]], objB[keysA[i]])) {
+        return false;
+      }
+    }
+
+    return true;
   }
 
   /**
@@ -7094,8 +7829,6 @@
   function getSelectionInformation() {
     var focusedElem = getActiveElementDeep();
     return {
-      // Used by Flare
-      activeElementDetached: null,
       focusedElem: focusedElem,
       selectionRange: hasSelectionCapabilities(focusedElem) ? getSelection(focusedElem) : null
     };
@@ -7175,8 +7908,8 @@
    */
 
   function setSelection(input, offsets) {
-    var start = offsets.start,
-        end = offsets.end;
+    var start = offsets.start;
+    var end = offsets.end;
 
     if (end === undefined) {
       end = start;
@@ -7190,6 +7923,1881 @@
     }
   }
 
+  var skipSelectionChangeEvent = canUseDOM && 'documentMode' in document && document.documentMode <= 11;
+
+  function registerEvents$3() {
+    registerTwoPhaseEvent('onSelect', ['focusout', 'contextmenu', 'dragend', 'focusin', 'keydown', 'keyup', 'mousedown', 'mouseup', 'selectionchange']);
+  }
+
+  var activeElement$1 = null;
+  var activeElementInst$1 = null;
+  var lastSelection = null;
+  var mouseDown = false;
+  /**
+   * Get an object which is a unique representation of the current selection.
+   *
+   * The return value will not be consistent across nodes or browsers, but
+   * two identical selections on the same node will return identical objects.
+   */
+
+  function getSelection$1(node) {
+    if ('selectionStart' in node && hasSelectionCapabilities(node)) {
+      return {
+        start: node.selectionStart,
+        end: node.selectionEnd
+      };
+    } else {
+      var win = node.ownerDocument && node.ownerDocument.defaultView || window;
+      var selection = win.getSelection();
+      return {
+        anchorNode: selection.anchorNode,
+        anchorOffset: selection.anchorOffset,
+        focusNode: selection.focusNode,
+        focusOffset: selection.focusOffset
+      };
+    }
+  }
+  /**
+   * Get document associated with the event target.
+   */
+
+
+  function getEventTargetDocument(eventTarget) {
+    return eventTarget.window === eventTarget ? eventTarget.document : eventTarget.nodeType === DOCUMENT_NODE ? eventTarget : eventTarget.ownerDocument;
+  }
+  /**
+   * Poll selection to see whether it's changed.
+   *
+   * @param {object} nativeEvent
+   * @param {object} nativeEventTarget
+   * @return {?SyntheticEvent}
+   */
+
+
+  function constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget) {
+    // Ensure we have the right element, and that the user is not dragging a
+    // selection (this matches native `select` event behavior). In HTML5, select
+    // fires only on input and textarea thus if there's no focused element we
+    // won't dispatch.
+    var doc = getEventTargetDocument(nativeEventTarget);
+
+    if (mouseDown || activeElement$1 == null || activeElement$1 !== getActiveElement(doc)) {
+      return;
+    } // Only fire when selection has actually changed.
+
+
+    var currentSelection = getSelection$1(activeElement$1);
+
+    if (!lastSelection || !shallowEqual(lastSelection, currentSelection)) {
+      lastSelection = currentSelection;
+      var listeners = accumulateTwoPhaseListeners(activeElementInst$1, 'onSelect');
+
+      if (listeners.length > 0) {
+        var event = new SyntheticEvent('onSelect', 'select', null, nativeEvent, nativeEventTarget);
+        dispatchQueue.push({
+          event: event,
+          listeners: listeners
+        });
+        event.target = activeElement$1;
+      }
+    }
+  }
+  /**
+   * This plugin creates an `onSelect` event that normalizes select events
+   * across form elements.
+   *
+   * Supported elements are:
+   * - input (see `isTextInputElement`)
+   * - textarea
+   * - contentEditable
+   *
+   * This differs from native browser implementations in the following ways:
+   * - Fires on contentEditable fields as well as inputs.
+   * - Fires for collapsed selection.
+   * - Fires after user input.
+   */
+
+
+  function extractEvents$3(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags, targetContainer) {
+
+    var targetNode = targetInst ? getNodeFromInstance(targetInst) : window;
+
+    switch (domEventName) {
+      // Track the input node that has focus.
+      case 'focusin':
+        if (isTextInputElement(targetNode) || targetNode.contentEditable === 'true') {
+          activeElement$1 = targetNode;
+          activeElementInst$1 = targetInst;
+          lastSelection = null;
+        }
+
+        break;
+
+      case 'focusout':
+        activeElement$1 = null;
+        activeElementInst$1 = null;
+        lastSelection = null;
+        break;
+      // Don't fire the event while the user is dragging. This matches the
+      // semantics of the native select event.
+
+      case 'mousedown':
+        mouseDown = true;
+        break;
+
+      case 'contextmenu':
+      case 'mouseup':
+      case 'dragend':
+        mouseDown = false;
+        constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget);
+        break;
+      // Chrome and IE fire non-standard event when selection is changed (and
+      // sometimes when it hasn't). IE's event fires out of order with respect
+      // to key and input events on deletion, so we discard it.
+      //
+      // Firefox doesn't support selectionchange, so check selection status
+      // after each key entry. The selection changes after keydown and before
+      // keyup, but we check on keydown as well in the case of holding down a
+      // key, when multiple keydown events are fired but only one keyup is.
+      // This is also our approach for IE handling, for the reason above.
+
+      case 'selectionchange':
+        if (skipSelectionChangeEvent) {
+          break;
+        }
+
+      // falls through
+
+      case 'keydown':
+      case 'keyup':
+        constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget);
+    }
+  }
+
+  function extractEvents$4(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags, targetContainer) {
+    var reactName = topLevelEventsToReactNames.get(domEventName);
+
+    if (reactName === undefined) {
+      return;
+    }
+
+    var SyntheticEventCtor = SyntheticEvent;
+    var reactEventType = domEventName;
+
+    switch (domEventName) {
+      case 'keypress':
+        // Firefox creates a keypress event for function keys too. This removes
+        // the unwanted keypress events. Enter is however both printable and
+        // non-printable. One would expect Tab to be as well (but it isn't).
+        if (getEventCharCode(nativeEvent) === 0) {
+          return;
+        }
+
+      /* falls through */
+
+      case 'keydown':
+      case 'keyup':
+        SyntheticEventCtor = SyntheticKeyboardEvent;
+        break;
+
+      case 'focusin':
+        reactEventType = 'focus';
+        SyntheticEventCtor = SyntheticFocusEvent;
+        break;
+
+      case 'focusout':
+        reactEventType = 'blur';
+        SyntheticEventCtor = SyntheticFocusEvent;
+        break;
+
+      case 'beforeblur':
+      case 'afterblur':
+        SyntheticEventCtor = SyntheticFocusEvent;
+        break;
+
+      case 'click':
+        // Firefox creates a click event on right mouse clicks. This removes the
+        // unwanted click events.
+        if (nativeEvent.button === 2) {
+          return;
+        }
+
+      /* falls through */
+
+      case 'auxclick':
+      case 'dblclick':
+      case 'mousedown':
+      case 'mousemove':
+      case 'mouseup': // TODO: Disabled elements should not respond to mouse events
+
+      /* falls through */
+
+      case 'mouseout':
+      case 'mouseover':
+      case 'contextmenu':
+        SyntheticEventCtor = SyntheticMouseEvent;
+        break;
+
+      case 'drag':
+      case 'dragend':
+      case 'dragenter':
+      case 'dragexit':
+      case 'dragleave':
+      case 'dragover':
+      case 'dragstart':
+      case 'drop':
+        SyntheticEventCtor = SyntheticDragEvent;
+        break;
+
+      case 'touchcancel':
+      case 'touchend':
+      case 'touchmove':
+      case 'touchstart':
+        SyntheticEventCtor = SyntheticTouchEvent;
+        break;
+
+      case ANIMATION_END:
+      case ANIMATION_ITERATION:
+      case ANIMATION_START:
+        SyntheticEventCtor = SyntheticAnimationEvent;
+        break;
+
+      case TRANSITION_END:
+        SyntheticEventCtor = SyntheticTransitionEvent;
+        break;
+
+      case 'scroll':
+        SyntheticEventCtor = SyntheticUIEvent;
+        break;
+
+      case 'wheel':
+        SyntheticEventCtor = SyntheticWheelEvent;
+        break;
+
+      case 'copy':
+      case 'cut':
+      case 'paste':
+        SyntheticEventCtor = SyntheticClipboardEvent;
+        break;
+
+      case 'gotpointercapture':
+      case 'lostpointercapture':
+      case 'pointercancel':
+      case 'pointerdown':
+      case 'pointermove':
+      case 'pointerout':
+      case 'pointerover':
+      case 'pointerup':
+        SyntheticEventCtor = SyntheticPointerEvent;
+        break;
+    }
+
+    var inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
+
+    {
+      // Some events don't bubble in the browser.
+      // In the past, React has always bubbled them, but this can be surprising.
+      // We're going to try aligning closer to the browser behavior by not bubbling
+      // them in React either. We'll start by not bubbling onScroll, and then expand.
+      var accumulateTargetOnly = !inCapturePhase && // TODO: ideally, we'd eventually add all events from
+      // nonDelegatedEvents list in DOMPluginEventSystem.
+      // Then we can remove this special list.
+      // This is a breaking change that can wait until React 18.
+      domEventName === 'scroll';
+
+      var _listeners = accumulateSinglePhaseListeners(targetInst, reactName, nativeEvent.type, inCapturePhase, accumulateTargetOnly);
+
+      if (_listeners.length > 0) {
+        // Intentionally create event lazily.
+        var _event = new SyntheticEventCtor(reactName, reactEventType, null, nativeEvent, nativeEventTarget);
+
+        dispatchQueue.push({
+          event: _event,
+          listeners: _listeners
+        });
+      }
+    }
+  }
+
+  // TODO: remove top-level side effect.
+  registerSimpleEvents();
+  registerEvents$2();
+  registerEvents$1();
+  registerEvents$3();
+  registerEvents();
+
+  function extractEvents$5(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags, targetContainer) {
+    // TODO: we should remove the concept of a "SimpleEventPlugin".
+    // This is the basic functionality of the event system. All
+    // the other plugins are essentially polyfills. So the plugin
+    // should probably be inlined somewhere and have its logic
+    // be core the to event system. This would potentially allow
+    // us to ship builds of React without the polyfilled plugins below.
+    extractEvents$4(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags);
+    var shouldProcessPolyfillPlugins = (eventSystemFlags & SHOULD_NOT_PROCESS_POLYFILL_EVENT_PLUGINS) === 0; // We don't process these events unless we are in the
+    // event's native "bubble" phase, which means that we're
+    // not in the capture phase. That's because we emulate
+    // the capture phase here still. This is a trade-off,
+    // because in an ideal world we would not emulate and use
+    // the phases properly, like we do with the SimpleEvent
+    // plugin. However, the plugins below either expect
+    // emulation (EnterLeave) or use state localized to that
+    // plugin (BeforeInput, Change, Select). The state in
+    // these modules complicates things, as you'll essentially
+    // get the case where the capture phase event might change
+    // state, only for the following bubble event to come in
+    // later and not trigger anything as the state now
+    // invalidates the heuristics of the event plugin. We
+    // could alter all these plugins to work in such ways, but
+    // that might cause other unknown side-effects that we
+    // can't forsee right now.
+
+    if (shouldProcessPolyfillPlugins) {
+      extractEvents$2(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags);
+      extractEvents$1(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget);
+      extractEvents$3(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget);
+      extractEvents(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget);
+    }
+  } // List of events that need to be individually attached to media elements.
+
+
+  var mediaEventTypes = ['abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'encrypted', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting']; // We should not delegate these events to the container, but rather
+  // set them on the actual target element itself. This is primarily
+  // because these events do not consistently bubble in the DOM.
+
+  var nonDelegatedEvents = new Set(['cancel', 'close', 'invalid', 'load', 'scroll', 'toggle'].concat(mediaEventTypes));
+
+  function executeDispatch(event, listener, currentTarget) {
+    var type = event.type || 'unknown-event';
+    event.currentTarget = currentTarget;
+    invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event);
+    event.currentTarget = null;
+  }
+
+  function processDispatchQueueItemsInOrder(event, dispatchListeners, inCapturePhase) {
+    var previousInstance;
+
+    if (inCapturePhase) {
+      for (var i = dispatchListeners.length - 1; i >= 0; i--) {
+        var _dispatchListeners$i = dispatchListeners[i],
+            instance = _dispatchListeners$i.instance,
+            currentTarget = _dispatchListeners$i.currentTarget,
+            listener = _dispatchListeners$i.listener;
+
+        if (instance !== previousInstance && event.isPropagationStopped()) {
+          return;
+        }
+
+        executeDispatch(event, listener, currentTarget);
+        previousInstance = instance;
+      }
+    } else {
+      for (var _i = 0; _i < dispatchListeners.length; _i++) {
+        var _dispatchListeners$_i = dispatchListeners[_i],
+            _instance = _dispatchListeners$_i.instance,
+            _currentTarget = _dispatchListeners$_i.currentTarget,
+            _listener = _dispatchListeners$_i.listener;
+
+        if (_instance !== previousInstance && event.isPropagationStopped()) {
+          return;
+        }
+
+        executeDispatch(event, _listener, _currentTarget);
+        previousInstance = _instance;
+      }
+    }
+  }
+
+  function processDispatchQueue(dispatchQueue, eventSystemFlags) {
+    var inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
+
+    for (var i = 0; i < dispatchQueue.length; i++) {
+      var _dispatchQueue$i = dispatchQueue[i],
+          event = _dispatchQueue$i.event,
+          listeners = _dispatchQueue$i.listeners;
+      processDispatchQueueItemsInOrder(event, listeners, inCapturePhase); //  event system doesn't use pooling.
+    } // This would be a good time to rethrow if any of the event handlers threw.
+
+
+    rethrowCaughtError();
+  }
+
+  function dispatchEventsForPlugins(domEventName, eventSystemFlags, nativeEvent, targetInst, targetContainer) {
+    var nativeEventTarget = getEventTarget(nativeEvent);
+    var dispatchQueue = [];
+    extractEvents$5(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags);
+    processDispatchQueue(dispatchQueue, eventSystemFlags);
+  }
+
+  function listenToNonDelegatedEvent(domEventName, targetElement) {
+    var isCapturePhaseListener = false;
+    var listenerSet = getEventListenerSet(targetElement);
+    var listenerSetKey = getListenerSetKey(domEventName, isCapturePhaseListener);
+
+    if (!listenerSet.has(listenerSetKey)) {
+      addTrappedEventListener(targetElement, domEventName, IS_NON_DELEGATED, isCapturePhaseListener);
+      listenerSet.add(listenerSetKey);
+    }
+  }
+  var listeningMarker = '_reactListening' + Math.random().toString(36).slice(2);
+  function listenToAllSupportedEvents(rootContainerElement) {
+    {
+      if (rootContainerElement[listeningMarker]) {
+        // Performance optimization: don't iterate through events
+        // for the same portal container or root node more than once.
+        // TODO: once we remove the flag, we may be able to also
+        // remove some of the bookkeeping maps used for laziness.
+        return;
+      }
+
+      rootContainerElement[listeningMarker] = true;
+      allNativeEvents.forEach(function (domEventName) {
+        if (!nonDelegatedEvents.has(domEventName)) {
+          listenToNativeEvent(domEventName, false, rootContainerElement, null);
+        }
+
+        listenToNativeEvent(domEventName, true, rootContainerElement, null);
+      });
+    }
+  }
+  function listenToNativeEvent(domEventName, isCapturePhaseListener, rootContainerElement, targetElement) {
+    var eventSystemFlags = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+    var target = rootContainerElement; // selectionchange needs to be attached to the document
+    // otherwise it won't capture incoming events that are only
+    // triggered on the document directly.
+
+    if (domEventName === 'selectionchange' && rootContainerElement.nodeType !== DOCUMENT_NODE) {
+      target = rootContainerElement.ownerDocument;
+    } // If the event can be delegated (or is capture phase), we can
+    // register it to the root container. Otherwise, we should
+    // register the event to the target element and mark it as
+    // a non-delegated event.
+
+
+    if (targetElement !== null && !isCapturePhaseListener && nonDelegatedEvents.has(domEventName)) {
+      // For all non-delegated events, apart from scroll, we attach
+      // their event listeners to the respective elements that their
+      // events fire on. That means we can skip this step, as event
+      // listener has already been added previously. However, we
+      // special case the scroll event because the reality is that any
+      // element can scroll.
+      // TODO: ideally, we'd eventually apply the same logic to all
+      // events from the nonDelegatedEvents list. Then we can remove
+      // this special case and use the same logic for all events.
+      if (domEventName !== 'scroll') {
+        return;
+      }
+
+      eventSystemFlags |= IS_NON_DELEGATED;
+      target = targetElement;
+    }
+
+    var listenerSet = getEventListenerSet(target);
+    var listenerSetKey = getListenerSetKey(domEventName, isCapturePhaseListener); // If the listener entry is empty or we should upgrade, then
+    // we need to trap an event listener onto the target.
+
+    if (!listenerSet.has(listenerSetKey)) {
+      if (isCapturePhaseListener) {
+        eventSystemFlags |= IS_CAPTURE_PHASE;
+      }
+
+      addTrappedEventListener(target, domEventName, eventSystemFlags, isCapturePhaseListener);
+      listenerSet.add(listenerSetKey);
+    }
+  }
+
+  function addTrappedEventListener(targetContainer, domEventName, eventSystemFlags, isCapturePhaseListener, isDeferredListenerForLegacyFBSupport) {
+    var listener = createEventListenerWrapperWithPriority(targetContainer, domEventName, eventSystemFlags); // If passive option is not supported, then the event will be
+    // active and not passive.
+
+    var isPassiveListener = undefined;
+
+    if (passiveBrowserEventsSupported) {
+      // Browsers introduced an intervention, making these events
+      // passive by default on document. React doesn't bind them
+      // to document anymore, but changing this now would undo
+      // the performance wins from the change. So we emulate
+      // the existing behavior manually on the roots now.
+      // https://github.com/facebook/react/issues/19651
+      if (domEventName === 'touchstart' || domEventName === 'touchmove' || domEventName === 'wheel') {
+        isPassiveListener = true;
+      }
+    }
+
+    targetContainer =  targetContainer;
+    var unsubscribeListener; // When legacyFBSupport is enabled, it's for when we
+
+
+    if (isCapturePhaseListener) {
+      if (isPassiveListener !== undefined) {
+        unsubscribeListener = addEventCaptureListenerWithPassiveFlag(targetContainer, domEventName, listener, isPassiveListener);
+      } else {
+        unsubscribeListener = addEventCaptureListener(targetContainer, domEventName, listener);
+      }
+    } else {
+      if (isPassiveListener !== undefined) {
+        unsubscribeListener = addEventBubbleListenerWithPassiveFlag(targetContainer, domEventName, listener, isPassiveListener);
+      } else {
+        unsubscribeListener = addEventBubbleListener(targetContainer, domEventName, listener);
+      }
+    }
+  }
+
+  function isMatchingRootContainer(grandContainer, targetContainer) {
+    return grandContainer === targetContainer || grandContainer.nodeType === COMMENT_NODE && grandContainer.parentNode === targetContainer;
+  }
+
+  function dispatchEventForPluginEventSystem(domEventName, eventSystemFlags, nativeEvent, targetInst, targetContainer) {
+    var ancestorInst = targetInst;
+
+    if ((eventSystemFlags & IS_EVENT_HANDLE_NON_MANAGED_NODE) === 0 && (eventSystemFlags & IS_NON_DELEGATED) === 0) {
+      var targetContainerNode = targetContainer; // If we are using the legacy FB support flag, we
+
+      if (targetInst !== null) {
+        // The below logic attempts to work out if we need to change
+        // the target fiber to a different ancestor. We had similar logic
+        // in the legacy event system, except the big difference between
+        // systems is that the modern event system now has an event listener
+        // attached to each React Root and React Portal Root. Together,
+        // the DOM nodes representing these roots are the "rootContainer".
+        // To figure out which ancestor instance we should use, we traverse
+        // up the fiber tree from the target instance and attempt to find
+        // root boundaries that match that of our current "rootContainer".
+        // If we find that "rootContainer", we find the parent fiber
+        // sub-tree for that root and make that our ancestor instance.
+        var node = targetInst;
+
+        mainLoop: while (true) {
+          if (node === null) {
+            return;
+          }
+
+          var nodeTag = node.tag;
+
+          if (nodeTag === HostRoot || nodeTag === HostPortal) {
+            var container = node.stateNode.containerInfo;
+
+            if (isMatchingRootContainer(container, targetContainerNode)) {
+              break;
+            }
+
+            if (nodeTag === HostPortal) {
+              // The target is a portal, but it's not the rootContainer we're looking for.
+              // Normally portals handle their own events all the way down to the root.
+              // So we should be able to stop now. However, we don't know if this portal
+              // was part of *our* root.
+              var grandNode = node.return;
+
+              while (grandNode !== null) {
+                var grandTag = grandNode.tag;
+
+                if (grandTag === HostRoot || grandTag === HostPortal) {
+                  var grandContainer = grandNode.stateNode.containerInfo;
+
+                  if (isMatchingRootContainer(grandContainer, targetContainerNode)) {
+                    // This is the rootContainer we're looking for and we found it as
+                    // a parent of the Portal. That means we can ignore it because the
+                    // Portal will bubble through to us.
+                    return;
+                  }
+                }
+
+                grandNode = grandNode.return;
+              }
+            } // Now we need to find it's corresponding host fiber in the other
+            // tree. To do this we can use getClosestInstanceFromNode, but we
+            // need to validate that the fiber is a host instance, otherwise
+            // we need to traverse up through the DOM till we find the correct
+            // node that is from the other tree.
+
+
+            while (container !== null) {
+              var parentNode = getClosestInstanceFromNode(container);
+
+              if (parentNode === null) {
+                return;
+              }
+
+              var parentTag = parentNode.tag;
+
+              if (parentTag === HostComponent || parentTag === HostText) {
+                node = ancestorInst = parentNode;
+                continue mainLoop;
+              }
+
+              container = container.parentNode;
+            }
+          }
+
+          node = node.return;
+        }
+      }
+    }
+
+    batchedEventUpdates(function () {
+      return dispatchEventsForPlugins(domEventName, eventSystemFlags, nativeEvent, ancestorInst);
+    });
+  }
+
+  function createDispatchListener(instance, listener, currentTarget) {
+    return {
+      instance: instance,
+      listener: listener,
+      currentTarget: currentTarget
+    };
+  }
+
+  function accumulateSinglePhaseListeners(targetFiber, reactName, nativeEventType, inCapturePhase, accumulateTargetOnly) {
+    var captureName = reactName !== null ? reactName + 'Capture' : null;
+    var reactEventName = inCapturePhase ? captureName : reactName;
+    var listeners = [];
+    var instance = targetFiber;
+    var lastHostComponent = null; // Accumulate all instances and listeners via the target -> root path.
+
+    while (instance !== null) {
+      var _instance2 = instance,
+          stateNode = _instance2.stateNode,
+          tag = _instance2.tag; // Handle listeners that are on HostComponents (i.e. <div>)
+
+      if (tag === HostComponent && stateNode !== null) {
+        lastHostComponent = stateNode; // createEventHandle listeners
+
+
+        if (reactEventName !== null) {
+          var listener = getListener(instance, reactEventName);
+
+          if (listener != null) {
+            listeners.push(createDispatchListener(instance, listener, lastHostComponent));
+          }
+        }
+      } // If we are only accumulating events for the target, then we don't
+      // continue to propagate through the React fiber tree to find other
+      // listeners.
+
+
+      if (accumulateTargetOnly) {
+        break;
+      }
+
+      instance = instance.return;
+    }
+
+    return listeners;
+  } // We should only use this function for:
+  // - BeforeInputEventPlugin
+  // - ChangeEventPlugin
+  // - SelectEventPlugin
+  // This is because we only process these plugins
+  // in the bubble phase, so we need to accumulate two
+  // phase event listeners (via emulation).
+
+  function accumulateTwoPhaseListeners(targetFiber, reactName) {
+    var captureName = reactName + 'Capture';
+    var listeners = [];
+    var instance = targetFiber; // Accumulate all instances and listeners via the target -> root path.
+
+    while (instance !== null) {
+      var _instance3 = instance,
+          stateNode = _instance3.stateNode,
+          tag = _instance3.tag; // Handle listeners that are on HostComponents (i.e. <div>)
+
+      if (tag === HostComponent && stateNode !== null) {
+        var currentTarget = stateNode;
+        var captureListener = getListener(instance, captureName);
+
+        if (captureListener != null) {
+          listeners.unshift(createDispatchListener(instance, captureListener, currentTarget));
+        }
+
+        var bubbleListener = getListener(instance, reactName);
+
+        if (bubbleListener != null) {
+          listeners.push(createDispatchListener(instance, bubbleListener, currentTarget));
+        }
+      }
+
+      instance = instance.return;
+    }
+
+    return listeners;
+  }
+
+  function getParent(inst) {
+    if (inst === null) {
+      return null;
+    }
+
+    do {
+      inst = inst.return; // TODO: If this is a HostRoot we might want to bail out.
+      // That is depending on if we want nested subtrees (layers) to bubble
+      // events to their parent. We could also go through parentNode on the
+      // host node but that wouldn't work for React Native and doesn't let us
+      // do the portal feature.
+    } while (inst && inst.tag !== HostComponent);
+
+    if (inst) {
+      return inst;
+    }
+
+    return null;
+  }
+  /**
+   * Return the lowest common ancestor of A and B, or null if they are in
+   * different trees.
+   */
+
+
+  function getLowestCommonAncestor(instA, instB) {
+    var nodeA = instA;
+    var nodeB = instB;
+    var depthA = 0;
+
+    for (var tempA = nodeA; tempA; tempA = getParent(tempA)) {
+      depthA++;
+    }
+
+    var depthB = 0;
+
+    for (var tempB = nodeB; tempB; tempB = getParent(tempB)) {
+      depthB++;
+    } // If A is deeper, crawl up.
+
+
+    while (depthA - depthB > 0) {
+      nodeA = getParent(nodeA);
+      depthA--;
+    } // If B is deeper, crawl up.
+
+
+    while (depthB - depthA > 0) {
+      nodeB = getParent(nodeB);
+      depthB--;
+    } // Walk in lockstep until we find a match.
+
+
+    var depth = depthA;
+
+    while (depth--) {
+      if (nodeA === nodeB || nodeB !== null && nodeA === nodeB.alternate) {
+        return nodeA;
+      }
+
+      nodeA = getParent(nodeA);
+      nodeB = getParent(nodeB);
+    }
+
+    return null;
+  }
+
+  function accumulateEnterLeaveListenersForEvent(dispatchQueue, event, target, common, inCapturePhase) {
+    var registrationName = event._reactName;
+    var listeners = [];
+    var instance = target;
+
+    while (instance !== null) {
+      if (instance === common) {
+        break;
+      }
+
+      var _instance4 = instance,
+          alternate = _instance4.alternate,
+          stateNode = _instance4.stateNode,
+          tag = _instance4.tag;
+
+      if (alternate !== null && alternate === common) {
+        break;
+      }
+
+      if (tag === HostComponent && stateNode !== null) {
+        var currentTarget = stateNode;
+
+        if (inCapturePhase) {
+          var captureListener = getListener(instance, registrationName);
+
+          if (captureListener != null) {
+            listeners.unshift(createDispatchListener(instance, captureListener, currentTarget));
+          }
+        } else if (!inCapturePhase) {
+          var bubbleListener = getListener(instance, registrationName);
+
+          if (bubbleListener != null) {
+            listeners.push(createDispatchListener(instance, bubbleListener, currentTarget));
+          }
+        }
+      }
+
+      instance = instance.return;
+    }
+
+    if (listeners.length !== 0) {
+      dispatchQueue.push({
+        event: event,
+        listeners: listeners
+      });
+    }
+  } // We should only use this function for:
+  // - EnterLeaveEventPlugin
+  // This is because we only process this plugin
+  // in the bubble phase, so we need to accumulate two
+  // phase event listeners.
+
+
+  function accumulateEnterLeaveTwoPhaseListeners(dispatchQueue, leaveEvent, enterEvent, from, to) {
+    var common = from && to ? getLowestCommonAncestor(from, to) : null;
+
+    if (from !== null) {
+      accumulateEnterLeaveListenersForEvent(dispatchQueue, leaveEvent, from, common, false);
+    }
+
+    if (to !== null && enterEvent !== null) {
+      accumulateEnterLeaveListenersForEvent(dispatchQueue, enterEvent, to, common, true);
+    }
+  }
+  function getListenerSetKey(domEventName, capture) {
+    return domEventName + "__" + (capture ? 'capture' : 'bubble');
+  }
+
+  var didWarnInvalidHydration = false;
+  var DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
+  var SUPPRESS_CONTENT_EDITABLE_WARNING = 'suppressContentEditableWarning';
+  var SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
+  var AUTOFOCUS = 'autoFocus';
+  var CHILDREN = 'children';
+  var STYLE = 'style';
+  var HTML$1 = '__html';
+  var HTML_NAMESPACE$1 = Namespaces.html;
+  var warnedUnknownTags;
+  var suppressHydrationWarning;
+  var validatePropertiesInDevelopment;
+  var warnForTextDifference;
+  var warnForPropDifference;
+  var warnForExtraAttributes;
+  var warnForInvalidEventListener;
+  var canDiffStyleForHydrationWarning;
+  var normalizeMarkupForTextOrAttribute;
+  var normalizeHTML;
+
+  {
+    warnedUnknownTags = {
+      // There are working polyfills for <dialog>. Let people use it.
+      dialog: true,
+      // Electron ships a custom <webview> tag to display external web content in
+      // an isolated frame and process.
+      // This tag is not present in non Electron environments such as JSDom which
+      // is often used for testing purposes.
+      // @see https://electronjs.org/docs/api/webview-tag
+      webview: true
+    };
+
+    validatePropertiesInDevelopment = function (type, props) {
+      validateProperties(type, props);
+      validateProperties$1(type, props);
+      validateProperties$2(type, props, {
+        registrationNameDependencies: registrationNameDependencies,
+        possibleRegistrationNames: possibleRegistrationNames
+      });
+    }; // IE 11 parses & normalizes the style attribute as opposed to other
+    // browsers. It adds spaces and sorts the properties in some
+    // non-alphabetical order. Handling that would require sorting CSS
+    // properties in the client & server versions or applying
+    // `expectedStyle` to a temporary DOM node to read its `style` attribute
+    // normalized. Since it only affects IE, we're skipping style warnings
+    // in that browser completely in favor of doing all that work.
+    // See https://github.com/facebook/react/issues/11807
+
+
+    canDiffStyleForHydrationWarning = canUseDOM && !document.documentMode; // HTML parsing normalizes CR and CRLF to LF.
+    // It also can turn \u0000 into \uFFFD inside attributes.
+    // https://www.w3.org/TR/html5/single-page.html#preprocessing-the-input-stream
+    // If we have a mismatch, it might be caused by that.
+    // We will still patch up in this case but not fire the warning.
+
+    var NORMALIZE_NEWLINES_REGEX = /\r\n?/g;
+    var NORMALIZE_NULL_AND_REPLACEMENT_REGEX = /\u0000|\uFFFD/g;
+
+    normalizeMarkupForTextOrAttribute = function (markup) {
+      var markupString = typeof markup === 'string' ? markup : '' + markup;
+      return markupString.replace(NORMALIZE_NEWLINES_REGEX, '\n').replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, '');
+    };
+
+    warnForTextDifference = function (serverText, clientText) {
+      if (didWarnInvalidHydration) {
+        return;
+      }
+
+      var normalizedClientText = normalizeMarkupForTextOrAttribute(clientText);
+      var normalizedServerText = normalizeMarkupForTextOrAttribute(serverText);
+
+      if (normalizedServerText === normalizedClientText) {
+        return;
+      }
+
+      didWarnInvalidHydration = true;
+
+      error('Text content did not match. Server: "%s" Client: "%s"', normalizedServerText, normalizedClientText);
+    };
+
+    warnForPropDifference = function (propName, serverValue, clientValue) {
+      if (didWarnInvalidHydration) {
+        return;
+      }
+
+      var normalizedClientValue = normalizeMarkupForTextOrAttribute(clientValue);
+      var normalizedServerValue = normalizeMarkupForTextOrAttribute(serverValue);
+
+      if (normalizedServerValue === normalizedClientValue) {
+        return;
+      }
+
+      didWarnInvalidHydration = true;
+
+      error('Prop `%s` did not match. Server: %s Client: %s', propName, JSON.stringify(normalizedServerValue), JSON.stringify(normalizedClientValue));
+    };
+
+    warnForExtraAttributes = function (attributeNames) {
+      if (didWarnInvalidHydration) {
+        return;
+      }
+
+      didWarnInvalidHydration = true;
+      var names = [];
+      attributeNames.forEach(function (name) {
+        names.push(name);
+      });
+
+      error('Extra attributes from the server: %s', names);
+    };
+
+    warnForInvalidEventListener = function (registrationName, listener) {
+      if (listener === false) {
+        error('Expected `%s` listener to be a function, instead got `false`.\n\n' + 'If you used to conditionally omit it with %s={condition && value}, ' + 'pass %s={condition ? value : undefined} instead.', registrationName, registrationName, registrationName);
+      } else {
+        error('Expected `%s` listener to be a function, instead got a value of `%s` type.', registrationName, typeof listener);
+      }
+    }; // Parse the HTML and read it back to normalize the HTML string so that it
+    // can be used for comparison.
+
+
+    normalizeHTML = function (parent, html) {
+      // We could have created a separate document here to avoid
+      // re-initializing custom elements if they exist. But this breaks
+      // how <noscript> is being handled. So we use the same document.
+      // See the discussion in https://github.com/facebook/react/pull/11157.
+      var testElement = parent.namespaceURI === HTML_NAMESPACE$1 ? parent.ownerDocument.createElement(parent.tagName) : parent.ownerDocument.createElementNS(parent.namespaceURI, parent.tagName);
+      testElement.innerHTML = html;
+      return testElement.innerHTML;
+    };
+  }
+
+  function getOwnerDocumentFromRootContainer(rootContainerElement) {
+    return rootContainerElement.nodeType === DOCUMENT_NODE ? rootContainerElement : rootContainerElement.ownerDocument;
+  }
+
+  function noop() {}
+
+  function trapClickOnNonInteractiveElement(node) {
+    // Mobile Safari does not fire properly bubble click events on
+    // non-interactive elements, which means delegated click listeners do not
+    // fire. The workaround for this bug involves attaching an empty click
+    // listener on the target node.
+    // https://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
+    // Just set it using the onclick property so that we don't have to manage any
+    // bookkeeping for it. Not sure if we need to clear it when the listener is
+    // removed.
+    // TODO: Only do this for the relevant Safaris maybe?
+    node.onclick = noop;
+  }
+
+  function setInitialDOMProperties(tag, domElement, rootContainerElement, nextProps, isCustomComponentTag) {
+    for (var propKey in nextProps) {
+      if (!nextProps.hasOwnProperty(propKey)) {
+        continue;
+      }
+
+      var nextProp = nextProps[propKey];
+
+      if (propKey === STYLE) {
+        {
+          if (nextProp) {
+            // Freeze the next style object so that we can assume it won't be
+            // mutated. We have already warned for this in the past.
+            Object.freeze(nextProp);
+          }
+        } // Relies on `updateStylesByID` not mutating `styleUpdates`.
+
+
+        setValueForStyles(domElement, nextProp);
+      } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
+        var nextHtml = nextProp ? nextProp[HTML$1] : undefined;
+
+        if (nextHtml != null) {
+          setInnerHTML(domElement, nextHtml);
+        }
+      } else if (propKey === CHILDREN) {
+        if (typeof nextProp === 'string') {
+          // Avoid setting initial textContent when the text is empty. In IE11 setting
+          // textContent on a <textarea> will cause the placeholder to not
+          // show within the <textarea> until it has been focused and blurred again.
+          // https://github.com/facebook/react/issues/6731#issuecomment-254874553
+          var canSetTextContent = tag !== 'textarea' || nextProp !== '';
+
+          if (canSetTextContent) {
+            setTextContent(domElement, nextProp);
+          }
+        } else if (typeof nextProp === 'number') {
+          setTextContent(domElement, '' + nextProp);
+        }
+      } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING) ; else if (propKey === AUTOFOCUS) ; else if (registrationNameDependencies.hasOwnProperty(propKey)) {
+        if (nextProp != null) {
+          if ( typeof nextProp !== 'function') {
+            warnForInvalidEventListener(propKey, nextProp);
+          }
+
+          if (propKey === 'onScroll') {
+            listenToNonDelegatedEvent('scroll', domElement);
+          }
+        }
+      } else if (nextProp != null) {
+        setValueForProperty(domElement, propKey, nextProp, isCustomComponentTag);
+      }
+    }
+  }
+
+  function updateDOMProperties(domElement, updatePayload, wasCustomComponentTag, isCustomComponentTag) {
+    // TODO: Handle wasCustomComponentTag
+    for (var i = 0; i < updatePayload.length; i += 2) {
+      var propKey = updatePayload[i];
+      var propValue = updatePayload[i + 1];
+
+      if (propKey === STYLE) {
+        setValueForStyles(domElement, propValue);
+      } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
+        setInnerHTML(domElement, propValue);
+      } else if (propKey === CHILDREN) {
+        setTextContent(domElement, propValue);
+      } else {
+        setValueForProperty(domElement, propKey, propValue, isCustomComponentTag);
+      }
+    }
+  }
+
+  function createElement(type, props, rootContainerElement, parentNamespace) {
+    var isCustomComponentTag; // We create tags in the namespace of their parent container, except HTML
+    // tags get no namespace.
+
+    var ownerDocument = getOwnerDocumentFromRootContainer(rootContainerElement);
+    var domElement;
+    var namespaceURI = parentNamespace;
+
+    if (namespaceURI === HTML_NAMESPACE$1) {
+      namespaceURI = getIntrinsicNamespace(type);
+    }
+
+    if (namespaceURI === HTML_NAMESPACE$1) {
+      {
+        isCustomComponentTag = isCustomComponent(type, props); // Should this check be gated by parent namespace? Not sure we want to
+        // allow <SVG> or <mATH>.
+
+        if (!isCustomComponentTag && type !== type.toLowerCase()) {
+          error('<%s /> is using incorrect casing. ' + 'Use PascalCase for React components, ' + 'or lowercase for HTML elements.', type);
+        }
+      }
+
+      if (type === 'script') {
+        // Create the script via .innerHTML so its "parser-inserted" flag is
+        // set to true and it does not execute
+        var div = ownerDocument.createElement('div');
+
+        div.innerHTML = '<script><' + '/script>'; // eslint-disable-line
+        // This is guaranteed to yield a script element.
+
+        var firstChild = div.firstChild;
+        domElement = div.removeChild(firstChild);
+      } else if (typeof props.is === 'string') {
+        // $FlowIssue `createElement` should be updated for Web Components
+        domElement = ownerDocument.createElement(type, {
+          is: props.is
+        });
+      } else {
+        // Separate else branch instead of using `props.is || undefined` above because of a Firefox bug.
+        // See discussion in https://github.com/facebook/react/pull/6896
+        // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240
+        domElement = ownerDocument.createElement(type); // Normally attributes are assigned in `setInitialDOMProperties`, however the `multiple` and `size`
+        // attributes on `select`s needs to be added before `option`s are inserted.
+        // This prevents:
+        // - a bug where the `select` does not scroll to the correct option because singular
+        //  `select` elements automatically pick the first item #13222
+        // - a bug where the `select` set the first item as selected despite the `size` attribute #14239
+        // See https://github.com/facebook/react/issues/13222
+        // and https://github.com/facebook/react/issues/14239
+
+        if (type === 'select') {
+          var node = domElement;
+
+          if (props.multiple) {
+            node.multiple = true;
+          } else if (props.size) {
+            // Setting a size greater than 1 causes a select to behave like `multiple=true`, where
+            // it is possible that no option is selected.
+            //
+            // This is only necessary when a select in "single selection mode".
+            node.size = props.size;
+          }
+        }
+      }
+    } else {
+      domElement = ownerDocument.createElementNS(namespaceURI, type);
+    }
+
+    {
+      if (namespaceURI === HTML_NAMESPACE$1) {
+        if (!isCustomComponentTag && Object.prototype.toString.call(domElement) === '[object HTMLUnknownElement]' && !Object.prototype.hasOwnProperty.call(warnedUnknownTags, type)) {
+          warnedUnknownTags[type] = true;
+
+          error('The tag <%s> is unrecognized in this browser. ' + 'If you meant to render a React component, start its name with ' + 'an uppercase letter.', type);
+        }
+      }
+    }
+
+    return domElement;
+  }
+  function createTextNode(text, rootContainerElement) {
+    return getOwnerDocumentFromRootContainer(rootContainerElement).createTextNode(text);
+  }
+  function setInitialProperties(domElement, tag, rawProps, rootContainerElement) {
+    var isCustomComponentTag = isCustomComponent(tag, rawProps);
+
+    {
+      validatePropertiesInDevelopment(tag, rawProps);
+    } // TODO: Make sure that we check isMounted before firing any of these events.
+
+
+    var props;
+
+    switch (tag) {
+      case 'dialog':
+        listenToNonDelegatedEvent('cancel', domElement);
+        listenToNonDelegatedEvent('close', domElement);
+        props = rawProps;
+        break;
+
+      case 'iframe':
+      case 'object':
+      case 'embed':
+        // We listen to this event in case to ensure emulated bubble
+        // listeners still fire for the load event.
+        listenToNonDelegatedEvent('load', domElement);
+        props = rawProps;
+        break;
+
+      case 'video':
+      case 'audio':
+        // We listen to these events in case to ensure emulated bubble
+        // listeners still fire for all the media events.
+        for (var i = 0; i < mediaEventTypes.length; i++) {
+          listenToNonDelegatedEvent(mediaEventTypes[i], domElement);
+        }
+
+        props = rawProps;
+        break;
+
+      case 'source':
+        // We listen to this event in case to ensure emulated bubble
+        // listeners still fire for the error event.
+        listenToNonDelegatedEvent('error', domElement);
+        props = rawProps;
+        break;
+
+      case 'img':
+      case 'image':
+      case 'link':
+        // We listen to these events in case to ensure emulated bubble
+        // listeners still fire for error and load events.
+        listenToNonDelegatedEvent('error', domElement);
+        listenToNonDelegatedEvent('load', domElement);
+        props = rawProps;
+        break;
+
+      case 'details':
+        // We listen to this event in case to ensure emulated bubble
+        // listeners still fire for the toggle event.
+        listenToNonDelegatedEvent('toggle', domElement);
+        props = rawProps;
+        break;
+
+      case 'input':
+        initWrapperState(domElement, rawProps);
+        props = getHostProps(domElement, rawProps); // We listen to this event in case to ensure emulated bubble
+        // listeners still fire for the invalid event.
+
+        listenToNonDelegatedEvent('invalid', domElement);
+
+        break;
+
+      case 'option':
+        validateProps(domElement, rawProps);
+        props = getHostProps$1(domElement, rawProps);
+        break;
+
+      case 'select':
+        initWrapperState$1(domElement, rawProps);
+        props = getHostProps$2(domElement, rawProps); // We listen to this event in case to ensure emulated bubble
+        // listeners still fire for the invalid event.
+
+        listenToNonDelegatedEvent('invalid', domElement);
+
+        break;
+
+      case 'textarea':
+        initWrapperState$2(domElement, rawProps);
+        props = getHostProps$3(domElement, rawProps); // We listen to this event in case to ensure emulated bubble
+        // listeners still fire for the invalid event.
+
+        listenToNonDelegatedEvent('invalid', domElement);
+
+        break;
+
+      default:
+        props = rawProps;
+    }
+
+    assertValidProps(tag, props);
+    setInitialDOMProperties(tag, domElement, rootContainerElement, props, isCustomComponentTag);
+
+    switch (tag) {
+      case 'input':
+        // TODO: Make sure we check if this is still unmounted or do any clean
+        // up necessary since we never stop tracking anymore.
+        track(domElement);
+        postMountWrapper(domElement, rawProps, false);
+        break;
+
+      case 'textarea':
+        // TODO: Make sure we check if this is still unmounted or do any clean
+        // up necessary since we never stop tracking anymore.
+        track(domElement);
+        postMountWrapper$3(domElement);
+        break;
+
+      case 'option':
+        postMountWrapper$1(domElement, rawProps);
+        break;
+
+      case 'select':
+        postMountWrapper$2(domElement, rawProps);
+        break;
+
+      default:
+        if (typeof props.onClick === 'function') {
+          // TODO: This cast may not be sound for SVG, MathML or custom elements.
+          trapClickOnNonInteractiveElement(domElement);
+        }
+
+        break;
+    }
+  } // Calculate the diff between the two objects.
+
+  function diffProperties(domElement, tag, lastRawProps, nextRawProps, rootContainerElement) {
+    {
+      validatePropertiesInDevelopment(tag, nextRawProps);
+    }
+
+    var updatePayload = null;
+    var lastProps;
+    var nextProps;
+
+    switch (tag) {
+      case 'input':
+        lastProps = getHostProps(domElement, lastRawProps);
+        nextProps = getHostProps(domElement, nextRawProps);
+        updatePayload = [];
+        break;
+
+      case 'option':
+        lastProps = getHostProps$1(domElement, lastRawProps);
+        nextProps = getHostProps$1(domElement, nextRawProps);
+        updatePayload = [];
+        break;
+
+      case 'select':
+        lastProps = getHostProps$2(domElement, lastRawProps);
+        nextProps = getHostProps$2(domElement, nextRawProps);
+        updatePayload = [];
+        break;
+
+      case 'textarea':
+        lastProps = getHostProps$3(domElement, lastRawProps);
+        nextProps = getHostProps$3(domElement, nextRawProps);
+        updatePayload = [];
+        break;
+
+      default:
+        lastProps = lastRawProps;
+        nextProps = nextRawProps;
+
+        if (typeof lastProps.onClick !== 'function' && typeof nextProps.onClick === 'function') {
+          // TODO: This cast may not be sound for SVG, MathML or custom elements.
+          trapClickOnNonInteractiveElement(domElement);
+        }
+
+        break;
+    }
+
+    assertValidProps(tag, nextProps);
+    var propKey;
+    var styleName;
+    var styleUpdates = null;
+
+    for (propKey in lastProps) {
+      if (nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey) || lastProps[propKey] == null) {
+        continue;
+      }
+
+      if (propKey === STYLE) {
+        var lastStyle = lastProps[propKey];
+
+        for (styleName in lastStyle) {
+          if (lastStyle.hasOwnProperty(styleName)) {
+            if (!styleUpdates) {
+              styleUpdates = {};
+            }
+
+            styleUpdates[styleName] = '';
+          }
+        }
+      } else if (propKey === DANGEROUSLY_SET_INNER_HTML || propKey === CHILDREN) ; else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING) ; else if (propKey === AUTOFOCUS) ; else if (registrationNameDependencies.hasOwnProperty(propKey)) {
+        // This is a special case. If any listener updates we need to ensure
+        // that the "current" fiber pointer gets updated so we need a commit
+        // to update this element.
+        if (!updatePayload) {
+          updatePayload = [];
+        }
+      } else {
+        // For all other deleted properties we add it to the queue. We use
+        // the allowed property list in the commit phase instead.
+        (updatePayload = updatePayload || []).push(propKey, null);
+      }
+    }
+
+    for (propKey in nextProps) {
+      var nextProp = nextProps[propKey];
+      var lastProp = lastProps != null ? lastProps[propKey] : undefined;
+
+      if (!nextProps.hasOwnProperty(propKey) || nextProp === lastProp || nextProp == null && lastProp == null) {
+        continue;
+      }
+
+      if (propKey === STYLE) {
+        {
+          if (nextProp) {
+            // Freeze the next style object so that we can assume it won't be
+            // mutated. We have already warned for this in the past.
+            Object.freeze(nextProp);
+          }
+        }
+
+        if (lastProp) {
+          // Unset styles on `lastProp` but not on `nextProp`.
+          for (styleName in lastProp) {
+            if (lastProp.hasOwnProperty(styleName) && (!nextProp || !nextProp.hasOwnProperty(styleName))) {
+              if (!styleUpdates) {
+                styleUpdates = {};
+              }
+
+              styleUpdates[styleName] = '';
+            }
+          } // Update styles that changed since `lastProp`.
+
+
+          for (styleName in nextProp) {
+            if (nextProp.hasOwnProperty(styleName) && lastProp[styleName] !== nextProp[styleName]) {
+              if (!styleUpdates) {
+                styleUpdates = {};
+              }
+
+              styleUpdates[styleName] = nextProp[styleName];
+            }
+          }
+        } else {
+          // Relies on `updateStylesByID` not mutating `styleUpdates`.
+          if (!styleUpdates) {
+            if (!updatePayload) {
+              updatePayload = [];
+            }
+
+            updatePayload.push(propKey, styleUpdates);
+          }
+
+          styleUpdates = nextProp;
+        }
+      } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
+        var nextHtml = nextProp ? nextProp[HTML$1] : undefined;
+        var lastHtml = lastProp ? lastProp[HTML$1] : undefined;
+
+        if (nextHtml != null) {
+          if (lastHtml !== nextHtml) {
+            (updatePayload = updatePayload || []).push(propKey, nextHtml);
+          }
+        }
+      } else if (propKey === CHILDREN) {
+        if (typeof nextProp === 'string' || typeof nextProp === 'number') {
+          (updatePayload = updatePayload || []).push(propKey, '' + nextProp);
+        }
+      } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING) ; else if (registrationNameDependencies.hasOwnProperty(propKey)) {
+        if (nextProp != null) {
+          // We eagerly listen to this even though we haven't committed yet.
+          if ( typeof nextProp !== 'function') {
+            warnForInvalidEventListener(propKey, nextProp);
+          }
+
+          if (propKey === 'onScroll') {
+            listenToNonDelegatedEvent('scroll', domElement);
+          }
+        }
+
+        if (!updatePayload && lastProp !== nextProp) {
+          // This is a special case. If any listener updates we need to ensure
+          // that the "current" props pointer gets updated so we need a commit
+          // to update this element.
+          updatePayload = [];
+        }
+      } else if (typeof nextProp === 'object' && nextProp !== null && nextProp.$$typeof === REACT_OPAQUE_ID_TYPE) {
+        // If we encounter useOpaqueReference's opaque object, this means we are hydrating.
+        // In this case, call the opaque object's toString function which generates a new client
+        // ID so client and server IDs match and throws to rerender.
+        nextProp.toString();
+      } else {
+        // For any other property we always add it to the queue and then we
+        // filter it out using the allowed property list during the commit.
+        (updatePayload = updatePayload || []).push(propKey, nextProp);
+      }
+    }
+
+    if (styleUpdates) {
+      {
+        validateShorthandPropertyCollisionInDev(styleUpdates, nextProps[STYLE]);
+      }
+
+      (updatePayload = updatePayload || []).push(STYLE, styleUpdates);
+    }
+
+    return updatePayload;
+  } // Apply the diff.
+
+  function updateProperties(domElement, updatePayload, tag, lastRawProps, nextRawProps) {
+    // Update checked *before* name.
+    // In the middle of an update, it is possible to have multiple checked.
+    // When a checked radio tries to change name, browser makes another radio's checked false.
+    if (tag === 'input' && nextRawProps.type === 'radio' && nextRawProps.name != null) {
+      updateChecked(domElement, nextRawProps);
+    }
+
+    var wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
+    var isCustomComponentTag = isCustomComponent(tag, nextRawProps); // Apply the diff.
+
+    updateDOMProperties(domElement, updatePayload, wasCustomComponentTag, isCustomComponentTag); // TODO: Ensure that an update gets scheduled if any of the special props
+    // changed.
+
+    switch (tag) {
+      case 'input':
+        // Update the wrapper around inputs *after* updating props. This has to
+        // happen after `updateDOMProperties`. Otherwise HTML5 input validations
+        // raise warnings and prevent the new value from being assigned.
+        updateWrapper(domElement, nextRawProps);
+        break;
+
+      case 'textarea':
+        updateWrapper$1(domElement, nextRawProps);
+        break;
+
+      case 'select':
+        // <select> value update needs to occur after <option> children
+        // reconciliation
+        postUpdateWrapper(domElement, nextRawProps);
+        break;
+    }
+  }
+
+  function getPossibleStandardName(propName) {
+    {
+      var lowerCasedName = propName.toLowerCase();
+
+      if (!possibleStandardNames.hasOwnProperty(lowerCasedName)) {
+        return null;
+      }
+
+      return possibleStandardNames[lowerCasedName] || null;
+    }
+  }
+
+  function diffHydratedProperties(domElement, tag, rawProps, parentNamespace, rootContainerElement) {
+    var isCustomComponentTag;
+    var extraAttributeNames;
+
+    {
+      suppressHydrationWarning = rawProps[SUPPRESS_HYDRATION_WARNING] === true;
+      isCustomComponentTag = isCustomComponent(tag, rawProps);
+      validatePropertiesInDevelopment(tag, rawProps);
+    } // TODO: Make sure that we check isMounted before firing any of these events.
+
+
+    switch (tag) {
+      case 'dialog':
+        listenToNonDelegatedEvent('cancel', domElement);
+        listenToNonDelegatedEvent('close', domElement);
+        break;
+
+      case 'iframe':
+      case 'object':
+      case 'embed':
+        // We listen to this event in case to ensure emulated bubble
+        // listeners still fire for the load event.
+        listenToNonDelegatedEvent('load', domElement);
+        break;
+
+      case 'video':
+      case 'audio':
+        // We listen to these events in case to ensure emulated bubble
+        // listeners still fire for all the media events.
+        for (var i = 0; i < mediaEventTypes.length; i++) {
+          listenToNonDelegatedEvent(mediaEventTypes[i], domElement);
+        }
+
+        break;
+
+      case 'source':
+        // We listen to this event in case to ensure emulated bubble
+        // listeners still fire for the error event.
+        listenToNonDelegatedEvent('error', domElement);
+        break;
+
+      case 'img':
+      case 'image':
+      case 'link':
+        // We listen to these events in case to ensure emulated bubble
+        // listeners still fire for error and load events.
+        listenToNonDelegatedEvent('error', domElement);
+        listenToNonDelegatedEvent('load', domElement);
+        break;
+
+      case 'details':
+        // We listen to this event in case to ensure emulated bubble
+        // listeners still fire for the toggle event.
+        listenToNonDelegatedEvent('toggle', domElement);
+        break;
+
+      case 'input':
+        initWrapperState(domElement, rawProps); // We listen to this event in case to ensure emulated bubble
+        // listeners still fire for the invalid event.
+
+        listenToNonDelegatedEvent('invalid', domElement);
+
+        break;
+
+      case 'option':
+        validateProps(domElement, rawProps);
+        break;
+
+      case 'select':
+        initWrapperState$1(domElement, rawProps); // We listen to this event in case to ensure emulated bubble
+        // listeners still fire for the invalid event.
+
+        listenToNonDelegatedEvent('invalid', domElement);
+
+        break;
+
+      case 'textarea':
+        initWrapperState$2(domElement, rawProps); // We listen to this event in case to ensure emulated bubble
+        // listeners still fire for the invalid event.
+
+        listenToNonDelegatedEvent('invalid', domElement);
+
+        break;
+    }
+
+    assertValidProps(tag, rawProps);
+
+    {
+      extraAttributeNames = new Set();
+      var attributes = domElement.attributes;
+
+      for (var _i = 0; _i < attributes.length; _i++) {
+        var name = attributes[_i].name.toLowerCase();
+
+        switch (name) {
+          // Built-in SSR attribute is allowed
+          case 'data-reactroot':
+            break;
+          // Controlled attributes are not validated
+          // TODO: Only ignore them on controlled tags.
+
+          case 'value':
+            break;
+
+          case 'checked':
+            break;
+
+          case 'selected':
+            break;
+
+          default:
+            // Intentionally use the original name.
+            // See discussion in https://github.com/facebook/react/pull/10676.
+            extraAttributeNames.add(attributes[_i].name);
+        }
+      }
+    }
+
+    var updatePayload = null;
+
+    for (var propKey in rawProps) {
+      if (!rawProps.hasOwnProperty(propKey)) {
+        continue;
+      }
+
+      var nextProp = rawProps[propKey];
+
+      if (propKey === CHILDREN) {
+        // For text content children we compare against textContent. This
+        // might match additional HTML that is hidden when we read it using
+        // textContent. E.g. "foo" will match "f<span>oo</span>" but that still
+        // satisfies our requirement. Our requirement is not to produce perfect
+        // HTML and attributes. Ideally we should preserve structure but it's
+        // ok not to if the visible content is still enough to indicate what
+        // even listeners these nodes might be wired up to.
+        // TODO: Warn if there is more than a single textNode as a child.
+        // TODO: Should we use domElement.firstChild.nodeValue to compare?
+        if (typeof nextProp === 'string') {
+          if (domElement.textContent !== nextProp) {
+            if ( !suppressHydrationWarning) {
+              warnForTextDifference(domElement.textContent, nextProp);
+            }
+
+            updatePayload = [CHILDREN, nextProp];
+          }
+        } else if (typeof nextProp === 'number') {
+          if (domElement.textContent !== '' + nextProp) {
+            if ( !suppressHydrationWarning) {
+              warnForTextDifference(domElement.textContent, nextProp);
+            }
+
+            updatePayload = [CHILDREN, '' + nextProp];
+          }
+        }
+      } else if (registrationNameDependencies.hasOwnProperty(propKey)) {
+        if (nextProp != null) {
+          if ( typeof nextProp !== 'function') {
+            warnForInvalidEventListener(propKey, nextProp);
+          }
+
+          if (propKey === 'onScroll') {
+            listenToNonDelegatedEvent('scroll', domElement);
+          }
+        }
+      } else if ( // Convince Flow we've calculated it (it's DEV-only in this method.)
+      typeof isCustomComponentTag === 'boolean') {
+        // Validate that the properties correspond to their expected values.
+        var serverValue = void 0;
+        var propertyInfo = getPropertyInfo(propKey);
+
+        if (suppressHydrationWarning) ; else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING || // Controlled attributes are not validated
+        // TODO: Only ignore them on controlled tags.
+        propKey === 'value' || propKey === 'checked' || propKey === 'selected') ; else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
+          var serverHTML = domElement.innerHTML;
+          var nextHtml = nextProp ? nextProp[HTML$1] : undefined;
+
+          if (nextHtml != null) {
+            var expectedHTML = normalizeHTML(domElement, nextHtml);
+
+            if (expectedHTML !== serverHTML) {
+              warnForPropDifference(propKey, serverHTML, expectedHTML);
+            }
+          }
+        } else if (propKey === STYLE) {
+          // $FlowFixMe - Should be inferred as not undefined.
+          extraAttributeNames.delete(propKey);
+
+          if (canDiffStyleForHydrationWarning) {
+            var expectedStyle = createDangerousStringForStyles(nextProp);
+            serverValue = domElement.getAttribute('style');
+
+            if (expectedStyle !== serverValue) {
+              warnForPropDifference(propKey, serverValue, expectedStyle);
+            }
+          }
+        } else if (isCustomComponentTag) {
+          // $FlowFixMe - Should be inferred as not undefined.
+          extraAttributeNames.delete(propKey.toLowerCase());
+          serverValue = getValueForAttribute(domElement, propKey, nextProp);
+
+          if (nextProp !== serverValue) {
+            warnForPropDifference(propKey, serverValue, nextProp);
+          }
+        } else if (!shouldIgnoreAttribute(propKey, propertyInfo, isCustomComponentTag) && !shouldRemoveAttribute(propKey, nextProp, propertyInfo, isCustomComponentTag)) {
+          var isMismatchDueToBadCasing = false;
+
+          if (propertyInfo !== null) {
+            // $FlowFixMe - Should be inferred as not undefined.
+            extraAttributeNames.delete(propertyInfo.attributeName);
+            serverValue = getValueForProperty(domElement, propKey, nextProp, propertyInfo);
+          } else {
+            var ownNamespace = parentNamespace;
+
+            if (ownNamespace === HTML_NAMESPACE$1) {
+              ownNamespace = getIntrinsicNamespace(tag);
+            }
+
+            if (ownNamespace === HTML_NAMESPACE$1) {
+              // $FlowFixMe - Should be inferred as not undefined.
+              extraAttributeNames.delete(propKey.toLowerCase());
+            } else {
+              var standardName = getPossibleStandardName(propKey);
+
+              if (standardName !== null && standardName !== propKey) {
+                // If an SVG prop is supplied with bad casing, it will
+                // be successfully parsed from HTML, but will produce a mismatch
+                // (and would be incorrectly rendered on the client).
+                // However, we already warn about bad casing elsewhere.
+                // So we'll skip the misleading extra mismatch warning in this case.
+                isMismatchDueToBadCasing = true; // $FlowFixMe - Should be inferred as not undefined.
+
+                extraAttributeNames.delete(standardName);
+              } // $FlowFixMe - Should be inferred as not undefined.
+
+
+              extraAttributeNames.delete(propKey);
+            }
+
+            serverValue = getValueForAttribute(domElement, propKey, nextProp);
+          }
+
+          if (nextProp !== serverValue && !isMismatchDueToBadCasing) {
+            warnForPropDifference(propKey, serverValue, nextProp);
+          }
+        }
+      }
+    }
+
+    {
+      // $FlowFixMe - Should be inferred as not undefined.
+      if (extraAttributeNames.size > 0 && !suppressHydrationWarning) {
+        // $FlowFixMe - Should be inferred as not undefined.
+        warnForExtraAttributes(extraAttributeNames);
+      }
+    }
+
+    switch (tag) {
+      case 'input':
+        // TODO: Make sure we check if this is still unmounted or do any clean
+        // up necessary since we never stop tracking anymore.
+        track(domElement);
+        postMountWrapper(domElement, rawProps, true);
+        break;
+
+      case 'textarea':
+        // TODO: Make sure we check if this is still unmounted or do any clean
+        // up necessary since we never stop tracking anymore.
+        track(domElement);
+        postMountWrapper$3(domElement);
+        break;
+
+      case 'select':
+      case 'option':
+        // For input and textarea we current always set the value property at
+        // post mount to force it to diverge from attributes. However, for
+        // option and select we don't quite do the same thing and select
+        // is not resilient to the DOM state changing so we don't do that here.
+        // TODO: Consider not doing this for input and textarea.
+        break;
+
+      default:
+        if (typeof rawProps.onClick === 'function') {
+          // TODO: This cast may not be sound for SVG, MathML or custom elements.
+          trapClickOnNonInteractiveElement(domElement);
+        }
+
+        break;
+    }
+
+    return updatePayload;
+  }
+  function diffHydratedText(textNode, text) {
+    var isDifferent = textNode.nodeValue !== text;
+    return isDifferent;
+  }
+  function warnForUnmatchedText(textNode, text) {
+    {
+      warnForTextDifference(textNode.nodeValue, text);
+    }
+  }
+  function warnForDeletedHydratableElement(parentNode, child) {
+    {
+      if (didWarnInvalidHydration) {
+        return;
+      }
+
+      didWarnInvalidHydration = true;
+
+      error('Did not expect server HTML to contain a <%s> in <%s>.', child.nodeName.toLowerCase(), parentNode.nodeName.toLowerCase());
+    }
+  }
+  function warnForDeletedHydratableText(parentNode, child) {
+    {
+      if (didWarnInvalidHydration) {
+        return;
+      }
+
+      didWarnInvalidHydration = true;
+
+      error('Did not expect server HTML to contain the text node "%s" in <%s>.', child.nodeValue, parentNode.nodeName.toLowerCase());
+    }
+  }
+  function warnForInsertedHydratedElement(parentNode, tag, props) {
+    {
+      if (didWarnInvalidHydration) {
+        return;
+      }
+
+      didWarnInvalidHydration = true;
+
+      error('Expected server HTML to contain a matching <%s> in <%s>.', tag, parentNode.nodeName.toLowerCase());
+    }
+  }
+  function warnForInsertedHydratedText(parentNode, text) {
+    {
+      if (text === '') {
+        // We expect to insert empty text nodes since they're not represented in
+        // the HTML.
+        // TODO: Remove this special case if we can just avoid inserting empty
+        // text nodes.
+        return;
+      }
+
+      if (didWarnInvalidHydration) {
+        return;
+      }
+
+      didWarnInvalidHydration = true;
+
+      error('Expected server HTML to contain a matching text node for "%s" in <%s>.', text, parentNode.nodeName.toLowerCase());
+    }
+  }
+  function restoreControlledState$3(domElement, tag, props) {
+    switch (tag) {
+      case 'input':
+        restoreControlledState(domElement, props);
+        return;
+
+      case 'textarea':
+        restoreControlledState$2(domElement, props);
+        return;
+
+      case 'select':
+        restoreControlledState$1(domElement, props);
+        return;
+    }
+  }
+
   var validateDOMNesting = function () {};
 
   var updatedAncestorInfo = function () {};
@@ -7472,8 +10080,7 @@
       }
 
       var ancestorTag = invalidParentOrAncestor.tag;
-      var addendum = getCurrentFiberStackInDev();
-      var warnKey = !!invalidParent + '|' + childTag + '|' + ancestorTag + '|' + addendum;
+      var warnKey = !!invalidParent + '|' + childTag + '|' + ancestorTag;
 
       if (didWarn$1[warnKey]) {
         return;
@@ -7584,13 +10191,15 @@
   function prepareForCommit(containerInfo) {
     eventsEnabled = isEnabled();
     selectionInformation = getSelectionInformation();
+    var activeInstance = null;
+
     setEnabled(false);
+    return activeInstance;
   }
   function resetAfterCommit(containerInfo) {
     restoreSelection(selectionInformation);
     setEnabled(eventsEnabled);
     eventsEnabled = null;
-
     selectionInformation = null;
   }
   function createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
@@ -7633,14 +10242,11 @@
       }
     }
 
-    return diffProperties(domElement, type, oldProps, newProps, rootContainerInstance);
+    return diffProperties(domElement, type, oldProps, newProps);
   }
   function shouldSetTextContent(type, props) {
     return type === 'textarea' || type === 'option' || type === 'noscript' || typeof props.children === 'string' || typeof props.children === 'number' || typeof props.dangerouslySetInnerHTML === 'object' && props.dangerouslySetInnerHTML !== null && props.dangerouslySetInnerHTML.__html != null;
   }
-  function shouldDeprioritizeSubtree(type, props) {
-    return !!props.hidden;
-  }
   function createTextInstance(text, rootContainerInstance, hostContext, internalInstanceHandle) {
     {
       var hostContextDev = hostContext;
@@ -7720,6 +10326,7 @@
       container.insertBefore(child, beforeChild);
     }
   }
+
   function removeChild(parentInstance, child) {
     parentInstance.removeChild(child);
   }
@@ -7730,11 +10337,9 @@
       container.removeChild(child);
     }
   }
-
   function hideInstance(instance) {
+    // TODO: Does this work for all element types? What about MathML? Should we
     // pass host context to this method?
-
-
     instance = instance;
     var style = instance.style;
 
@@ -7755,6 +10360,17 @@
   }
   function unhideTextInstance(textInstance, text) {
     textInstance.nodeValue = text;
+  }
+  function clearContainer(container) {
+    if (container.nodeType === ELEMENT_NODE) {
+      container.textContent = '';
+    } else if (container.nodeType === DOCUMENT_NODE) {
+      var body = container.body;
+
+      if (body != null) {
+        body.textContent = '';
+      }
+    }
   } // -------------------
   function canHydrateInstance(instance, type, props) {
     if (instance.nodeType !== ELEMENT_NODE || type.toLowerCase() !== instance.nodeName.toLowerCase()) {
@@ -7811,7 +10427,7 @@
       parentNamespace = hostContextDev.namespace;
     }
 
-    return diffHydratedProperties(instance, type, props, parentNamespace, rootContainerInstance);
+    return diffHydratedProperties(instance, type, props, parentNamespace);
   }
   function hydrateTextInstance(textInstance, text, internalInstanceHandle) {
     precacheFiberNode(internalInstanceHandle, textInstance);
@@ -7934,11 +10550,41 @@
   function didNotFindHydratableSuspenseInstance(parentType, parentProps, parentInstance) {
     if ( parentProps[SUPPRESS_HYDRATION_WARNING$1] !== true) ;
   }
+  var clientId = 0;
+  function makeClientIdInDEV(warnOnAccessInDEV) {
+    var id = 'r:' + (clientId++).toString(36);
+    return {
+      toString: function () {
+        warnOnAccessInDEV();
+        return id;
+      },
+      valueOf: function () {
+        warnOnAccessInDEV();
+        return id;
+      }
+    };
+  }
+  function isOpaqueHydratingObject(value) {
+    return value !== null && typeof value === 'object' && value.$$typeof === REACT_OPAQUE_ID_TYPE;
+  }
+  function makeOpaqueHydratingObject(attemptToReadValue) {
+    return {
+      $$typeof: REACT_OPAQUE_ID_TYPE,
+      toString: attemptToReadValue,
+      valueOf: attemptToReadValue
+    };
+  }
+  function preparePortalMount(portalInstance) {
+    {
+      listenToAllSupportedEvents(portalInstance);
+    }
+  }
 
   var randomKey = Math.random().toString(36).slice(2);
-  var internalInstanceKey = '__reactInternalInstance$' + randomKey;
-  var internalEventHandlersKey = '__reactEventHandlers$' + randomKey;
-  var internalContainerInstanceKey = '__reactContainere$' + randomKey;
+  var internalInstanceKey = '__reactFiber$' + randomKey;
+  var internalPropsKey = '__reactProps$' + randomKey;
+  var internalContainerInstanceKey = '__reactContainer$' + randomKey;
+  var internalEventHandlersKey = '__reactEvents$' + randomKey;
   function precacheFiberNode(hostInst, node) {
     node[internalInstanceKey] = hostInst;
   }
@@ -8041,7 +10687,7 @@
    * instance, or null if the node was not rendered by this React.
    */
 
-  function getInstanceFromNode$1(node) {
+  function getInstanceFromNode(node) {
     var inst = node[internalInstanceKey] || node[internalContainerInstanceKey];
 
     if (inst) {
@@ -8059,7 +10705,7 @@
    * DOM node.
    */
 
-  function getNodeFromInstance$1(inst) {
+  function getNodeFromInstance(inst) {
     if (inst.tag === HostComponent || inst.tag === HostText) {
       // In Fiber this, is just the state node right now. We assume it will be
       // a host component or host text.
@@ -8074,2670 +10720,82 @@
       }
     }
   }
-  function getFiberCurrentPropsFromNode$1(node) {
-    return node[internalEventHandlersKey] || null;
+  function getFiberCurrentPropsFromNode(node) {
+    return node[internalPropsKey] || null;
   }
   function updateFiberProps(node, props) {
-    node[internalEventHandlersKey] = props;
-  }
-
-  function getParent(inst) {
-    do {
-      inst = inst.return; // TODO: If this is a HostRoot we might want to bail out.
-      // That is depending on if we want nested subtrees (layers) to bubble
-      // events to their parent. We could also go through parentNode on the
-      // host node but that wouldn't work for React Native and doesn't let us
-      // do the portal feature.
-    } while (inst && inst.tag !== HostComponent);
-
-    if (inst) {
-      return inst;
-    }
-
-    return null;
-  }
-  /**
-   * Return the lowest common ancestor of A and B, or null if they are in
-   * different trees.
-   */
-
-
-  function getLowestCommonAncestor(instA, instB) {
-    var depthA = 0;
-
-    for (var tempA = instA; tempA; tempA = getParent(tempA)) {
-      depthA++;
-    }
-
-    var depthB = 0;
-
-    for (var tempB = instB; tempB; tempB = getParent(tempB)) {
-      depthB++;
-    } // If A is deeper, crawl up.
-
-
-    while (depthA - depthB > 0) {
-      instA = getParent(instA);
-      depthA--;
-    } // If B is deeper, crawl up.
-
-
-    while (depthB - depthA > 0) {
-      instB = getParent(instB);
-      depthB--;
-    } // Walk in lockstep until we find a match.
-
-
-    var depth = depthA;
-
-    while (depth--) {
-      if (instA === instB || instA === instB.alternate) {
-        return instA;
-      }
-
-      instA = getParent(instA);
-      instB = getParent(instB);
-    }
-
-    return null;
-  }
-  /**
-   * Simulates the traversal of a two-phase, capture/bubble event dispatch.
-   */
-
-  function traverseTwoPhase(inst, fn, arg) {
-    var path = [];
-
-    while (inst) {
-      path.push(inst);
-      inst = getParent(inst);
-    }
-
-    var i;
-
-    for (i = path.length; i-- > 0;) {
-      fn(path[i], 'captured', arg);
-    }
-
-    for (i = 0; i < path.length; i++) {
-      fn(path[i], 'bubbled', arg);
-    }
-  }
-  /**
-   * Traverses the ID hierarchy and invokes the supplied `cb` on any IDs that
-   * should would receive a `mouseEnter` or `mouseLeave` event.
-   *
-   * Does not invoke the callback on the nearest common ancestor because nothing
-   * "entered" or "left" that element.
-   */
-
-  function traverseEnterLeave(from, to, fn, argFrom, argTo) {
-    var common = from && to ? getLowestCommonAncestor(from, to) : null;
-    var pathFrom = [];
-
-    while (true) {
-      if (!from) {
-        break;
-      }
-
-      if (from === common) {
-        break;
-      }
-
-      var alternate = from.alternate;
-
-      if (alternate !== null && alternate === common) {
-        break;
-      }
-
-      pathFrom.push(from);
-      from = getParent(from);
-    }
-
-    var pathTo = [];
-
-    while (true) {
-      if (!to) {
-        break;
-      }
-
-      if (to === common) {
-        break;
-      }
-
-      var _alternate = to.alternate;
-
-      if (_alternate !== null && _alternate === common) {
-        break;
-      }
-
-      pathTo.push(to);
-      to = getParent(to);
-    }
-
-    for (var i = 0; i < pathFrom.length; i++) {
-      fn(pathFrom[i], 'bubbled', argFrom);
-    }
-
-    for (var _i = pathTo.length; _i-- > 0;) {
-      fn(pathTo[_i], 'captured', argTo);
-    }
-  }
-
-  function isInteractive(tag) {
-    return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';
-  }
-
-  function shouldPreventMouseEvent(name, type, props) {
-    switch (name) {
-      case 'onClick':
-      case 'onClickCapture':
-      case 'onDoubleClick':
-      case 'onDoubleClickCapture':
-      case 'onMouseDown':
-      case 'onMouseDownCapture':
-      case 'onMouseMove':
-      case 'onMouseMoveCapture':
-      case 'onMouseUp':
-      case 'onMouseUpCapture':
-      case 'onMouseEnter':
-        return !!(props.disabled && isInteractive(type));
-
-      default:
-        return false;
-    }
-  }
-  /**
-   * @param {object} inst The instance, which is the source of events.
-   * @param {string} registrationName Name of listener (e.g. `onClick`).
-   * @return {?function} The stored callback.
-   */
-
-
-  function getListener(inst, registrationName) {
-    var listener; // TODO: shouldPreventMouseEvent is DOM-specific and definitely should not
-    // live here; needs to be moved to a better place soon
-
-    var stateNode = inst.stateNode;
-
-    if (!stateNode) {
-      // Work in progress (ex: onload events in incremental mode).
-      return null;
-    }
-
-    var props = getFiberCurrentPropsFromNode(stateNode);
-
-    if (!props) {
-      // Work in progress.
-      return null;
-    }
-
-    listener = props[registrationName];
-
-    if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
-      return null;
-    }
-
-    if (!(!listener || typeof listener === 'function')) {
-      {
-        throw Error( "Expected `" + registrationName + "` listener to be a function, instead got a value of `" + typeof listener + "` type." );
-      }
-    }
-
-    return listener;
-  }
-
-  /**
-   * Some event types have a notion of different registration names for different
-   * "phases" of propagation. This finds listeners by a given phase.
-   */
-  function listenerAtPhase(inst, event, propagationPhase) {
-    var registrationName = event.dispatchConfig.phasedRegistrationNames[propagationPhase];
-    return getListener(inst, registrationName);
-  }
-  /**
-   * A small set of propagation patterns, each of which will accept a small amount
-   * of information, and generate a set of "dispatch ready event objects" - which
-   * are sets of events that have already been annotated with a set of dispatched
-   * listener functions/ids. The API is designed this way to discourage these
-   * propagation strategies from actually executing the dispatches, since we
-   * always want to collect the entire set of dispatches before executing even a
-   * single one.
-   */
-
-  /**
-   * Tags a `SyntheticEvent` with dispatched listeners. Creating this function
-   * here, allows us to not have to bind or create functions for each event.
-   * Mutating the event's members allows us to not have to create a wrapping
-   * "dispatch" object that pairs the event with the listener.
-   */
-
-
-  function accumulateDirectionalDispatches(inst, phase, event) {
-    {
-      if (!inst) {
-        error('Dispatching inst must not be null');
-      }
-    }
-
-    var listener = listenerAtPhase(inst, event, phase);
-
-    if (listener) {
-      event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);
-      event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
-    }
-  }
-  /**
-   * Collect dispatches (must be entirely collected before dispatching - see unit
-   * tests). Lazily allocate the array to conserve memory.  We must loop through
-   * each event and perform the traversal for each one. We cannot perform a
-   * single traversal for the entire collection of events because each event may
-   * have a different target.
-   */
-
-
-  function accumulateTwoPhaseDispatchesSingle(event) {
-    if (event && event.dispatchConfig.phasedRegistrationNames) {
-      traverseTwoPhase(event._targetInst, accumulateDirectionalDispatches, event);
-    }
-  }
-  /**
-   * Accumulates without regard to direction, does not look for phased
-   * registration names. Same as `accumulateDirectDispatchesSingle` but without
-   * requiring that the `dispatchMarker` be the same as the dispatched ID.
-   */
-
-
-  function accumulateDispatches(inst, ignoredDirection, event) {
-    if (inst && event && event.dispatchConfig.registrationName) {
-      var registrationName = event.dispatchConfig.registrationName;
-      var listener = getListener(inst, registrationName);
-
-      if (listener) {
-        event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);
-        event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
-      }
-    }
-  }
-  /**
-   * Accumulates dispatches on an `SyntheticEvent`, but only for the
-   * `dispatchMarker`.
-   * @param {SyntheticEvent} event
-   */
-
-
-  function accumulateDirectDispatchesSingle(event) {
-    if (event && event.dispatchConfig.registrationName) {
-      accumulateDispatches(event._targetInst, null, event);
-    }
-  }
-
-  function accumulateTwoPhaseDispatches(events) {
-    forEachAccumulated(events, accumulateTwoPhaseDispatchesSingle);
-  }
-  function accumulateEnterLeaveDispatches(leave, enter, from, to) {
-    traverseEnterLeave(from, to, accumulateDispatches, leave, enter);
-  }
-  function accumulateDirectDispatches(events) {
-    forEachAccumulated(events, accumulateDirectDispatchesSingle);
-  }
-
-  /**
-   * These variables store information about text content of a target node,
-   * allowing comparison of content before and after a given event.
-   *
-   * Identify the node where selection currently begins, then observe
-   * both its text content and its current position in the DOM. Since the
-   * browser may natively replace the target node during composition, we can
-   * use its position to find its replacement.
-   *
-   *
-   */
-  var root = null;
-  var startText = null;
-  var fallbackText = null;
-  function initialize(nativeEventTarget) {
-    root = nativeEventTarget;
-    startText = getText();
-    return true;
-  }
-  function reset() {
-    root = null;
-    startText = null;
-    fallbackText = null;
-  }
-  function getData() {
-    if (fallbackText) {
-      return fallbackText;
-    }
-
-    var start;
-    var startValue = startText;
-    var startLength = startValue.length;
-    var end;
-    var endValue = getText();
-    var endLength = endValue.length;
-
-    for (start = 0; start < startLength; start++) {
-      if (startValue[start] !== endValue[start]) {
-        break;
-      }
-    }
-
-    var minEnd = startLength - start;
-
-    for (end = 1; end <= minEnd; end++) {
-      if (startValue[startLength - end] !== endValue[endLength - end]) {
-        break;
-      }
-    }
-
-    var sliceTail = end > 1 ? 1 - end : undefined;
-    fallbackText = endValue.slice(start, sliceTail);
-    return fallbackText;
-  }
-  function getText() {
-    if ('value' in root) {
-      return root.value;
-    }
-
-    return root.textContent;
-  }
-
-  var EVENT_POOL_SIZE = 10;
-  /**
-   * @interface Event
-   * @see http://www.w3.org/TR/DOM-Level-3-Events/
-   */
-
-  var EventInterface = {
-    type: null,
-    target: null,
-    // currentTarget is set when dispatching; no use in copying it here
-    currentTarget: function () {
-      return null;
-    },
-    eventPhase: null,
-    bubbles: null,
-    cancelable: null,
-    timeStamp: function (event) {
-      return event.timeStamp || Date.now();
-    },
-    defaultPrevented: null,
-    isTrusted: null
-  };
-
-  function functionThatReturnsTrue() {
-    return true;
-  }
-
-  function functionThatReturnsFalse() {
-    return false;
-  }
-  /**
-   * Synthetic events are dispatched by event plugins, typically in response to a
-   * top-level event delegation handler.
-   *
-   * These systems should generally use pooling to reduce the frequency of garbage
-   * collection. The system should check `isPersistent` to determine whether the
-   * event should be released into the pool after being dispatched. Users that
-   * need a persisted event should invoke `persist`.
-   *
-   * Synthetic events (and subclasses) implement the DOM Level 3 Events API by
-   * normalizing browser quirks. Subclasses do not necessarily have to implement a
-   * DOM interface; custom application-specific events can also subclass this.
-   *
-   * @param {object} dispatchConfig Configuration used to dispatch this event.
-   * @param {*} targetInst Marker identifying the event target.
-   * @param {object} nativeEvent Native browser event.
-   * @param {DOMEventTarget} nativeEventTarget Target node.
-   */
-
-
-  function SyntheticEvent(dispatchConfig, targetInst, nativeEvent, nativeEventTarget) {
-    {
-      // these have a getter/setter for warnings
-      delete this.nativeEvent;
-      delete this.preventDefault;
-      delete this.stopPropagation;
-      delete this.isDefaultPrevented;
-      delete this.isPropagationStopped;
-    }
-
-    this.dispatchConfig = dispatchConfig;
-    this._targetInst = targetInst;
-    this.nativeEvent = nativeEvent;
-    var Interface = this.constructor.Interface;
-
-    for (var propName in Interface) {
-      if (!Interface.hasOwnProperty(propName)) {
-        continue;
-      }
-
-      {
-        delete this[propName]; // this has a getter/setter for warnings
-      }
-
-      var normalize = Interface[propName];
-
-      if (normalize) {
-        this[propName] = normalize(nativeEvent);
-      } else {
-        if (propName === 'target') {
-          this.target = nativeEventTarget;
-        } else {
-          this[propName] = nativeEvent[propName];
-        }
-      }
-    }
-
-    var defaultPrevented = nativeEvent.defaultPrevented != null ? nativeEvent.defaultPrevented : nativeEvent.returnValue === false;
-
-    if (defaultPrevented) {
-      this.isDefaultPrevented = functionThatReturnsTrue;
-    } else {
-      this.isDefaultPrevented = functionThatReturnsFalse;
-    }
-
-    this.isPropagationStopped = functionThatReturnsFalse;
-    return this;
-  }
-
-  _assign(SyntheticEvent.prototype, {
-    preventDefault: function () {
-      this.defaultPrevented = true;
-      var event = this.nativeEvent;
-
-      if (!event) {
-        return;
-      }
-
-      if (event.preventDefault) {
-        event.preventDefault();
-      } else if (typeof event.returnValue !== 'unknown') {
-        event.returnValue = false;
-      }
-
-      this.isDefaultPrevented = functionThatReturnsTrue;
-    },
-    stopPropagation: function () {
-      var event = this.nativeEvent;
-
-      if (!event) {
-        return;
-      }
-
-      if (event.stopPropagation) {
-        event.stopPropagation();
-      } else if (typeof event.cancelBubble !== 'unknown') {
-        // The ChangeEventPlugin registers a "propertychange" event for
-        // IE. This event does not support bubbling or cancelling, and
-        // any references to cancelBubble throw "Member not found".  A
-        // typeof check of "unknown" circumvents this issue (and is also
-        // IE specific).
-        event.cancelBubble = true;
-      }
-
-      this.isPropagationStopped = functionThatReturnsTrue;
-    },
-
-    /**
-     * We release all dispatched `SyntheticEvent`s after each event loop, adding
-     * them back into the pool. This allows a way to hold onto a reference that
-     * won't be added back into the pool.
-     */
-    persist: function () {
-      this.isPersistent = functionThatReturnsTrue;
-    },
-
-    /**
-     * Checks if this event should be released back into the pool.
-     *
-     * @return {boolean} True if this should not be released, false otherwise.
-     */
-    isPersistent: functionThatReturnsFalse,
-
-    /**
-     * `PooledClass` looks for `destructor` on each instance it releases.
-     */
-    destructor: function () {
-      var Interface = this.constructor.Interface;
-
-      for (var propName in Interface) {
-        {
-          Object.defineProperty(this, propName, getPooledWarningPropertyDefinition(propName, Interface[propName]));
-        }
-      }
-
-      this.dispatchConfig = null;
-      this._targetInst = null;
-      this.nativeEvent = null;
-      this.isDefaultPrevented = functionThatReturnsFalse;
-      this.isPropagationStopped = functionThatReturnsFalse;
-      this._dispatchListeners = null;
-      this._dispatchInstances = null;
-
-      {
-        Object.defineProperty(this, 'nativeEvent', getPooledWarningPropertyDefinition('nativeEvent', null));
-        Object.defineProperty(this, 'isDefaultPrevented', getPooledWarningPropertyDefinition('isDefaultPrevented', functionThatReturnsFalse));
-        Object.defineProperty(this, 'isPropagationStopped', getPooledWarningPropertyDefinition('isPropagationStopped', functionThatReturnsFalse));
-        Object.defineProperty(this, 'preventDefault', getPooledWarningPropertyDefinition('preventDefault', function () {}));
-        Object.defineProperty(this, 'stopPropagation', getPooledWarningPropertyDefinition('stopPropagation', function () {}));
-      }
-    }
-  });
-
-  SyntheticEvent.Interface = EventInterface;
-  /**
-   * Helper to reduce boilerplate when creating subclasses.
-   */
-
-  SyntheticEvent.extend = function (Interface) {
-    var Super = this;
-
-    var E = function () {};
-
-    E.prototype = Super.prototype;
-    var prototype = new E();
-
-    function Class() {
-      return Super.apply(this, arguments);
-    }
-
-    _assign(prototype, Class.prototype);
-
-    Class.prototype = prototype;
-    Class.prototype.constructor = Class;
-    Class.Interface = _assign({}, Super.Interface, Interface);
-    Class.extend = Super.extend;
-    addEventPoolingTo(Class);
-    return Class;
-  };
-
-  addEventPoolingTo(SyntheticEvent);
-  /**
-   * Helper to nullify syntheticEvent instance properties when destructing
-   *
-   * @param {String} propName
-   * @param {?object} getVal
-   * @return {object} defineProperty object
-   */
-
-  function getPooledWarningPropertyDefinition(propName, getVal) {
-    var isFunction = typeof getVal === 'function';
-    return {
-      configurable: true,
-      set: set,
-      get: get
-    };
-
-    function set(val) {
-      var action = isFunction ? 'setting the method' : 'setting the property';
-      warn(action, 'This is effectively a no-op');
-      return val;
-    }
-
-    function get() {
-      var action = isFunction ? 'accessing the method' : 'accessing the property';
-      var result = isFunction ? 'This is a no-op function' : 'This is set to null';
-      warn(action, result);
-      return getVal;
-    }
-
-    function warn(action, result) {
-      {
-        error("This synthetic event is reused for performance reasons. If you're seeing this, " + "you're %s `%s` on a released/nullified synthetic event. %s. " + 'If you must keep the original synthetic event around, use event.persist(). ' + 'See https://fb.me/react-event-pooling for more information.', action, propName, result);
-      }
-    }
-  }
-
-  function getPooledEvent(dispatchConfig, targetInst, nativeEvent, nativeInst) {
-    var EventConstructor = this;
-
-    if (EventConstructor.eventPool.length) {
-      var instance = EventConstructor.eventPool.pop();
-      EventConstructor.call(instance, dispatchConfig, targetInst, nativeEvent, nativeInst);
-      return instance;
-    }
-
-    return new EventConstructor(dispatchConfig, targetInst, nativeEvent, nativeInst);
-  }
-
-  function releasePooledEvent(event) {
-    var EventConstructor = this;
-
-    if (!(event instanceof EventConstructor)) {
-      {
-        throw Error( "Trying to release an event instance into a pool of a different type." );
-      }
-    }
-
-    event.destructor();
-
-    if (EventConstructor.eventPool.length < EVENT_POOL_SIZE) {
-      EventConstructor.eventPool.push(event);
-    }
-  }
-
-  function addEventPoolingTo(EventConstructor) {
-    EventConstructor.eventPool = [];
-    EventConstructor.getPooled = getPooledEvent;
-    EventConstructor.release = releasePooledEvent;
-  }
-
-  /**
-   * @interface Event
-   * @see http://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents
-   */
-
-  var SyntheticCompositionEvent = SyntheticEvent.extend({
-    data: null
-  });
-
-  /**
-   * @interface Event
-   * @see http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105
-   *      /#events-inputevents
-   */
-
-  var SyntheticInputEvent = SyntheticEvent.extend({
-    data: null
-  });
-
-  var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
-
-  var START_KEYCODE = 229;
-  var canUseCompositionEvent = canUseDOM && 'CompositionEvent' in window;
-  var documentMode = null;
-
-  if (canUseDOM && 'documentMode' in document) {
-    documentMode = document.documentMode;
-  } // Webkit offers a very useful `textInput` event that can be used to
-  // directly represent `beforeInput`. The IE `textinput` event is not as
-  // useful, so we don't use it.
-
-
-  var canUseTextInputEvent = canUseDOM && 'TextEvent' in window && !documentMode; // In IE9+, we have access to composition events, but the data supplied
-  // by the native compositionend event may be incorrect. Japanese ideographic
-  // spaces, for instance (\u3000) are not recorded correctly.
-
-  var useFallbackCompositionData = canUseDOM && (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11);
-  var SPACEBAR_CODE = 32;
-  var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE); // Events and their corresponding property names.
-
-  var eventTypes = {
-    beforeInput: {
-      phasedRegistrationNames: {
-        bubbled: 'onBeforeInput',
-        captured: 'onBeforeInputCapture'
-      },
-      dependencies: [TOP_COMPOSITION_END, TOP_KEY_PRESS, TOP_TEXT_INPUT, TOP_PASTE]
-    },
-    compositionEnd: {
-      phasedRegistrationNames: {
-        bubbled: 'onCompositionEnd',
-        captured: 'onCompositionEndCapture'
-      },
-      dependencies: [TOP_BLUR, TOP_COMPOSITION_END, TOP_KEY_DOWN, TOP_KEY_PRESS, TOP_KEY_UP, TOP_MOUSE_DOWN]
-    },
-    compositionStart: {
-      phasedRegistrationNames: {
-        bubbled: 'onCompositionStart',
-        captured: 'onCompositionStartCapture'
-      },
-      dependencies: [TOP_BLUR, TOP_COMPOSITION_START, TOP_KEY_DOWN, TOP_KEY_PRESS, TOP_KEY_UP, TOP_MOUSE_DOWN]
-    },
-    compositionUpdate: {
-      phasedRegistrationNames: {
-        bubbled: 'onCompositionUpdate',
-        captured: 'onCompositionUpdateCapture'
-      },
-      dependencies: [TOP_BLUR, TOP_COMPOSITION_UPDATE, TOP_KEY_DOWN, TOP_KEY_PRESS, TOP_KEY_UP, TOP_MOUSE_DOWN]
-    }
-  }; // Track whether we've ever handled a keypress on the space key.
-
-  var hasSpaceKeypress = false;
-  /**
-   * Return whether a native keypress event is assumed to be a command.
-   * This is required because Firefox fires `keypress` events for key commands
-   * (cut, copy, select-all, etc.) even though no character is inserted.
-   */
-
-  function isKeypressCommand(nativeEvent) {
-    return (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) && // ctrlKey && altKey is equivalent to AltGr, and is not a command.
-    !(nativeEvent.ctrlKey && nativeEvent.altKey);
-  }
-  /**
-   * Translate native top level events into event types.
-   *
-   * @param {string} topLevelType
-   * @return {object}
-   */
-
-
-  function getCompositionEventType(topLevelType) {
-    switch (topLevelType) {
-      case TOP_COMPOSITION_START:
-        return eventTypes.compositionStart;
-
-      case TOP_COMPOSITION_END:
-        return eventTypes.compositionEnd;
-
-      case TOP_COMPOSITION_UPDATE:
-        return eventTypes.compositionUpdate;
-    }
-  }
-  /**
-   * Does our fallback best-guess model think this event signifies that
-   * composition has begun?
-   *
-   * @param {string} topLevelType
-   * @param {object} nativeEvent
-   * @return {boolean}
-   */
-
-
-  function isFallbackCompositionStart(topLevelType, nativeEvent) {
-    return topLevelType === TOP_KEY_DOWN && nativeEvent.keyCode === START_KEYCODE;
-  }
-  /**
-   * Does our fallback mode think that this event is the end of composition?
-   *
-   * @param {string} topLevelType
-   * @param {object} nativeEvent
-   * @return {boolean}
-   */
-
-
-  function isFallbackCompositionEnd(topLevelType, nativeEvent) {
-    switch (topLevelType) {
-      case TOP_KEY_UP:
-        // Command keys insert or clear IME input.
-        return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;
-
-      case TOP_KEY_DOWN:
-        // Expect IME keyCode on each keydown. If we get any other
-        // code we must have exited earlier.
-        return nativeEvent.keyCode !== START_KEYCODE;
-
-      case TOP_KEY_PRESS:
-      case TOP_MOUSE_DOWN:
-      case TOP_BLUR:
-        // Events are not possible without cancelling IME.
-        return true;
-
-      default:
-        return false;
-    }
-  }
-  /**
-   * Google Input Tools provides composition data via a CustomEvent,
-   * with the `data` property populated in the `detail` object. If this
-   * is available on the event object, use it. If not, this is a plain
-   * composition event and we have nothing special to extract.
-   *
-   * @param {object} nativeEvent
-   * @return {?string}
-   */
-
-
-  function getDataFromCustomEvent(nativeEvent) {
-    var detail = nativeEvent.detail;
-
-    if (typeof detail === 'object' && 'data' in detail) {
-      return detail.data;
-    }
-
-    return null;
-  }
-  /**
-   * Check if a composition event was triggered by Korean IME.
-   * Our fallback mode does not work well with IE's Korean IME,
-   * so just use native composition events when Korean IME is used.
-   * Although CompositionEvent.locale property is deprecated,
-   * it is available in IE, where our fallback mode is enabled.
-   *
-   * @param {object} nativeEvent
-   * @return {boolean}
-   */
-
-
-  function isUsingKoreanIME(nativeEvent) {
-    return nativeEvent.locale === 'ko';
-  } // Track the current IME composition status, if any.
-
-
-  var isComposing = false;
-  /**
-   * @return {?object} A SyntheticCompositionEvent.
-   */
-
-  function extractCompositionEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
-    var eventType;
-    var fallbackData;
-
-    if (canUseCompositionEvent) {
-      eventType = getCompositionEventType(topLevelType);
-    } else if (!isComposing) {
-      if (isFallbackCompositionStart(topLevelType, nativeEvent)) {
-        eventType = eventTypes.compositionStart;
-      }
-    } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) {
-      eventType = eventTypes.compositionEnd;
-    }
-
-    if (!eventType) {
-      return null;
-    }
-
-    if (useFallbackCompositionData && !isUsingKoreanIME(nativeEvent)) {
-      // The current composition is stored statically and must not be
-      // overwritten while composition continues.
-      if (!isComposing && eventType === eventTypes.compositionStart) {
-        isComposing = initialize(nativeEventTarget);
-      } else if (eventType === eventTypes.compositionEnd) {
-        if (isComposing) {
-          fallbackData = getData();
-        }
-      }
-    }
-
-    var event = SyntheticCompositionEvent.getPooled(eventType, targetInst, nativeEvent, nativeEventTarget);
-
-    if (fallbackData) {
-      // Inject data generated from fallback path into the synthetic event.
-      // This matches the property of native CompositionEventInterface.
-      event.data = fallbackData;
-    } else {
-      var customData = getDataFromCustomEvent(nativeEvent);
-
-      if (customData !== null) {
-        event.data = customData;
-      }
-    }
-
-    accumulateTwoPhaseDispatches(event);
-    return event;
-  }
-  /**
-   * @param {TopLevelType} topLevelType Number from `TopLevelType`.
-   * @param {object} nativeEvent Native browser event.
-   * @return {?string} The string corresponding to this `beforeInput` event.
-   */
-
-
-  function getNativeBeforeInputChars(topLevelType, nativeEvent) {
-    switch (topLevelType) {
-      case TOP_COMPOSITION_END:
-        return getDataFromCustomEvent(nativeEvent);
-
-      case TOP_KEY_PRESS:
-        /**
-         * If native `textInput` events are available, our goal is to make
-         * use of them. However, there is a special case: the spacebar key.
-         * In Webkit, preventing default on a spacebar `textInput` event
-         * cancels character insertion, but it *also* causes the browser
-         * to fall back to its default spacebar behavior of scrolling the
-         * page.
-         *
-         * Tracking at:
-         * https://code.google.com/p/chromium/issues/detail?id=355103
-         *
-         * To avoid this issue, use the keypress event as if no `textInput`
-         * event is available.
-         */
-        var which = nativeEvent.which;
-
-        if (which !== SPACEBAR_CODE) {
-          return null;
-        }
-
-        hasSpaceKeypress = true;
-        return SPACEBAR_CHAR;
-
-      case TOP_TEXT_INPUT:
-        // Record the characters to be added to the DOM.
-        var chars = nativeEvent.data; // If it's a spacebar character, assume that we have already handled
-        // it at the keypress level and bail immediately. Android Chrome
-        // doesn't give us keycodes, so we need to ignore it.
-
-        if (chars === SPACEBAR_CHAR && hasSpaceKeypress) {
-          return null;
-        }
-
-        return chars;
-
-      default:
-        // For other native event types, do nothing.
-        return null;
-    }
-  }
-  /**
-   * For browsers that do not provide the `textInput` event, extract the
-   * appropriate string to use for SyntheticInputEvent.
-   *
-   * @param {number} topLevelType Number from `TopLevelEventTypes`.
-   * @param {object} nativeEvent Native browser event.
-   * @return {?string} The fallback string for this `beforeInput` event.
-   */
-
-
-  function getFallbackBeforeInputChars(topLevelType, nativeEvent) {
-    // If we are currently composing (IME) and using a fallback to do so,
-    // try to extract the composed characters from the fallback object.
-    // If composition event is available, we extract a string only at
-    // compositionevent, otherwise extract it at fallback events.
-    if (isComposing) {
-      if (topLevelType === TOP_COMPOSITION_END || !canUseCompositionEvent && isFallbackCompositionEnd(topLevelType, nativeEvent)) {
-        var chars = getData();
-        reset();
-        isComposing = false;
-        return chars;
-      }
-
-      return null;
-    }
-
-    switch (topLevelType) {
-      case TOP_PASTE:
-        // If a paste event occurs after a keypress, throw out the input
-        // chars. Paste events should not lead to BeforeInput events.
-        return null;
-
-      case TOP_KEY_PRESS:
-        /**
-         * As of v27, Firefox may fire keypress events even when no character
-         * will be inserted. A few possibilities:
-         *
-         * - `which` is `0`. Arrow keys, Esc key, etc.
-         *
-         * - `which` is the pressed key code, but no char is available.
-         *   Ex: 'AltGr + d` in Polish. There is no modified character for
-         *   this key combination and no character is inserted into the
-         *   document, but FF fires the keypress for char code `100` anyway.
-         *   No `input` event will occur.
-         *
-         * - `which` is the pressed key code, but a command combination is
-         *   being used. Ex: `Cmd+C`. No character is inserted, and no
-         *   `input` event will occur.
-         */
-        if (!isKeypressCommand(nativeEvent)) {
-          // IE fires the `keypress` event when a user types an emoji via
-          // Touch keyboard of Windows.  In such a case, the `char` property
-          // holds an emoji character like `\uD83D\uDE0A`.  Because its length
-          // is 2, the property `which` does not represent an emoji correctly.
-          // In such a case, we directly return the `char` property instead of
-          // using `which`.
-          if (nativeEvent.char && nativeEvent.char.length > 1) {
-            return nativeEvent.char;
-          } else if (nativeEvent.which) {
-            return String.fromCharCode(nativeEvent.which);
-          }
-        }
-
-        return null;
-
-      case TOP_COMPOSITION_END:
-        return useFallbackCompositionData && !isUsingKoreanIME(nativeEvent) ? null : nativeEvent.data;
-
-      default:
-        return null;
-    }
-  }
-  /**
-   * Extract a SyntheticInputEvent for `beforeInput`, based on either native
-   * `textInput` or fallback behavior.
-   *
-   * @return {?object} A SyntheticInputEvent.
-   */
-
-
-  function extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
-    var chars;
-
-    if (canUseTextInputEvent) {
-      chars = getNativeBeforeInputChars(topLevelType, nativeEvent);
-    } else {
-      chars = getFallbackBeforeInputChars(topLevelType, nativeEvent);
-    } // If no characters are being inserted, no BeforeInput event should
-    // be fired.
-
-
-    if (!chars) {
-      return null;
-    }
-
-    var event = SyntheticInputEvent.getPooled(eventTypes.beforeInput, targetInst, nativeEvent, nativeEventTarget);
-    event.data = chars;
-    accumulateTwoPhaseDispatches(event);
-    return event;
-  }
-  /**
-   * Create an `onBeforeInput` event to match
-   * http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents.
-   *
-   * This event plugin is based on the native `textInput` event
-   * available in Chrome, Safari, Opera, and IE. This event fires after
-   * `onKeyPress` and `onCompositionEnd`, but before `onInput`.
-   *
-   * `beforeInput` is spec'd but not implemented in any browsers, and
-   * the `input` event does not provide any useful information about what has
-   * actually been added, contrary to the spec. Thus, `textInput` is the best
-   * available event to identify the characters that have actually been inserted
-   * into the target node.
-   *
-   * This plugin is also responsible for emitting `composition` events, thus
-   * allowing us to share composition fallback code for both `beforeInput` and
-   * `composition` event types.
-   */
-
-
-  var BeforeInputEventPlugin = {
-    eventTypes: eventTypes,
-    extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags) {
-      var composition = extractCompositionEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget);
-      var beforeInput = extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget);
-
-      if (composition === null) {
-        return beforeInput;
-      }
-
-      if (beforeInput === null) {
-        return composition;
-      }
-
-      return [composition, beforeInput];
-    }
-  };
-
-  /**
-   * @see http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary
-   */
-  var supportedInputTypes = {
-    color: true,
-    date: true,
-    datetime: true,
-    'datetime-local': true,
-    email: true,
-    month: true,
-    number: true,
-    password: true,
-    range: true,
-    search: true,
-    tel: true,
-    text: true,
-    time: true,
-    url: true,
-    week: true
-  };
-
-  function isTextInputElement(elem) {
-    var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
-
-    if (nodeName === 'input') {
-      return !!supportedInputTypes[elem.type];
-    }
-
-    if (nodeName === 'textarea') {
-      return true;
-    }
-
-    return false;
-  }
-
-  var eventTypes$1 = {
-    change: {
-      phasedRegistrationNames: {
-        bubbled: 'onChange',
-        captured: 'onChangeCapture'
-      },
-      dependencies: [TOP_BLUR, TOP_CHANGE, TOP_CLICK, TOP_FOCUS, TOP_INPUT, TOP_KEY_DOWN, TOP_KEY_UP, TOP_SELECTION_CHANGE]
-    }
-  };
-
-  function createAndAccumulateChangeEvent(inst, nativeEvent, target) {
-    var event = SyntheticEvent.getPooled(eventTypes$1.change, inst, nativeEvent, target);
-    event.type = 'change'; // Flag this event loop as needing state restore.
-
-    enqueueStateRestore(target);
-    accumulateTwoPhaseDispatches(event);
-    return event;
-  }
-  /**
-   * For IE shims
-   */
-
-
-  var activeElement = null;
-  var activeElementInst = null;
-  /**
-   * SECTION: handle `change` event
-   */
-
-  function shouldUseChangeEvent(elem) {
-    var nodeName = elem.nodeName && elem.nodeName.toLowerCase();
-    return nodeName === 'select' || nodeName === 'input' && elem.type === 'file';
-  }
-
-  function manualDispatchChangeEvent(nativeEvent) {
-    var event = createAndAccumulateChangeEvent(activeElementInst, nativeEvent, getEventTarget(nativeEvent)); // If change and propertychange bubbled, we'd just bind to it like all the
-    // other events and have it go through ReactBrowserEventEmitter. Since it
-    // doesn't, we manually listen for the events and so we have to enqueue and
-    // process the abstract event manually.
-    //
-    // Batching is necessary here in order to ensure that all event handlers run
-    // before the next rerender (including event handlers attached to ancestor
-    // elements instead of directly on the input). Without this, controlled
-    // components don't work properly in conjunction with event bubbling because
-    // the component is rerendered and the value reverted before all the event
-    // handlers can run. See https://github.com/facebook/react/issues/708.
-
-    batchedUpdates(runEventInBatch, event);
-  }
-
-  function runEventInBatch(event) {
-    runEventsInBatch(event);
-  }
-
-  function getInstIfValueChanged(targetInst) {
-    var targetNode = getNodeFromInstance$1(targetInst);
-
-    if (updateValueIfChanged(targetNode)) {
-      return targetInst;
-    }
-  }
-
-  function getTargetInstForChangeEvent(topLevelType, targetInst) {
-    if (topLevelType === TOP_CHANGE) {
-      return targetInst;
-    }
-  }
-  /**
-   * SECTION: handle `input` event
-   */
-
-
-  var isInputEventSupported = false;
-
-  if (canUseDOM) {
-    // IE9 claims to support the input event but fails to trigger it when
-    // deleting text, so we ignore its input events.
-    isInputEventSupported = isEventSupported('input') && (!document.documentMode || document.documentMode > 9);
-  }
-  /**
-   * (For IE <=9) Starts tracking propertychange events on the passed-in element
-   * and override the value property so that we can distinguish user events from
-   * value changes in JS.
-   */
-
-
-  function startWatchingForValueChange(target, targetInst) {
-    activeElement = target;
-    activeElementInst = targetInst;
-    activeElement.attachEvent('onpropertychange', handlePropertyChange);
-  }
-  /**
-   * (For IE <=9) Removes the event listeners from the currently-tracked element,
-   * if any exists.
-   */
-
-
-  function stopWatchingForValueChange() {
-    if (!activeElement) {
-      return;
-    }
-
-    activeElement.detachEvent('onpropertychange', handlePropertyChange);
-    activeElement = null;
-    activeElementInst = null;
-  }
-  /**
-   * (For IE <=9) Handles a propertychange event, sending a `change` event if
-   * the value of the active element has changed.
-   */
-
-
-  function handlePropertyChange(nativeEvent) {
-    if (nativeEvent.propertyName !== 'value') {
-      return;
-    }
-
-    if (getInstIfValueChanged(activeElementInst)) {
-      manualDispatchChangeEvent(nativeEvent);
-    }
-  }
-
-  function handleEventsForInputEventPolyfill(topLevelType, target, targetInst) {
-    if (topLevelType === TOP_FOCUS) {
-      // In IE9, propertychange fires for most input events but is buggy and
-      // doesn't fire when text is deleted, but conveniently, selectionchange
-      // appears to fire in all of the remaining cases so we catch those and
-      // forward the event if the value has changed
-      // In either case, we don't want to call the event handler if the value
-      // is changed from JS so we redefine a setter for `.value` that updates
-      // our activeElementValue variable, allowing us to ignore those changes
-      //
-      // stopWatching() should be a noop here but we call it just in case we
-      // missed a blur event somehow.
-      stopWatchingForValueChange();
-      startWatchingForValueChange(target, targetInst);
-    } else if (topLevelType === TOP_BLUR) {
-      stopWatchingForValueChange();
-    }
-  } // For IE8 and IE9.
-
-
-  function getTargetInstForInputEventPolyfill(topLevelType, targetInst) {
-    if (topLevelType === TOP_SELECTION_CHANGE || topLevelType === TOP_KEY_UP || topLevelType === TOP_KEY_DOWN) {
-      // On the selectionchange event, the target is just document which isn't
-      // helpful for us so just check activeElement instead.
-      //
-      // 99% of the time, keydown and keyup aren't necessary. IE8 fails to fire
-      // propertychange on the first input event after setting `value` from a
-      // script and fires only keydown, keypress, keyup. Catching keyup usually
-      // gets it and catching keydown lets us fire an event for the first
-      // keystroke if user does a key repeat (it'll be a little delayed: right
-      // before the second keystroke). Other input methods (e.g., paste) seem to
-      // fire selectionchange normally.
-      return getInstIfValueChanged(activeElementInst);
-    }
-  }
-  /**
-   * SECTION: handle `click` event
-   */
-
-
-  function shouldUseClickEvent(elem) {
-    // Use the `click` event to detect changes to checkbox and radio inputs.
-    // This approach works across all browsers, whereas `change` does not fire
-    // until `blur` in IE8.
-    var nodeName = elem.nodeName;
-    return nodeName && nodeName.toLowerCase() === 'input' && (elem.type === 'checkbox' || elem.type === 'radio');
-  }
-
-  function getTargetInstForClickEvent(topLevelType, targetInst) {
-    if (topLevelType === TOP_CLICK) {
-      return getInstIfValueChanged(targetInst);
-    }
-  }
-
-  function getTargetInstForInputOrChangeEvent(topLevelType, targetInst) {
-    if (topLevelType === TOP_INPUT || topLevelType === TOP_CHANGE) {
-      return getInstIfValueChanged(targetInst);
-    }
-  }
-
-  function handleControlledInputBlur(node) {
-    var state = node._wrapperState;
-
-    if (!state || !state.controlled || node.type !== 'number') {
-      return;
-    }
-
-    {
-      // If controlled, assign the value attribute to the current value on blur
-      setDefaultValue(node, 'number', node.value);
-    }
-  }
-  /**
-   * This plugin creates an `onChange` event that normalizes change events
-   * across form elements. This event fires at a time when it's possible to
-   * change the element's value without seeing a flicker.
-   *
-   * Supported elements are:
-   * - input (see `isTextInputElement`)
-   * - textarea
-   * - select
-   */
-
-
-  var ChangeEventPlugin = {
-    eventTypes: eventTypes$1,
-    _isInputEventSupported: isInputEventSupported,
-    extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags) {
-      var targetNode = targetInst ? getNodeFromInstance$1(targetInst) : window;
-      var getTargetInstFunc, handleEventFunc;
-
-      if (shouldUseChangeEvent(targetNode)) {
-        getTargetInstFunc = getTargetInstForChangeEvent;
-      } else if (isTextInputElement(targetNode)) {
-        if (isInputEventSupported) {
-          getTargetInstFunc = getTargetInstForInputOrChangeEvent;
-        } else {
-          getTargetInstFunc = getTargetInstForInputEventPolyfill;
-          handleEventFunc = handleEventsForInputEventPolyfill;
-        }
-      } else if (shouldUseClickEvent(targetNode)) {
-        getTargetInstFunc = getTargetInstForClickEvent;
-      }
-
-      if (getTargetInstFunc) {
-        var inst = getTargetInstFunc(topLevelType, targetInst);
-
-        if (inst) {
-          var event = createAndAccumulateChangeEvent(inst, nativeEvent, nativeEventTarget);
-          return event;
-        }
-      }
-
-      if (handleEventFunc) {
-        handleEventFunc(topLevelType, targetNode, targetInst);
-      } // When blurring, set the value attribute for number inputs
-
-
-      if (topLevelType === TOP_BLUR) {
-        handleControlledInputBlur(targetNode);
-      }
-    }
-  };
-
-  var SyntheticUIEvent = SyntheticEvent.extend({
-    view: null,
-    detail: null
-  });
-
-  /**
-   * Translation from modifier key to the associated property in the event.
-   * @see http://www.w3.org/TR/DOM-Level-3-Events/#keys-Modifiers
-   */
-  var modifierKeyToProp = {
-    Alt: 'altKey',
-    Control: 'ctrlKey',
-    Meta: 'metaKey',
-    Shift: 'shiftKey'
-  }; // Older browsers (Safari <= 10, iOS Safari <= 10.2) do not support
-  // getModifierState. If getModifierState is not supported, we map it to a set of
-  // modifier keys exposed by the event. In this case, Lock-keys are not supported.
-
-  function modifierStateGetter(keyArg) {
-    var syntheticEvent = this;
-    var nativeEvent = syntheticEvent.nativeEvent;
-
-    if (nativeEvent.getModifierState) {
-      return nativeEvent.getModifierState(keyArg);
-    }
-
-    var keyProp = modifierKeyToProp[keyArg];
-    return keyProp ? !!nativeEvent[keyProp] : false;
-  }
-
-  function getEventModifierState(nativeEvent) {
-    return modifierStateGetter;
-  }
-
-  var previousScreenX = 0;
-  var previousScreenY = 0; // Use flags to signal movementX/Y has already been set
-
-  var isMovementXSet = false;
-  var isMovementYSet = false;
-  /**
-   * @interface MouseEvent
-   * @see http://www.w3.org/TR/DOM-Level-3-Events/
-   */
-
-  var SyntheticMouseEvent = SyntheticUIEvent.extend({
-    screenX: null,
-    screenY: null,
-    clientX: null,
-    clientY: null,
-    pageX: null,
-    pageY: null,
-    ctrlKey: null,
-    shiftKey: null,
-    altKey: null,
-    metaKey: null,
-    getModifierState: getEventModifierState,
-    button: null,
-    buttons: null,
-    relatedTarget: function (event) {
-      return event.relatedTarget || (event.fromElement === event.srcElement ? event.toElement : event.fromElement);
-    },
-    movementX: function (event) {
-      if ('movementX' in event) {
-        return event.movementX;
-      }
-
-      var screenX = previousScreenX;
-      previousScreenX = event.screenX;
-
-      if (!isMovementXSet) {
-        isMovementXSet = true;
-        return 0;
-      }
-
-      return event.type === 'mousemove' ? event.screenX - screenX : 0;
-    },
-    movementY: function (event) {
-      if ('movementY' in event) {
-        return event.movementY;
-      }
-
-      var screenY = previousScreenY;
-      previousScreenY = event.screenY;
-
-      if (!isMovementYSet) {
-        isMovementYSet = true;
-        return 0;
-      }
-
-      return event.type === 'mousemove' ? event.screenY - screenY : 0;
-    }
-  });
-
-  /**
-   * @interface PointerEvent
-   * @see http://www.w3.org/TR/pointerevents/
-   */
-
-  var SyntheticPointerEvent = SyntheticMouseEvent.extend({
-    pointerId: null,
-    width: null,
-    height: null,
-    pressure: null,
-    tangentialPressure: null,
-    tiltX: null,
-    tiltY: null,
-    twist: null,
-    pointerType: null,
-    isPrimary: null
-  });
-
-  var eventTypes$2 = {
-    mouseEnter: {
-      registrationName: 'onMouseEnter',
-      dependencies: [TOP_MOUSE_OUT, TOP_MOUSE_OVER]
-    },
-    mouseLeave: {
-      registrationName: 'onMouseLeave',
-      dependencies: [TOP_MOUSE_OUT, TOP_MOUSE_OVER]
-    },
-    pointerEnter: {
-      registrationName: 'onPointerEnter',
-      dependencies: [TOP_POINTER_OUT, TOP_POINTER_OVER]
-    },
-    pointerLeave: {
-      registrationName: 'onPointerLeave',
-      dependencies: [TOP_POINTER_OUT, TOP_POINTER_OVER]
-    }
-  };
-  var EnterLeaveEventPlugin = {
-    eventTypes: eventTypes$2,
-
-    /**
-     * For almost every interaction we care about, there will be both a top-level
-     * `mouseover` and `mouseout` event that occurs. Only use `mouseout` so that
-     * we do not extract duplicate events. However, moving the mouse into the
-     * browser from outside will not fire a `mouseout` event. In this case, we use
-     * the `mouseover` top-level event.
-     */
-    extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags) {
-      var isOverEvent = topLevelType === TOP_MOUSE_OVER || topLevelType === TOP_POINTER_OVER;
-      var isOutEvent = topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_POINTER_OUT;
-
-      if (isOverEvent && (eventSystemFlags & IS_REPLAYED) === 0 && (nativeEvent.relatedTarget || nativeEvent.fromElement)) {
-        // If this is an over event with a target, then we've already dispatched
-        // the event in the out event of the other target. If this is replayed,
-        // then it's because we couldn't dispatch against this target previously
-        // so we have to do it now instead.
-        return null;
-      }
-
-      if (!isOutEvent && !isOverEvent) {
-        // Must not be a mouse or pointer in or out - ignoring.
-        return null;
-      }
-
-      var win;
-
-      if (nativeEventTarget.window === nativeEventTarget) {
-        // `nativeEventTarget` is probably a window object.
-        win = nativeEventTarget;
-      } else {
-        // TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.
-        var doc = nativeEventTarget.ownerDocument;
-
-        if (doc) {
-          win = doc.defaultView || doc.parentWindow;
-        } else {
-          win = window;
-        }
-      }
-
-      var from;
-      var to;
-
-      if (isOutEvent) {
-        from = targetInst;
-        var related = nativeEvent.relatedTarget || nativeEvent.toElement;
-        to = related ? getClosestInstanceFromNode(related) : null;
-
-        if (to !== null) {
-          var nearestMounted = getNearestMountedFiber(to);
-
-          if (to !== nearestMounted || to.tag !== HostComponent && to.tag !== HostText) {
-            to = null;
-          }
-        }
-      } else {
-        // Moving to a node from outside the window.
-        from = null;
-        to = targetInst;
-      }
-
-      if (from === to) {
-        // Nothing pertains to our managed components.
-        return null;
-      }
-
-      var eventInterface, leaveEventType, enterEventType, eventTypePrefix;
-
-      if (topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_MOUSE_OVER) {
-        eventInterface = SyntheticMouseEvent;
-        leaveEventType = eventTypes$2.mouseLeave;
-        enterEventType = eventTypes$2.mouseEnter;
-        eventTypePrefix = 'mouse';
-      } else if (topLevelType === TOP_POINTER_OUT || topLevelType === TOP_POINTER_OVER) {
-        eventInterface = SyntheticPointerEvent;
-        leaveEventType = eventTypes$2.pointerLeave;
-        enterEventType = eventTypes$2.pointerEnter;
-        eventTypePrefix = 'pointer';
-      }
-
-      var fromNode = from == null ? win : getNodeFromInstance$1(from);
-      var toNode = to == null ? win : getNodeFromInstance$1(to);
-      var leave = eventInterface.getPooled(leaveEventType, from, nativeEvent, nativeEventTarget);
-      leave.type = eventTypePrefix + 'leave';
-      leave.target = fromNode;
-      leave.relatedTarget = toNode;
-      var enter = eventInterface.getPooled(enterEventType, to, nativeEvent, nativeEventTarget);
-      enter.type = eventTypePrefix + 'enter';
-      enter.target = toNode;
-      enter.relatedTarget = fromNode;
-      accumulateEnterLeaveDispatches(leave, enter, from, to); // If we are not processing the first ancestor, then we
-      // should not process the same nativeEvent again, as we
-      // will have already processed it in the first ancestor.
-
-      if ((eventSystemFlags & IS_FIRST_ANCESTOR) === 0) {
-        return [leave];
-      }
-
-      return [leave, enter];
-    }
-  };
-
-  /**
-   * inlined Object.is polyfill to avoid requiring consumers ship their own
-   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
-   */
-  function is(x, y) {
-    return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
-    ;
-  }
-
-  var objectIs = typeof Object.is === 'function' ? Object.is : is;
-
-  var hasOwnProperty$2 = Object.prototype.hasOwnProperty;
-  /**
-   * Performs equality by iterating through keys on an object and returning false
-   * when any key has values which are not strictly equal between the arguments.
-   * Returns true when the values of all keys are strictly equal.
-   */
-
-  function shallowEqual(objA, objB) {
-    if (objectIs(objA, objB)) {
-      return true;
-    }
-
-    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-      return false;
-    }
-
-    var keysA = Object.keys(objA);
-    var keysB = Object.keys(objB);
-
-    if (keysA.length !== keysB.length) {
-      return false;
-    } // Test for A's keys different from B.
-
-
-    for (var i = 0; i < keysA.length; i++) {
-      if (!hasOwnProperty$2.call(objB, keysA[i]) || !objectIs(objA[keysA[i]], objB[keysA[i]])) {
-        return false;
-      }
-    }
-
-    return true;
-  }
-
-  var skipSelectionChangeEvent = canUseDOM && 'documentMode' in document && document.documentMode <= 11;
-  var eventTypes$3 = {
-    select: {
-      phasedRegistrationNames: {
-        bubbled: 'onSelect',
-        captured: 'onSelectCapture'
-      },
-      dependencies: [TOP_BLUR, TOP_CONTEXT_MENU, TOP_DRAG_END, TOP_FOCUS, TOP_KEY_DOWN, TOP_KEY_UP, TOP_MOUSE_DOWN, TOP_MOUSE_UP, TOP_SELECTION_CHANGE]
-    }
-  };
-  var activeElement$1 = null;
-  var activeElementInst$1 = null;
-  var lastSelection = null;
-  var mouseDown = false;
-  /**
-   * Get an object which is a unique representation of the current selection.
-   *
-   * The return value will not be consistent across nodes or browsers, but
-   * two identical selections on the same node will return identical objects.
-   *
-   * @param {DOMElement} node
-   * @return {object}
-   */
-
-  function getSelection$1(node) {
-    if ('selectionStart' in node && hasSelectionCapabilities(node)) {
-      return {
-        start: node.selectionStart,
-        end: node.selectionEnd
-      };
-    } else {
-      var win = node.ownerDocument && node.ownerDocument.defaultView || window;
-      var selection = win.getSelection();
-      return {
-        anchorNode: selection.anchorNode,
-        anchorOffset: selection.anchorOffset,
-        focusNode: selection.focusNode,
-        focusOffset: selection.focusOffset
-      };
-    }
-  }
-  /**
-   * Get document associated with the event target.
-   *
-   * @param {object} nativeEventTarget
-   * @return {Document}
-   */
-
-
-  function getEventTargetDocument(eventTarget) {
-    return eventTarget.window === eventTarget ? eventTarget.document : eventTarget.nodeType === DOCUMENT_NODE ? eventTarget : eventTarget.ownerDocument;
-  }
-  /**
-   * Poll selection to see whether it's changed.
-   *
-   * @param {object} nativeEvent
-   * @param {object} nativeEventTarget
-   * @return {?SyntheticEvent}
-   */
-
-
-  function constructSelectEvent(nativeEvent, nativeEventTarget) {
-    // Ensure we have the right element, and that the user is not dragging a
-    // selection (this matches native `select` event behavior). In HTML5, select
-    // fires only on input and textarea thus if there's no focused element we
-    // won't dispatch.
-    var doc = getEventTargetDocument(nativeEventTarget);
-
-    if (mouseDown || activeElement$1 == null || activeElement$1 !== getActiveElement(doc)) {
-      return null;
-    } // Only fire when selection has actually changed.
-
-
-    var currentSelection = getSelection$1(activeElement$1);
-
-    if (!lastSelection || !shallowEqual(lastSelection, currentSelection)) {
-      lastSelection = currentSelection;
-      var syntheticEvent = SyntheticEvent.getPooled(eventTypes$3.select, activeElementInst$1, nativeEvent, nativeEventTarget);
-      syntheticEvent.type = 'select';
-      syntheticEvent.target = activeElement$1;
-      accumulateTwoPhaseDispatches(syntheticEvent);
-      return syntheticEvent;
-    }
-
-    return null;
-  }
-  /**
-   * This plugin creates an `onSelect` event that normalizes select events
-   * across form elements.
-   *
-   * Supported elements are:
-   * - input (see `isTextInputElement`)
-   * - textarea
-   * - contentEditable
-   *
-   * This differs from native browser implementations in the following ways:
-   * - Fires on contentEditable fields as well as inputs.
-   * - Fires for collapsed selection.
-   * - Fires after user input.
-   */
-
-
-  var SelectEventPlugin = {
-    eventTypes: eventTypes$3,
-    extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags, container) {
-      var containerOrDoc = container || getEventTargetDocument(nativeEventTarget); // Track whether all listeners exists for this plugin. If none exist, we do
-      // not extract events. See #3639.
-
-      if (!containerOrDoc || !isListeningToAllDependencies('onSelect', containerOrDoc)) {
-        return null;
-      }
-
-      var targetNode = targetInst ? getNodeFromInstance$1(targetInst) : window;
-
-      switch (topLevelType) {
-        // Track the input node that has focus.
-        case TOP_FOCUS:
-          if (isTextInputElement(targetNode) || targetNode.contentEditable === 'true') {
-            activeElement$1 = targetNode;
-            activeElementInst$1 = targetInst;
-            lastSelection = null;
-          }
-
-          break;
-
-        case TOP_BLUR:
-          activeElement$1 = null;
-          activeElementInst$1 = null;
-          lastSelection = null;
-          break;
-        // Don't fire the event while the user is dragging. This matches the
-        // semantics of the native select event.
-
-        case TOP_MOUSE_DOWN:
-          mouseDown = true;
-          break;
-
-        case TOP_CONTEXT_MENU:
-        case TOP_MOUSE_UP:
-        case TOP_DRAG_END:
-          mouseDown = false;
-          return constructSelectEvent(nativeEvent, nativeEventTarget);
-        // Chrome and IE fire non-standard event when selection is changed (and
-        // sometimes when it hasn't). IE's event fires out of order with respect
-        // to key and input events on deletion, so we discard it.
-        //
-        // Firefox doesn't support selectionchange, so check selection status
-        // after each key entry. The selection changes after keydown and before
-        // keyup, but we check on keydown as well in the case of holding down a
-        // key, when multiple keydown events are fired but only one keyup is.
-        // This is also our approach for IE handling, for the reason above.
-
-        case TOP_SELECTION_CHANGE:
-          if (skipSelectionChangeEvent) {
-            break;
-          }
-
-        // falls through
-
-        case TOP_KEY_DOWN:
-        case TOP_KEY_UP:
-          return constructSelectEvent(nativeEvent, nativeEventTarget);
-      }
-
-      return null;
-    }
-  };
-
-  /**
-   * @interface Event
-   * @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent
-   */
-
-  var SyntheticAnimationEvent = SyntheticEvent.extend({
-    animationName: null,
-    elapsedTime: null,
-    pseudoElement: null
-  });
-
-  /**
-   * @interface Event
-   * @see http://www.w3.org/TR/clipboard-apis/
-   */
-
-  var SyntheticClipboardEvent = SyntheticEvent.extend({
-    clipboardData: function (event) {
-      return 'clipboardData' in event ? event.clipboardData : window.clipboardData;
-    }
-  });
-
-  /**
-   * @interface FocusEvent
-   * @see http://www.w3.org/TR/DOM-Level-3-Events/
-   */
-
-  var SyntheticFocusEvent = SyntheticUIEvent.extend({
-    relatedTarget: null
-  });
-
-  /**
-   * `charCode` represents the actual "character code" and is safe to use with
-   * `String.fromCharCode`. As such, only keys that correspond to printable
-   * characters produce a valid `charCode`, the only exception to this is Enter.
-   * The Tab-key is considered non-printable and does not have a `charCode`,
-   * presumably because it does not produce a tab-character in browsers.
-   *
-   * @param {object} nativeEvent Native browser event.
-   * @return {number} Normalized `charCode` property.
-   */
-  function getEventCharCode(nativeEvent) {
-    var charCode;
-    var keyCode = nativeEvent.keyCode;
-
-    if ('charCode' in nativeEvent) {
-      charCode = nativeEvent.charCode; // FF does not set `charCode` for the Enter-key, check against `keyCode`.
-
-      if (charCode === 0 && keyCode === 13) {
-        charCode = 13;
-      }
-    } else {
-      // IE8 does not implement `charCode`, but `keyCode` has the correct value.
-      charCode = keyCode;
-    } // IE and Edge (on Windows) and Chrome / Safari (on Windows and Linux)
-    // report Enter as charCode 10 when ctrl is pressed.
-
-
-    if (charCode === 10) {
-      charCode = 13;
-    } // Some non-printable keys are reported in `charCode`/`keyCode`, discard them.
-    // Must not discard the (non-)printable Enter-key.
-
-
-    if (charCode >= 32 || charCode === 13) {
-      return charCode;
-    }
-
-    return 0;
-  }
-
-  /**
-   * Normalization of deprecated HTML5 `key` values
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
-   */
-
-  var normalizeKey = {
-    Esc: 'Escape',
-    Spacebar: ' ',
-    Left: 'ArrowLeft',
-    Up: 'ArrowUp',
-    Right: 'ArrowRight',
-    Down: 'ArrowDown',
-    Del: 'Delete',
-    Win: 'OS',
-    Menu: 'ContextMenu',
-    Apps: 'ContextMenu',
-    Scroll: 'ScrollLock',
-    MozPrintableKey: 'Unidentified'
-  };
-  /**
-   * Translation from legacy `keyCode` to HTML5 `key`
-   * Only special keys supported, all others depend on keyboard layout or browser
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
-   */
-
-  var translateToKey = {
-    '8': 'Backspace',
-    '9': 'Tab',
-    '12': 'Clear',
-    '13': 'Enter',
-    '16': 'Shift',
-    '17': 'Control',
-    '18': 'Alt',
-    '19': 'Pause',
-    '20': 'CapsLock',
-    '27': 'Escape',
-    '32': ' ',
-    '33': 'PageUp',
-    '34': 'PageDown',
-    '35': 'End',
-    '36': 'Home',
-    '37': 'ArrowLeft',
-    '38': 'ArrowUp',
-    '39': 'ArrowRight',
-    '40': 'ArrowDown',
-    '45': 'Insert',
-    '46': 'Delete',
-    '112': 'F1',
-    '113': 'F2',
-    '114': 'F3',
-    '115': 'F4',
-    '116': 'F5',
-    '117': 'F6',
-    '118': 'F7',
-    '119': 'F8',
-    '120': 'F9',
-    '121': 'F10',
-    '122': 'F11',
-    '123': 'F12',
-    '144': 'NumLock',
-    '145': 'ScrollLock',
-    '224': 'Meta'
-  };
-  /**
-   * @param {object} nativeEvent Native browser event.
-   * @return {string} Normalized `key` property.
-   */
-
-  function getEventKey(nativeEvent) {
-    if (nativeEvent.key) {
-      // Normalize inconsistent values reported by browsers due to
-      // implementations of a working draft specification.
-      // FireFox implements `key` but returns `MozPrintableKey` for all
-      // printable characters (normalized to `Unidentified`), ignore it.
-      var key = normalizeKey[nativeEvent.key] || nativeEvent.key;
-
-      if (key !== 'Unidentified') {
-        return key;
-      }
-    } // Browser does not implement `key`, polyfill as much of it as we can.
-
-
-    if (nativeEvent.type === 'keypress') {
-      var charCode = getEventCharCode(nativeEvent); // The enter-key is technically both printable and non-printable and can
-      // thus be captured by `keypress`, no other non-printable key should.
-
-      return charCode === 13 ? 'Enter' : String.fromCharCode(charCode);
-    }
-
-    if (nativeEvent.type === 'keydown' || nativeEvent.type === 'keyup') {
-      // While user keyboard layout determines the actual meaning of each
-      // `keyCode` value, almost all function keys have a universal value.
-      return translateToKey[nativeEvent.keyCode] || 'Unidentified';
-    }
-
-    return '';
-  }
-
-  /**
-   * @interface KeyboardEvent
-   * @see http://www.w3.org/TR/DOM-Level-3-Events/
-   */
-
-  var SyntheticKeyboardEvent = SyntheticUIEvent.extend({
-    key: getEventKey,
-    location: null,
-    ctrlKey: null,
-    shiftKey: null,
-    altKey: null,
-    metaKey: null,
-    repeat: null,
-    locale: null,
-    getModifierState: getEventModifierState,
-    // Legacy Interface
-    charCode: function (event) {
-      // `charCode` is the result of a KeyPress event and represents the value of
-      // the actual printable character.
-      // KeyPress is deprecated, but its replacement is not yet final and not
-      // implemented in any major browser. Only KeyPress has charCode.
-      if (event.type === 'keypress') {
-        return getEventCharCode(event);
-      }
-
-      return 0;
-    },
-    keyCode: function (event) {
-      // `keyCode` is the result of a KeyDown/Up event and represents the value of
-      // physical keyboard key.
-      // The actual meaning of the value depends on the users' keyboard layout
-      // which cannot be detected. Assuming that it is a US keyboard layout
-      // provides a surprisingly accurate mapping for US and European users.
-      // Due to this, it is left to the user to implement at this time.
-      if (event.type === 'keydown' || event.type === 'keyup') {
-        return event.keyCode;
-      }
-
-      return 0;
-    },
-    which: function (event) {
-      // `which` is an alias for either `keyCode` or `charCode` depending on the
-      // type of the event.
-      if (event.type === 'keypress') {
-        return getEventCharCode(event);
-      }
-
-      if (event.type === 'keydown' || event.type === 'keyup') {
-        return event.keyCode;
-      }
-
-      return 0;
-    }
-  });
-
-  /**
-   * @interface DragEvent
-   * @see http://www.w3.org/TR/DOM-Level-3-Events/
-   */
-
-  var SyntheticDragEvent = SyntheticMouseEvent.extend({
-    dataTransfer: null
-  });
-
-  /**
-   * @interface TouchEvent
-   * @see http://www.w3.org/TR/touch-events/
-   */
-
-  var SyntheticTouchEvent = SyntheticUIEvent.extend({
-    touches: null,
-    targetTouches: null,
-    changedTouches: null,
-    altKey: null,
-    metaKey: null,
-    ctrlKey: null,
-    shiftKey: null,
-    getModifierState: getEventModifierState
-  });
-
-  /**
-   * @interface Event
-   * @see http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#transition-events-
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent
-   */
-
-  var SyntheticTransitionEvent = SyntheticEvent.extend({
-    propertyName: null,
-    elapsedTime: null,
-    pseudoElement: null
-  });
-
-  /**
-   * @interface WheelEvent
-   * @see http://www.w3.org/TR/DOM-Level-3-Events/
-   */
-
-  var SyntheticWheelEvent = SyntheticMouseEvent.extend({
-    deltaX: function (event) {
-      return 'deltaX' in event ? event.deltaX : // Fallback to `wheelDeltaX` for Webkit and normalize (right is positive).
-      'wheelDeltaX' in event ? -event.wheelDeltaX : 0;
-    },
-    deltaY: function (event) {
-      return 'deltaY' in event ? event.deltaY : // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).
-      'wheelDeltaY' in event ? -event.wheelDeltaY : // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).
-      'wheelDelta' in event ? -event.wheelDelta : 0;
-    },
-    deltaZ: null,
-    // Browsers without "deltaMode" is reporting in raw wheel delta where one
-    // notch on the scroll is always +/- 120, roughly equivalent to pixels.
-    // A good approximation of DOM_DELTA_LINE (1) is 5% of viewport size or
-    // ~40 pixels, for DOM_DELTA_SCREEN (2) it is 87.5% of viewport size.
-    deltaMode: null
-  });
-
-  var knownHTMLTopLevelTypes = [TOP_ABORT, TOP_CANCEL, TOP_CAN_PLAY, TOP_CAN_PLAY_THROUGH, TOP_CLOSE, TOP_DURATION_CHANGE, TOP_EMPTIED, TOP_ENCRYPTED, TOP_ENDED, TOP_ERROR, TOP_INPUT, TOP_INVALID, TOP_LOAD, TOP_LOADED_DATA, TOP_LOADED_METADATA, TOP_LOAD_START, TOP_PAUSE, TOP_PLAY, TOP_PLAYING, TOP_PROGRESS, TOP_RATE_CHANGE, TOP_RESET, TOP_SEEKED, TOP_SEEKING, TOP_STALLED, TOP_SUBMIT, TOP_SUSPEND, TOP_TIME_UPDATE, TOP_TOGGLE, TOP_VOLUME_CHANGE, TOP_WAITING];
-  var SimpleEventPlugin = {
-    // simpleEventPluginEventTypes gets populated from
-    // the DOMEventProperties module.
-    eventTypes: simpleEventPluginEventTypes,
-    extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags) {
-      var dispatchConfig = topLevelEventsToDispatchConfig.get(topLevelType);
-
-      if (!dispatchConfig) {
-        return null;
-      }
-
-      var EventConstructor;
-
-      switch (topLevelType) {
-        case TOP_KEY_PRESS:
-          // Firefox creates a keypress event for function keys too. This removes
-          // the unwanted keypress events. Enter is however both printable and
-          // non-printable. One would expect Tab to be as well (but it isn't).
-          if (getEventCharCode(nativeEvent) === 0) {
-            return null;
-          }
-
-        /* falls through */
-
-        case TOP_KEY_DOWN:
-        case TOP_KEY_UP:
-          EventConstructor = SyntheticKeyboardEvent;
-          break;
-
-        case TOP_BLUR:
-        case TOP_FOCUS:
-          EventConstructor = SyntheticFocusEvent;
-          break;
-
-        case TOP_CLICK:
-          // Firefox creates a click event on right mouse clicks. This removes the
-          // unwanted click events.
-          if (nativeEvent.button === 2) {
-            return null;
-          }
-
-        /* falls through */
-
-        case TOP_AUX_CLICK:
-        case TOP_DOUBLE_CLICK:
-        case TOP_MOUSE_DOWN:
-        case TOP_MOUSE_MOVE:
-        case TOP_MOUSE_UP: // TODO: Disabled elements should not respond to mouse events
-
-        /* falls through */
-
-        case TOP_MOUSE_OUT:
-        case TOP_MOUSE_OVER:
-        case TOP_CONTEXT_MENU:
-          EventConstructor = SyntheticMouseEvent;
-          break;
-
-        case TOP_DRAG:
-        case TOP_DRAG_END:
-        case TOP_DRAG_ENTER:
-        case TOP_DRAG_EXIT:
-        case TOP_DRAG_LEAVE:
-        case TOP_DRAG_OVER:
-        case TOP_DRAG_START:
-        case TOP_DROP:
-          EventConstructor = SyntheticDragEvent;
-          break;
-
-        case TOP_TOUCH_CANCEL:
-        case TOP_TOUCH_END:
-        case TOP_TOUCH_MOVE:
-        case TOP_TOUCH_START:
-          EventConstructor = SyntheticTouchEvent;
-          break;
-
-        case TOP_ANIMATION_END:
-        case TOP_ANIMATION_ITERATION:
-        case TOP_ANIMATION_START:
-          EventConstructor = SyntheticAnimationEvent;
-          break;
-
-        case TOP_TRANSITION_END:
-          EventConstructor = SyntheticTransitionEvent;
-          break;
-
-        case TOP_SCROLL:
-          EventConstructor = SyntheticUIEvent;
-          break;
-
-        case TOP_WHEEL:
-          EventConstructor = SyntheticWheelEvent;
-          break;
-
-        case TOP_COPY:
-        case TOP_CUT:
-        case TOP_PASTE:
-          EventConstructor = SyntheticClipboardEvent;
-          break;
-
-        case TOP_GOT_POINTER_CAPTURE:
-        case TOP_LOST_POINTER_CAPTURE:
-        case TOP_POINTER_CANCEL:
-        case TOP_POINTER_DOWN:
-        case TOP_POINTER_MOVE:
-        case TOP_POINTER_OUT:
-        case TOP_POINTER_OVER:
-        case TOP_POINTER_UP:
-          EventConstructor = SyntheticPointerEvent;
-          break;
-
-        default:
-          {
-            if (knownHTMLTopLevelTypes.indexOf(topLevelType) === -1) {
-              error('SimpleEventPlugin: Unhandled event type, `%s`. This warning ' + 'is likely caused by a bug in React. Please file an issue.', topLevelType);
-            }
-          } // HTML Events
-          // @see http://www.w3.org/TR/html5/index.html#events-0
-
-
-          EventConstructor = SyntheticEvent;
-          break;
-      }
-
-      var event = EventConstructor.getPooled(dispatchConfig, targetInst, nativeEvent, nativeEventTarget);
-      accumulateTwoPhaseDispatches(event);
-      return event;
-    }
-  };
-
-  /**
-   * Specifies a deterministic ordering of `EventPlugin`s. A convenient way to
-   * reason about plugins, without having to package every one of them. This
-   * is better than having plugins be ordered in the same order that they
-   * are injected because that ordering would be influenced by the packaging order.
-   * `ResponderEventPlugin` must occur before `SimpleEventPlugin` so that
-   * preventing default on events is convenient in `SimpleEventPlugin` handlers.
-   */
-
-  var DOMEventPluginOrder = ['ResponderEventPlugin', 'SimpleEventPlugin', 'EnterLeaveEventPlugin', 'ChangeEventPlugin', 'SelectEventPlugin', 'BeforeInputEventPlugin'];
-  /**
-   * Inject modules for resolving DOM hierarchy and plugin ordering.
-   */
-
-  injectEventPluginOrder(DOMEventPluginOrder);
-  setComponentTree(getFiberCurrentPropsFromNode$1, getInstanceFromNode$1, getNodeFromInstance$1);
-  /**
-   * Some important event plugins included by default (without having to require
-   * them).
-   */
-
-  injectEventPluginsByName({
-    SimpleEventPlugin: SimpleEventPlugin,
-    EnterLeaveEventPlugin: EnterLeaveEventPlugin,
-    ChangeEventPlugin: ChangeEventPlugin,
-    SelectEventPlugin: SelectEventPlugin,
-    BeforeInputEventPlugin: BeforeInputEventPlugin
-  });
-
-  // Prefix measurements so that it's possible to filter them.
-  // Longer prefixes are hard to read in DevTools.
-  var reactEmoji = "\u269B";
-  var warningEmoji = "\u26D4";
-  var supportsUserTiming = typeof performance !== 'undefined' && typeof performance.mark === 'function' && typeof performance.clearMarks === 'function' && typeof performance.measure === 'function' && typeof performance.clearMeasures === 'function'; // Keep track of current fiber so that we know the path to unwind on pause.
-  // TODO: this looks the same as nextUnitOfWork in scheduler. Can we unify them?
-
-  var currentFiber = null; // If we're in the middle of user code, which fiber and method is it?
-  // Reusing `currentFiber` would be confusing for this because user code fiber
-  // can change during commit phase too, but we don't need to unwind it (since
-  // lifecycles in the commit phase don't resemble a tree).
-
-  var currentPhase = null;
-  var currentPhaseFiber = null; // Did lifecycle hook schedule an update? This is often a performance problem,
-  // so we will keep track of it, and include it in the report.
-  // Track commits caused by cascading updates.
-
-  var isCommitting = false;
-  var hasScheduledUpdateInCurrentCommit = false;
-  var hasScheduledUpdateInCurrentPhase = false;
-  var commitCountInCurrentWorkLoop = 0;
-  var effectCountInCurrentCommit = 0;
-  // to avoid stretch the commit phase with measurement overhead.
-
-  var labelsInCurrentCommit = new Set();
-
-  var formatMarkName = function (markName) {
-    return reactEmoji + " " + markName;
-  };
-
-  var formatLabel = function (label, warning) {
-    var prefix = warning ? warningEmoji + " " : reactEmoji + " ";
-    var suffix = warning ? " Warning: " + warning : '';
-    return "" + prefix + label + suffix;
-  };
-
-  var beginMark = function (markName) {
-    performance.mark(formatMarkName(markName));
-  };
-
-  var clearMark = function (markName) {
-    performance.clearMarks(formatMarkName(markName));
-  };
-
-  var endMark = function (label, markName, warning) {
-    var formattedMarkName = formatMarkName(markName);
-    var formattedLabel = formatLabel(label, warning);
-
-    try {
-      performance.measure(formattedLabel, formattedMarkName);
-    } catch (err) {} // If previous mark was missing for some reason, this will throw.
-    // This could only happen if React crashed in an unexpected place earlier.
-    // Don't pile on with more errors.
-    // Clear marks immediately to avoid growing buffer.
-
-
-    performance.clearMarks(formattedMarkName);
-    performance.clearMeasures(formattedLabel);
-  };
-
-  var getFiberMarkName = function (label, debugID) {
-    return label + " (#" + debugID + ")";
-  };
-
-  var getFiberLabel = function (componentName, isMounted, phase) {
-    if (phase === null) {
-      // These are composite component total time measurements.
-      return componentName + " [" + (isMounted ? 'update' : 'mount') + "]";
-    } else {
-      // Composite component methods.
-      return componentName + "." + phase;
-    }
-  };
-
-  var beginFiberMark = function (fiber, phase) {
-    var componentName = getComponentName(fiber.type) || 'Unknown';
-    var debugID = fiber._debugID;
-    var isMounted = fiber.alternate !== null;
-    var label = getFiberLabel(componentName, isMounted, phase);
-
-    if (isCommitting && labelsInCurrentCommit.has(label)) {
-      // During the commit phase, we don't show duplicate labels because
-      // there is a fixed overhead for every measurement, and we don't
-      // want to stretch the commit phase beyond necessary.
-      return false;
-    }
-
-    labelsInCurrentCommit.add(label);
-    var markName = getFiberMarkName(label, debugID);
-    beginMark(markName);
-    return true;
-  };
-
-  var clearFiberMark = function (fiber, phase) {
-    var componentName = getComponentName(fiber.type) || 'Unknown';
-    var debugID = fiber._debugID;
-    var isMounted = fiber.alternate !== null;
-    var label = getFiberLabel(componentName, isMounted, phase);
-    var markName = getFiberMarkName(label, debugID);
-    clearMark(markName);
-  };
-
-  var endFiberMark = function (fiber, phase, warning) {
-    var componentName = getComponentName(fiber.type) || 'Unknown';
-    var debugID = fiber._debugID;
-    var isMounted = fiber.alternate !== null;
-    var label = getFiberLabel(componentName, isMounted, phase);
-    var markName = getFiberMarkName(label, debugID);
-    endMark(label, markName, warning);
-  };
-
-  var shouldIgnoreFiber = function (fiber) {
-    // Host components should be skipped in the timeline.
-    // We could check typeof fiber.type, but does this work with RN?
-    switch (fiber.tag) {
-      case HostRoot:
-      case HostComponent:
-      case HostText:
-      case HostPortal:
-      case Fragment:
-      case ContextProvider:
-      case ContextConsumer:
-      case Mode:
-        return true;
-
-      default:
-        return false;
-    }
-  };
-
-  var clearPendingPhaseMeasurement = function () {
-    if (currentPhase !== null && currentPhaseFiber !== null) {
-      clearFiberMark(currentPhaseFiber, currentPhase);
-    }
-
-    currentPhaseFiber = null;
-    currentPhase = null;
-    hasScheduledUpdateInCurrentPhase = false;
-  };
-
-  var pauseTimers = function () {
-    // Stops all currently active measurements so that they can be resumed
-    // if we continue in a later deferred loop from the same unit of work.
-    var fiber = currentFiber;
-
-    while (fiber) {
-      if (fiber._debugIsCurrentlyTiming) {
-        endFiberMark(fiber, null, null);
-      }
-
-      fiber = fiber.return;
-    }
-  };
-
-  var resumeTimersRecursively = function (fiber) {
-    if (fiber.return !== null) {
-      resumeTimersRecursively(fiber.return);
-    }
-
-    if (fiber._debugIsCurrentlyTiming) {
-      beginFiberMark(fiber, null);
-    }
-  };
-
-  var resumeTimers = function () {
-    // Resumes all measurements that were active during the last deferred loop.
-    if (currentFiber !== null) {
-      resumeTimersRecursively(currentFiber);
-    }
-  };
-
-  function recordEffect() {
-    {
-      effectCountInCurrentCommit++;
-    }
-  }
-  function recordScheduleUpdate() {
-    {
-      if (isCommitting) {
-        hasScheduledUpdateInCurrentCommit = true;
-      }
-
-      if (currentPhase !== null && currentPhase !== 'componentWillMount' && currentPhase !== 'componentWillReceiveProps') {
-        hasScheduledUpdateInCurrentPhase = true;
-      }
-    }
-  }
-  function startWorkTimer(fiber) {
-    {
-      if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {
-        return;
-      } // If we pause, this is the fiber to unwind from.
-
-
-      currentFiber = fiber;
-
-      if (!beginFiberMark(fiber, null)) {
-        return;
-      }
-
-      fiber._debugIsCurrentlyTiming = true;
-    }
-  }
-  function cancelWorkTimer(fiber) {
-    {
-      if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {
-        return;
-      } // Remember we shouldn't complete measurement for this fiber.
-      // Otherwise flamechart will be deep even for small updates.
-
-
-      fiber._debugIsCurrentlyTiming = false;
-      clearFiberMark(fiber, null);
-    }
-  }
-  function stopWorkTimer(fiber) {
-    {
-      if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {
-        return;
-      } // If we pause, its parent is the fiber to unwind from.
-
-
-      currentFiber = fiber.return;
-
-      if (!fiber._debugIsCurrentlyTiming) {
-        return;
-      }
-
-      fiber._debugIsCurrentlyTiming = false;
-      endFiberMark(fiber, null, null);
-    }
-  }
-  function stopFailedWorkTimer(fiber) {
-    {
-      if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {
-        return;
-      } // If we pause, its parent is the fiber to unwind from.
-
-
-      currentFiber = fiber.return;
-
-      if (!fiber._debugIsCurrentlyTiming) {
-        return;
-      }
-
-      fiber._debugIsCurrentlyTiming = false;
-      var warning = fiber.tag === SuspenseComponent ? 'Rendering was suspended' : 'An error was thrown inside this error boundary';
-      endFiberMark(fiber, null, warning);
-    }
-  }
-  function startPhaseTimer(fiber, phase) {
-    {
-      if (!supportsUserTiming) {
-        return;
-      }
-
-      clearPendingPhaseMeasurement();
-
-      if (!beginFiberMark(fiber, phase)) {
-        return;
-      }
-
-      currentPhaseFiber = fiber;
-      currentPhase = phase;
-    }
-  }
-  function stopPhaseTimer() {
-    {
-      if (!supportsUserTiming) {
-        return;
-      }
-
-      if (currentPhase !== null && currentPhaseFiber !== null) {
-        var warning = hasScheduledUpdateInCurrentPhase ? 'Scheduled a cascading update' : null;
-        endFiberMark(currentPhaseFiber, currentPhase, warning);
-      }
-
-      currentPhase = null;
-      currentPhaseFiber = null;
-    }
-  }
-  function startWorkLoopTimer(nextUnitOfWork) {
-    {
-      currentFiber = nextUnitOfWork;
-
-      if (!supportsUserTiming) {
-        return;
-      }
-
-      commitCountInCurrentWorkLoop = 0; // This is top level call.
-      // Any other measurements are performed within.
-
-      beginMark('(React Tree Reconciliation)'); // Resume any measurements that were in progress during the last loop.
-
-      resumeTimers();
-    }
-  }
-  function stopWorkLoopTimer(interruptedBy, didCompleteRoot) {
-    {
-      if (!supportsUserTiming) {
-        return;
-      }
-
-      var warning = null;
-
-      if (interruptedBy !== null) {
-        if (interruptedBy.tag === HostRoot) {
-          warning = 'A top-level update interrupted the previous render';
-        } else {
-          var componentName = getComponentName(interruptedBy.type) || 'Unknown';
-          warning = "An update to " + componentName + " interrupted the previous render";
-        }
-      } else if (commitCountInCurrentWorkLoop > 1) {
-        warning = 'There were cascading updates';
-      }
-
-      commitCountInCurrentWorkLoop = 0;
-      var label = didCompleteRoot ? '(React Tree Reconciliation: Completed Root)' : '(React Tree Reconciliation: Yielded)'; // Pause any measurements until the next loop.
-
-      pauseTimers();
-      endMark(label, '(React Tree Reconciliation)', warning);
-    }
-  }
-  function startCommitTimer() {
-    {
-      if (!supportsUserTiming) {
-        return;
-      }
-
-      isCommitting = true;
-      hasScheduledUpdateInCurrentCommit = false;
-      labelsInCurrentCommit.clear();
-      beginMark('(Committing Changes)');
-    }
-  }
-  function stopCommitTimer() {
-    {
-      if (!supportsUserTiming) {
-        return;
-      }
-
-      var warning = null;
-
-      if (hasScheduledUpdateInCurrentCommit) {
-        warning = 'Lifecycle hook scheduled a cascading update';
-      } else if (commitCountInCurrentWorkLoop > 0) {
-        warning = 'Caused by a cascading update in earlier commit';
-      }
-
-      hasScheduledUpdateInCurrentCommit = false;
-      commitCountInCurrentWorkLoop++;
-      isCommitting = false;
-      labelsInCurrentCommit.clear();
-      endMark('(Committing Changes)', '(Committing Changes)', warning);
-    }
-  }
-  function startCommitSnapshotEffectsTimer() {
-    {
-      if (!supportsUserTiming) {
-        return;
-      }
-
-      effectCountInCurrentCommit = 0;
-      beginMark('(Committing Snapshot Effects)');
-    }
-  }
-  function stopCommitSnapshotEffectsTimer() {
-    {
-      if (!supportsUserTiming) {
-        return;
-      }
-
-      var count = effectCountInCurrentCommit;
-      effectCountInCurrentCommit = 0;
-      endMark("(Committing Snapshot Effects: " + count + " Total)", '(Committing Snapshot Effects)', null);
-    }
-  }
-  function startCommitHostEffectsTimer() {
-    {
-      if (!supportsUserTiming) {
-        return;
-      }
-
-      effectCountInCurrentCommit = 0;
-      beginMark('(Committing Host Effects)');
-    }
-  }
-  function stopCommitHostEffectsTimer() {
-    {
-      if (!supportsUserTiming) {
-        return;
-      }
-
-      var count = effectCountInCurrentCommit;
-      effectCountInCurrentCommit = 0;
-      endMark("(Committing Host Effects: " + count + " Total)", '(Committing Host Effects)', null);
-    }
-  }
-  function startCommitLifeCyclesTimer() {
-    {
-      if (!supportsUserTiming) {
-        return;
-      }
-
-      effectCountInCurrentCommit = 0;
-      beginMark('(Calling Lifecycle Methods)');
-    }
-  }
-  function stopCommitLifeCyclesTimer() {
-    {
-      if (!supportsUserTiming) {
-        return;
-      }
-
-      var count = effectCountInCurrentCommit;
-      effectCountInCurrentCommit = 0;
-      endMark("(Calling Lifecycle Methods: " + count + " Total)", '(Calling Lifecycle Methods)', null);
+    node[internalPropsKey] = props;
+  }
+  function getEventListenerSet(node) {
+    var elementListenerSet = node[internalEventHandlersKey];
+
+    if (elementListenerSet === undefined) {
+      elementListenerSet = node[internalEventHandlersKey] = new Set();
+    }
+
+    return elementListenerSet;
+  }
+
+  var loggedTypeFailures = {};
+  var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
+
+  function setCurrentlyValidatingElement(element) {
+    {
+      if (element) {
+        var owner = element._owner;
+        var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
+        ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
+      } else {
+        ReactDebugCurrentFrame$1.setExtraStackFrame(null);
+      }
+    }
+  }
+
+  function checkPropTypes(typeSpecs, values, location, componentName, element) {
+    {
+      // $FlowFixMe This is okay but Flow doesn't know it.
+      var has = Function.call.bind(Object.prototype.hasOwnProperty);
+
+      for (var typeSpecName in typeSpecs) {
+        if (has(typeSpecs, typeSpecName)) {
+          var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
+          // fail the render phase where it didn't fail before. So we log it.
+          // After these have been cleaned up, we'll let them throw.
+
+          try {
+            // This is intentionally an invariant that gets caught. It's the same
+            // behavior as without this statement except with a better message.
+            if (typeof typeSpecs[typeSpecName] !== 'function') {
+              var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+              err.name = 'Invariant Violation';
+              throw err;
+            }
+
+            error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
+          } catch (ex) {
+            error$1 = ex;
+          }
+
+          if (error$1 && !(error$1 instanceof Error)) {
+            setCurrentlyValidatingElement(element);
+
+            error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
+
+            setCurrentlyValidatingElement(null);
+          }
+
+          if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
+            // Only monitor this failure once because there tends to be a lot of the
+            // same error.
+            loggedTypeFailures[error$1.message] = true;
+            setCurrentlyValidatingElement(element);
+
+            error('Failed %s type: %s', location, error$1.message);
+
+            setCurrentlyValidatingElement(null);
+          }
+        }
+      }
     }
   }
 
@@ -10861,7 +10919,7 @@
 
       {
         var name = getComponentName(type) || 'Unknown';
-        checkPropTypes_1(contextTypes, context, 'context', name, getCurrentFiberStackInDev);
+        checkPropTypes(contextTypes, context, 'context', name);
       } // Cache unmasked context so we can avoid recreating masked context unless necessary.
       // Context is created before the class component is instantiated so check for instance.
 
@@ -10934,10 +10992,7 @@
         return parentContext;
       }
 
-      var childContext;
-      startPhaseTimer(fiber, 'getChildContext');
-      childContext = instance.getChildContext();
-      stopPhaseTimer();
+      var childContext = instance.getChildContext();
 
       for (var contextKey in childContext) {
         if (!(contextKey in childContextTypes)) {
@@ -10949,15 +11004,10 @@
 
       {
         var name = getComponentName(type) || 'Unknown';
-        checkPropTypes_1(childContextTypes, childContext, 'child context', name, // In practice, there is one case in which we won't get a stack. It's when
-        // somebody calls unstable_renderSubtreeIntoContainer() and we process
-        // context from the parent component instance. The stack will be missing
-        // because it's outside of the reconciliation, and so the pointer has not
-        // been set. This is rare and doesn't matter. We'll also remove that API.
-        getCurrentFiberStackInDev);
-      }
-
-      return _assign({}, parentContext, {}, childContext);
+        checkPropTypes(childContextTypes, childContext, 'child context', name);
+      }
+
+      return _assign({}, parentContext, childContext);
     }
   }
 
@@ -11051,24 +11101,106 @@
   var BlockingRoot = 1;
   var ConcurrentRoot = 2;
 
-  var ReactInternals$2 = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  var _ReactInternals$Sched$1 = ReactInternals$2.SchedulerTracing,
-      __interactionsRef = _ReactInternals$Sched$1.__interactionsRef,
-      __subscriberRef = _ReactInternals$Sched$1.__subscriberRef,
-      unstable_clear = _ReactInternals$Sched$1.unstable_clear,
-      unstable_getCurrent = _ReactInternals$Sched$1.unstable_getCurrent,
-      unstable_getThreadID = _ReactInternals$Sched$1.unstable_getThreadID,
-      unstable_subscribe = _ReactInternals$Sched$1.unstable_subscribe,
-      unstable_trace = _ReactInternals$Sched$1.unstable_trace,
-      unstable_unsubscribe = _ReactInternals$Sched$1.unstable_unsubscribe,
-      unstable_wrap = _ReactInternals$Sched$1.unstable_wrap;
+  var rendererID = null;
+  var injectedHook = null;
+  var hasLoggedError = false;
+  var isDevToolsPresent = typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined';
+  function injectInternals(internals) {
+    if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
+      // No DevTools
+      return false;
+    }
+
+    var hook = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+    if (hook.isDisabled) {
+      // This isn't a real property on the hook, but it can be set to opt out
+      // of DevTools integration and associated warnings and logs.
+      // https://github.com/facebook/react/issues/3877
+      return true;
+    }
+
+    if (!hook.supportsFiber) {
+      {
+        error('The installed version of React DevTools is too old and will not work ' + 'with the current version of React. Please update React DevTools. ' + 'https://reactjs.org/link/react-devtools');
+      } // DevTools exists, even though it doesn't support Fiber.
+
+
+      return true;
+    }
+
+    try {
+      rendererID = hook.inject(internals); // We have successfully injected, so now it is safe to set up hooks.
+
+      injectedHook = hook;
+    } catch (err) {
+      // Catch all errors because it is unsafe to throw during initialization.
+      {
+        error('React instrumentation encountered an error: %s.', err);
+      }
+    } // DevTools exists
+
+
+    return true;
+  }
+  function onScheduleRoot(root, children) {
+    {
+      if (injectedHook && typeof injectedHook.onScheduleFiberRoot === 'function') {
+        try {
+          injectedHook.onScheduleFiberRoot(rendererID, root, children);
+        } catch (err) {
+          if ( !hasLoggedError) {
+            hasLoggedError = true;
+
+            error('React instrumentation encountered an error: %s', err);
+          }
+        }
+      }
+    }
+  }
+  function onCommitRoot(root, priorityLevel) {
+    if (injectedHook && typeof injectedHook.onCommitFiberRoot === 'function') {
+      try {
+        var didError = (root.current.flags & DidCapture) === DidCapture;
+
+        if (enableProfilerTimer) {
+          injectedHook.onCommitFiberRoot(rendererID, root, priorityLevel, didError);
+        } else {
+          injectedHook.onCommitFiberRoot(rendererID, root, undefined, didError);
+        }
+      } catch (err) {
+        {
+          if (!hasLoggedError) {
+            hasLoggedError = true;
+
+            error('React instrumentation encountered an error: %s', err);
+          }
+        }
+      }
+    }
+  }
+  function onCommitUnmount(fiber) {
+    if (injectedHook && typeof injectedHook.onCommitFiberUnmount === 'function') {
+      try {
+        injectedHook.onCommitFiberUnmount(rendererID, fiber);
+      } catch (err) {
+        {
+          if (!hasLoggedError) {
+            hasLoggedError = true;
+
+            error('React instrumentation encountered an error: %s', err);
+          }
+        }
+      }
+    }
+  }
 
   var Scheduler_runWithPriority = unstable_runWithPriority,
       Scheduler_scheduleCallback = unstable_scheduleCallback,
       Scheduler_cancelCallback = unstable_cancelCallback,
       Scheduler_shouldYield = unstable_shouldYield,
       Scheduler_requestPaint = unstable_requestPaint,
-      Scheduler_now = unstable_now,
+      Scheduler_now$1 = unstable_now,
       Scheduler_getCurrentPriorityLevel = unstable_getCurrentPriorityLevel,
       Scheduler_ImmediatePriority = unstable_ImmediatePriority,
       Scheduler_UserBlockingPriority = unstable_UserBlockingPriority,
@@ -11082,7 +11214,7 @@
     // scheduler/tracing
     if (!(__interactionsRef != null && __interactionsRef.current != null)) {
       {
-        throw Error( "It is not supported to run the profiling version of a renderer (for example, `react-dom/profiling`) without also replacing the `scheduler/tracing` module with `scheduler/tracing-profiling`. Your bundler might have a setting for aliasing both modules. Learn more at http://fb.me/react-profiling" );
+        throw Error( "It is not supported to run the profiling version of a renderer (for example, `react-dom/profiling`) without also replacing the `scheduler/tracing` module with `scheduler/tracing-profiling`. Your bundler might have a setting for aliasing both modules. Learn more at https://reactjs.org/link/profiling" );
       }
     }
   }
@@ -11091,20 +11223,20 @@
   // ascending numbers so we can compare them like numbers. They start at 90 to
   // avoid clashing with Scheduler's priorities.
 
-  var ImmediatePriority = 99;
-  var UserBlockingPriority$1 = 98;
-  var NormalPriority = 97;
-  var LowPriority = 96;
-  var IdlePriority = 95; // NoPriority is the absence of priority. Also React-only.
-
-  var NoPriority = 90;
+  var ImmediatePriority$1 = 99;
+  var UserBlockingPriority$2 = 98;
+  var NormalPriority$1 = 97;
+  var LowPriority$1 = 96;
+  var IdlePriority$1 = 95; // NoPriority is the absence of priority. Also React-only.
+
+  var NoPriority$1 = 90;
   var shouldYield = Scheduler_shouldYield;
   var requestPaint = // Fall back gracefully if we're running an older version of Scheduler.
   Scheduler_requestPaint !== undefined ? Scheduler_requestPaint : function () {};
   var syncQueue = null;
   var immediateQueueCallbackNode = null;
   var isFlushingSyncQueue = false;
-  var initialTimeMs = Scheduler_now(); // If the initial timestamp is reasonably small, use Scheduler's `now` directly.
+  var initialTimeMs$1 = Scheduler_now$1(); // If the initial timestamp is reasonably small, use Scheduler's `now` directly.
   // This will be the case for modern browsers that support `performance.now`. In
   // older browsers, Scheduler falls back to `Date.now`, which returns a Unix
   // timestamp. In that case, subtract the module initialization time to simulate
@@ -11112,25 +11244,25 @@
   // within 32 bits.
   // TODO: Consider lifting this into Scheduler.
 
-  var now = initialTimeMs < 10000 ? Scheduler_now : function () {
-    return Scheduler_now() - initialTimeMs;
+  var now = initialTimeMs$1 < 10000 ? Scheduler_now$1 : function () {
+    return Scheduler_now$1() - initialTimeMs$1;
   };
   function getCurrentPriorityLevel() {
     switch (Scheduler_getCurrentPriorityLevel()) {
       case Scheduler_ImmediatePriority:
-        return ImmediatePriority;
+        return ImmediatePriority$1;
 
       case Scheduler_UserBlockingPriority:
-        return UserBlockingPriority$1;
+        return UserBlockingPriority$2;
 
       case Scheduler_NormalPriority:
-        return NormalPriority;
+        return NormalPriority$1;
 
       case Scheduler_LowPriority:
-        return LowPriority;
+        return LowPriority$1;
 
       case Scheduler_IdlePriority:
-        return IdlePriority;
+        return IdlePriority$1;
 
       default:
         {
@@ -11144,19 +11276,19 @@
 
   function reactPriorityToSchedulerPriority(reactPriorityLevel) {
     switch (reactPriorityLevel) {
-      case ImmediatePriority:
+      case ImmediatePriority$1:
         return Scheduler_ImmediatePriority;
 
-      case UserBlockingPriority$1:
+      case UserBlockingPriority$2:
         return Scheduler_UserBlockingPriority;
 
-      case NormalPriority:
+      case NormalPriority$1:
         return Scheduler_NormalPriority;
 
-      case LowPriority:
+      case LowPriority$1:
         return Scheduler_LowPriority;
 
-      case IdlePriority:
+      case IdlePriority$1:
         return Scheduler_IdlePriority;
 
       default:
@@ -11213,33 +11345,38 @@
       isFlushingSyncQueue = true;
       var i = 0;
 
-      try {
-        var _isSync = true;
-        var queue = syncQueue;
-        runWithPriority$1(ImmediatePriority, function () {
-          for (; i < queue.length; i++) {
-            var callback = queue[i];
-
-            do {
-              callback = callback(_isSync);
-            } while (callback !== null);
-          }
-        });
-        syncQueue = null;
-      } catch (error) {
-        // If something throws, leave the remaining callbacks on the queue.
-        if (syncQueue !== null) {
-          syncQueue = syncQueue.slice(i + 1);
-        } // Resume flushing in the next tick
-
-
-        Scheduler_scheduleCallback(Scheduler_ImmediatePriority, flushSyncCallbackQueue);
-        throw error;
-      } finally {
-        isFlushingSyncQueue = false;
-      }
-    }
-  }
+      {
+        try {
+          var _isSync2 = true;
+          var _queue = syncQueue;
+          runWithPriority$1(ImmediatePriority$1, function () {
+            for (; i < _queue.length; i++) {
+              var callback = _queue[i];
+
+              do {
+                callback = callback(_isSync2);
+              } while (callback !== null);
+            }
+          });
+          syncQueue = null;
+        } catch (error) {
+          // If something throws, leave the remaining callbacks on the queue.
+          if (syncQueue !== null) {
+            syncQueue = syncQueue.slice(i + 1);
+          } // Resume flushing in the next tick
+
+
+          Scheduler_scheduleCallback(Scheduler_ImmediatePriority, flushSyncCallbackQueue);
+          throw error;
+        } finally {
+          isFlushingSyncQueue = false;
+        }
+      }
+    }
+  }
+
+  // TODO: this is special because it gets imported during build.
+  var ReactVersion = '17.0.2';
 
   var NoMode = 0;
   var StrictMode = 1; // TODO: Remove BlockingMode and ConcurrentMode by reading from the root
@@ -11248,101 +11385,12 @@
   var BlockingMode = 2;
   var ConcurrentMode = 4;
   var ProfileMode = 8;
-
-  // Max 31 bit integer. The max integer size in V8 for 32-bit systems.
-  // Math.pow(2, 30) - 1
-  // 0b111111111111111111111111111111
-  var MAX_SIGNED_31_BIT_INT = 1073741823;
-
-  var NoWork = 0; // TODO: Think of a better name for Never. The key difference with Idle is that
-  // Never work can be committed in an inconsistent state without tearing the UI.
-  // The main example is offscreen content, like a hidden subtree. So one possible
-  // name is Offscreen. However, it also includes dehydrated Suspense boundaries,
-  // which are inconsistent in the sense that they haven't finished yet, but
-  // aren't visibly inconsistent because the server rendered HTML matches what the
-  // hydrated tree would look like.
-
-  var Never = 1; // Idle is slightly higher priority than Never. It must completely finish in
-  // order to be consistent.
-
-  var Idle = 2; // Continuous Hydration is slightly higher than Idle and is used to increase
-  // priority of hover targets.
-
-  var ContinuousHydration = 3;
-  var Sync = MAX_SIGNED_31_BIT_INT;
-  var Batched = Sync - 1;
-  var UNIT_SIZE = 10;
-  var MAGIC_NUMBER_OFFSET = Batched - 1; // 1 unit of expiration time represents 10ms.
-
-  function msToExpirationTime(ms) {
-    // Always subtract from the offset so that we don't clash with the magic number for NoWork.
-    return MAGIC_NUMBER_OFFSET - (ms / UNIT_SIZE | 0);
-  }
-  function expirationTimeToMs(expirationTime) {
-    return (MAGIC_NUMBER_OFFSET - expirationTime) * UNIT_SIZE;
-  }
-
-  function ceiling(num, precision) {
-    return ((num / precision | 0) + 1) * precision;
-  }
-
-  function computeExpirationBucket(currentTime, expirationInMs, bucketSizeMs) {
-    return MAGIC_NUMBER_OFFSET - ceiling(MAGIC_NUMBER_OFFSET - currentTime + expirationInMs / UNIT_SIZE, bucketSizeMs / UNIT_SIZE);
-  } // TODO: This corresponds to Scheduler's NormalPriority, not LowPriority. Update
-  // the names to reflect.
-
-
-  var LOW_PRIORITY_EXPIRATION = 5000;
-  var LOW_PRIORITY_BATCH_SIZE = 250;
-  function computeAsyncExpiration(currentTime) {
-    return computeExpirationBucket(currentTime, LOW_PRIORITY_EXPIRATION, LOW_PRIORITY_BATCH_SIZE);
-  }
-  function computeSuspenseExpiration(currentTime, timeoutMs) {
-    // TODO: Should we warn if timeoutMs is lower than the normal pri expiration time?
-    return computeExpirationBucket(currentTime, timeoutMs, LOW_PRIORITY_BATCH_SIZE);
-  } // We intentionally set a higher expiration time for interactive updates in
-  // dev than in production.
-  //
-  // If the main thread is being blocked so long that you hit the expiration,
-  // it's a problem that could be solved with better scheduling.
-  //
-  // People will be more likely to notice this and fix it with the long
-  // expiration time in development.
-  //
-  // In production we opt for better UX at the risk of masking scheduling
-  // problems, by expiring fast.
-
-  var HIGH_PRIORITY_EXPIRATION =  500 ;
-  var HIGH_PRIORITY_BATCH_SIZE = 100;
-  function computeInteractiveExpiration(currentTime) {
-    return computeExpirationBucket(currentTime, HIGH_PRIORITY_EXPIRATION, HIGH_PRIORITY_BATCH_SIZE);
-  }
-  function inferPriorityFromExpirationTime(currentTime, expirationTime) {
-    if (expirationTime === Sync) {
-      return ImmediatePriority;
-    }
-
-    if (expirationTime === Never || expirationTime === Idle) {
-      return IdlePriority;
-    }
-
-    var msUntil = expirationTimeToMs(expirationTime) - expirationTimeToMs(currentTime);
-
-    if (msUntil <= 0) {
-      return ImmediatePriority;
-    }
-
-    if (msUntil <= HIGH_PRIORITY_EXPIRATION + HIGH_PRIORITY_BATCH_SIZE) {
-      return UserBlockingPriority$1;
-    }
-
-    if (msUntil <= LOW_PRIORITY_EXPIRATION + LOW_PRIORITY_BATCH_SIZE) {
-      return NormalPriority;
-    } // TODO: Handle LowPriority
-    // Assume anything lower has idle priority
-
-
-    return IdlePriority;
+  var DebugTracingMode = 16;
+
+  var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig;
+  var NoTransition = 0;
+  function requestCurrentTransition() {
+    return ReactCurrentBatchConfig.transition;
   }
 
   var ReactStrictModeWarnings = {
@@ -11485,37 +11533,37 @@
       if (UNSAFE_componentWillMountUniqueNames.size > 0) {
         var sortedNames = setToSortedString(UNSAFE_componentWillMountUniqueNames);
 
-        error('Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. ' + 'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' + '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + '\nPlease update the following components: %s', sortedNames);
+        error('Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. ' + 'See https://reactjs.org/link/unsafe-component-lifecycles for details.\n\n' + '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + '\nPlease update the following components: %s', sortedNames);
       }
 
       if (UNSAFE_componentWillReceivePropsUniqueNames.size > 0) {
         var _sortedNames = setToSortedString(UNSAFE_componentWillReceivePropsUniqueNames);
 
-        error('Using UNSAFE_componentWillReceiveProps in strict mode is not recommended ' + 'and may indicate bugs in your code. ' + 'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' + '* Move data fetching code or side effects to componentDidUpdate.\n' + "* If you're updating state whenever props change, " + 'refactor your code to use memoization techniques or move it to ' + 'static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state\n' + '\nPlease update the following components: %s', _sortedNames);
+        error('Using UNSAFE_componentWillReceiveProps in strict mode is not recommended ' + 'and may indicate bugs in your code. ' + 'See https://reactjs.org/link/unsafe-component-lifecycles for details.\n\n' + '* Move data fetching code or side effects to componentDidUpdate.\n' + "* If you're updating state whenever props change, " + 'refactor your code to use memoization techniques or move it to ' + 'static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state\n' + '\nPlease update the following components: %s', _sortedNames);
       }
 
       if (UNSAFE_componentWillUpdateUniqueNames.size > 0) {
         var _sortedNames2 = setToSortedString(UNSAFE_componentWillUpdateUniqueNames);
 
-        error('Using UNSAFE_componentWillUpdate in strict mode is not recommended ' + 'and may indicate bugs in your code. ' + 'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' + '* Move data fetching code or side effects to componentDidUpdate.\n' + '\nPlease update the following components: %s', _sortedNames2);
+        error('Using UNSAFE_componentWillUpdate in strict mode is not recommended ' + 'and may indicate bugs in your code. ' + 'See https://reactjs.org/link/unsafe-component-lifecycles for details.\n\n' + '* Move data fetching code or side effects to componentDidUpdate.\n' + '\nPlease update the following components: %s', _sortedNames2);
       }
 
       if (componentWillMountUniqueNames.size > 0) {
         var _sortedNames3 = setToSortedString(componentWillMountUniqueNames);
 
-        warn('componentWillMount has been renamed, and is not recommended for use. ' + 'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' + '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + '* Rename componentWillMount to UNSAFE_componentWillMount to suppress ' + 'this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. ' + 'To rename all deprecated lifecycles to their new names, you can run ' + '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n' + '\nPlease update the following components: %s', _sortedNames3);
+        warn('componentWillMount has been renamed, and is not recommended for use. ' + 'See https://reactjs.org/link/unsafe-component-lifecycles for details.\n\n' + '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + '* Rename componentWillMount to UNSAFE_componentWillMount to suppress ' + 'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' + 'To rename all deprecated lifecycles to their new names, you can run ' + '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n' + '\nPlease update the following components: %s', _sortedNames3);
       }
 
       if (componentWillReceivePropsUniqueNames.size > 0) {
         var _sortedNames4 = setToSortedString(componentWillReceivePropsUniqueNames);
 
-        warn('componentWillReceiveProps has been renamed, and is not recommended for use. ' + 'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' + '* Move data fetching code or side effects to componentDidUpdate.\n' + "* If you're updating state whenever props change, refactor your " + 'code to use memoization techniques or move it to ' + 'static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state\n' + '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress ' + 'this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. ' + 'To rename all deprecated lifecycles to their new names, you can run ' + '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n' + '\nPlease update the following components: %s', _sortedNames4);
+        warn('componentWillReceiveProps has been renamed, and is not recommended for use. ' + 'See https://reactjs.org/link/unsafe-component-lifecycles for details.\n\n' + '* Move data fetching code or side effects to componentDidUpdate.\n' + "* If you're updating state whenever props change, refactor your " + 'code to use memoization techniques or move it to ' + 'static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state\n' + '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress ' + 'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' + 'To rename all deprecated lifecycles to their new names, you can run ' + '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n' + '\nPlease update the following components: %s', _sortedNames4);
       }
 
       if (componentWillUpdateUniqueNames.size > 0) {
         var _sortedNames5 = setToSortedString(componentWillUpdateUniqueNames);
 
-        warn('componentWillUpdate has been renamed, and is not recommended for use. ' + 'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' + '* Move data fetching code or side effects to componentDidUpdate.\n' + '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress ' + 'this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. ' + 'To rename all deprecated lifecycles to their new names, you can run ' + '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n' + '\nPlease update the following components: %s', _sortedNames5);
+        warn('componentWillUpdate has been renamed, and is not recommended for use. ' + 'See https://reactjs.org/link/unsafe-component-lifecycles for details.\n\n' + '* Move data fetching code or side effects to componentDidUpdate.\n' + '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress ' + 'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' + 'To rename all deprecated lifecycles to their new names, you can run ' + '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n' + '\nPlease update the following components: %s', _sortedNames5);
       }
     };
 
@@ -11562,9 +11610,14 @@
           didWarnAboutLegacyContext.add(fiber.type);
         });
         var sortedNames = setToSortedString(uniqueNames);
-        var firstComponentStack = getStackByFiberInDevAndProd(firstFiber);
-
-        error('Legacy context API has been detected within a strict-mode tree.' + '\n\nThe old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.' + '\n\nPlease update the following components: %s' + '\n\nLearn more about this warning here: https://fb.me/react-legacy-context' + '%s', sortedNames, firstComponentStack);
+
+        try {
+          setCurrentFiber(firstFiber);
+
+          error('Legacy context API has been detected within a strict-mode tree.' + '\n\nThe old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.' + '\n\nPlease update the following components: %s' + '\n\nLearn more about this warning here: https://reactjs.org/link/legacy-context', sortedNames);
+        } finally {
+          resetCurrentFiber();
+        }
       });
     };
 
@@ -11579,402 +11632,6 @@
     };
   }
 
-  var resolveFamily = null; // $FlowFixMe Flow gets confused by a WeakSet feature check below.
-
-  var failedBoundaries = null;
-  var setRefreshHandler = function (handler) {
-    {
-      resolveFamily = handler;
-    }
-  };
-  function resolveFunctionForHotReloading(type) {
-    {
-      if (resolveFamily === null) {
-        // Hot reloading is disabled.
-        return type;
-      }
-
-      var family = resolveFamily(type);
-
-      if (family === undefined) {
-        return type;
-      } // Use the latest known implementation.
-
-
-      return family.current;
-    }
-  }
-  function resolveClassForHotReloading(type) {
-    // No implementation differences.
-    return resolveFunctionForHotReloading(type);
-  }
-  function resolveForwardRefForHotReloading(type) {
-    {
-      if (resolveFamily === null) {
-        // Hot reloading is disabled.
-        return type;
-      }
-
-      var family = resolveFamily(type);
-
-      if (family === undefined) {
-        // Check if we're dealing with a real forwardRef. Don't want to crash early.
-        if (type !== null && type !== undefined && typeof type.render === 'function') {
-          // ForwardRef is special because its resolved .type is an object,
-          // but it's possible that we only have its inner render function in the map.
-          // If that inner render function is different, we'll build a new forwardRef type.
-          var currentRender = resolveFunctionForHotReloading(type.render);
-
-          if (type.render !== currentRender) {
-            var syntheticType = {
-              $$typeof: REACT_FORWARD_REF_TYPE,
-              render: currentRender
-            };
-
-            if (type.displayName !== undefined) {
-              syntheticType.displayName = type.displayName;
-            }
-
-            return syntheticType;
-          }
-        }
-
-        return type;
-      } // Use the latest known implementation.
-
-
-      return family.current;
-    }
-  }
-  function isCompatibleFamilyForHotReloading(fiber, element) {
-    {
-      if (resolveFamily === null) {
-        // Hot reloading is disabled.
-        return false;
-      }
-
-      var prevType = fiber.elementType;
-      var nextType = element.type; // If we got here, we know types aren't === equal.
-
-      var needsCompareFamilies = false;
-      var $$typeofNextType = typeof nextType === 'object' && nextType !== null ? nextType.$$typeof : null;
-
-      switch (fiber.tag) {
-        case ClassComponent:
-          {
-            if (typeof nextType === 'function') {
-              needsCompareFamilies = true;
-            }
-
-            break;
-          }
-
-        case FunctionComponent:
-          {
-            if (typeof nextType === 'function') {
-              needsCompareFamilies = true;
-            } else if ($$typeofNextType === REACT_LAZY_TYPE) {
-              // We don't know the inner type yet.
-              // We're going to assume that the lazy inner type is stable,
-              // and so it is sufficient to avoid reconciling it away.
-              // We're not going to unwrap or actually use the new lazy type.
-              needsCompareFamilies = true;
-            }
-
-            break;
-          }
-
-        case ForwardRef:
-          {
-            if ($$typeofNextType === REACT_FORWARD_REF_TYPE) {
-              needsCompareFamilies = true;
-            } else if ($$typeofNextType === REACT_LAZY_TYPE) {
-              needsCompareFamilies = true;
-            }
-
-            break;
-          }
-
-        case MemoComponent:
-        case SimpleMemoComponent:
-          {
-            if ($$typeofNextType === REACT_MEMO_TYPE) {
-              // TODO: if it was but can no longer be simple,
-              // we shouldn't set this.
-              needsCompareFamilies = true;
-            } else if ($$typeofNextType === REACT_LAZY_TYPE) {
-              needsCompareFamilies = true;
-            }
-
-            break;
-          }
-
-        default:
-          return false;
-      } // Check if both types have a family and it's the same one.
-
-
-      if (needsCompareFamilies) {
-        // Note: memo() and forwardRef() we'll compare outer rather than inner type.
-        // This means both of them need to be registered to preserve state.
-        // If we unwrapped and compared the inner types for wrappers instead,
-        // then we would risk falsely saying two separate memo(Foo)
-        // calls are equivalent because they wrap the same Foo function.
-        var prevFamily = resolveFamily(prevType);
-
-        if (prevFamily !== undefined && prevFamily === resolveFamily(nextType)) {
-          return true;
-        }
-      }
-
-      return false;
-    }
-  }
-  function markFailedErrorBoundaryForHotReloading(fiber) {
-    {
-      if (resolveFamily === null) {
-        // Hot reloading is disabled.
-        return;
-      }
-
-      if (typeof WeakSet !== 'function') {
-        return;
-      }
-
-      if (failedBoundaries === null) {
-        failedBoundaries = new WeakSet();
-      }
-
-      failedBoundaries.add(fiber);
-    }
-  }
-  var scheduleRefresh = function (root, update) {
-    {
-      if (resolveFamily === null) {
-        // Hot reloading is disabled.
-        return;
-      }
-
-      var staleFamilies = update.staleFamilies,
-          updatedFamilies = update.updatedFamilies;
-      flushPassiveEffects();
-      flushSync(function () {
-        scheduleFibersWithFamiliesRecursively(root.current, updatedFamilies, staleFamilies);
-      });
-    }
-  };
-  var scheduleRoot = function (root, element) {
-    {
-      if (root.context !== emptyContextObject) {
-        // Super edge case: root has a legacy _renderSubtree context
-        // but we don't know the parentComponent so we can't pass it.
-        // Just ignore. We'll delete this with _renderSubtree code path later.
-        return;
-      }
-
-      flushPassiveEffects();
-      syncUpdates(function () {
-        updateContainer(element, root, null, null);
-      });
-    }
-  };
-
-  function scheduleFibersWithFamiliesRecursively(fiber, updatedFamilies, staleFamilies) {
-    {
-      var alternate = fiber.alternate,
-          child = fiber.child,
-          sibling = fiber.sibling,
-          tag = fiber.tag,
-          type = fiber.type;
-      var candidateType = null;
-
-      switch (tag) {
-        case FunctionComponent:
-        case SimpleMemoComponent:
-        case ClassComponent:
-          candidateType = type;
-          break;
-
-        case ForwardRef:
-          candidateType = type.render;
-          break;
-      }
-
-      if (resolveFamily === null) {
-        throw new Error('Expected resolveFamily to be set during hot reload.');
-      }
-
-      var needsRender = false;
-      var needsRemount = false;
-
-      if (candidateType !== null) {
-        var family = resolveFamily(candidateType);
-
-        if (family !== undefined) {
-          if (staleFamilies.has(family)) {
-            needsRemount = true;
-          } else if (updatedFamilies.has(family)) {
-            if (tag === ClassComponent) {
-              needsRemount = true;
-            } else {
-              needsRender = true;
-            }
-          }
-        }
-      }
-
-      if (failedBoundaries !== null) {
-        if (failedBoundaries.has(fiber) || alternate !== null && failedBoundaries.has(alternate)) {
-          needsRemount = true;
-        }
-      }
-
-      if (needsRemount) {
-        fiber._debugNeedsRemount = true;
-      }
-
-      if (needsRemount || needsRender) {
-        scheduleWork(fiber, Sync);
-      }
-
-      if (child !== null && !needsRemount) {
-        scheduleFibersWithFamiliesRecursively(child, updatedFamilies, staleFamilies);
-      }
-
-      if (sibling !== null) {
-        scheduleFibersWithFamiliesRecursively(sibling, updatedFamilies, staleFamilies);
-      }
-    }
-  }
-
-  var findHostInstancesForRefresh = function (root, families) {
-    {
-      var hostInstances = new Set();
-      var types = new Set(families.map(function (family) {
-        return family.current;
-      }));
-      findHostInstancesForMatchingFibersRecursively(root.current, types, hostInstances);
-      return hostInstances;
-    }
-  };
-
-  function findHostInstancesForMatchingFibersRecursively(fiber, types, hostInstances) {
-    {
-      var child = fiber.child,
-          sibling = fiber.sibling,
-          tag = fiber.tag,
-          type = fiber.type;
-      var candidateType = null;
-
-      switch (tag) {
-        case FunctionComponent:
-        case SimpleMemoComponent:
-        case ClassComponent:
-          candidateType = type;
-          break;
-
-        case ForwardRef:
-          candidateType = type.render;
-          break;
-      }
-
-      var didMatch = false;
-
-      if (candidateType !== null) {
-        if (types.has(candidateType)) {
-          didMatch = true;
-        }
-      }
-
-      if (didMatch) {
-        // We have a match. This only drills down to the closest host components.
-        // There's no need to search deeper because for the purpose of giving
-        // visual feedback, "flashing" outermost parent rectangles is sufficient.
-        findHostInstancesForFiberShallowly(fiber, hostInstances);
-      } else {
-        // If there's no match, maybe there will be one further down in the child tree.
-        if (child !== null) {
-          findHostInstancesForMatchingFibersRecursively(child, types, hostInstances);
-        }
-      }
-
-      if (sibling !== null) {
-        findHostInstancesForMatchingFibersRecursively(sibling, types, hostInstances);
-      }
-    }
-  }
-
-  function findHostInstancesForFiberShallowly(fiber, hostInstances) {
-    {
-      var foundHostInstances = findChildHostInstancesForFiberShallowly(fiber, hostInstances);
-
-      if (foundHostInstances) {
-        return;
-      } // If we didn't find any host children, fallback to closest host parent.
-
-
-      var node = fiber;
-
-      while (true) {
-        switch (node.tag) {
-          case HostComponent:
-            hostInstances.add(node.stateNode);
-            return;
-
-          case HostPortal:
-            hostInstances.add(node.stateNode.containerInfo);
-            return;
-
-          case HostRoot:
-            hostInstances.add(node.stateNode.containerInfo);
-            return;
-        }
-
-        if (node.return === null) {
-          throw new Error('Expected to reach root first.');
-        }
-
-        node = node.return;
-      }
-    }
-  }
-
-  function findChildHostInstancesForFiberShallowly(fiber, hostInstances) {
-    {
-      var node = fiber;
-      var foundHostInstances = false;
-
-      while (true) {
-        if (node.tag === HostComponent) {
-          // We got a match.
-          foundHostInstances = true;
-          hostInstances.add(node.stateNode); // There may still be more, so keep searching.
-        } else if (node.child !== null) {
-          node.child.return = node;
-          node = node.child;
-          continue;
-        }
-
-        if (node === fiber) {
-          return foundHostInstances;
-        }
-
-        while (node.sibling === null) {
-          if (node.return === null || node.return === fiber) {
-            return foundHostInstances;
-          }
-
-          node = node.return;
-        }
-
-        node.sibling.return = node.return;
-        node = node.sibling;
-      }
-    }
-
-    return false;
-  }
-
   function resolveDefaultProps(Component, baseProps) {
     if (Component && Component.defaultProps) {
       // Resolve default props. Taken from ReactElement
@@ -11993,15 +11650,11 @@
 
     return baseProps;
   }
-  function readLazyComponentType(lazyComponent) {
-    initializeLazyComponentType(lazyComponent);
-
-    if (lazyComponent._status !== Resolved) {
-      throw lazyComponent._result;
-    }
-
-    return lazyComponent._result;
-  }
+
+  // Max 31 bit integer. The max integer size in V8 for 32-bit systems.
+  // Math.pow(2, 30) - 1
+  // 0b111111111111111111111111111111
+  var MAX_SIGNED_31_BIT_INT = 1073741823;
 
   var valueCursor = createCursor(null);
   var rendererSigil;
@@ -12077,22 +11730,21 @@
       return changedBits | 0;
     }
   }
-  function scheduleWorkOnParentPath(parent, renderExpirationTime) {
-    // Update the child expiration time of all the ancestors, including
-    // the alternates.
+  function scheduleWorkOnParentPath(parent, renderLanes) {
+    // Update the child lanes of all the ancestors, including the alternates.
     var node = parent;
 
     while (node !== null) {
       var alternate = node.alternate;
 
-      if (node.childExpirationTime < renderExpirationTime) {
-        node.childExpirationTime = renderExpirationTime;
-
-        if (alternate !== null && alternate.childExpirationTime < renderExpirationTime) {
-          alternate.childExpirationTime = renderExpirationTime;
-        }
-      } else if (alternate !== null && alternate.childExpirationTime < renderExpirationTime) {
-        alternate.childExpirationTime = renderExpirationTime;
+      if (!isSubsetOfLanes(node.childLanes, renderLanes)) {
+        node.childLanes = mergeLanes(node.childLanes, renderLanes);
+
+        if (alternate !== null) {
+          alternate.childLanes = mergeLanes(alternate.childLanes, renderLanes);
+        }
+      } else if (alternate !== null && !isSubsetOfLanes(alternate.childLanes, renderLanes)) {
+        alternate.childLanes = mergeLanes(alternate.childLanes, renderLanes);
       } else {
         // Neither alternate was updated, which means the rest of the
         // ancestor path already has sufficient priority.
@@ -12102,7 +11754,7 @@
       node = node.return;
     }
   }
-  function propagateContextChange(workInProgress, context, changedBits, renderExpirationTime) {
+  function propagateContextChange(workInProgress, context, changedBits, renderLanes) {
     var fiber = workInProgress.child;
 
     if (fiber !== null) {
@@ -12125,7 +11777,7 @@
             // Match! Schedule an update on this fiber.
             if (fiber.tag === ClassComponent) {
               // Schedule a force update on the work-in-progress.
-              var update = createUpdate(renderExpirationTime, null);
+              var update = createUpdate(NoTimestamp, pickArbitraryLane(renderLanes));
               update.tag = ForceUpdate; // TODO: Because we don't have a work-in-progress, this will add the
               // update to the current fiber, too, which means it will persist even if
               // this render is thrown away. Since it's a race condition, not sure it's
@@ -12134,24 +11786,18 @@
               enqueueUpdate(fiber, update);
             }
 
-            if (fiber.expirationTime < renderExpirationTime) {
-              fiber.expirationTime = renderExpirationTime;
-            }
-
+            fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
             var alternate = fiber.alternate;
 
-            if (alternate !== null && alternate.expirationTime < renderExpirationTime) {
-              alternate.expirationTime = renderExpirationTime;
-            }
-
-            scheduleWorkOnParentPath(fiber.return, renderExpirationTime); // Mark the expiration time on the list, too.
-
-            if (list.expirationTime < renderExpirationTime) {
-              list.expirationTime = renderExpirationTime;
-            } // Since we already found a match, we can stop traversing the
+            if (alternate !== null) {
+              alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
+            }
+
+            scheduleWorkOnParentPath(fiber.return, renderLanes); // Mark the updated lanes on the list, too.
+
+            list.lanes = mergeLanes(list.lanes, renderLanes); // Since we already found a match, we can stop traversing the
             // dependency list.
 
-
             break;
           }
 
@@ -12196,7 +11842,7 @@
       fiber = nextFiber;
     }
   }
-  function prepareToReadContext(workInProgress, renderExpirationTime) {
+  function prepareToReadContext(workInProgress, renderLanes) {
     currentlyRenderingFiber = workInProgress;
     lastContextDependency = null;
     lastContextWithAllBitsObserved = null;
@@ -12206,7 +11852,7 @@
       var firstContext = dependencies.firstContext;
 
       if (firstContext !== null) {
-        if (dependencies.expirationTime >= renderExpirationTime) {
+        if (includesSomeLane(dependencies.lanes, renderLanes)) {
           // Context list has a pending update. Mark that this fiber performed work.
           markWorkInProgressReceivedUpdate();
         } // Reset the work-in-progress list
@@ -12252,7 +11898,7 @@
 
         lastContextDependency = contextItem;
         currentlyRenderingFiber.dependencies = {
-          expirationTime: NoWork,
+          lanes: NoLanes,
           firstContext: contextItem,
           responders: null
         };
@@ -12284,7 +11930,8 @@
   function initializeUpdateQueue(fiber) {
     var queue = {
       baseState: fiber.memoizedState,
-      baseQueue: null,
+      firstBaseUpdate: null,
+      lastBaseUpdate: null,
       shared: {
         pending: null
       },
@@ -12300,28 +11947,23 @@
     if (queue === currentQueue) {
       var clone = {
         baseState: currentQueue.baseState,
-        baseQueue: currentQueue.baseQueue,
+        firstBaseUpdate: currentQueue.firstBaseUpdate,
+        lastBaseUpdate: currentQueue.lastBaseUpdate,
         shared: currentQueue.shared,
         effects: currentQueue.effects
       };
       workInProgress.updateQueue = clone;
     }
   }
-  function createUpdate(expirationTime, suspenseConfig) {
+  function createUpdate(eventTime, lane) {
     var update = {
-      expirationTime: expirationTime,
-      suspenseConfig: suspenseConfig,
+      eventTime: eventTime,
+      lane: lane,
       tag: UpdateState,
       payload: null,
       callback: null,
       next: null
     };
-    update.next = update;
-
-    {
-      update.priority = getCurrentPriorityLevel();
-    }
-
     return update;
   }
   function enqueueUpdate(fiber, update) {
@@ -12353,26 +11995,86 @@
       }
     }
   }
-  function enqueueCapturedUpdate(workInProgress, update) {
+  function enqueueCapturedUpdate(workInProgress, capturedUpdate) {
+    // Captured updates are updates that are thrown by a child during the render
+    // phase. They should be discarded if the render is aborted. Therefore,
+    // we should only put them on the work-in-progress queue, not the current one.
+    var queue = workInProgress.updateQueue; // Check if the work-in-progress queue is a clone.
+
     var current = workInProgress.alternate;
 
     if (current !== null) {
-      // Ensure the work-in-progress queue is a clone
-      cloneUpdateQueue(current, workInProgress);
-    } // Captured updates go only on the work-in-progress queue.
-
-
-    var queue = workInProgress.updateQueue; // Append the update to the end of the list.
-
-    var last = queue.baseQueue;
-
-    if (last === null) {
-      queue.baseQueue = update.next = update;
-      update.next = update;
-    } else {
-      update.next = last.next;
-      last.next = update;
-    }
+      var currentQueue = current.updateQueue;
+
+      if (queue === currentQueue) {
+        // The work-in-progress queue is the same as current. This happens when
+        // we bail out on a parent fiber that then captures an error thrown by
+        // a child. Since we want to append the update only to the work-in
+        // -progress queue, we need to clone the updates. We usually clone during
+        // processUpdateQueue, but that didn't happen in this case because we
+        // skipped over the parent when we bailed out.
+        var newFirst = null;
+        var newLast = null;
+        var firstBaseUpdate = queue.firstBaseUpdate;
+
+        if (firstBaseUpdate !== null) {
+          // Loop through the updates and clone them.
+          var update = firstBaseUpdate;
+
+          do {
+            var clone = {
+              eventTime: update.eventTime,
+              lane: update.lane,
+              tag: update.tag,
+              payload: update.payload,
+              callback: update.callback,
+              next: null
+            };
+
+            if (newLast === null) {
+              newFirst = newLast = clone;
+            } else {
+              newLast.next = clone;
+              newLast = clone;
+            }
+
+            update = update.next;
+          } while (update !== null); // Append the captured update the end of the cloned list.
+
+
+          if (newLast === null) {
+            newFirst = newLast = capturedUpdate;
+          } else {
+            newLast.next = capturedUpdate;
+            newLast = capturedUpdate;
+          }
+        } else {
+          // There are no base updates.
+          newFirst = newLast = capturedUpdate;
+        }
+
+        queue = {
+          baseState: currentQueue.baseState,
+          firstBaseUpdate: newFirst,
+          lastBaseUpdate: newLast,
+          shared: currentQueue.shared,
+          effects: currentQueue.effects
+        };
+        workInProgress.updateQueue = queue;
+        return;
+      }
+    } // Append the update to the end of the list.
+
+
+    var lastBaseUpdate = queue.lastBaseUpdate;
+
+    if (lastBaseUpdate === null) {
+      queue.firstBaseUpdate = capturedUpdate;
+    } else {
+      lastBaseUpdate.next = capturedUpdate;
+    }
+
+    queue.lastBaseUpdate = capturedUpdate;
   }
 
   function getStateFromUpdate(workInProgress, queue, update, prevState, nextProps, instance) {
@@ -12385,15 +12087,21 @@
             // Updater function
             {
               enterDisallowedContextReadInDEV();
-
-              if ( workInProgress.mode & StrictMode) {
-                payload.call(instance, prevState, nextProps);
-              }
             }
 
             var nextState = payload.call(instance, prevState, nextProps);
 
             {
+              if ( workInProgress.mode & StrictMode) {
+                disableLogs();
+
+                try {
+                  payload.call(instance, prevState, nextProps);
+                } finally {
+                  reenableLogs();
+                }
+              }
+
               exitDisallowedContextReadInDEV();
             }
 
@@ -12406,7 +12114,7 @@
 
       case CaptureUpdate:
         {
-          workInProgress.effectTag = workInProgress.effectTag & ~ShouldCapture | DidCapture;
+          workInProgress.flags = workInProgress.flags & ~ShouldCapture | DidCapture;
         }
       // Intentional fallthrough
 
@@ -12419,15 +12127,21 @@
             // Updater function
             {
               enterDisallowedContextReadInDEV();
-
-              if ( workInProgress.mode & StrictMode) {
-                _payload.call(instance, prevState, nextProps);
-              }
             }
 
             partialState = _payload.call(instance, prevState, nextProps);
 
             {
+              if ( workInProgress.mode & StrictMode) {
+                disableLogs();
+
+                try {
+                  _payload.call(instance, prevState, nextProps);
+                } finally {
+                  reenableLogs();
+                }
+              }
+
               exitDisallowedContextReadInDEV();
             }
           } else {
@@ -12454,150 +12168,159 @@
     return prevState;
   }
 
-  function processUpdateQueue(workInProgress, props, instance, renderExpirationTime) {
+  function processUpdateQueue(workInProgress, props, instance, renderLanes) {
     // This is always non-null on a ClassComponent or HostRoot
     var queue = workInProgress.updateQueue;
     hasForceUpdate = false;
 
     {
       currentlyProcessingQueue = queue.shared;
-    } // The last rebase update that is NOT part of the base state.
-
-
-    var baseQueue = queue.baseQueue; // The last pending update that hasn't been processed yet.
+    }
+
+    var firstBaseUpdate = queue.firstBaseUpdate;
+    var lastBaseUpdate = queue.lastBaseUpdate; // Check if there are pending updates. If so, transfer them to the base queue.
 
     var pendingQueue = queue.shared.pending;
 
     if (pendingQueue !== null) {
-      // We have new updates that haven't been processed yet.
-      // We'll add them to the base queue.
-      if (baseQueue !== null) {
-        // Merge the pending queue and the base queue.
-        var baseFirst = baseQueue.next;
-        var pendingFirst = pendingQueue.next;
-        baseQueue.next = pendingFirst;
-        pendingQueue.next = baseFirst;
-      }
-
-      baseQueue = pendingQueue;
-      queue.shared.pending = null; // TODO: Pass `current` as argument
+      queue.shared.pending = null; // The pending queue is circular. Disconnect the pointer between first
+      // and last so that it's non-circular.
+
+      var lastPendingUpdate = pendingQueue;
+      var firstPendingUpdate = lastPendingUpdate.next;
+      lastPendingUpdate.next = null; // Append pending updates to base queue
+
+      if (lastBaseUpdate === null) {
+        firstBaseUpdate = firstPendingUpdate;
+      } else {
+        lastBaseUpdate.next = firstPendingUpdate;
+      }
+
+      lastBaseUpdate = lastPendingUpdate; // If there's a current queue, and it's different from the base queue, then
+      // we need to transfer the updates to that queue, too. Because the base
+      // queue is a singly-linked list with no cycles, we can append to both
+      // lists and take advantage of structural sharing.
+      // TODO: Pass `current` as argument
 
       var current = workInProgress.alternate;
 
       if (current !== null) {
+        // This is always non-null on a ClassComponent or HostRoot
         var currentQueue = current.updateQueue;
-
-        if (currentQueue !== null) {
-          currentQueue.baseQueue = pendingQueue;
+        var currentLastBaseUpdate = currentQueue.lastBaseUpdate;
+
+        if (currentLastBaseUpdate !== lastBaseUpdate) {
+          if (currentLastBaseUpdate === null) {
+            currentQueue.firstBaseUpdate = firstPendingUpdate;
+          } else {
+            currentLastBaseUpdate.next = firstPendingUpdate;
+          }
+
+          currentQueue.lastBaseUpdate = lastPendingUpdate;
         }
       }
     } // These values may change as we process the queue.
 
 
-    if (baseQueue !== null) {
-      var first = baseQueue.next; // Iterate through the list of updates to compute the result.
-
-      var newState = queue.baseState;
-      var newExpirationTime = NoWork;
+    if (firstBaseUpdate !== null) {
+      // Iterate through the list of updates to compute the result.
+      var newState = queue.baseState; // TODO: Don't need to accumulate this. Instead, we can remove renderLanes
+      // from the original lanes.
+
+      var newLanes = NoLanes;
       var newBaseState = null;
-      var newBaseQueueFirst = null;
-      var newBaseQueueLast = null;
-
-      if (first !== null) {
-        var update = first;
-
-        do {
-          var updateExpirationTime = update.expirationTime;
-
-          if (updateExpirationTime < renderExpirationTime) {
-            // Priority is insufficient. Skip this update. If this is the first
-            // skipped update, the previous update/state is the new base
-            // update/state.
-            var clone = {
-              expirationTime: update.expirationTime,
-              suspenseConfig: update.suspenseConfig,
+      var newFirstBaseUpdate = null;
+      var newLastBaseUpdate = null;
+      var update = firstBaseUpdate;
+
+      do {
+        var updateLane = update.lane;
+        var updateEventTime = update.eventTime;
+
+        if (!isSubsetOfLanes(renderLanes, updateLane)) {
+          // Priority is insufficient. Skip this update. If this is the first
+          // skipped update, the previous update/state is the new base
+          // update/state.
+          var clone = {
+            eventTime: updateEventTime,
+            lane: updateLane,
+            tag: update.tag,
+            payload: update.payload,
+            callback: update.callback,
+            next: null
+          };
+
+          if (newLastBaseUpdate === null) {
+            newFirstBaseUpdate = newLastBaseUpdate = clone;
+            newBaseState = newState;
+          } else {
+            newLastBaseUpdate = newLastBaseUpdate.next = clone;
+          } // Update the remaining priority in the queue.
+
+
+          newLanes = mergeLanes(newLanes, updateLane);
+        } else {
+          // This update does have sufficient priority.
+          if (newLastBaseUpdate !== null) {
+            var _clone = {
+              eventTime: updateEventTime,
+              // This update is going to be committed so we never want uncommit
+              // it. Using NoLane works because 0 is a subset of all bitmasks, so
+              // this will never be skipped by the check above.
+              lane: NoLane,
               tag: update.tag,
               payload: update.payload,
               callback: update.callback,
               next: null
             };
-
-            if (newBaseQueueLast === null) {
-              newBaseQueueFirst = newBaseQueueLast = clone;
-              newBaseState = newState;
+            newLastBaseUpdate = newLastBaseUpdate.next = _clone;
+          } // Process this update.
+
+
+          newState = getStateFromUpdate(workInProgress, queue, update, newState, props, instance);
+          var callback = update.callback;
+
+          if (callback !== null) {
+            workInProgress.flags |= Callback;
+            var effects = queue.effects;
+
+            if (effects === null) {
+              queue.effects = [update];
             } else {
-              newBaseQueueLast = newBaseQueueLast.next = clone;
-            } // Update the remaining priority in the queue.
-
-
-            if (updateExpirationTime > newExpirationTime) {
-              newExpirationTime = updateExpirationTime;
-            }
+              effects.push(update);
+            }
+          }
+        }
+
+        update = update.next;
+
+        if (update === null) {
+          pendingQueue = queue.shared.pending;
+
+          if (pendingQueue === null) {
+            break;
           } else {
-            // This update does have sufficient priority.
-            if (newBaseQueueLast !== null) {
-              var _clone = {
-                expirationTime: Sync,
-                // This update is going to be committed so we never want uncommit it.
-                suspenseConfig: update.suspenseConfig,
-                tag: update.tag,
-                payload: update.payload,
-                callback: update.callback,
-                next: null
-              };
-              newBaseQueueLast = newBaseQueueLast.next = _clone;
-            } // Mark the event time of this update as relevant to this render pass.
-            // TODO: This should ideally use the true event time of this update rather than
-            // its priority which is a derived and not reverseable value.
-            // TODO: We should skip this update if it was already committed but currently
-            // we have no way of detecting the difference between a committed and suspended
-            // update here.
-
-
-            markRenderEventTimeAndConfig(updateExpirationTime, update.suspenseConfig); // Process this update.
-
-            newState = getStateFromUpdate(workInProgress, queue, update, newState, props, instance);
-            var callback = update.callback;
-
-            if (callback !== null) {
-              workInProgress.effectTag |= Callback;
-              var effects = queue.effects;
-
-              if (effects === null) {
-                queue.effects = [update];
-              } else {
-                effects.push(update);
-              }
-            }
-          }
-
-          update = update.next;
-
-          if (update === null || update === first) {
-            pendingQueue = queue.shared.pending;
-
-            if (pendingQueue === null) {
-              break;
-            } else {
-              // An update was scheduled from inside a reducer. Add the new
-              // pending updates to the end of the list and keep processing.
-              update = baseQueue.next = pendingQueue.next;
-              pendingQueue.next = first;
-              queue.baseQueue = baseQueue = pendingQueue;
-              queue.shared.pending = null;
-            }
-          }
-        } while (true);
-      }
-
-      if (newBaseQueueLast === null) {
+            // An update was scheduled from inside a reducer. Add the new
+            // pending updates to the end of the list and keep processing.
+            var _lastPendingUpdate = pendingQueue; // Intentionally unsound. Pending updates form a circular list, but we
+            // unravel them when transferring them to the base queue.
+
+            var _firstPendingUpdate = _lastPendingUpdate.next;
+            _lastPendingUpdate.next = null;
+            update = _firstPendingUpdate;
+            queue.lastBaseUpdate = _lastPendingUpdate;
+            queue.shared.pending = null;
+          }
+        }
+      } while (true);
+
+      if (newLastBaseUpdate === null) {
         newBaseState = newState;
-      } else {
-        newBaseQueueLast.next = newBaseQueueFirst;
       }
 
       queue.baseState = newBaseState;
-      queue.baseQueue = newBaseQueueLast; // Set the remaining expiration time to be whatever is remaining in the queue.
+      queue.firstBaseUpdate = newFirstBaseUpdate;
+      queue.lastBaseUpdate = newLastBaseUpdate; // Set the remaining expiration time to be whatever is remaining in the queue.
       // This should be fine because the only two other things that contribute to
       // expiration time are props and context. We're already in the middle of the
       // begin phase by the time we start processing the queue, so we've already
@@ -12605,8 +12328,8 @@
       // shouldComponentUpdate is tricky; but we'll have to account for
       // that regardless.
 
-      markUnprocessedUpdateTime(newExpirationTime);
-      workInProgress.expirationTime = newExpirationTime;
+      markSkippedUpdateLanes(newLanes);
+      workInProgress.lanes = newLanes;
       workInProgress.memoizedState = newState;
     }
 
@@ -12649,11 +12372,6 @@
     }
   }
 
-  var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig;
-  function requestCurrentSuspenseConfig() {
-    return ReactCurrentBatchConfig.suspense;
-  }
-
   var fakeInternalInstance = {};
   var isArray = Array.isArray; // React.Component uses a shared frozen object by default.
   // We'll use it to determine whether we need to initialize legacy refs.
@@ -12686,7 +12404,7 @@
         return;
       }
 
-      var key = callerName + "_" + callback;
+      var key = callerName + '_' + callback;
 
       if (!didWarnOnInvalidCallback.has(key)) {
         didWarnOnInvalidCallback.add(key);
@@ -12730,8 +12448,14 @@
 
     {
       if ( workInProgress.mode & StrictMode) {
-        // Invoke the function an extra time to help detect side-effects.
-        getDerivedStateFromProps(nextProps, prevState);
+        disableLogs();
+
+        try {
+          // Invoke the function an extra time to help detect side-effects.
+          getDerivedStateFromProps(nextProps, prevState);
+        } finally {
+          reenableLogs();
+        }
       }
     }
 
@@ -12746,7 +12470,7 @@
     workInProgress.memoizedState = memoizedState; // Once the update queue is empty, persist the derived state onto the
     // base state.
 
-    if (workInProgress.expirationTime === NoWork) {
+    if (workInProgress.lanes === NoLanes) {
       // Queue is always non-null for classes
       var updateQueue = workInProgress.updateQueue;
       updateQueue.baseState = memoizedState;
@@ -12756,10 +12480,9 @@
     isMounted: isMounted,
     enqueueSetState: function (inst, payload, callback) {
       var fiber = get(inst);
-      var currentTime = requestCurrentTimeForUpdate();
-      var suspenseConfig = requestCurrentSuspenseConfig();
-      var expirationTime = computeExpirationForFiber(currentTime, fiber, suspenseConfig);
-      var update = createUpdate(expirationTime, suspenseConfig);
+      var eventTime = requestEventTime();
+      var lane = requestUpdateLane(fiber);
+      var update = createUpdate(eventTime, lane);
       update.payload = payload;
 
       if (callback !== undefined && callback !== null) {
@@ -12771,14 +12494,13 @@
       }
 
       enqueueUpdate(fiber, update);
-      scheduleWork(fiber, expirationTime);
+      scheduleUpdateOnFiber(fiber, lane, eventTime);
     },
     enqueueReplaceState: function (inst, payload, callback) {
       var fiber = get(inst);
-      var currentTime = requestCurrentTimeForUpdate();
-      var suspenseConfig = requestCurrentSuspenseConfig();
-      var expirationTime = computeExpirationForFiber(currentTime, fiber, suspenseConfig);
-      var update = createUpdate(expirationTime, suspenseConfig);
+      var eventTime = requestEventTime();
+      var lane = requestUpdateLane(fiber);
+      var update = createUpdate(eventTime, lane);
       update.tag = ReplaceState;
       update.payload = payload;
 
@@ -12791,14 +12513,13 @@
       }
 
       enqueueUpdate(fiber, update);
-      scheduleWork(fiber, expirationTime);
+      scheduleUpdateOnFiber(fiber, lane, eventTime);
     },
     enqueueForceUpdate: function (inst, callback) {
       var fiber = get(inst);
-      var currentTime = requestCurrentTimeForUpdate();
-      var suspenseConfig = requestCurrentSuspenseConfig();
-      var expirationTime = computeExpirationForFiber(currentTime, fiber, suspenseConfig);
-      var update = createUpdate(expirationTime, suspenseConfig);
+      var eventTime = requestEventTime();
+      var lane = requestUpdateLane(fiber);
+      var update = createUpdate(eventTime, lane);
       update.tag = ForceUpdate;
 
       if (callback !== undefined && callback !== null) {
@@ -12810,7 +12531,7 @@
       }
 
       enqueueUpdate(fiber, update);
-      scheduleWork(fiber, expirationTime);
+      scheduleUpdateOnFiber(fiber, lane, eventTime);
     }
   };
 
@@ -12820,14 +12541,18 @@
     if (typeof instance.shouldComponentUpdate === 'function') {
       {
         if ( workInProgress.mode & StrictMode) {
-          // Invoke the function an extra time to help detect side-effects.
-          instance.shouldComponentUpdate(newProps, newState, nextContext);
-        }
-      }
-
-      startPhaseTimer(workInProgress, 'shouldComponentUpdate');
+          disableLogs();
+
+          try {
+            // Invoke the function an extra time to help detect side-effects.
+            instance.shouldComponentUpdate(newProps, newState, nextContext);
+          } finally {
+            reenableLogs();
+          }
+        }
+      }
+
       var shouldUpdate = instance.shouldComponentUpdate(newProps, newState, nextContext);
-      stopPhaseTimer();
 
       {
         if (shouldUpdate === undefined) {
@@ -13008,7 +12733,13 @@
 
     {
       if ( workInProgress.mode & StrictMode) {
-        new ctor(props, context); // eslint-disable-line no-new
+        disableLogs();
+
+        try {
+          new ctor(props, context); // eslint-disable-line no-new
+        } finally {
+          reenableLogs();
+        }
       }
     }
 
@@ -13061,7 +12792,7 @@
           if (!didWarnAboutLegacyLifecyclesAndDerivedState.has(_componentName)) {
             didWarnAboutLegacyLifecyclesAndDerivedState.add(_componentName);
 
-            error('Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' + '%s uses %s but also contains the following legacy lifecycles:%s%s%s\n\n' + 'The above lifecycles should be removed. Learn more about this warning here:\n' + 'https://fb.me/react-unsafe-component-lifecycles', _componentName, newApiName, foundWillMountName !== null ? "\n  " + foundWillMountName : '', foundWillReceivePropsName !== null ? "\n  " + foundWillReceivePropsName : '', foundWillUpdateName !== null ? "\n  " + foundWillUpdateName : '');
+            error('Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' + '%s uses %s but also contains the following legacy lifecycles:%s%s%s\n\n' + 'The above lifecycles should be removed. Learn more about this warning here:\n' + 'https://reactjs.org/link/unsafe-component-lifecycles', _componentName, newApiName, foundWillMountName !== null ? "\n  " + foundWillMountName : '', foundWillReceivePropsName !== null ? "\n  " + foundWillReceivePropsName : '', foundWillUpdateName !== null ? "\n  " + foundWillUpdateName : '');
           }
         }
       }
@@ -13077,7 +12808,6 @@
   }
 
   function callComponentWillMount(workInProgress, instance) {
-    startPhaseTimer(workInProgress, 'componentWillMount');
     var oldState = instance.state;
 
     if (typeof instance.componentWillMount === 'function') {
@@ -13088,8 +12818,6 @@
       instance.UNSAFE_componentWillMount();
     }
 
-    stopPhaseTimer();
-
     if (oldState !== instance.state) {
       {
         error('%s.componentWillMount(): Assigning directly to this.state is ' + "deprecated (except inside a component's " + 'constructor). Use setState instead.', getComponentName(workInProgress.type) || 'Component');
@@ -13101,7 +12829,6 @@
 
   function callComponentWillReceiveProps(workInProgress, instance, newProps, nextContext) {
     var oldState = instance.state;
-    startPhaseTimer(workInProgress, 'componentWillReceiveProps');
 
     if (typeof instance.componentWillReceiveProps === 'function') {
       instance.componentWillReceiveProps(newProps, nextContext);
@@ -13111,8 +12838,6 @@
       instance.UNSAFE_componentWillReceiveProps(newProps, nextContext);
     }
 
-    stopPhaseTimer();
-
     if (instance.state !== oldState) {
       {
         var componentName = getComponentName(workInProgress.type) || 'Component';
@@ -13129,7 +12854,7 @@
   } // Invokes the mount life-cycles on a previously never rendered instance.
 
 
-  function mountClassInstance(workInProgress, ctor, newProps, renderExpirationTime) {
+  function mountClassInstance(workInProgress, ctor, newProps, renderLanes) {
     {
       checkClassInstance(workInProgress, ctor, newProps);
     }
@@ -13168,7 +12893,7 @@
       }
     }
 
-    processUpdateQueue(workInProgress, newProps, instance, renderExpirationTime);
+    processUpdateQueue(workInProgress, newProps, instance, renderLanes);
     instance.state = workInProgress.memoizedState;
     var getDerivedStateFromProps = ctor.getDerivedStateFromProps;
 
@@ -13183,16 +12908,16 @@
       callComponentWillMount(workInProgress, instance); // If we had additional state updates during this life-cycle, let's
       // process them now.
 
-      processUpdateQueue(workInProgress, newProps, instance, renderExpirationTime);
+      processUpdateQueue(workInProgress, newProps, instance, renderLanes);
       instance.state = workInProgress.memoizedState;
     }
 
     if (typeof instance.componentDidMount === 'function') {
-      workInProgress.effectTag |= Update;
-    }
-  }
-
-  function resumeMountClassInstance(workInProgress, ctor, newProps, renderExpirationTime) {
+      workInProgress.flags |= Update;
+    }
+  }
+
+  function resumeMountClassInstance(workInProgress, ctor, newProps, renderLanes) {
     var instance = workInProgress.stateNode;
     var oldProps = workInProgress.memoizedProps;
     instance.props = oldProps;
@@ -13223,14 +12948,14 @@
     resetHasForceUpdateBeforeProcessing();
     var oldState = workInProgress.memoizedState;
     var newState = instance.state = oldState;
-    processUpdateQueue(workInProgress, newProps, instance, renderExpirationTime);
+    processUpdateQueue(workInProgress, newProps, instance, renderLanes);
     newState = workInProgress.memoizedState;
 
     if (oldProps === newProps && oldState === newState && !hasContextChanged() && !checkHasForceUpdateAfterProcessing()) {
       // If an update was already in progress, we should schedule an Update
       // effect even though we're bailing out, so that cWU/cDU are called.
       if (typeof instance.componentDidMount === 'function') {
-        workInProgress.effectTag |= Update;
+        workInProgress.flags |= Update;
       }
 
       return false;
@@ -13247,8 +12972,6 @@
       // In order to support react-lifecycles-compat polyfilled components,
       // Unsafe lifecycles should not be invoked for components using the new APIs.
       if (!hasNewLifecycles && (typeof instance.UNSAFE_componentWillMount === 'function' || typeof instance.componentWillMount === 'function')) {
-        startPhaseTimer(workInProgress, 'componentWillMount');
-
         if (typeof instance.componentWillMount === 'function') {
           instance.componentWillMount();
         }
@@ -13256,18 +12979,16 @@
         if (typeof instance.UNSAFE_componentWillMount === 'function') {
           instance.UNSAFE_componentWillMount();
         }
-
-        stopPhaseTimer();
       }
 
       if (typeof instance.componentDidMount === 'function') {
-        workInProgress.effectTag |= Update;
+        workInProgress.flags |= Update;
       }
     } else {
       // If an update was already in progress, we should schedule an Update
       // effect even though we're bailing out, so that cWU/cDU are called.
       if (typeof instance.componentDidMount === 'function') {
-        workInProgress.effectTag |= Update;
+        workInProgress.flags |= Update;
       } // If shouldComponentUpdate returned false, we should still update the
       // memoized state to indicate that this work can be reused.
 
@@ -13285,11 +13006,13 @@
   } // Invokes the update life-cycles and returns false if it shouldn't rerender.
 
 
-  function updateClassInstance(current, workInProgress, ctor, newProps, renderExpirationTime) {
+  function updateClassInstance(current, workInProgress, ctor, newProps, renderLanes) {
     var instance = workInProgress.stateNode;
     cloneUpdateQueue(current, workInProgress);
-    var oldProps = workInProgress.memoizedProps;
-    instance.props = workInProgress.type === workInProgress.elementType ? oldProps : resolveDefaultProps(workInProgress.type, oldProps);
+    var unresolvedOldProps = workInProgress.memoizedProps;
+    var oldProps = workInProgress.type === workInProgress.elementType ? unresolvedOldProps : resolveDefaultProps(workInProgress.type, unresolvedOldProps);
+    instance.props = oldProps;
+    var unresolvedNewProps = workInProgress.pendingProps;
     var oldContext = instance.context;
     var contextType = ctor.contextType;
     var nextContext = emptyContextObject;
@@ -13309,7 +13032,7 @@
     // Unsafe lifecycles should not be invoked for components using the new APIs.
 
     if (!hasNewLifecycles && (typeof instance.UNSAFE_componentWillReceiveProps === 'function' || typeof instance.componentWillReceiveProps === 'function')) {
-      if (oldProps !== newProps || oldContext !== nextContext) {
+      if (unresolvedOldProps !== unresolvedNewProps || oldContext !== nextContext) {
         callComponentWillReceiveProps(workInProgress, instance, newProps, nextContext);
       }
     }
@@ -13317,21 +13040,21 @@
     resetHasForceUpdateBeforeProcessing();
     var oldState = workInProgress.memoizedState;
     var newState = instance.state = oldState;
-    processUpdateQueue(workInProgress, newProps, instance, renderExpirationTime);
+    processUpdateQueue(workInProgress, newProps, instance, renderLanes);
     newState = workInProgress.memoizedState;
 
-    if (oldProps === newProps && oldState === newState && !hasContextChanged() && !checkHasForceUpdateAfterProcessing()) {
+    if (unresolvedOldProps === unresolvedNewProps && oldState === newState && !hasContextChanged() && !checkHasForceUpdateAfterProcessing()) {
       // If an update was already in progress, we should schedule an Update
       // effect even though we're bailing out, so that cWU/cDU are called.
       if (typeof instance.componentDidUpdate === 'function') {
-        if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {
-          workInProgress.effectTag |= Update;
+        if (unresolvedOldProps !== current.memoizedProps || oldState !== current.memoizedState) {
+          workInProgress.flags |= Update;
         }
       }
 
       if (typeof instance.getSnapshotBeforeUpdate === 'function') {
-        if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {
-          workInProgress.effectTag |= Snapshot;
+        if (unresolvedOldProps !== current.memoizedProps || oldState !== current.memoizedState) {
+          workInProgress.flags |= Snapshot;
         }
       }
 
@@ -13349,8 +13072,6 @@
       // In order to support react-lifecycles-compat polyfilled components,
       // Unsafe lifecycles should not be invoked for components using the new APIs.
       if (!hasNewLifecycles && (typeof instance.UNSAFE_componentWillUpdate === 'function' || typeof instance.componentWillUpdate === 'function')) {
-        startPhaseTimer(workInProgress, 'componentWillUpdate');
-
         if (typeof instance.componentWillUpdate === 'function') {
           instance.componentWillUpdate(newProps, newState, nextContext);
         }
@@ -13358,29 +13079,27 @@
         if (typeof instance.UNSAFE_componentWillUpdate === 'function') {
           instance.UNSAFE_componentWillUpdate(newProps, newState, nextContext);
         }
-
-        stopPhaseTimer();
       }
 
       if (typeof instance.componentDidUpdate === 'function') {
-        workInProgress.effectTag |= Update;
+        workInProgress.flags |= Update;
       }
 
       if (typeof instance.getSnapshotBeforeUpdate === 'function') {
-        workInProgress.effectTag |= Snapshot;
+        workInProgress.flags |= Snapshot;
       }
     } else {
       // If an update was already in progress, we should schedule an Update
       // effect even though we're bailing out, so that cWU/cDU are called.
       if (typeof instance.componentDidUpdate === 'function') {
-        if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {
-          workInProgress.effectTag |= Update;
+        if (unresolvedOldProps !== current.memoizedProps || oldState !== current.memoizedState) {
+          workInProgress.flags |= Update;
         }
       }
 
       if (typeof instance.getSnapshotBeforeUpdate === 'function') {
-        if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {
-          workInProgress.effectTag |= Snapshot;
+        if (unresolvedOldProps !== current.memoizedProps || oldState !== current.memoizedState) {
+          workInProgress.flags |= Snapshot;
         }
       } // If shouldComponentUpdate returned false, we should still update the
       // memoized props/state to indicate that this work can be reused.
@@ -13404,7 +13123,7 @@
   var ownerHasKeyUseWarning;
   var ownerHasFunctionTypeWarning;
 
-  var warnForMissingKey = function (child) {};
+  var warnForMissingKey = function (child, returnFiber) {};
 
   {
     didWarnAboutMaps = false;
@@ -13419,7 +13138,7 @@
     ownerHasKeyUseWarning = {};
     ownerHasFunctionTypeWarning = {};
 
-    warnForMissingKey = function (child) {
+    warnForMissingKey = function (child, returnFiber) {
       if (child === null || typeof child !== 'object') {
         return;
       }
@@ -13435,15 +13154,15 @@
       }
 
       child._store.validated = true;
-      var currentComponentErrorInfo = 'Each child in a list should have a unique ' + '"key" prop. See https://fb.me/react-warning-keys for ' + 'more information.' + getCurrentFiberStackInDev();
-
-      if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
-        return;
-      }
-
-      ownerHasKeyUseWarning[currentComponentErrorInfo] = true;
-
-      error('Each child in a list should have a unique ' + '"key" prop. See https://fb.me/react-warning-keys for ' + 'more information.');
+      var componentName = getComponentName(returnFiber.type) || 'Component';
+
+      if (ownerHasKeyUseWarning[componentName]) {
+        return;
+      }
+
+      ownerHasKeyUseWarning[componentName] = true;
+
+      error('Each child in a list should have a unique ' + '"key" prop. See https://reactjs.org/link/warning-keys for ' + 'more information.');
     };
   }
 
@@ -13464,7 +13183,7 @@
 
           if (!didWarnAboutStringRefs[componentName]) {
             {
-              error('A string ref, "%s", has been found within a strict mode tree. ' + 'String refs are a source of potential bugs and should be avoided. ' + 'We recommend using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://fb.me/react-strict-mode-string-ref%s', mixedRef, getStackByFiberInDevAndProd(returnFiber));
+              error('A string ref, "%s", has been found within a strict mode tree. ' + 'String refs are a source of potential bugs and should be avoided. ' + 'We recommend using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', mixedRef);
             }
 
             didWarnAboutStringRefs[componentName] = true;
@@ -13481,7 +13200,7 @@
 
           if (!(ownerFiber.tag === ClassComponent)) {
             {
-              throw Error( "Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://fb.me/react-strict-mode-string-ref" );
+              throw Error( "Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref" );
             }
           }
 
@@ -13526,7 +13245,7 @@
 
         if (!element._owner) {
           {
-            throw Error( "Element ref was specified as a string (" + mixedRef + ") but no owner was set. This could happen for one of the following reasons:\n1. You may be adding a ref to a function component\n2. You may be adding a ref to a component that was not created inside a component's render method\n3. You have multiple copies of React loaded\nSee https://fb.me/react-refs-must-have-owner for more information." );
+            throw Error( "Element ref was specified as a string (" + mixedRef + ") but no owner was set. This could happen for one of the following reasons:\n1. You may be adding a ref to a function component\n2. You may be adding a ref to a component that was not created inside a component's render method\n3. You have multiple copies of React loaded\nSee https://reactjs.org/link/refs-must-have-owner for more information." );
           }
         }
       }
@@ -13537,33 +13256,27 @@
 
   function throwOnInvalidObjectType(returnFiber, newChild) {
     if (returnFiber.type !== 'textarea') {
-      var addendum = '';
-
-      {
-        addendum = ' If you meant to render a collection of children, use an array ' + 'instead.' + getCurrentFiberStackInDev();
-      }
-
-      {
-        {
-          throw Error( "Objects are not valid as a React child (found: " + (Object.prototype.toString.call(newChild) === '[object Object]' ? 'object with keys {' + Object.keys(newChild).join(', ') + '}' : newChild) + ")." + addendum );
-        }
-      }
-    }
-  }
-
-  function warnOnFunctionType() {
-    {
-      var currentComponentErrorInfo = 'Functions are not valid as a React child. This may happen if ' + 'you return a Component instead of <Component /> from render. ' + 'Or maybe you meant to call this function rather than return it.' + getCurrentFiberStackInDev();
-
-      if (ownerHasFunctionTypeWarning[currentComponentErrorInfo]) {
-        return;
-      }
-
-      ownerHasFunctionTypeWarning[currentComponentErrorInfo] = true;
+      {
+        {
+          throw Error( "Objects are not valid as a React child (found: " + (Object.prototype.toString.call(newChild) === '[object Object]' ? 'object with keys {' + Object.keys(newChild).join(', ') + '}' : newChild) + "). If you meant to render a collection of children, use an array instead." );
+        }
+      }
+    }
+  }
+
+  function warnOnFunctionType(returnFiber) {
+    {
+      var componentName = getComponentName(returnFiber.type) || 'Component';
+
+      if (ownerHasFunctionTypeWarning[componentName]) {
+        return;
+      }
+
+      ownerHasFunctionTypeWarning[componentName] = true;
 
       error('Functions are not valid as a React child. This may happen if ' + 'you return a Component instead of <Component /> from render. ' + 'Or maybe you meant to call this function rather than return it.');
     }
-  } // This wrapper function exists because I expect to clone the code in each path
+  } // We avoid inlining this to avoid potential deopts from using try/catch.
   // to be able to optimize each path individually by branching early. This needs
   // a compiler or we can do it manually. Helpers that don't need this branching
   // live outside of this function.
@@ -13591,7 +13304,7 @@
       }
 
       childToDelete.nextEffect = null;
-      childToDelete.effectTag = Deletion;
+      childToDelete.flags = Deletion;
     }
 
     function deleteRemainingChildren(returnFiber, currentFirstChild) {
@@ -13656,7 +13369,7 @@
 
         if (oldIndex < lastPlacedIndex) {
           // This is a move.
-          newFiber.effectTag = Placement;
+          newFiber.flags = Placement;
           return lastPlacedIndex;
         } else {
           // This item can stay in place.
@@ -13664,7 +13377,7 @@
         }
       } else {
         // This is an insertion.
-        newFiber.effectTag = Placement;
+        newFiber.flags = Placement;
         return lastPlacedIndex;
       }
     }
@@ -13673,16 +13386,16 @@
       // This is simpler for the single child case. We only need to do a
       // placement for inserting new children.
       if (shouldTrackSideEffects && newFiber.alternate === null) {
-        newFiber.effectTag = Placement;
+        newFiber.flags = Placement;
       }
 
       return newFiber;
     }
 
-    function updateTextNode(returnFiber, current, textContent, expirationTime) {
+    function updateTextNode(returnFiber, current, textContent, lanes) {
       if (current === null || current.tag !== HostText) {
         // Insert
-        var created = createFiberFromText(textContent, returnFiber.mode, expirationTime);
+        var created = createFiberFromText(textContent, returnFiber.mode, lanes);
         created.return = returnFiber;
         return created;
       } else {
@@ -13693,7 +13406,7 @@
       }
     }
 
-    function updateElement(returnFiber, current, element, expirationTime) {
+    function updateElement(returnFiber, current, element, lanes) {
       if (current !== null) {
         if (current.elementType === element.type || ( // Keep this check inline so it only runs on the false path:
          isCompatibleFamilyForHotReloading(current, element) )) {
@@ -13712,16 +13425,16 @@
       } // Insert
 
 
-      var created = createFiberFromElement(element, returnFiber.mode, expirationTime);
+      var created = createFiberFromElement(element, returnFiber.mode, lanes);
       created.ref = coerceRef(returnFiber, current, element);
       created.return = returnFiber;
       return created;
     }
 
-    function updatePortal(returnFiber, current, portal, expirationTime) {
+    function updatePortal(returnFiber, current, portal, lanes) {
       if (current === null || current.tag !== HostPortal || current.stateNode.containerInfo !== portal.containerInfo || current.stateNode.implementation !== portal.implementation) {
         // Insert
-        var created = createFiberFromPortal(portal, returnFiber.mode, expirationTime);
+        var created = createFiberFromPortal(portal, returnFiber.mode, lanes);
         created.return = returnFiber;
         return created;
       } else {
@@ -13732,10 +13445,10 @@
       }
     }
 
-    function updateFragment(returnFiber, current, fragment, expirationTime, key) {
+    function updateFragment(returnFiber, current, fragment, lanes, key) {
       if (current === null || current.tag !== Fragment) {
         // Insert
-        var created = createFiberFromFragment(fragment, returnFiber.mode, expirationTime, key);
+        var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
         created.return = returnFiber;
         return created;
       } else {
@@ -13746,12 +13459,12 @@
       }
     }
 
-    function createChild(returnFiber, newChild, expirationTime) {
+    function createChild(returnFiber, newChild, lanes) {
       if (typeof newChild === 'string' || typeof newChild === 'number') {
         // Text nodes don't have keys. If the previous node is implicitly keyed
         // we can continue to replace it without aborting even if it is not a text
         // node.
-        var created = createFiberFromText('' + newChild, returnFiber.mode, expirationTime);
+        var created = createFiberFromText('' + newChild, returnFiber.mode, lanes);
         created.return = returnFiber;
         return created;
       }
@@ -13760,7 +13473,7 @@
         switch (newChild.$$typeof) {
           case REACT_ELEMENT_TYPE:
             {
-              var _created = createFiberFromElement(newChild, returnFiber.mode, expirationTime);
+              var _created = createFiberFromElement(newChild, returnFiber.mode, lanes);
 
               _created.ref = coerceRef(returnFiber, null, newChild);
               _created.return = returnFiber;
@@ -13769,7 +13482,7 @@
 
           case REACT_PORTAL_TYPE:
             {
-              var _created2 = createFiberFromPortal(newChild, returnFiber.mode, expirationTime);
+              var _created2 = createFiberFromPortal(newChild, returnFiber.mode, lanes);
 
               _created2.return = returnFiber;
               return _created2;
@@ -13777,7 +13490,7 @@
         }
 
         if (isArray$1(newChild) || getIteratorFn(newChild)) {
-          var _created3 = createFiberFromFragment(newChild, returnFiber.mode, expirationTime, null);
+          var _created3 = createFiberFromFragment(newChild, returnFiber.mode, lanes, null);
 
           _created3.return = returnFiber;
           return _created3;
@@ -13788,14 +13501,14 @@
 
       {
         if (typeof newChild === 'function') {
-          warnOnFunctionType();
+          warnOnFunctionType(returnFiber);
         }
       }
 
       return null;
     }
 
-    function updateSlot(returnFiber, oldFiber, newChild, expirationTime) {
+    function updateSlot(returnFiber, oldFiber, newChild, lanes) {
       // Update the fiber if the keys match, otherwise return null.
       var key = oldFiber !== null ? oldFiber.key : null;
 
@@ -13807,7 +13520,7 @@
           return null;
         }
 
-        return updateTextNode(returnFiber, oldFiber, '' + newChild, expirationTime);
+        return updateTextNode(returnFiber, oldFiber, '' + newChild, lanes);
       }
 
       if (typeof newChild === 'object' && newChild !== null) {
@@ -13816,10 +13529,10 @@
             {
               if (newChild.key === key) {
                 if (newChild.type === REACT_FRAGMENT_TYPE) {
-                  return updateFragment(returnFiber, oldFiber, newChild.props.children, expirationTime, key);
+                  return updateFragment(returnFiber, oldFiber, newChild.props.children, lanes, key);
                 }
 
-                return updateElement(returnFiber, oldFiber, newChild, expirationTime);
+                return updateElement(returnFiber, oldFiber, newChild, lanes);
               } else {
                 return null;
               }
@@ -13828,7 +13541,7 @@
           case REACT_PORTAL_TYPE:
             {
               if (newChild.key === key) {
-                return updatePortal(returnFiber, oldFiber, newChild, expirationTime);
+                return updatePortal(returnFiber, oldFiber, newChild, lanes);
               } else {
                 return null;
               }
@@ -13840,7 +13553,7 @@
             return null;
           }
 
-          return updateFragment(returnFiber, oldFiber, newChild, expirationTime, null);
+          return updateFragment(returnFiber, oldFiber, newChild, lanes, null);
         }
 
         throwOnInvalidObjectType(returnFiber, newChild);
@@ -13848,19 +13561,19 @@
 
       {
         if (typeof newChild === 'function') {
-          warnOnFunctionType();
+          warnOnFunctionType(returnFiber);
         }
       }
 
       return null;
     }
 
-    function updateFromMap(existingChildren, returnFiber, newIdx, newChild, expirationTime) {
+    function updateFromMap(existingChildren, returnFiber, newIdx, newChild, lanes) {
       if (typeof newChild === 'string' || typeof newChild === 'number') {
         // Text nodes don't have keys, so we neither have to check the old nor
         // new node for the key. If both are text nodes, they match.
         var matchedFiber = existingChildren.get(newIdx) || null;
-        return updateTextNode(returnFiber, matchedFiber, '' + newChild, expirationTime);
+        return updateTextNode(returnFiber, matchedFiber, '' + newChild, lanes);
       }
 
       if (typeof newChild === 'object' && newChild !== null) {
@@ -13870,24 +13583,25 @@
               var _matchedFiber = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;
 
               if (newChild.type === REACT_FRAGMENT_TYPE) {
-                return updateFragment(returnFiber, _matchedFiber, newChild.props.children, expirationTime, newChild.key);
-              }
-
-              return updateElement(returnFiber, _matchedFiber, newChild, expirationTime);
+                return updateFragment(returnFiber, _matchedFiber, newChild.props.children, lanes, newChild.key);
+              }
+
+              return updateElement(returnFiber, _matchedFiber, newChild, lanes);
             }
 
           case REACT_PORTAL_TYPE:
             {
               var _matchedFiber2 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;
 
-              return updatePortal(returnFiber, _matchedFiber2, newChild, expirationTime);
-            }
+              return updatePortal(returnFiber, _matchedFiber2, newChild, lanes);
+            }
+
         }
 
         if (isArray$1(newChild) || getIteratorFn(newChild)) {
           var _matchedFiber3 = existingChildren.get(newIdx) || null;
 
-          return updateFragment(returnFiber, _matchedFiber3, newChild, expirationTime, null);
+          return updateFragment(returnFiber, _matchedFiber3, newChild, lanes, null);
         }
 
         throwOnInvalidObjectType(returnFiber, newChild);
@@ -13895,7 +13609,7 @@
 
       {
         if (typeof newChild === 'function') {
-          warnOnFunctionType();
+          warnOnFunctionType(returnFiber);
         }
       }
 
@@ -13906,7 +13620,7 @@
      */
 
 
-    function warnOnInvalidKey(child, knownKeys) {
+    function warnOnInvalidKey(child, knownKeys, returnFiber) {
       {
         if (typeof child !== 'object' || child === null) {
           return knownKeys;
@@ -13915,7 +13629,7 @@
         switch (child.$$typeof) {
           case REACT_ELEMENT_TYPE:
           case REACT_PORTAL_TYPE:
-            warnForMissingKey(child);
+            warnForMissingKey(child, returnFiber);
             var key = child.key;
 
             if (typeof key !== 'string') {
@@ -13942,7 +13656,7 @@
       return knownKeys;
     }
 
-    function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, expirationTime) {
+    function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, lanes) {
       // This algorithm can't optimize by searching from both ends since we
       // don't have backpointers on fibers. I'm trying to see how far we can get
       // with that model. If it ends up not being worth the tradeoffs, we can
@@ -13964,7 +13678,7 @@
 
         for (var i = 0; i < newChildren.length; i++) {
           var child = newChildren[i];
-          knownKeys = warnOnInvalidKey(child, knownKeys);
+          knownKeys = warnOnInvalidKey(child, knownKeys, returnFiber);
         }
       }
 
@@ -13983,7 +13697,7 @@
           nextOldFiber = oldFiber.sibling;
         }
 
-        var newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], expirationTime);
+        var newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], lanes);
 
         if (newFiber === null) {
           // TODO: This breaks on empty slots like null children. That's
@@ -14032,7 +13746,7 @@
         // If we don't have any more existing children we can choose a fast path
         // since the rest will all be insertions.
         for (; newIdx < newChildren.length; newIdx++) {
-          var _newFiber = createChild(returnFiber, newChildren[newIdx], expirationTime);
+          var _newFiber = createChild(returnFiber, newChildren[newIdx], lanes);
 
           if (_newFiber === null) {
             continue;
@@ -14057,7 +13771,7 @@
       var existingChildren = mapRemainingChildren(returnFiber, oldFiber); // Keep scanning and use the map to restore deleted items as moves.
 
       for (; newIdx < newChildren.length; newIdx++) {
-        var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], expirationTime);
+        var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], lanes);
 
         if (_newFiber2 !== null) {
           if (shouldTrackSideEffects) {
@@ -14093,7 +13807,7 @@
       return resultingFirstChild;
     }
 
-    function reconcileChildrenIterator(returnFiber, currentFirstChild, newChildrenIterable, expirationTime) {
+    function reconcileChildrenIterator(returnFiber, currentFirstChild, newChildrenIterable, lanes) {
       // This is the same implementation as reconcileChildrenArray(),
       // but using the iterator instead.
       var iteratorFn = getIteratorFn(newChildrenIterable);
@@ -14119,7 +13833,7 @@
 
         if (newChildrenIterable.entries === iteratorFn) {
           if (!didWarnAboutMaps) {
-            error('Using Maps as children is unsupported and will likely yield ' + 'unexpected results. Convert it to a sequence/iterable of keyed ' + 'ReactElements instead.');
+            error('Using Maps as children is not supported. ' + 'Use an array of keyed ReactElements instead.');
           }
 
           didWarnAboutMaps = true;
@@ -14136,7 +13850,7 @@
 
           for (; !_step.done; _step = _newChildren.next()) {
             var child = _step.value;
-            knownKeys = warnOnInvalidKey(child, knownKeys);
+            knownKeys = warnOnInvalidKey(child, knownKeys, returnFiber);
           }
         }
       }
@@ -14165,7 +13879,7 @@
           nextOldFiber = oldFiber.sibling;
         }
 
-        var newFiber = updateSlot(returnFiber, oldFiber, step.value, expirationTime);
+        var newFiber = updateSlot(returnFiber, oldFiber, step.value, lanes);
 
         if (newFiber === null) {
           // TODO: This breaks on empty slots like null children. That's
@@ -14214,7 +13928,7 @@
         // If we don't have any more existing children we can choose a fast path
         // since the rest will all be insertions.
         for (; !step.done; newIdx++, step = newChildren.next()) {
-          var _newFiber3 = createChild(returnFiber, step.value, expirationTime);
+          var _newFiber3 = createChild(returnFiber, step.value, lanes);
 
           if (_newFiber3 === null) {
             continue;
@@ -14239,7 +13953,7 @@
       var existingChildren = mapRemainingChildren(returnFiber, oldFiber); // Keep scanning and use the map to restore deleted items as moves.
 
       for (; !step.done; newIdx++, step = newChildren.next()) {
-        var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, expirationTime);
+        var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, lanes);
 
         if (_newFiber4 !== null) {
           if (shouldTrackSideEffects) {
@@ -14275,7 +13989,7 @@
       return resultingFirstChild;
     }
 
-    function reconcileSingleTextNode(returnFiber, currentFirstChild, textContent, expirationTime) {
+    function reconcileSingleTextNode(returnFiber, currentFirstChild, textContent, lanes) {
       // There's no need to check for keys on text nodes since we don't have a
       // way to define them.
       if (currentFirstChild !== null && currentFirstChild.tag === HostText) {
@@ -14290,12 +14004,12 @@
 
 
       deleteRemainingChildren(returnFiber, currentFirstChild);
-      var created = createFiberFromText(textContent, returnFiber.mode, expirationTime);
+      var created = createFiberFromText(textContent, returnFiber.mode, lanes);
       created.return = returnFiber;
       return created;
     }
 
-    function reconcileSingleElement(returnFiber, currentFirstChild, element, expirationTime) {
+    function reconcileSingleElement(returnFiber, currentFirstChild, element, lanes) {
       var key = element.key;
       var child = currentFirstChild;
 
@@ -14361,11 +14075,11 @@
       }
 
       if (element.type === REACT_FRAGMENT_TYPE) {
-        var created = createFiberFromFragment(element.props.children, returnFiber.mode, expirationTime, element.key);
+        var created = createFiberFromFragment(element.props.children, returnFiber.mode, lanes, element.key);
         created.return = returnFiber;
         return created;
       } else {
-        var _created4 = createFiberFromElement(element, returnFiber.mode, expirationTime);
+        var _created4 = createFiberFromElement(element, returnFiber.mode, lanes);
 
         _created4.ref = coerceRef(returnFiber, currentFirstChild, element);
         _created4.return = returnFiber;
@@ -14373,7 +14087,7 @@
       }
     }
 
-    function reconcileSinglePortal(returnFiber, currentFirstChild, portal, expirationTime) {
+    function reconcileSinglePortal(returnFiber, currentFirstChild, portal, lanes) {
       var key = portal.key;
       var child = currentFirstChild;
 
@@ -14397,7 +14111,7 @@
         child = child.sibling;
       }
 
-      var created = createFiberFromPortal(portal, returnFiber.mode, expirationTime);
+      var created = createFiberFromPortal(portal, returnFiber.mode, lanes);
       created.return = returnFiber;
       return created;
     } // This API will tag the children with the side-effect of the reconciliation
@@ -14405,7 +14119,7 @@
     // children and the parent.
 
 
-    function reconcileChildFibers(returnFiber, currentFirstChild, newChild, expirationTime) {
+    function reconcileChildFibers(returnFiber, currentFirstChild, newChild, lanes) {
       // This function is not recursive.
       // If the top level item is an array, we treat it as a set of children,
       // not as a fragment. Nested arrays on the other hand will be treated as
@@ -14425,23 +14139,24 @@
       if (isObject) {
         switch (newChild.$$typeof) {
           case REACT_ELEMENT_TYPE:
-            return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, expirationTime));
+            return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, lanes));
 
           case REACT_PORTAL_TYPE:
-            return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, expirationTime));
+            return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, lanes));
+
         }
       }
 
       if (typeof newChild === 'string' || typeof newChild === 'number') {
-        return placeSingleChild(reconcileSingleTextNode(returnFiber, currentFirstChild, '' + newChild, expirationTime));
+        return placeSingleChild(reconcileSingleTextNode(returnFiber, currentFirstChild, '' + newChild, lanes));
       }
 
       if (isArray$1(newChild)) {
-        return reconcileChildrenArray(returnFiber, currentFirstChild, newChild, expirationTime);
+        return reconcileChildrenArray(returnFiber, currentFirstChild, newChild, lanes);
       }
 
       if (getIteratorFn(newChild)) {
-        return reconcileChildrenIterator(returnFiber, currentFirstChild, newChild, expirationTime);
+        return reconcileChildrenIterator(returnFiber, currentFirstChild, newChild, lanes);
       }
 
       if (isObject) {
@@ -14450,7 +14165,7 @@
 
       {
         if (typeof newChild === 'function') {
-          warnOnFunctionType();
+          warnOnFunctionType(returnFiber);
         }
       }
 
@@ -14474,13 +14189,14 @@
           // functions and classes
           // eslint-disable-next-lined no-fallthrough
 
+          case Block:
           case FunctionComponent:
+          case ForwardRef:
+          case SimpleMemoComponent:
             {
-              var Component = returnFiber.type;
-
               {
                 {
-                  throw Error( (Component.displayName || Component.name || 'Component') + "(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null." );
+                  throw Error( (getComponentName(returnFiber.type) || 'Component') + "(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null." );
                 }
               }
             }
@@ -14521,11 +14237,11 @@
     newChild.sibling = null;
   } // Reset a workInProgress child set to prepare it for a second pass.
 
-  function resetChildFibers(workInProgress, renderExpirationTime) {
+  function resetChildFibers(workInProgress, lanes) {
     var child = workInProgress.child;
 
     while (child !== null) {
-      resetWorkInProgress(child, renderExpirationTime);
+      resetWorkInProgress(child, lanes);
       child = child.sibling;
     }
   }
@@ -14695,7 +14411,7 @@
       } else if (node.tag === SuspenseListComponent && // revealOrder undefined can't be trusted because it don't
       // keep track of whether it suspended or not.
       node.memoizedProps.revealOrder !== undefined) {
-        var didSuspend = (node.effectTag & DidCapture) !== NoEffect;
+        var didSuspend = (node.flags & DidCapture) !== NoFlags;
 
         if (didSuspend) {
           return node;
@@ -14725,18 +14441,9 @@
     return null;
   }
 
-  function createDeprecatedResponderListener(responder, props) {
-    var eventResponderListener = {
-      responder: responder,
-      props: props
-    };
-
-    {
-      Object.freeze(eventResponderListener);
-    }
-
-    return eventResponderListener;
-  }
+  var NoFlags$1 =
+  /*  */
+  0; // Represents whether effect should fire.
 
   var HasEffect =
   /* */
@@ -14749,1813 +14456,6 @@
   /*   */
   4;
 
-  var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher,
-      ReactCurrentBatchConfig$1 = ReactSharedInternals.ReactCurrentBatchConfig;
-  var didWarnAboutMismatchedHooksForComponent;
-
-  {
-    didWarnAboutMismatchedHooksForComponent = new Set();
-  }
-
-  // These are set right before calling the component.
-  var renderExpirationTime = NoWork; // The work-in-progress fiber. I've named it differently to distinguish it from
-  // the work-in-progress hook.
-
-  var currentlyRenderingFiber$1 = null; // Hooks are stored as a linked list on the fiber's memoizedState field. The
-  // current hook list is the list that belongs to the current fiber. The
-  // work-in-progress hook list is a new list that will be added to the
-  // work-in-progress fiber.
-
-  var currentHook = null;
-  var workInProgressHook = null; // Whether an update was scheduled at any point during the render phase. This
-  // does not get reset if we do another render pass; only when we're completely
-  // finished evaluating this component. This is an optimization so we know
-  // whether we need to clear render phase updates after a throw.
-
-  var didScheduleRenderPhaseUpdate = false;
-  var RE_RENDER_LIMIT = 25; // In DEV, this is the name of the currently executing primitive hook
-
-  var currentHookNameInDev = null; // In DEV, this list ensures that hooks are called in the same order between renders.
-  // The list stores the order of hooks used during the initial render (mount).
-  // Subsequent renders (updates) reference this list.
-
-  var hookTypesDev = null;
-  var hookTypesUpdateIndexDev = -1; // In DEV, this tracks whether currently rendering component needs to ignore
-  // the dependencies for Hooks that need them (e.g. useEffect or useMemo).
-  // When true, such Hooks will always be "remounted". Only used during hot reload.
-
-  var ignorePreviousDependencies = false;
-
-  function mountHookTypesDev() {
-    {
-      var hookName = currentHookNameInDev;
-
-      if (hookTypesDev === null) {
-        hookTypesDev = [hookName];
-      } else {
-        hookTypesDev.push(hookName);
-      }
-    }
-  }
-
-  function updateHookTypesDev() {
-    {
-      var hookName = currentHookNameInDev;
-
-      if (hookTypesDev !== null) {
-        hookTypesUpdateIndexDev++;
-
-        if (hookTypesDev[hookTypesUpdateIndexDev] !== hookName) {
-          warnOnHookMismatchInDev(hookName);
-        }
-      }
-    }
-  }
-
-  function checkDepsAreArrayDev(deps) {
-    {
-      if (deps !== undefined && deps !== null && !Array.isArray(deps)) {
-        // Verify deps, but only on mount to avoid extra checks.
-        // It's unlikely their type would change as usually you define them inline.
-        error('%s received a final argument that is not an array (instead, received `%s`). When ' + 'specified, the final argument must be an array.', currentHookNameInDev, typeof deps);
-      }
-    }
-  }
-
-  function warnOnHookMismatchInDev(currentHookName) {
-    {
-      var componentName = getComponentName(currentlyRenderingFiber$1.type);
-
-      if (!didWarnAboutMismatchedHooksForComponent.has(componentName)) {
-        didWarnAboutMismatchedHooksForComponent.add(componentName);
-
-        if (hookTypesDev !== null) {
-          var table = '';
-          var secondColumnStart = 30;
-
-          for (var i = 0; i <= hookTypesUpdateIndexDev; i++) {
-            var oldHookName = hookTypesDev[i];
-            var newHookName = i === hookTypesUpdateIndexDev ? currentHookName : oldHookName;
-            var row = i + 1 + ". " + oldHookName; // Extra space so second column lines up
-            // lol @ IE not supporting String#repeat
-
-            while (row.length < secondColumnStart) {
-              row += ' ';
-            }
-
-            row += newHookName + '\n';
-            table += row;
-          }
-
-          error('React has detected a change in the order of Hooks called by %s. ' + 'This will lead to bugs and errors if not fixed. ' + 'For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' + '   Previous render            Next render\n' + '   ------------------------------------------------------\n' + '%s' + '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n', componentName, table);
-        }
-      }
-    }
-  }
-
-  function throwInvalidHookError() {
-    {
-      {
-        throw Error( "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem." );
-      }
-    }
-  }
-
-  function areHookInputsEqual(nextDeps, prevDeps) {
-    {
-      if (ignorePreviousDependencies) {
-        // Only true when this component is being hot reloaded.
-        return false;
-      }
-    }
-
-    if (prevDeps === null) {
-      {
-        error('%s received a final argument during this render, but not during ' + 'the previous render. Even though the final argument is optional, ' + 'its type cannot change between renders.', currentHookNameInDev);
-      }
-
-      return false;
-    }
-
-    {
-      // Don't bother comparing lengths in prod because these arrays should be
-      // passed inline.
-      if (nextDeps.length !== prevDeps.length) {
-        error('The final argument passed to %s changed size between renders. The ' + 'order and size of this array must remain constant.\n\n' + 'Previous: %s\n' + 'Incoming: %s', currentHookNameInDev, "[" + prevDeps.join(', ') + "]", "[" + nextDeps.join(', ') + "]");
-      }
-    }
-
-    for (var i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
-      if (objectIs(nextDeps[i], prevDeps[i])) {
-        continue;
-      }
-
-      return false;
-    }
-
-    return true;
-  }
-
-  function renderWithHooks(current, workInProgress, Component, props, secondArg, nextRenderExpirationTime) {
-    renderExpirationTime = nextRenderExpirationTime;
-    currentlyRenderingFiber$1 = workInProgress;
-
-    {
-      hookTypesDev = current !== null ? current._debugHookTypes : null;
-      hookTypesUpdateIndexDev = -1; // Used for hot reloading:
-
-      ignorePreviousDependencies = current !== null && current.type !== workInProgress.type;
-    }
-
-    workInProgress.memoizedState = null;
-    workInProgress.updateQueue = null;
-    workInProgress.expirationTime = NoWork; // The following should have already been reset
-    // currentHook = null;
-    // workInProgressHook = null;
-    // didScheduleRenderPhaseUpdate = false;
-    // TODO Warn if no hooks are used at all during mount, then some are used during update.
-    // Currently we will identify the update render as a mount because memoizedState === null.
-    // This is tricky because it's valid for certain types of components (e.g. React.lazy)
-    // Using memoizedState to differentiate between mount/update only works if at least one stateful hook is used.
-    // Non-stateful hooks (e.g. context) don't get added to memoizedState,
-    // so memoizedState would be null during updates and mounts.
-
-    {
-      if (current !== null && current.memoizedState !== null) {
-        ReactCurrentDispatcher.current = HooksDispatcherOnUpdateInDEV;
-      } else if (hookTypesDev !== null) {
-        // This dispatcher handles an edge case where a component is updating,
-        // but no stateful hooks have been used.
-        // We want to match the production code behavior (which will use HooksDispatcherOnMount),
-        // but with the extra DEV validation to ensure hooks ordering hasn't changed.
-        // This dispatcher does that.
-        ReactCurrentDispatcher.current = HooksDispatcherOnMountWithHookTypesInDEV;
-      } else {
-        ReactCurrentDispatcher.current = HooksDispatcherOnMountInDEV;
-      }
-    }
-
-    var children = Component(props, secondArg); // Check if there was a render phase update
-
-    if (workInProgress.expirationTime === renderExpirationTime) {
-      // Keep rendering in a loop for as long as render phase updates continue to
-      // be scheduled. Use a counter to prevent infinite loops.
-      var numberOfReRenders = 0;
-
-      do {
-        workInProgress.expirationTime = NoWork;
-
-        if (!(numberOfReRenders < RE_RENDER_LIMIT)) {
-          {
-            throw Error( "Too many re-renders. React limits the number of renders to prevent an infinite loop." );
-          }
-        }
-
-        numberOfReRenders += 1;
-
-        {
-          // Even when hot reloading, allow dependencies to stabilize
-          // after first render to prevent infinite render phase updates.
-          ignorePreviousDependencies = false;
-        } // Start over from the beginning of the list
-
-
-        currentHook = null;
-        workInProgressHook = null;
-        workInProgress.updateQueue = null;
-
-        {
-          // Also validate hook order for cascading updates.
-          hookTypesUpdateIndexDev = -1;
-        }
-
-        ReactCurrentDispatcher.current =  HooksDispatcherOnRerenderInDEV ;
-        children = Component(props, secondArg);
-      } while (workInProgress.expirationTime === renderExpirationTime);
-    } // We can assume the previous dispatcher is always this one, since we set it
-    // at the beginning of the render phase and there's no re-entrancy.
-
-
-    ReactCurrentDispatcher.current = ContextOnlyDispatcher;
-
-    {
-      workInProgress._debugHookTypes = hookTypesDev;
-    } // This check uses currentHook so that it works the same in DEV and prod bundles.
-    // hookTypesDev could catch more cases (e.g. context) but only in DEV bundles.
-
-
-    var didRenderTooFewHooks = currentHook !== null && currentHook.next !== null;
-    renderExpirationTime = NoWork;
-    currentlyRenderingFiber$1 = null;
-    currentHook = null;
-    workInProgressHook = null;
-
-    {
-      currentHookNameInDev = null;
-      hookTypesDev = null;
-      hookTypesUpdateIndexDev = -1;
-    }
-
-    didScheduleRenderPhaseUpdate = false;
-
-    if (!!didRenderTooFewHooks) {
-      {
-        throw Error( "Rendered fewer hooks than expected. This may be caused by an accidental early return statement." );
-      }
-    }
-
-    return children;
-  }
-  function bailoutHooks(current, workInProgress, expirationTime) {
-    workInProgress.updateQueue = current.updateQueue;
-    workInProgress.effectTag &= ~(Passive | Update);
-
-    if (current.expirationTime <= expirationTime) {
-      current.expirationTime = NoWork;
-    }
-  }
-  function resetHooksAfterThrow() {
-    // We can assume the previous dispatcher is always this one, since we set it
-    // at the beginning of the render phase and there's no re-entrancy.
-    ReactCurrentDispatcher.current = ContextOnlyDispatcher;
-
-    if (didScheduleRenderPhaseUpdate) {
-      // There were render phase updates. These are only valid for this render
-      // phase, which we are now aborting. Remove the updates from the queues so
-      // they do not persist to the next render. Do not remove updates from hooks
-      // that weren't processed.
-      //
-      // Only reset the updates from the queue if it has a clone. If it does
-      // not have a clone, that means it wasn't processed, and the updates were
-      // scheduled before we entered the render phase.
-      var hook = currentlyRenderingFiber$1.memoizedState;
-
-      while (hook !== null) {
-        var queue = hook.queue;
-
-        if (queue !== null) {
-          queue.pending = null;
-        }
-
-        hook = hook.next;
-      }
-    }
-
-    renderExpirationTime = NoWork;
-    currentlyRenderingFiber$1 = null;
-    currentHook = null;
-    workInProgressHook = null;
-
-    {
-      hookTypesDev = null;
-      hookTypesUpdateIndexDev = -1;
-      currentHookNameInDev = null;
-    }
-
-    didScheduleRenderPhaseUpdate = false;
-  }
-
-  function mountWorkInProgressHook() {
-    var hook = {
-      memoizedState: null,
-      baseState: null,
-      baseQueue: null,
-      queue: null,
-      next: null
-    };
-
-    if (workInProgressHook === null) {
-      // This is the first hook in the list
-      currentlyRenderingFiber$1.memoizedState = workInProgressHook = hook;
-    } else {
-      // Append to the end of the list
-      workInProgressHook = workInProgressHook.next = hook;
-    }
-
-    return workInProgressHook;
-  }
-
-  function updateWorkInProgressHook() {
-    // This function is used both for updates and for re-renders triggered by a
-    // render phase update. It assumes there is either a current hook we can
-    // clone, or a work-in-progress hook from a previous render pass that we can
-    // use as a base. When we reach the end of the base list, we must switch to
-    // the dispatcher used for mounts.
-    var nextCurrentHook;
-
-    if (currentHook === null) {
-      var current = currentlyRenderingFiber$1.alternate;
-
-      if (current !== null) {
-        nextCurrentHook = current.memoizedState;
-      } else {
-        nextCurrentHook = null;
-      }
-    } else {
-      nextCurrentHook = currentHook.next;
-    }
-
-    var nextWorkInProgressHook;
-
-    if (workInProgressHook === null) {
-      nextWorkInProgressHook = currentlyRenderingFiber$1.memoizedState;
-    } else {
-      nextWorkInProgressHook = workInProgressHook.next;
-    }
-
-    if (nextWorkInProgressHook !== null) {
-      // There's already a work-in-progress. Reuse it.
-      workInProgressHook = nextWorkInProgressHook;
-      nextWorkInProgressHook = workInProgressHook.next;
-      currentHook = nextCurrentHook;
-    } else {
-      // Clone from the current hook.
-      if (!(nextCurrentHook !== null)) {
-        {
-          throw Error( "Rendered more hooks than during the previous render." );
-        }
-      }
-
-      currentHook = nextCurrentHook;
-      var newHook = {
-        memoizedState: currentHook.memoizedState,
-        baseState: currentHook.baseState,
-        baseQueue: currentHook.baseQueue,
-        queue: currentHook.queue,
-        next: null
-      };
-
-      if (workInProgressHook === null) {
-        // This is the first hook in the list.
-        currentlyRenderingFiber$1.memoizedState = workInProgressHook = newHook;
-      } else {
-        // Append to the end of the list.
-        workInProgressHook = workInProgressHook.next = newHook;
-      }
-    }
-
-    return workInProgressHook;
-  }
-
-  function createFunctionComponentUpdateQueue() {
-    return {
-      lastEffect: null
-    };
-  }
-
-  function basicStateReducer(state, action) {
-    // $FlowFixMe: Flow doesn't like mixed types
-    return typeof action === 'function' ? action(state) : action;
-  }
-
-  function mountReducer(reducer, initialArg, init) {
-    var hook = mountWorkInProgressHook();
-    var initialState;
-
-    if (init !== undefined) {
-      initialState = init(initialArg);
-    } else {
-      initialState = initialArg;
-    }
-
-    hook.memoizedState = hook.baseState = initialState;
-    var queue = hook.queue = {
-      pending: null,
-      dispatch: null,
-      lastRenderedReducer: reducer,
-      lastRenderedState: initialState
-    };
-    var dispatch = queue.dispatch = dispatchAction.bind(null, currentlyRenderingFiber$1, queue);
-    return [hook.memoizedState, dispatch];
-  }
-
-  function updateReducer(reducer, initialArg, init) {
-    var hook = updateWorkInProgressHook();
-    var queue = hook.queue;
-
-    if (!(queue !== null)) {
-      {
-        throw Error( "Should have a queue. This is likely a bug in React. Please file an issue." );
-      }
-    }
-
-    queue.lastRenderedReducer = reducer;
-    var current = currentHook; // The last rebase update that is NOT part of the base state.
-
-    var baseQueue = current.baseQueue; // The last pending update that hasn't been processed yet.
-
-    var pendingQueue = queue.pending;
-
-    if (pendingQueue !== null) {
-      // We have new updates that haven't been processed yet.
-      // We'll add them to the base queue.
-      if (baseQueue !== null) {
-        // Merge the pending queue and the base queue.
-        var baseFirst = baseQueue.next;
-        var pendingFirst = pendingQueue.next;
-        baseQueue.next = pendingFirst;
-        pendingQueue.next = baseFirst;
-      }
-
-      current.baseQueue = baseQueue = pendingQueue;
-      queue.pending = null;
-    }
-
-    if (baseQueue !== null) {
-      // We have a queue to process.
-      var first = baseQueue.next;
-      var newState = current.baseState;
-      var newBaseState = null;
-      var newBaseQueueFirst = null;
-      var newBaseQueueLast = null;
-      var update = first;
-
-      do {
-        var updateExpirationTime = update.expirationTime;
-
-        if (updateExpirationTime < renderExpirationTime) {
-          // Priority is insufficient. Skip this update. If this is the first
-          // skipped update, the previous update/state is the new base
-          // update/state.
-          var clone = {
-            expirationTime: update.expirationTime,
-            suspenseConfig: update.suspenseConfig,
-            action: update.action,
-            eagerReducer: update.eagerReducer,
-            eagerState: update.eagerState,
-            next: null
-          };
-
-          if (newBaseQueueLast === null) {
-            newBaseQueueFirst = newBaseQueueLast = clone;
-            newBaseState = newState;
-          } else {
-            newBaseQueueLast = newBaseQueueLast.next = clone;
-          } // Update the remaining priority in the queue.
-
-
-          if (updateExpirationTime > currentlyRenderingFiber$1.expirationTime) {
-            currentlyRenderingFiber$1.expirationTime = updateExpirationTime;
-            markUnprocessedUpdateTime(updateExpirationTime);
-          }
-        } else {
-          // This update does have sufficient priority.
-          if (newBaseQueueLast !== null) {
-            var _clone = {
-              expirationTime: Sync,
-              // This update is going to be committed so we never want uncommit it.
-              suspenseConfig: update.suspenseConfig,
-              action: update.action,
-              eagerReducer: update.eagerReducer,
-              eagerState: update.eagerState,
-              next: null
-            };
-            newBaseQueueLast = newBaseQueueLast.next = _clone;
-          } // Mark the event time of this update as relevant to this render pass.
-          // TODO: This should ideally use the true event time of this update rather than
-          // its priority which is a derived and not reverseable value.
-          // TODO: We should skip this update if it was already committed but currently
-          // we have no way of detecting the difference between a committed and suspended
-          // update here.
-
-
-          markRenderEventTimeAndConfig(updateExpirationTime, update.suspenseConfig); // Process this update.
-
-          if (update.eagerReducer === reducer) {
-            // If this update was processed eagerly, and its reducer matches the
-            // current reducer, we can use the eagerly computed state.
-            newState = update.eagerState;
-          } else {
-            var action = update.action;
-            newState = reducer(newState, action);
-          }
-        }
-
-        update = update.next;
-      } while (update !== null && update !== first);
-
-      if (newBaseQueueLast === null) {
-        newBaseState = newState;
-      } else {
-        newBaseQueueLast.next = newBaseQueueFirst;
-      } // Mark that the fiber performed work, but only if the new state is
-      // different from the current state.
-
-
-      if (!objectIs(newState, hook.memoizedState)) {
-        markWorkInProgressReceivedUpdate();
-      }
-
-      hook.memoizedState = newState;
-      hook.baseState = newBaseState;
-      hook.baseQueue = newBaseQueueLast;
-      queue.lastRenderedState = newState;
-    }
-
-    var dispatch = queue.dispatch;
-    return [hook.memoizedState, dispatch];
-  }
-
-  function rerenderReducer(reducer, initialArg, init) {
-    var hook = updateWorkInProgressHook();
-    var queue = hook.queue;
-
-    if (!(queue !== null)) {
-      {
-        throw Error( "Should have a queue. This is likely a bug in React. Please file an issue." );
-      }
-    }
-
-    queue.lastRenderedReducer = reducer; // This is a re-render. Apply the new render phase updates to the previous
-    // work-in-progress hook.
-
-    var dispatch = queue.dispatch;
-    var lastRenderPhaseUpdate = queue.pending;
-    var newState = hook.memoizedState;
-
-    if (lastRenderPhaseUpdate !== null) {
-      // The queue doesn't persist past this render pass.
-      queue.pending = null;
-      var firstRenderPhaseUpdate = lastRenderPhaseUpdate.next;
-      var update = firstRenderPhaseUpdate;
-
-      do {
-        // Process this render phase update. We don't have to check the
-        // priority because it will always be the same as the current
-        // render's.
-        var action = update.action;
-        newState = reducer(newState, action);
-        update = update.next;
-      } while (update !== firstRenderPhaseUpdate); // Mark that the fiber performed work, but only if the new state is
-      // different from the current state.
-
-
-      if (!objectIs(newState, hook.memoizedState)) {
-        markWorkInProgressReceivedUpdate();
-      }
-
-      hook.memoizedState = newState; // Don't persist the state accumulated from the render phase updates to
-      // the base state unless the queue is empty.
-      // TODO: Not sure if this is the desired semantics, but it's what we
-      // do for gDSFP. I can't remember why.
-
-      if (hook.baseQueue === null) {
-        hook.baseState = newState;
-      }
-
-      queue.lastRenderedState = newState;
-    }
-
-    return [newState, dispatch];
-  }
-
-  function mountState(initialState) {
-    var hook = mountWorkInProgressHook();
-
-    if (typeof initialState === 'function') {
-      // $FlowFixMe: Flow doesn't like mixed types
-      initialState = initialState();
-    }
-
-    hook.memoizedState = hook.baseState = initialState;
-    var queue = hook.queue = {
-      pending: null,
-      dispatch: null,
-      lastRenderedReducer: basicStateReducer,
-      lastRenderedState: initialState
-    };
-    var dispatch = queue.dispatch = dispatchAction.bind(null, currentlyRenderingFiber$1, queue);
-    return [hook.memoizedState, dispatch];
-  }
-
-  function updateState(initialState) {
-    return updateReducer(basicStateReducer);
-  }
-
-  function rerenderState(initialState) {
-    return rerenderReducer(basicStateReducer);
-  }
-
-  function pushEffect(tag, create, destroy, deps) {
-    var effect = {
-      tag: tag,
-      create: create,
-      destroy: destroy,
-      deps: deps,
-      // Circular
-      next: null
-    };
-    var componentUpdateQueue = currentlyRenderingFiber$1.updateQueue;
-
-    if (componentUpdateQueue === null) {
-      componentUpdateQueue = createFunctionComponentUpdateQueue();
-      currentlyRenderingFiber$1.updateQueue = componentUpdateQueue;
-      componentUpdateQueue.lastEffect = effect.next = effect;
-    } else {
-      var lastEffect = componentUpdateQueue.lastEffect;
-
-      if (lastEffect === null) {
-        componentUpdateQueue.lastEffect = effect.next = effect;
-      } else {
-        var firstEffect = lastEffect.next;
-        lastEffect.next = effect;
-        effect.next = firstEffect;
-        componentUpdateQueue.lastEffect = effect;
-      }
-    }
-
-    return effect;
-  }
-
-  function mountRef(initialValue) {
-    var hook = mountWorkInProgressHook();
-    var ref = {
-      current: initialValue
-    };
-
-    {
-      Object.seal(ref);
-    }
-
-    hook.memoizedState = ref;
-    return ref;
-  }
-
-  function updateRef(initialValue) {
-    var hook = updateWorkInProgressHook();
-    return hook.memoizedState;
-  }
-
-  function mountEffectImpl(fiberEffectTag, hookEffectTag, create, deps) {
-    var hook = mountWorkInProgressHook();
-    var nextDeps = deps === undefined ? null : deps;
-    currentlyRenderingFiber$1.effectTag |= fiberEffectTag;
-    hook.memoizedState = pushEffect(HasEffect | hookEffectTag, create, undefined, nextDeps);
-  }
-
-  function updateEffectImpl(fiberEffectTag, hookEffectTag, create, deps) {
-    var hook = updateWorkInProgressHook();
-    var nextDeps = deps === undefined ? null : deps;
-    var destroy = undefined;
-
-    if (currentHook !== null) {
-      var prevEffect = currentHook.memoizedState;
-      destroy = prevEffect.destroy;
-
-      if (nextDeps !== null) {
-        var prevDeps = prevEffect.deps;
-
-        if (areHookInputsEqual(nextDeps, prevDeps)) {
-          pushEffect(hookEffectTag, create, destroy, nextDeps);
-          return;
-        }
-      }
-    }
-
-    currentlyRenderingFiber$1.effectTag |= fiberEffectTag;
-    hook.memoizedState = pushEffect(HasEffect | hookEffectTag, create, destroy, nextDeps);
-  }
-
-  function mountEffect(create, deps) {
-    {
-      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-      if ('undefined' !== typeof jest) {
-        warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber$1);
-      }
-    }
-
-    return mountEffectImpl(Update | Passive, Passive$1, create, deps);
-  }
-
-  function updateEffect(create, deps) {
-    {
-      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-      if ('undefined' !== typeof jest) {
-        warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber$1);
-      }
-    }
-
-    return updateEffectImpl(Update | Passive, Passive$1, create, deps);
-  }
-
-  function mountLayoutEffect(create, deps) {
-    return mountEffectImpl(Update, Layout, create, deps);
-  }
-
-  function updateLayoutEffect(create, deps) {
-    return updateEffectImpl(Update, Layout, create, deps);
-  }
-
-  function imperativeHandleEffect(create, ref) {
-    if (typeof ref === 'function') {
-      var refCallback = ref;
-
-      var _inst = create();
-
-      refCallback(_inst);
-      return function () {
-        refCallback(null);
-      };
-    } else if (ref !== null && ref !== undefined) {
-      var refObject = ref;
-
-      {
-        if (!refObject.hasOwnProperty('current')) {
-          error('Expected useImperativeHandle() first argument to either be a ' + 'ref callback or React.createRef() object. Instead received: %s.', 'an object with keys {' + Object.keys(refObject).join(', ') + '}');
-        }
-      }
-
-      var _inst2 = create();
-
-      refObject.current = _inst2;
-      return function () {
-        refObject.current = null;
-      };
-    }
-  }
-
-  function mountImperativeHandle(ref, create, deps) {
-    {
-      if (typeof create !== 'function') {
-        error('Expected useImperativeHandle() second argument to be a function ' + 'that creates a handle. Instead received: %s.', create !== null ? typeof create : 'null');
-      }
-    } // TODO: If deps are provided, should we skip comparing the ref itself?
-
-
-    var effectDeps = deps !== null && deps !== undefined ? deps.concat([ref]) : null;
-    return mountEffectImpl(Update, Layout, imperativeHandleEffect.bind(null, create, ref), effectDeps);
-  }
-
-  function updateImperativeHandle(ref, create, deps) {
-    {
-      if (typeof create !== 'function') {
-        error('Expected useImperativeHandle() second argument to be a function ' + 'that creates a handle. Instead received: %s.', create !== null ? typeof create : 'null');
-      }
-    } // TODO: If deps are provided, should we skip comparing the ref itself?
-
-
-    var effectDeps = deps !== null && deps !== undefined ? deps.concat([ref]) : null;
-    return updateEffectImpl(Update, Layout, imperativeHandleEffect.bind(null, create, ref), effectDeps);
-  }
-
-  function mountDebugValue(value, formatterFn) {// This hook is normally a no-op.
-    // The react-debug-hooks package injects its own implementation
-    // so that e.g. DevTools can display custom hook values.
-  }
-
-  var updateDebugValue = mountDebugValue;
-
-  function mountCallback(callback, deps) {
-    var hook = mountWorkInProgressHook();
-    var nextDeps = deps === undefined ? null : deps;
-    hook.memoizedState = [callback, nextDeps];
-    return callback;
-  }
-
-  function updateCallback(callback, deps) {
-    var hook = updateWorkInProgressHook();
-    var nextDeps = deps === undefined ? null : deps;
-    var prevState = hook.memoizedState;
-
-    if (prevState !== null) {
-      if (nextDeps !== null) {
-        var prevDeps = prevState[1];
-
-        if (areHookInputsEqual(nextDeps, prevDeps)) {
-          return prevState[0];
-        }
-      }
-    }
-
-    hook.memoizedState = [callback, nextDeps];
-    return callback;
-  }
-
-  function mountMemo(nextCreate, deps) {
-    var hook = mountWorkInProgressHook();
-    var nextDeps = deps === undefined ? null : deps;
-    var nextValue = nextCreate();
-    hook.memoizedState = [nextValue, nextDeps];
-    return nextValue;
-  }
-
-  function updateMemo(nextCreate, deps) {
-    var hook = updateWorkInProgressHook();
-    var nextDeps = deps === undefined ? null : deps;
-    var prevState = hook.memoizedState;
-
-    if (prevState !== null) {
-      // Assume these are defined. If they're not, areHookInputsEqual will warn.
-      if (nextDeps !== null) {
-        var prevDeps = prevState[1];
-
-        if (areHookInputsEqual(nextDeps, prevDeps)) {
-          return prevState[0];
-        }
-      }
-    }
-
-    var nextValue = nextCreate();
-    hook.memoizedState = [nextValue, nextDeps];
-    return nextValue;
-  }
-
-  function mountDeferredValue(value, config) {
-    var _mountState = mountState(value),
-        prevValue = _mountState[0],
-        setValue = _mountState[1];
-
-    mountEffect(function () {
-      var previousConfig = ReactCurrentBatchConfig$1.suspense;
-      ReactCurrentBatchConfig$1.suspense = config === undefined ? null : config;
-
-      try {
-        setValue(value);
-      } finally {
-        ReactCurrentBatchConfig$1.suspense = previousConfig;
-      }
-    }, [value, config]);
-    return prevValue;
-  }
-
-  function updateDeferredValue(value, config) {
-    var _updateState = updateState(),
-        prevValue = _updateState[0],
-        setValue = _updateState[1];
-
-    updateEffect(function () {
-      var previousConfig = ReactCurrentBatchConfig$1.suspense;
-      ReactCurrentBatchConfig$1.suspense = config === undefined ? null : config;
-
-      try {
-        setValue(value);
-      } finally {
-        ReactCurrentBatchConfig$1.suspense = previousConfig;
-      }
-    }, [value, config]);
-    return prevValue;
-  }
-
-  function rerenderDeferredValue(value, config) {
-    var _rerenderState = rerenderState(),
-        prevValue = _rerenderState[0],
-        setValue = _rerenderState[1];
-
-    updateEffect(function () {
-      var previousConfig = ReactCurrentBatchConfig$1.suspense;
-      ReactCurrentBatchConfig$1.suspense = config === undefined ? null : config;
-
-      try {
-        setValue(value);
-      } finally {
-        ReactCurrentBatchConfig$1.suspense = previousConfig;
-      }
-    }, [value, config]);
-    return prevValue;
-  }
-
-  function startTransition(setPending, config, callback) {
-    var priorityLevel = getCurrentPriorityLevel();
-    runWithPriority$1(priorityLevel < UserBlockingPriority$1 ? UserBlockingPriority$1 : priorityLevel, function () {
-      setPending(true);
-    });
-    runWithPriority$1(priorityLevel > NormalPriority ? NormalPriority : priorityLevel, function () {
-      var previousConfig = ReactCurrentBatchConfig$1.suspense;
-      ReactCurrentBatchConfig$1.suspense = config === undefined ? null : config;
-
-      try {
-        setPending(false);
-        callback();
-      } finally {
-        ReactCurrentBatchConfig$1.suspense = previousConfig;
-      }
-    });
-  }
-
-  function mountTransition(config) {
-    var _mountState2 = mountState(false),
-        isPending = _mountState2[0],
-        setPending = _mountState2[1];
-
-    var start = mountCallback(startTransition.bind(null, setPending, config), [setPending, config]);
-    return [start, isPending];
-  }
-
-  function updateTransition(config) {
-    var _updateState2 = updateState(),
-        isPending = _updateState2[0],
-        setPending = _updateState2[1];
-
-    var start = updateCallback(startTransition.bind(null, setPending, config), [setPending, config]);
-    return [start, isPending];
-  }
-
-  function rerenderTransition(config) {
-    var _rerenderState2 = rerenderState(),
-        isPending = _rerenderState2[0],
-        setPending = _rerenderState2[1];
-
-    var start = updateCallback(startTransition.bind(null, setPending, config), [setPending, config]);
-    return [start, isPending];
-  }
-
-  function dispatchAction(fiber, queue, action) {
-    {
-      if (typeof arguments[3] === 'function') {
-        error("State updates from the useState() and useReducer() Hooks don't support the " + 'second callback argument. To execute a side effect after ' + 'rendering, declare it in the component body with useEffect().');
-      }
-    }
-
-    var currentTime = requestCurrentTimeForUpdate();
-    var suspenseConfig = requestCurrentSuspenseConfig();
-    var expirationTime = computeExpirationForFiber(currentTime, fiber, suspenseConfig);
-    var update = {
-      expirationTime: expirationTime,
-      suspenseConfig: suspenseConfig,
-      action: action,
-      eagerReducer: null,
-      eagerState: null,
-      next: null
-    };
-
-    {
-      update.priority = getCurrentPriorityLevel();
-    } // Append the update to the end of the list.
-
-
-    var pending = queue.pending;
-
-    if (pending === null) {
-      // This is the first update. Create a circular list.
-      update.next = update;
-    } else {
-      update.next = pending.next;
-      pending.next = update;
-    }
-
-    queue.pending = update;
-    var alternate = fiber.alternate;
-
-    if (fiber === currentlyRenderingFiber$1 || alternate !== null && alternate === currentlyRenderingFiber$1) {
-      // This is a render phase update. Stash it in a lazily-created map of
-      // queue -> linked list of updates. After this render pass, we'll restart
-      // and apply the stashed updates on top of the work-in-progress hook.
-      didScheduleRenderPhaseUpdate = true;
-      update.expirationTime = renderExpirationTime;
-      currentlyRenderingFiber$1.expirationTime = renderExpirationTime;
-    } else {
-      if (fiber.expirationTime === NoWork && (alternate === null || alternate.expirationTime === NoWork)) {
-        // The queue is currently empty, which means we can eagerly compute the
-        // next state before entering the render phase. If the new state is the
-        // same as the current state, we may be able to bail out entirely.
-        var lastRenderedReducer = queue.lastRenderedReducer;
-
-        if (lastRenderedReducer !== null) {
-          var prevDispatcher;
-
-          {
-            prevDispatcher = ReactCurrentDispatcher.current;
-            ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
-          }
-
-          try {
-            var currentState = queue.lastRenderedState;
-            var eagerState = lastRenderedReducer(currentState, action); // Stash the eagerly computed state, and the reducer used to compute
-            // it, on the update object. If the reducer hasn't changed by the
-            // time we enter the render phase, then the eager state can be used
-            // without calling the reducer again.
-
-            update.eagerReducer = lastRenderedReducer;
-            update.eagerState = eagerState;
-
-            if (objectIs(eagerState, currentState)) {
-              // Fast path. We can bail out without scheduling React to re-render.
-              // It's still possible that we'll need to rebase this update later,
-              // if the component re-renders for a different reason and by that
-              // time the reducer has changed.
-              return;
-            }
-          } catch (error) {// Suppress the error. It will throw again in the render phase.
-          } finally {
-            {
-              ReactCurrentDispatcher.current = prevDispatcher;
-            }
-          }
-        }
-      }
-
-      {
-        // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-        if ('undefined' !== typeof jest) {
-          warnIfNotScopedWithMatchingAct(fiber);
-          warnIfNotCurrentlyActingUpdatesInDev(fiber);
-        }
-      }
-
-      scheduleWork(fiber, expirationTime);
-    }
-  }
-
-  var ContextOnlyDispatcher = {
-    readContext: readContext,
-    useCallback: throwInvalidHookError,
-    useContext: throwInvalidHookError,
-    useEffect: throwInvalidHookError,
-    useImperativeHandle: throwInvalidHookError,
-    useLayoutEffect: throwInvalidHookError,
-    useMemo: throwInvalidHookError,
-    useReducer: throwInvalidHookError,
-    useRef: throwInvalidHookError,
-    useState: throwInvalidHookError,
-    useDebugValue: throwInvalidHookError,
-    useResponder: throwInvalidHookError,
-    useDeferredValue: throwInvalidHookError,
-    useTransition: throwInvalidHookError
-  };
-  var HooksDispatcherOnMountInDEV = null;
-  var HooksDispatcherOnMountWithHookTypesInDEV = null;
-  var HooksDispatcherOnUpdateInDEV = null;
-  var HooksDispatcherOnRerenderInDEV = null;
-  var InvalidNestedHooksDispatcherOnMountInDEV = null;
-  var InvalidNestedHooksDispatcherOnUpdateInDEV = null;
-  var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
-
-  {
-    var warnInvalidContextAccess = function () {
-      error('Context can only be read while React is rendering. ' + 'In classes, you can read it in the render method or getDerivedStateFromProps. ' + 'In function components, you can read it directly in the function body, but not ' + 'inside Hooks like useReducer() or useMemo().');
-    };
-
-    var warnInvalidHookAccess = function () {
-      error('Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' + 'You can only call Hooks at the top level of your React function. ' + 'For more information, see ' + 'https://fb.me/rules-of-hooks');
-    };
-
-    HooksDispatcherOnMountInDEV = {
-      readContext: function (context, observedBits) {
-        return readContext(context, observedBits);
-      },
-      useCallback: function (callback, deps) {
-        currentHookNameInDev = 'useCallback';
-        mountHookTypesDev();
-        checkDepsAreArrayDev(deps);
-        return mountCallback(callback, deps);
-      },
-      useContext: function (context, observedBits) {
-        currentHookNameInDev = 'useContext';
-        mountHookTypesDev();
-        return readContext(context, observedBits);
-      },
-      useEffect: function (create, deps) {
-        currentHookNameInDev = 'useEffect';
-        mountHookTypesDev();
-        checkDepsAreArrayDev(deps);
-        return mountEffect(create, deps);
-      },
-      useImperativeHandle: function (ref, create, deps) {
-        currentHookNameInDev = 'useImperativeHandle';
-        mountHookTypesDev();
-        checkDepsAreArrayDev(deps);
-        return mountImperativeHandle(ref, create, deps);
-      },
-      useLayoutEffect: function (create, deps) {
-        currentHookNameInDev = 'useLayoutEffect';
-        mountHookTypesDev();
-        checkDepsAreArrayDev(deps);
-        return mountLayoutEffect(create, deps);
-      },
-      useMemo: function (create, deps) {
-        currentHookNameInDev = 'useMemo';
-        mountHookTypesDev();
-        checkDepsAreArrayDev(deps);
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;
-
-        try {
-          return mountMemo(create, deps);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useReducer: function (reducer, initialArg, init) {
-        currentHookNameInDev = 'useReducer';
-        mountHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;
-
-        try {
-          return mountReducer(reducer, initialArg, init);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useRef: function (initialValue) {
-        currentHookNameInDev = 'useRef';
-        mountHookTypesDev();
-        return mountRef(initialValue);
-      },
-      useState: function (initialState) {
-        currentHookNameInDev = 'useState';
-        mountHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;
-
-        try {
-          return mountState(initialState);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useDebugValue: function (value, formatterFn) {
-        currentHookNameInDev = 'useDebugValue';
-        mountHookTypesDev();
-        return mountDebugValue();
-      },
-      useResponder: function (responder, props) {
-        currentHookNameInDev = 'useResponder';
-        mountHookTypesDev();
-        return createDeprecatedResponderListener(responder, props);
-      },
-      useDeferredValue: function (value, config) {
-        currentHookNameInDev = 'useDeferredValue';
-        mountHookTypesDev();
-        return mountDeferredValue(value, config);
-      },
-      useTransition: function (config) {
-        currentHookNameInDev = 'useTransition';
-        mountHookTypesDev();
-        return mountTransition(config);
-      }
-    };
-    HooksDispatcherOnMountWithHookTypesInDEV = {
-      readContext: function (context, observedBits) {
-        return readContext(context, observedBits);
-      },
-      useCallback: function (callback, deps) {
-        currentHookNameInDev = 'useCallback';
-        updateHookTypesDev();
-        return mountCallback(callback, deps);
-      },
-      useContext: function (context, observedBits) {
-        currentHookNameInDev = 'useContext';
-        updateHookTypesDev();
-        return readContext(context, observedBits);
-      },
-      useEffect: function (create, deps) {
-        currentHookNameInDev = 'useEffect';
-        updateHookTypesDev();
-        return mountEffect(create, deps);
-      },
-      useImperativeHandle: function (ref, create, deps) {
-        currentHookNameInDev = 'useImperativeHandle';
-        updateHookTypesDev();
-        return mountImperativeHandle(ref, create, deps);
-      },
-      useLayoutEffect: function (create, deps) {
-        currentHookNameInDev = 'useLayoutEffect';
-        updateHookTypesDev();
-        return mountLayoutEffect(create, deps);
-      },
-      useMemo: function (create, deps) {
-        currentHookNameInDev = 'useMemo';
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;
-
-        try {
-          return mountMemo(create, deps);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useReducer: function (reducer, initialArg, init) {
-        currentHookNameInDev = 'useReducer';
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;
-
-        try {
-          return mountReducer(reducer, initialArg, init);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useRef: function (initialValue) {
-        currentHookNameInDev = 'useRef';
-        updateHookTypesDev();
-        return mountRef(initialValue);
-      },
-      useState: function (initialState) {
-        currentHookNameInDev = 'useState';
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;
-
-        try {
-          return mountState(initialState);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useDebugValue: function (value, formatterFn) {
-        currentHookNameInDev = 'useDebugValue';
-        updateHookTypesDev();
-        return mountDebugValue();
-      },
-      useResponder: function (responder, props) {
-        currentHookNameInDev = 'useResponder';
-        updateHookTypesDev();
-        return createDeprecatedResponderListener(responder, props);
-      },
-      useDeferredValue: function (value, config) {
-        currentHookNameInDev = 'useDeferredValue';
-        updateHookTypesDev();
-        return mountDeferredValue(value, config);
-      },
-      useTransition: function (config) {
-        currentHookNameInDev = 'useTransition';
-        updateHookTypesDev();
-        return mountTransition(config);
-      }
-    };
-    HooksDispatcherOnUpdateInDEV = {
-      readContext: function (context, observedBits) {
-        return readContext(context, observedBits);
-      },
-      useCallback: function (callback, deps) {
-        currentHookNameInDev = 'useCallback';
-        updateHookTypesDev();
-        return updateCallback(callback, deps);
-      },
-      useContext: function (context, observedBits) {
-        currentHookNameInDev = 'useContext';
-        updateHookTypesDev();
-        return readContext(context, observedBits);
-      },
-      useEffect: function (create, deps) {
-        currentHookNameInDev = 'useEffect';
-        updateHookTypesDev();
-        return updateEffect(create, deps);
-      },
-      useImperativeHandle: function (ref, create, deps) {
-        currentHookNameInDev = 'useImperativeHandle';
-        updateHookTypesDev();
-        return updateImperativeHandle(ref, create, deps);
-      },
-      useLayoutEffect: function (create, deps) {
-        currentHookNameInDev = 'useLayoutEffect';
-        updateHookTypesDev();
-        return updateLayoutEffect(create, deps);
-      },
-      useMemo: function (create, deps) {
-        currentHookNameInDev = 'useMemo';
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
-
-        try {
-          return updateMemo(create, deps);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useReducer: function (reducer, initialArg, init) {
-        currentHookNameInDev = 'useReducer';
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
-
-        try {
-          return updateReducer(reducer, initialArg, init);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useRef: function (initialValue) {
-        currentHookNameInDev = 'useRef';
-        updateHookTypesDev();
-        return updateRef();
-      },
-      useState: function (initialState) {
-        currentHookNameInDev = 'useState';
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
-
-        try {
-          return updateState(initialState);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useDebugValue: function (value, formatterFn) {
-        currentHookNameInDev = 'useDebugValue';
-        updateHookTypesDev();
-        return updateDebugValue();
-      },
-      useResponder: function (responder, props) {
-        currentHookNameInDev = 'useResponder';
-        updateHookTypesDev();
-        return createDeprecatedResponderListener(responder, props);
-      },
-      useDeferredValue: function (value, config) {
-        currentHookNameInDev = 'useDeferredValue';
-        updateHookTypesDev();
-        return updateDeferredValue(value, config);
-      },
-      useTransition: function (config) {
-        currentHookNameInDev = 'useTransition';
-        updateHookTypesDev();
-        return updateTransition(config);
-      }
-    };
-    HooksDispatcherOnRerenderInDEV = {
-      readContext: function (context, observedBits) {
-        return readContext(context, observedBits);
-      },
-      useCallback: function (callback, deps) {
-        currentHookNameInDev = 'useCallback';
-        updateHookTypesDev();
-        return updateCallback(callback, deps);
-      },
-      useContext: function (context, observedBits) {
-        currentHookNameInDev = 'useContext';
-        updateHookTypesDev();
-        return readContext(context, observedBits);
-      },
-      useEffect: function (create, deps) {
-        currentHookNameInDev = 'useEffect';
-        updateHookTypesDev();
-        return updateEffect(create, deps);
-      },
-      useImperativeHandle: function (ref, create, deps) {
-        currentHookNameInDev = 'useImperativeHandle';
-        updateHookTypesDev();
-        return updateImperativeHandle(ref, create, deps);
-      },
-      useLayoutEffect: function (create, deps) {
-        currentHookNameInDev = 'useLayoutEffect';
-        updateHookTypesDev();
-        return updateLayoutEffect(create, deps);
-      },
-      useMemo: function (create, deps) {
-        currentHookNameInDev = 'useMemo';
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnRerenderInDEV;
-
-        try {
-          return updateMemo(create, deps);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useReducer: function (reducer, initialArg, init) {
-        currentHookNameInDev = 'useReducer';
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnRerenderInDEV;
-
-        try {
-          return rerenderReducer(reducer, initialArg, init);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useRef: function (initialValue) {
-        currentHookNameInDev = 'useRef';
-        updateHookTypesDev();
-        return updateRef();
-      },
-      useState: function (initialState) {
-        currentHookNameInDev = 'useState';
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnRerenderInDEV;
-
-        try {
-          return rerenderState(initialState);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useDebugValue: function (value, formatterFn) {
-        currentHookNameInDev = 'useDebugValue';
-        updateHookTypesDev();
-        return updateDebugValue();
-      },
-      useResponder: function (responder, props) {
-        currentHookNameInDev = 'useResponder';
-        updateHookTypesDev();
-        return createDeprecatedResponderListener(responder, props);
-      },
-      useDeferredValue: function (value, config) {
-        currentHookNameInDev = 'useDeferredValue';
-        updateHookTypesDev();
-        return rerenderDeferredValue(value, config);
-      },
-      useTransition: function (config) {
-        currentHookNameInDev = 'useTransition';
-        updateHookTypesDev();
-        return rerenderTransition(config);
-      }
-    };
-    InvalidNestedHooksDispatcherOnMountInDEV = {
-      readContext: function (context, observedBits) {
-        warnInvalidContextAccess();
-        return readContext(context, observedBits);
-      },
-      useCallback: function (callback, deps) {
-        currentHookNameInDev = 'useCallback';
-        warnInvalidHookAccess();
-        mountHookTypesDev();
-        return mountCallback(callback, deps);
-      },
-      useContext: function (context, observedBits) {
-        currentHookNameInDev = 'useContext';
-        warnInvalidHookAccess();
-        mountHookTypesDev();
-        return readContext(context, observedBits);
-      },
-      useEffect: function (create, deps) {
-        currentHookNameInDev = 'useEffect';
-        warnInvalidHookAccess();
-        mountHookTypesDev();
-        return mountEffect(create, deps);
-      },
-      useImperativeHandle: function (ref, create, deps) {
-        currentHookNameInDev = 'useImperativeHandle';
-        warnInvalidHookAccess();
-        mountHookTypesDev();
-        return mountImperativeHandle(ref, create, deps);
-      },
-      useLayoutEffect: function (create, deps) {
-        currentHookNameInDev = 'useLayoutEffect';
-        warnInvalidHookAccess();
-        mountHookTypesDev();
-        return mountLayoutEffect(create, deps);
-      },
-      useMemo: function (create, deps) {
-        currentHookNameInDev = 'useMemo';
-        warnInvalidHookAccess();
-        mountHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;
-
-        try {
-          return mountMemo(create, deps);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useReducer: function (reducer, initialArg, init) {
-        currentHookNameInDev = 'useReducer';
-        warnInvalidHookAccess();
-        mountHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;
-
-        try {
-          return mountReducer(reducer, initialArg, init);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useRef: function (initialValue) {
-        currentHookNameInDev = 'useRef';
-        warnInvalidHookAccess();
-        mountHookTypesDev();
-        return mountRef(initialValue);
-      },
-      useState: function (initialState) {
-        currentHookNameInDev = 'useState';
-        warnInvalidHookAccess();
-        mountHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;
-
-        try {
-          return mountState(initialState);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useDebugValue: function (value, formatterFn) {
-        currentHookNameInDev = 'useDebugValue';
-        warnInvalidHookAccess();
-        mountHookTypesDev();
-        return mountDebugValue();
-      },
-      useResponder: function (responder, props) {
-        currentHookNameInDev = 'useResponder';
-        warnInvalidHookAccess();
-        mountHookTypesDev();
-        return createDeprecatedResponderListener(responder, props);
-      },
-      useDeferredValue: function (value, config) {
-        currentHookNameInDev = 'useDeferredValue';
-        warnInvalidHookAccess();
-        mountHookTypesDev();
-        return mountDeferredValue(value, config);
-      },
-      useTransition: function (config) {
-        currentHookNameInDev = 'useTransition';
-        warnInvalidHookAccess();
-        mountHookTypesDev();
-        return mountTransition(config);
-      }
-    };
-    InvalidNestedHooksDispatcherOnUpdateInDEV = {
-      readContext: function (context, observedBits) {
-        warnInvalidContextAccess();
-        return readContext(context, observedBits);
-      },
-      useCallback: function (callback, deps) {
-        currentHookNameInDev = 'useCallback';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return updateCallback(callback, deps);
-      },
-      useContext: function (context, observedBits) {
-        currentHookNameInDev = 'useContext';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return readContext(context, observedBits);
-      },
-      useEffect: function (create, deps) {
-        currentHookNameInDev = 'useEffect';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return updateEffect(create, deps);
-      },
-      useImperativeHandle: function (ref, create, deps) {
-        currentHookNameInDev = 'useImperativeHandle';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return updateImperativeHandle(ref, create, deps);
-      },
-      useLayoutEffect: function (create, deps) {
-        currentHookNameInDev = 'useLayoutEffect';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return updateLayoutEffect(create, deps);
-      },
-      useMemo: function (create, deps) {
-        currentHookNameInDev = 'useMemo';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
-
-        try {
-          return updateMemo(create, deps);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useReducer: function (reducer, initialArg, init) {
-        currentHookNameInDev = 'useReducer';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
-
-        try {
-          return updateReducer(reducer, initialArg, init);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useRef: function (initialValue) {
-        currentHookNameInDev = 'useRef';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return updateRef();
-      },
-      useState: function (initialState) {
-        currentHookNameInDev = 'useState';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
-
-        try {
-          return updateState(initialState);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useDebugValue: function (value, formatterFn) {
-        currentHookNameInDev = 'useDebugValue';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return updateDebugValue();
-      },
-      useResponder: function (responder, props) {
-        currentHookNameInDev = 'useResponder';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return createDeprecatedResponderListener(responder, props);
-      },
-      useDeferredValue: function (value, config) {
-        currentHookNameInDev = 'useDeferredValue';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return updateDeferredValue(value, config);
-      },
-      useTransition: function (config) {
-        currentHookNameInDev = 'useTransition';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return updateTransition(config);
-      }
-    };
-    InvalidNestedHooksDispatcherOnRerenderInDEV = {
-      readContext: function (context, observedBits) {
-        warnInvalidContextAccess();
-        return readContext(context, observedBits);
-      },
-      useCallback: function (callback, deps) {
-        currentHookNameInDev = 'useCallback';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return updateCallback(callback, deps);
-      },
-      useContext: function (context, observedBits) {
-        currentHookNameInDev = 'useContext';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return readContext(context, observedBits);
-      },
-      useEffect: function (create, deps) {
-        currentHookNameInDev = 'useEffect';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return updateEffect(create, deps);
-      },
-      useImperativeHandle: function (ref, create, deps) {
-        currentHookNameInDev = 'useImperativeHandle';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return updateImperativeHandle(ref, create, deps);
-      },
-      useLayoutEffect: function (create, deps) {
-        currentHookNameInDev = 'useLayoutEffect';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return updateLayoutEffect(create, deps);
-      },
-      useMemo: function (create, deps) {
-        currentHookNameInDev = 'useMemo';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
-
-        try {
-          return updateMemo(create, deps);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useReducer: function (reducer, initialArg, init) {
-        currentHookNameInDev = 'useReducer';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
-
-        try {
-          return rerenderReducer(reducer, initialArg, init);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useRef: function (initialValue) {
-        currentHookNameInDev = 'useRef';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return updateRef();
-      },
-      useState: function (initialState) {
-        currentHookNameInDev = 'useState';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        var prevDispatcher = ReactCurrentDispatcher.current;
-        ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
-
-        try {
-          return rerenderState(initialState);
-        } finally {
-          ReactCurrentDispatcher.current = prevDispatcher;
-        }
-      },
-      useDebugValue: function (value, formatterFn) {
-        currentHookNameInDev = 'useDebugValue';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return updateDebugValue();
-      },
-      useResponder: function (responder, props) {
-        currentHookNameInDev = 'useResponder';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return createDeprecatedResponderListener(responder, props);
-      },
-      useDeferredValue: function (value, config) {
-        currentHookNameInDev = 'useDeferredValue';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return rerenderDeferredValue(value, config);
-      },
-      useTransition: function (config) {
-        currentHookNameInDev = 'useTransition';
-        warnInvalidHookAccess();
-        updateHookTypesDev();
-        return rerenderTransition(config);
-      }
-    };
-  }
-
-  var now$1 = unstable_now;
-  var commitTime = 0;
-  var profilerStartTime = -1;
-
-  function getCommitTime() {
-    return commitTime;
-  }
-
-  function recordCommitTime() {
-
-    commitTime = now$1();
-  }
-
-  function startProfilerTimer(fiber) {
-
-    profilerStartTime = now$1();
-
-    if (fiber.actualStartTime < 0) {
-      fiber.actualStartTime = now$1();
-    }
-  }
-
-  function stopProfilerTimerIfRunning(fiber) {
-
-    profilerStartTime = -1;
-  }
-
-  function stopProfilerTimerIfRunningAndRecordDelta(fiber, overrideBaseTime) {
-
-    if (profilerStartTime >= 0) {
-      var elapsedTime = now$1() - profilerStartTime;
-      fiber.actualDuration += elapsedTime;
-
-      if (overrideBaseTime) {
-        fiber.selfBaseDuration = elapsedTime;
-      }
-
-      profilerStartTime = -1;
-    }
-  }
-
   // This may have been an insertion or a hydration.
 
   var hydrationParentFiber = null;
@@ -16587,7 +14487,7 @@
     var childToDelete = createFiberFromHostInstanceForDeletion();
     childToDelete.stateNode = instance;
     childToDelete.return = returnFiber;
-    childToDelete.effectTag = Deletion; // This might seem like it belongs on progressedFirstDeletion. However,
+    childToDelete.flags = Deletion; // This might seem like it belongs on progressedFirstDeletion. However,
     // these children are not part of the reconciliation list of children.
     // Even if we abort and rereconcile the children, that will try to hydrate
     // again and the nodes are still in the host tree so these will be
@@ -16602,7 +14502,7 @@
   }
 
   function insertNonHydratedInstance(returnFiber, fiber) {
-    fiber.effectTag = fiber.effectTag & ~Hydrating | Placement;
+    fiber.flags = fiber.flags & ~Hydrating | Placement;
 
     {
       switch (returnFiber.tag) {
@@ -16866,6 +14766,2229 @@
     isHydrating = false;
   }
 
+  function getIsHydrating() {
+    return isHydrating;
+  }
+
+  // and should be reset before starting a new render.
+  // This tracks which mutable sources need to be reset after a render.
+
+  var workInProgressSources = [];
+  var rendererSigil$1;
+
+  {
+    // Used to detect multiple renderers using the same mutable source.
+    rendererSigil$1 = {};
+  }
+
+  function markSourceAsDirty(mutableSource) {
+    workInProgressSources.push(mutableSource);
+  }
+  function resetWorkInProgressVersions() {
+    for (var i = 0; i < workInProgressSources.length; i++) {
+      var mutableSource = workInProgressSources[i];
+
+      {
+        mutableSource._workInProgressVersionPrimary = null;
+      }
+    }
+
+    workInProgressSources.length = 0;
+  }
+  function getWorkInProgressVersion(mutableSource) {
+    {
+      return mutableSource._workInProgressVersionPrimary;
+    }
+  }
+  function setWorkInProgressVersion(mutableSource, version) {
+    {
+      mutableSource._workInProgressVersionPrimary = version;
+    }
+
+    workInProgressSources.push(mutableSource);
+  }
+  function warnAboutMultipleRenderersDEV(mutableSource) {
+    {
+      {
+        if (mutableSource._currentPrimaryRenderer == null) {
+          mutableSource._currentPrimaryRenderer = rendererSigil$1;
+        } else if (mutableSource._currentPrimaryRenderer !== rendererSigil$1) {
+          error('Detected multiple renderers concurrently rendering the ' + 'same mutable source. This is currently unsupported.');
+        }
+      }
+    }
+  } // Eager reads the version of a mutable source and stores it on the root.
+
+  var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher,
+      ReactCurrentBatchConfig$1 = ReactSharedInternals.ReactCurrentBatchConfig;
+  var didWarnAboutMismatchedHooksForComponent;
+  var didWarnAboutUseOpaqueIdentifier;
+
+  {
+    didWarnAboutUseOpaqueIdentifier = {};
+    didWarnAboutMismatchedHooksForComponent = new Set();
+  }
+
+  // These are set right before calling the component.
+  var renderLanes = NoLanes; // The work-in-progress fiber. I've named it differently to distinguish it from
+  // the work-in-progress hook.
+
+  var currentlyRenderingFiber$1 = null; // Hooks are stored as a linked list on the fiber's memoizedState field. The
+  // current hook list is the list that belongs to the current fiber. The
+  // work-in-progress hook list is a new list that will be added to the
+  // work-in-progress fiber.
+
+  var currentHook = null;
+  var workInProgressHook = null; // Whether an update was scheduled at any point during the render phase. This
+  // does not get reset if we do another render pass; only when we're completely
+  // finished evaluating this component. This is an optimization so we know
+  // whether we need to clear render phase updates after a throw.
+
+  var didScheduleRenderPhaseUpdate = false; // Where an update was scheduled only during the current render pass. This
+  // gets reset after each attempt.
+  // TODO: Maybe there's some way to consolidate this with
+  // `didScheduleRenderPhaseUpdate`. Or with `numberOfReRenders`.
+
+  var didScheduleRenderPhaseUpdateDuringThisPass = false;
+  var RE_RENDER_LIMIT = 25; // In DEV, this is the name of the currently executing primitive hook
+
+  var currentHookNameInDev = null; // In DEV, this list ensures that hooks are called in the same order between renders.
+  // The list stores the order of hooks used during the initial render (mount).
+  // Subsequent renders (updates) reference this list.
+
+  var hookTypesDev = null;
+  var hookTypesUpdateIndexDev = -1; // In DEV, this tracks whether currently rendering component needs to ignore
+  // the dependencies for Hooks that need them (e.g. useEffect or useMemo).
+  // When true, such Hooks will always be "remounted". Only used during hot reload.
+
+  var ignorePreviousDependencies = false;
+
+  function mountHookTypesDev() {
+    {
+      var hookName = currentHookNameInDev;
+
+      if (hookTypesDev === null) {
+        hookTypesDev = [hookName];
+      } else {
+        hookTypesDev.push(hookName);
+      }
+    }
+  }
+
+  function updateHookTypesDev() {
+    {
+      var hookName = currentHookNameInDev;
+
+      if (hookTypesDev !== null) {
+        hookTypesUpdateIndexDev++;
+
+        if (hookTypesDev[hookTypesUpdateIndexDev] !== hookName) {
+          warnOnHookMismatchInDev(hookName);
+        }
+      }
+    }
+  }
+
+  function checkDepsAreArrayDev(deps) {
+    {
+      if (deps !== undefined && deps !== null && !Array.isArray(deps)) {
+        // Verify deps, but only on mount to avoid extra checks.
+        // It's unlikely their type would change as usually you define them inline.
+        error('%s received a final argument that is not an array (instead, received `%s`). When ' + 'specified, the final argument must be an array.', currentHookNameInDev, typeof deps);
+      }
+    }
+  }
+
+  function warnOnHookMismatchInDev(currentHookName) {
+    {
+      var componentName = getComponentName(currentlyRenderingFiber$1.type);
+
+      if (!didWarnAboutMismatchedHooksForComponent.has(componentName)) {
+        didWarnAboutMismatchedHooksForComponent.add(componentName);
+
+        if (hookTypesDev !== null) {
+          var table = '';
+          var secondColumnStart = 30;
+
+          for (var i = 0; i <= hookTypesUpdateIndexDev; i++) {
+            var oldHookName = hookTypesDev[i];
+            var newHookName = i === hookTypesUpdateIndexDev ? currentHookName : oldHookName;
+            var row = i + 1 + ". " + oldHookName; // Extra space so second column lines up
+            // lol @ IE not supporting String#repeat
+
+            while (row.length < secondColumnStart) {
+              row += ' ';
+            }
+
+            row += newHookName + '\n';
+            table += row;
+          }
+
+          error('React has detected a change in the order of Hooks called by %s. ' + 'This will lead to bugs and errors if not fixed. ' + 'For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks\n\n' + '   Previous render            Next render\n' + '   ------------------------------------------------------\n' + '%s' + '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n', componentName, table);
+        }
+      }
+    }
+  }
+
+  function throwInvalidHookError() {
+    {
+      {
+        throw Error( "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem." );
+      }
+    }
+  }
+
+  function areHookInputsEqual(nextDeps, prevDeps) {
+    {
+      if (ignorePreviousDependencies) {
+        // Only true when this component is being hot reloaded.
+        return false;
+      }
+    }
+
+    if (prevDeps === null) {
+      {
+        error('%s received a final argument during this render, but not during ' + 'the previous render. Even though the final argument is optional, ' + 'its type cannot change between renders.', currentHookNameInDev);
+      }
+
+      return false;
+    }
+
+    {
+      // Don't bother comparing lengths in prod because these arrays should be
+      // passed inline.
+      if (nextDeps.length !== prevDeps.length) {
+        error('The final argument passed to %s changed size between renders. The ' + 'order and size of this array must remain constant.\n\n' + 'Previous: %s\n' + 'Incoming: %s', currentHookNameInDev, "[" + prevDeps.join(', ') + "]", "[" + nextDeps.join(', ') + "]");
+      }
+    }
+
+    for (var i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
+      if (objectIs(nextDeps[i], prevDeps[i])) {
+        continue;
+      }
+
+      return false;
+    }
+
+    return true;
+  }
+
+  function renderWithHooks(current, workInProgress, Component, props, secondArg, nextRenderLanes) {
+    renderLanes = nextRenderLanes;
+    currentlyRenderingFiber$1 = workInProgress;
+
+    {
+      hookTypesDev = current !== null ? current._debugHookTypes : null;
+      hookTypesUpdateIndexDev = -1; // Used for hot reloading:
+
+      ignorePreviousDependencies = current !== null && current.type !== workInProgress.type;
+    }
+
+    workInProgress.memoizedState = null;
+    workInProgress.updateQueue = null;
+    workInProgress.lanes = NoLanes; // The following should have already been reset
+    // currentHook = null;
+    // workInProgressHook = null;
+    // didScheduleRenderPhaseUpdate = false;
+    // TODO Warn if no hooks are used at all during mount, then some are used during update.
+    // Currently we will identify the update render as a mount because memoizedState === null.
+    // This is tricky because it's valid for certain types of components (e.g. React.lazy)
+    // Using memoizedState to differentiate between mount/update only works if at least one stateful hook is used.
+    // Non-stateful hooks (e.g. context) don't get added to memoizedState,
+    // so memoizedState would be null during updates and mounts.
+
+    {
+      if (current !== null && current.memoizedState !== null) {
+        ReactCurrentDispatcher$1.current = HooksDispatcherOnUpdateInDEV;
+      } else if (hookTypesDev !== null) {
+        // This dispatcher handles an edge case where a component is updating,
+        // but no stateful hooks have been used.
+        // We want to match the production code behavior (which will use HooksDispatcherOnMount),
+        // but with the extra DEV validation to ensure hooks ordering hasn't changed.
+        // This dispatcher does that.
+        ReactCurrentDispatcher$1.current = HooksDispatcherOnMountWithHookTypesInDEV;
+      } else {
+        ReactCurrentDispatcher$1.current = HooksDispatcherOnMountInDEV;
+      }
+    }
+
+    var children = Component(props, secondArg); // Check if there was a render phase update
+
+    if (didScheduleRenderPhaseUpdateDuringThisPass) {
+      // Keep rendering in a loop for as long as render phase updates continue to
+      // be scheduled. Use a counter to prevent infinite loops.
+      var numberOfReRenders = 0;
+
+      do {
+        didScheduleRenderPhaseUpdateDuringThisPass = false;
+
+        if (!(numberOfReRenders < RE_RENDER_LIMIT)) {
+          {
+            throw Error( "Too many re-renders. React limits the number of renders to prevent an infinite loop." );
+          }
+        }
+
+        numberOfReRenders += 1;
+
+        {
+          // Even when hot reloading, allow dependencies to stabilize
+          // after first render to prevent infinite render phase updates.
+          ignorePreviousDependencies = false;
+        } // Start over from the beginning of the list
+
+
+        currentHook = null;
+        workInProgressHook = null;
+        workInProgress.updateQueue = null;
+
+        {
+          // Also validate hook order for cascading updates.
+          hookTypesUpdateIndexDev = -1;
+        }
+
+        ReactCurrentDispatcher$1.current =  HooksDispatcherOnRerenderInDEV ;
+        children = Component(props, secondArg);
+      } while (didScheduleRenderPhaseUpdateDuringThisPass);
+    } // We can assume the previous dispatcher is always this one, since we set it
+    // at the beginning of the render phase and there's no re-entrancy.
+
+
+    ReactCurrentDispatcher$1.current = ContextOnlyDispatcher;
+
+    {
+      workInProgress._debugHookTypes = hookTypesDev;
+    } // This check uses currentHook so that it works the same in DEV and prod bundles.
+    // hookTypesDev could catch more cases (e.g. context) but only in DEV bundles.
+
+
+    var didRenderTooFewHooks = currentHook !== null && currentHook.next !== null;
+    renderLanes = NoLanes;
+    currentlyRenderingFiber$1 = null;
+    currentHook = null;
+    workInProgressHook = null;
+
+    {
+      currentHookNameInDev = null;
+      hookTypesDev = null;
+      hookTypesUpdateIndexDev = -1;
+    }
+
+    didScheduleRenderPhaseUpdate = false;
+
+    if (!!didRenderTooFewHooks) {
+      {
+        throw Error( "Rendered fewer hooks than expected. This may be caused by an accidental early return statement." );
+      }
+    }
+
+    return children;
+  }
+  function bailoutHooks(current, workInProgress, lanes) {
+    workInProgress.updateQueue = current.updateQueue;
+    workInProgress.flags &= ~(Passive | Update);
+    current.lanes = removeLanes(current.lanes, lanes);
+  }
+  function resetHooksAfterThrow() {
+    // We can assume the previous dispatcher is always this one, since we set it
+    // at the beginning of the render phase and there's no re-entrancy.
+    ReactCurrentDispatcher$1.current = ContextOnlyDispatcher;
+
+    if (didScheduleRenderPhaseUpdate) {
+      // There were render phase updates. These are only valid for this render
+      // phase, which we are now aborting. Remove the updates from the queues so
+      // they do not persist to the next render. Do not remove updates from hooks
+      // that weren't processed.
+      //
+      // Only reset the updates from the queue if it has a clone. If it does
+      // not have a clone, that means it wasn't processed, and the updates were
+      // scheduled before we entered the render phase.
+      var hook = currentlyRenderingFiber$1.memoizedState;
+
+      while (hook !== null) {
+        var queue = hook.queue;
+
+        if (queue !== null) {
+          queue.pending = null;
+        }
+
+        hook = hook.next;
+      }
+
+      didScheduleRenderPhaseUpdate = false;
+    }
+
+    renderLanes = NoLanes;
+    currentlyRenderingFiber$1 = null;
+    currentHook = null;
+    workInProgressHook = null;
+
+    {
+      hookTypesDev = null;
+      hookTypesUpdateIndexDev = -1;
+      currentHookNameInDev = null;
+      isUpdatingOpaqueValueInRenderPhase = false;
+    }
+
+    didScheduleRenderPhaseUpdateDuringThisPass = false;
+  }
+
+  function mountWorkInProgressHook() {
+    var hook = {
+      memoizedState: null,
+      baseState: null,
+      baseQueue: null,
+      queue: null,
+      next: null
+    };
+
+    if (workInProgressHook === null) {
+      // This is the first hook in the list
+      currentlyRenderingFiber$1.memoizedState = workInProgressHook = hook;
+    } else {
+      // Append to the end of the list
+      workInProgressHook = workInProgressHook.next = hook;
+    }
+
+    return workInProgressHook;
+  }
+
+  function updateWorkInProgressHook() {
+    // This function is used both for updates and for re-renders triggered by a
+    // render phase update. It assumes there is either a current hook we can
+    // clone, or a work-in-progress hook from a previous render pass that we can
+    // use as a base. When we reach the end of the base list, we must switch to
+    // the dispatcher used for mounts.
+    var nextCurrentHook;
+
+    if (currentHook === null) {
+      var current = currentlyRenderingFiber$1.alternate;
+
+      if (current !== null) {
+        nextCurrentHook = current.memoizedState;
+      } else {
+        nextCurrentHook = null;
+      }
+    } else {
+      nextCurrentHook = currentHook.next;
+    }
+
+    var nextWorkInProgressHook;
+
+    if (workInProgressHook === null) {
+      nextWorkInProgressHook = currentlyRenderingFiber$1.memoizedState;
+    } else {
+      nextWorkInProgressHook = workInProgressHook.next;
+    }
+
+    if (nextWorkInProgressHook !== null) {
+      // There's already a work-in-progress. Reuse it.
+      workInProgressHook = nextWorkInProgressHook;
+      nextWorkInProgressHook = workInProgressHook.next;
+      currentHook = nextCurrentHook;
+    } else {
+      // Clone from the current hook.
+      if (!(nextCurrentHook !== null)) {
+        {
+          throw Error( "Rendered more hooks than during the previous render." );
+        }
+      }
+
+      currentHook = nextCurrentHook;
+      var newHook = {
+        memoizedState: currentHook.memoizedState,
+        baseState: currentHook.baseState,
+        baseQueue: currentHook.baseQueue,
+        queue: currentHook.queue,
+        next: null
+      };
+
+      if (workInProgressHook === null) {
+        // This is the first hook in the list.
+        currentlyRenderingFiber$1.memoizedState = workInProgressHook = newHook;
+      } else {
+        // Append to the end of the list.
+        workInProgressHook = workInProgressHook.next = newHook;
+      }
+    }
+
+    return workInProgressHook;
+  }
+
+  function createFunctionComponentUpdateQueue() {
+    return {
+      lastEffect: null
+    };
+  }
+
+  function basicStateReducer(state, action) {
+    // $FlowFixMe: Flow doesn't like mixed types
+    return typeof action === 'function' ? action(state) : action;
+  }
+
+  function mountReducer(reducer, initialArg, init) {
+    var hook = mountWorkInProgressHook();
+    var initialState;
+
+    if (init !== undefined) {
+      initialState = init(initialArg);
+    } else {
+      initialState = initialArg;
+    }
+
+    hook.memoizedState = hook.baseState = initialState;
+    var queue = hook.queue = {
+      pending: null,
+      dispatch: null,
+      lastRenderedReducer: reducer,
+      lastRenderedState: initialState
+    };
+    var dispatch = queue.dispatch = dispatchAction.bind(null, currentlyRenderingFiber$1, queue);
+    return [hook.memoizedState, dispatch];
+  }
+
+  function updateReducer(reducer, initialArg, init) {
+    var hook = updateWorkInProgressHook();
+    var queue = hook.queue;
+
+    if (!(queue !== null)) {
+      {
+        throw Error( "Should have a queue. This is likely a bug in React. Please file an issue." );
+      }
+    }
+
+    queue.lastRenderedReducer = reducer;
+    var current = currentHook; // The last rebase update that is NOT part of the base state.
+
+    var baseQueue = current.baseQueue; // The last pending update that hasn't been processed yet.
+
+    var pendingQueue = queue.pending;
+
+    if (pendingQueue !== null) {
+      // We have new updates that haven't been processed yet.
+      // We'll add them to the base queue.
+      if (baseQueue !== null) {
+        // Merge the pending queue and the base queue.
+        var baseFirst = baseQueue.next;
+        var pendingFirst = pendingQueue.next;
+        baseQueue.next = pendingFirst;
+        pendingQueue.next = baseFirst;
+      }
+
+      {
+        if (current.baseQueue !== baseQueue) {
+          // Internal invariant that should never happen, but feasibly could in
+          // the future if we implement resuming, or some form of that.
+          error('Internal error: Expected work-in-progress queue to be a clone. ' + 'This is a bug in React.');
+        }
+      }
+
+      current.baseQueue = baseQueue = pendingQueue;
+      queue.pending = null;
+    }
+
+    if (baseQueue !== null) {
+      // We have a queue to process.
+      var first = baseQueue.next;
+      var newState = current.baseState;
+      var newBaseState = null;
+      var newBaseQueueFirst = null;
+      var newBaseQueueLast = null;
+      var update = first;
+
+      do {
+        var updateLane = update.lane;
+
+        if (!isSubsetOfLanes(renderLanes, updateLane)) {
+          // Priority is insufficient. Skip this update. If this is the first
+          // skipped update, the previous update/state is the new base
+          // update/state.
+          var clone = {
+            lane: updateLane,
+            action: update.action,
+            eagerReducer: update.eagerReducer,
+            eagerState: update.eagerState,
+            next: null
+          };
+
+          if (newBaseQueueLast === null) {
+            newBaseQueueFirst = newBaseQueueLast = clone;
+            newBaseState = newState;
+          } else {
+            newBaseQueueLast = newBaseQueueLast.next = clone;
+          } // Update the remaining priority in the queue.
+          // TODO: Don't need to accumulate this. Instead, we can remove
+          // renderLanes from the original lanes.
+
+
+          currentlyRenderingFiber$1.lanes = mergeLanes(currentlyRenderingFiber$1.lanes, updateLane);
+          markSkippedUpdateLanes(updateLane);
+        } else {
+          // This update does have sufficient priority.
+          if (newBaseQueueLast !== null) {
+            var _clone = {
+              // This update is going to be committed so we never want uncommit
+              // it. Using NoLane works because 0 is a subset of all bitmasks, so
+              // this will never be skipped by the check above.
+              lane: NoLane,
+              action: update.action,
+              eagerReducer: update.eagerReducer,
+              eagerState: update.eagerState,
+              next: null
+            };
+            newBaseQueueLast = newBaseQueueLast.next = _clone;
+          } // Process this update.
+
+
+          if (update.eagerReducer === reducer) {
+            // If this update was processed eagerly, and its reducer matches the
+            // current reducer, we can use the eagerly computed state.
+            newState = update.eagerState;
+          } else {
+            var action = update.action;
+            newState = reducer(newState, action);
+          }
+        }
+
+        update = update.next;
+      } while (update !== null && update !== first);
+
+      if (newBaseQueueLast === null) {
+        newBaseState = newState;
+      } else {
+        newBaseQueueLast.next = newBaseQueueFirst;
+      } // Mark that the fiber performed work, but only if the new state is
+      // different from the current state.
+
+
+      if (!objectIs(newState, hook.memoizedState)) {
+        markWorkInProgressReceivedUpdate();
+      }
+
+      hook.memoizedState = newState;
+      hook.baseState = newBaseState;
+      hook.baseQueue = newBaseQueueLast;
+      queue.lastRenderedState = newState;
+    }
+
+    var dispatch = queue.dispatch;
+    return [hook.memoizedState, dispatch];
+  }
+
+  function rerenderReducer(reducer, initialArg, init) {
+    var hook = updateWorkInProgressHook();
+    var queue = hook.queue;
+
+    if (!(queue !== null)) {
+      {
+        throw Error( "Should have a queue. This is likely a bug in React. Please file an issue." );
+      }
+    }
+
+    queue.lastRenderedReducer = reducer; // This is a re-render. Apply the new render phase updates to the previous
+    // work-in-progress hook.
+
+    var dispatch = queue.dispatch;
+    var lastRenderPhaseUpdate = queue.pending;
+    var newState = hook.memoizedState;
+
+    if (lastRenderPhaseUpdate !== null) {
+      // The queue doesn't persist past this render pass.
+      queue.pending = null;
+      var firstRenderPhaseUpdate = lastRenderPhaseUpdate.next;
+      var update = firstRenderPhaseUpdate;
+
+      do {
+        // Process this render phase update. We don't have to check the
+        // priority because it will always be the same as the current
+        // render's.
+        var action = update.action;
+        newState = reducer(newState, action);
+        update = update.next;
+      } while (update !== firstRenderPhaseUpdate); // Mark that the fiber performed work, but only if the new state is
+      // different from the current state.
+
+
+      if (!objectIs(newState, hook.memoizedState)) {
+        markWorkInProgressReceivedUpdate();
+      }
+
+      hook.memoizedState = newState; // Don't persist the state accumulated from the render phase updates to
+      // the base state unless the queue is empty.
+      // TODO: Not sure if this is the desired semantics, but it's what we
+      // do for gDSFP. I can't remember why.
+
+      if (hook.baseQueue === null) {
+        hook.baseState = newState;
+      }
+
+      queue.lastRenderedState = newState;
+    }
+
+    return [newState, dispatch];
+  }
+
+  function readFromUnsubcribedMutableSource(root, source, getSnapshot) {
+    {
+      warnAboutMultipleRenderersDEV(source);
+    }
+
+    var getVersion = source._getVersion;
+    var version = getVersion(source._source); // Is it safe for this component to read from this source during the current render?
+
+    var isSafeToReadFromSource = false; // Check the version first.
+    // If this render has already been started with a specific version,
+    // we can use it alone to determine if we can safely read from the source.
+
+    var currentRenderVersion = getWorkInProgressVersion(source);
+
+    if (currentRenderVersion !== null) {
+      // It's safe to read if the store hasn't been mutated since the last time
+      // we read something.
+      isSafeToReadFromSource = currentRenderVersion === version;
+    } else {
+      // If there's no version, then this is the first time we've read from the
+      // source during the current render pass, so we need to do a bit more work.
+      // What we need to determine is if there are any hooks that already
+      // subscribed to the source, and if so, whether there are any pending
+      // mutations that haven't been synchronized yet.
+      //
+      // If there are no pending mutations, then `root.mutableReadLanes` will be
+      // empty, and we know we can safely read.
+      //
+      // If there *are* pending mutations, we may still be able to safely read
+      // if the currently rendering lanes are inclusive of the pending mutation
+      // lanes, since that guarantees that the value we're about to read from
+      // the source is consistent with the values that we read during the most
+      // recent mutation.
+      isSafeToReadFromSource = isSubsetOfLanes(renderLanes, root.mutableReadLanes);
+
+      if (isSafeToReadFromSource) {
+        // If it's safe to read from this source during the current render,
+        // store the version in case other components read from it.
+        // A changed version number will let those components know to throw and restart the render.
+        setWorkInProgressVersion(source, version);
+      }
+    }
+
+    if (isSafeToReadFromSource) {
+      var snapshot = getSnapshot(source._source);
+
+      {
+        if (typeof snapshot === 'function') {
+          error('Mutable source should not return a function as the snapshot value. ' + 'Functions may close over mutable values and cause tearing.');
+        }
+      }
+
+      return snapshot;
+    } else {
+      // This handles the special case of a mutable source being shared between renderers.
+      // In that case, if the source is mutated between the first and second renderer,
+      // The second renderer don't know that it needs to reset the WIP version during unwind,
+      // (because the hook only marks sources as dirty if it's written to their WIP version).
+      // That would cause this tear check to throw again and eventually be visible to the user.
+      // We can avoid this infinite loop by explicitly marking the source as dirty.
+      //
+      // This can lead to tearing in the first renderer when it resumes,
+      // but there's nothing we can do about that (short of throwing here and refusing to continue the render).
+      markSourceAsDirty(source);
+
+      {
+        {
+          throw Error( "Cannot read from mutable source during the current render without tearing. This is a bug in React. Please file an issue." );
+        }
+      }
+    }
+  }
+
+  function useMutableSource(hook, source, getSnapshot, subscribe) {
+    var root = getWorkInProgressRoot();
+
+    if (!(root !== null)) {
+      {
+        throw Error( "Expected a work-in-progress root. This is a bug in React. Please file an issue." );
+      }
+    }
+
+    var getVersion = source._getVersion;
+    var version = getVersion(source._source);
+    var dispatcher = ReactCurrentDispatcher$1.current; // eslint-disable-next-line prefer-const
+
+    var _dispatcher$useState = dispatcher.useState(function () {
+      return readFromUnsubcribedMutableSource(root, source, getSnapshot);
+    }),
+        currentSnapshot = _dispatcher$useState[0],
+        setSnapshot = _dispatcher$useState[1];
+
+    var snapshot = currentSnapshot; // Grab a handle to the state hook as well.
+    // We use it to clear the pending update queue if we have a new source.
+
+    var stateHook = workInProgressHook;
+    var memoizedState = hook.memoizedState;
+    var refs = memoizedState.refs;
+    var prevGetSnapshot = refs.getSnapshot;
+    var prevSource = memoizedState.source;
+    var prevSubscribe = memoizedState.subscribe;
+    var fiber = currentlyRenderingFiber$1;
+    hook.memoizedState = {
+      refs: refs,
+      source: source,
+      subscribe: subscribe
+    }; // Sync the values needed by our subscription handler after each commit.
+
+    dispatcher.useEffect(function () {
+      refs.getSnapshot = getSnapshot; // Normally the dispatch function for a state hook never changes,
+      // but this hook recreates the queue in certain cases  to avoid updates from stale sources.
+      // handleChange() below needs to reference the dispatch function without re-subscribing,
+      // so we use a ref to ensure that it always has the latest version.
+
+      refs.setSnapshot = setSnapshot; // Check for a possible change between when we last rendered now.
+
+      var maybeNewVersion = getVersion(source._source);
+
+      if (!objectIs(version, maybeNewVersion)) {
+        var maybeNewSnapshot = getSnapshot(source._source);
+
+        {
+          if (typeof maybeNewSnapshot === 'function') {
+            error('Mutable source should not return a function as the snapshot value. ' + 'Functions may close over mutable values and cause tearing.');
+          }
+        }
+
+        if (!objectIs(snapshot, maybeNewSnapshot)) {
+          setSnapshot(maybeNewSnapshot);
+          var lane = requestUpdateLane(fiber);
+          markRootMutableRead(root, lane);
+        } // If the source mutated between render and now,
+        // there may be state updates already scheduled from the old source.
+        // Entangle the updates so that they render in the same batch.
+
+
+        markRootEntangled(root, root.mutableReadLanes);
+      }
+    }, [getSnapshot, source, subscribe]); // If we got a new source or subscribe function, re-subscribe in a passive effect.
+
+    dispatcher.useEffect(function () {
+      var handleChange = function () {
+        var latestGetSnapshot = refs.getSnapshot;
+        var latestSetSnapshot = refs.setSnapshot;
+
+        try {
+          latestSetSnapshot(latestGetSnapshot(source._source)); // Record a pending mutable source update with the same expiration time.
+
+          var lane = requestUpdateLane(fiber);
+          markRootMutableRead(root, lane);
+        } catch (error) {
+          // A selector might throw after a source mutation.
+          // e.g. it might try to read from a part of the store that no longer exists.
+          // In this case we should still schedule an update with React.
+          // Worst case the selector will throw again and then an error boundary will handle it.
+          latestSetSnapshot(function () {
+            throw error;
+          });
+        }
+      };
+
+      var unsubscribe = subscribe(source._source, handleChange);
+
+      {
+        if (typeof unsubscribe !== 'function') {
+          error('Mutable source subscribe function must return an unsubscribe function.');
+        }
+      }
+
+      return unsubscribe;
+    }, [source, subscribe]); // If any of the inputs to useMutableSource change, reading is potentially unsafe.
+    //
+    // If either the source or the subscription have changed we can't can't trust the update queue.
+    // Maybe the source changed in a way that the old subscription ignored but the new one depends on.
+    //
+    // If the getSnapshot function changed, we also shouldn't rely on the update queue.
+    // It's possible that the underlying source was mutated between the when the last "change" event fired,
+    // and when the current render (with the new getSnapshot function) is processed.
+    //
+    // In both cases, we need to throw away pending updates (since they are no longer relevant)
+    // and treat reading from the source as we do in the mount case.
+
+    if (!objectIs(prevGetSnapshot, getSnapshot) || !objectIs(prevSource, source) || !objectIs(prevSubscribe, subscribe)) {
+      // Create a new queue and setState method,
+      // So if there are interleaved updates, they get pushed to the older queue.
+      // When this becomes current, the previous queue and dispatch method will be discarded,
+      // including any interleaving updates that occur.
+      var newQueue = {
+        pending: null,
+        dispatch: null,
+        lastRenderedReducer: basicStateReducer,
+        lastRenderedState: snapshot
+      };
+      newQueue.dispatch = setSnapshot = dispatchAction.bind(null, currentlyRenderingFiber$1, newQueue);
+      stateHook.queue = newQueue;
+      stateHook.baseQueue = null;
+      snapshot = readFromUnsubcribedMutableSource(root, source, getSnapshot);
+      stateHook.memoizedState = stateHook.baseState = snapshot;
+    }
+
+    return snapshot;
+  }
+
+  function mountMutableSource(source, getSnapshot, subscribe) {
+    var hook = mountWorkInProgressHook();
+    hook.memoizedState = {
+      refs: {
+        getSnapshot: getSnapshot,
+        setSnapshot: null
+      },
+      source: source,
+      subscribe: subscribe
+    };
+    return useMutableSource(hook, source, getSnapshot, subscribe);
+  }
+
+  function updateMutableSource(source, getSnapshot, subscribe) {
+    var hook = updateWorkInProgressHook();
+    return useMutableSource(hook, source, getSnapshot, subscribe);
+  }
+
+  function mountState(initialState) {
+    var hook = mountWorkInProgressHook();
+
+    if (typeof initialState === 'function') {
+      // $FlowFixMe: Flow doesn't like mixed types
+      initialState = initialState();
+    }
+
+    hook.memoizedState = hook.baseState = initialState;
+    var queue = hook.queue = {
+      pending: null,
+      dispatch: null,
+      lastRenderedReducer: basicStateReducer,
+      lastRenderedState: initialState
+    };
+    var dispatch = queue.dispatch = dispatchAction.bind(null, currentlyRenderingFiber$1, queue);
+    return [hook.memoizedState, dispatch];
+  }
+
+  function updateState(initialState) {
+    return updateReducer(basicStateReducer);
+  }
+
+  function rerenderState(initialState) {
+    return rerenderReducer(basicStateReducer);
+  }
+
+  function pushEffect(tag, create, destroy, deps) {
+    var effect = {
+      tag: tag,
+      create: create,
+      destroy: destroy,
+      deps: deps,
+      // Circular
+      next: null
+    };
+    var componentUpdateQueue = currentlyRenderingFiber$1.updateQueue;
+
+    if (componentUpdateQueue === null) {
+      componentUpdateQueue = createFunctionComponentUpdateQueue();
+      currentlyRenderingFiber$1.updateQueue = componentUpdateQueue;
+      componentUpdateQueue.lastEffect = effect.next = effect;
+    } else {
+      var lastEffect = componentUpdateQueue.lastEffect;
+
+      if (lastEffect === null) {
+        componentUpdateQueue.lastEffect = effect.next = effect;
+      } else {
+        var firstEffect = lastEffect.next;
+        lastEffect.next = effect;
+        effect.next = firstEffect;
+        componentUpdateQueue.lastEffect = effect;
+      }
+    }
+
+    return effect;
+  }
+
+  function mountRef(initialValue) {
+    var hook = mountWorkInProgressHook();
+    var ref = {
+      current: initialValue
+    };
+
+    {
+      Object.seal(ref);
+    }
+
+    hook.memoizedState = ref;
+    return ref;
+  }
+
+  function updateRef(initialValue) {
+    var hook = updateWorkInProgressHook();
+    return hook.memoizedState;
+  }
+
+  function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
+    var hook = mountWorkInProgressHook();
+    var nextDeps = deps === undefined ? null : deps;
+    currentlyRenderingFiber$1.flags |= fiberFlags;
+    hook.memoizedState = pushEffect(HasEffect | hookFlags, create, undefined, nextDeps);
+  }
+
+  function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
+    var hook = updateWorkInProgressHook();
+    var nextDeps = deps === undefined ? null : deps;
+    var destroy = undefined;
+
+    if (currentHook !== null) {
+      var prevEffect = currentHook.memoizedState;
+      destroy = prevEffect.destroy;
+
+      if (nextDeps !== null) {
+        var prevDeps = prevEffect.deps;
+
+        if (areHookInputsEqual(nextDeps, prevDeps)) {
+          pushEffect(hookFlags, create, destroy, nextDeps);
+          return;
+        }
+      }
+    }
+
+    currentlyRenderingFiber$1.flags |= fiberFlags;
+    hook.memoizedState = pushEffect(HasEffect | hookFlags, create, destroy, nextDeps);
+  }
+
+  function mountEffect(create, deps) {
+    {
+      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
+      if ('undefined' !== typeof jest) {
+        warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber$1);
+      }
+    }
+
+    return mountEffectImpl(Update | Passive, Passive$1, create, deps);
+  }
+
+  function updateEffect(create, deps) {
+    {
+      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
+      if ('undefined' !== typeof jest) {
+        warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber$1);
+      }
+    }
+
+    return updateEffectImpl(Update | Passive, Passive$1, create, deps);
+  }
+
+  function mountLayoutEffect(create, deps) {
+    return mountEffectImpl(Update, Layout, create, deps);
+  }
+
+  function updateLayoutEffect(create, deps) {
+    return updateEffectImpl(Update, Layout, create, deps);
+  }
+
+  function imperativeHandleEffect(create, ref) {
+    if (typeof ref === 'function') {
+      var refCallback = ref;
+
+      var _inst = create();
+
+      refCallback(_inst);
+      return function () {
+        refCallback(null);
+      };
+    } else if (ref !== null && ref !== undefined) {
+      var refObject = ref;
+
+      {
+        if (!refObject.hasOwnProperty('current')) {
+          error('Expected useImperativeHandle() first argument to either be a ' + 'ref callback or React.createRef() object. Instead received: %s.', 'an object with keys {' + Object.keys(refObject).join(', ') + '}');
+        }
+      }
+
+      var _inst2 = create();
+
+      refObject.current = _inst2;
+      return function () {
+        refObject.current = null;
+      };
+    }
+  }
+
+  function mountImperativeHandle(ref, create, deps) {
+    {
+      if (typeof create !== 'function') {
+        error('Expected useImperativeHandle() second argument to be a function ' + 'that creates a handle. Instead received: %s.', create !== null ? typeof create : 'null');
+      }
+    } // TODO: If deps are provided, should we skip comparing the ref itself?
+
+
+    var effectDeps = deps !== null && deps !== undefined ? deps.concat([ref]) : null;
+    return mountEffectImpl(Update, Layout, imperativeHandleEffect.bind(null, create, ref), effectDeps);
+  }
+
+  function updateImperativeHandle(ref, create, deps) {
+    {
+      if (typeof create !== 'function') {
+        error('Expected useImperativeHandle() second argument to be a function ' + 'that creates a handle. Instead received: %s.', create !== null ? typeof create : 'null');
+      }
+    } // TODO: If deps are provided, should we skip comparing the ref itself?
+
+
+    var effectDeps = deps !== null && deps !== undefined ? deps.concat([ref]) : null;
+    return updateEffectImpl(Update, Layout, imperativeHandleEffect.bind(null, create, ref), effectDeps);
+  }
+
+  function mountDebugValue(value, formatterFn) {// This hook is normally a no-op.
+    // The react-debug-hooks package injects its own implementation
+    // so that e.g. DevTools can display custom hook values.
+  }
+
+  var updateDebugValue = mountDebugValue;
+
+  function mountCallback(callback, deps) {
+    var hook = mountWorkInProgressHook();
+    var nextDeps = deps === undefined ? null : deps;
+    hook.memoizedState = [callback, nextDeps];
+    return callback;
+  }
+
+  function updateCallback(callback, deps) {
+    var hook = updateWorkInProgressHook();
+    var nextDeps = deps === undefined ? null : deps;
+    var prevState = hook.memoizedState;
+
+    if (prevState !== null) {
+      if (nextDeps !== null) {
+        var prevDeps = prevState[1];
+
+        if (areHookInputsEqual(nextDeps, prevDeps)) {
+          return prevState[0];
+        }
+      }
+    }
+
+    hook.memoizedState = [callback, nextDeps];
+    return callback;
+  }
+
+  function mountMemo(nextCreate, deps) {
+    var hook = mountWorkInProgressHook();
+    var nextDeps = deps === undefined ? null : deps;
+    var nextValue = nextCreate();
+    hook.memoizedState = [nextValue, nextDeps];
+    return nextValue;
+  }
+
+  function updateMemo(nextCreate, deps) {
+    var hook = updateWorkInProgressHook();
+    var nextDeps = deps === undefined ? null : deps;
+    var prevState = hook.memoizedState;
+
+    if (prevState !== null) {
+      // Assume these are defined. If they're not, areHookInputsEqual will warn.
+      if (nextDeps !== null) {
+        var prevDeps = prevState[1];
+
+        if (areHookInputsEqual(nextDeps, prevDeps)) {
+          return prevState[0];
+        }
+      }
+    }
+
+    var nextValue = nextCreate();
+    hook.memoizedState = [nextValue, nextDeps];
+    return nextValue;
+  }
+
+  function mountDeferredValue(value) {
+    var _mountState = mountState(value),
+        prevValue = _mountState[0],
+        setValue = _mountState[1];
+
+    mountEffect(function () {
+      var prevTransition = ReactCurrentBatchConfig$1.transition;
+      ReactCurrentBatchConfig$1.transition = 1;
+
+      try {
+        setValue(value);
+      } finally {
+        ReactCurrentBatchConfig$1.transition = prevTransition;
+      }
+    }, [value]);
+    return prevValue;
+  }
+
+  function updateDeferredValue(value) {
+    var _updateState = updateState(),
+        prevValue = _updateState[0],
+        setValue = _updateState[1];
+
+    updateEffect(function () {
+      var prevTransition = ReactCurrentBatchConfig$1.transition;
+      ReactCurrentBatchConfig$1.transition = 1;
+
+      try {
+        setValue(value);
+      } finally {
+        ReactCurrentBatchConfig$1.transition = prevTransition;
+      }
+    }, [value]);
+    return prevValue;
+  }
+
+  function rerenderDeferredValue(value) {
+    var _rerenderState = rerenderState(),
+        prevValue = _rerenderState[0],
+        setValue = _rerenderState[1];
+
+    updateEffect(function () {
+      var prevTransition = ReactCurrentBatchConfig$1.transition;
+      ReactCurrentBatchConfig$1.transition = 1;
+
+      try {
+        setValue(value);
+      } finally {
+        ReactCurrentBatchConfig$1.transition = prevTransition;
+      }
+    }, [value]);
+    return prevValue;
+  }
+
+  function startTransition(setPending, callback) {
+    var priorityLevel = getCurrentPriorityLevel();
+
+    {
+      runWithPriority$1(priorityLevel < UserBlockingPriority$2 ? UserBlockingPriority$2 : priorityLevel, function () {
+        setPending(true);
+      });
+      runWithPriority$1(priorityLevel > NormalPriority$1 ? NormalPriority$1 : priorityLevel, function () {
+        var prevTransition = ReactCurrentBatchConfig$1.transition;
+        ReactCurrentBatchConfig$1.transition = 1;
+
+        try {
+          setPending(false);
+          callback();
+        } finally {
+          ReactCurrentBatchConfig$1.transition = prevTransition;
+        }
+      });
+    }
+  }
+
+  function mountTransition() {
+    var _mountState2 = mountState(false),
+        isPending = _mountState2[0],
+        setPending = _mountState2[1]; // The `start` method can be stored on a ref, since `setPending`
+    // never changes.
+
+
+    var start = startTransition.bind(null, setPending);
+    mountRef(start);
+    return [start, isPending];
+  }
+
+  function updateTransition() {
+    var _updateState2 = updateState(),
+        isPending = _updateState2[0];
+
+    var startRef = updateRef();
+    var start = startRef.current;
+    return [start, isPending];
+  }
+
+  function rerenderTransition() {
+    var _rerenderState2 = rerenderState(),
+        isPending = _rerenderState2[0];
+
+    var startRef = updateRef();
+    var start = startRef.current;
+    return [start, isPending];
+  }
+
+  var isUpdatingOpaqueValueInRenderPhase = false;
+  function getIsUpdatingOpaqueValueInRenderPhaseInDEV() {
+    {
+      return isUpdatingOpaqueValueInRenderPhase;
+    }
+  }
+
+  function warnOnOpaqueIdentifierAccessInDEV(fiber) {
+    {
+      // TODO: Should warn in effects and callbacks, too
+      var name = getComponentName(fiber.type) || 'Unknown';
+
+      if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
+        error('The object passed back from useOpaqueIdentifier is meant to be ' + 'passed through to attributes only. Do not read the ' + 'value directly.');
+
+        didWarnAboutUseOpaqueIdentifier[name] = true;
+      }
+    }
+  }
+
+  function mountOpaqueIdentifier() {
+    var makeId =  makeClientIdInDEV.bind(null, warnOnOpaqueIdentifierAccessInDEV.bind(null, currentlyRenderingFiber$1)) ;
+
+    if (getIsHydrating()) {
+      var didUpgrade = false;
+      var fiber = currentlyRenderingFiber$1;
+
+      var readValue = function () {
+        if (!didUpgrade) {
+          // Only upgrade once. This works even inside the render phase because
+          // the update is added to a shared queue, which outlasts the
+          // in-progress render.
+          didUpgrade = true;
+
+          {
+            isUpdatingOpaqueValueInRenderPhase = true;
+            setId(makeId());
+            isUpdatingOpaqueValueInRenderPhase = false;
+            warnOnOpaqueIdentifierAccessInDEV(fiber);
+          }
+        }
+
+        {
+          {
+            throw Error( "The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly." );
+          }
+        }
+      };
+
+      var id = makeOpaqueHydratingObject(readValue);
+      var setId = mountState(id)[1];
+
+      if ((currentlyRenderingFiber$1.mode & BlockingMode) === NoMode) {
+        currentlyRenderingFiber$1.flags |= Update | Passive;
+        pushEffect(HasEffect | Passive$1, function () {
+          setId(makeId());
+        }, undefined, null);
+      }
+
+      return id;
+    } else {
+      var _id = makeId();
+
+      mountState(_id);
+      return _id;
+    }
+  }
+
+  function updateOpaqueIdentifier() {
+    var id = updateState()[0];
+    return id;
+  }
+
+  function rerenderOpaqueIdentifier() {
+    var id = rerenderState()[0];
+    return id;
+  }
+
+  function dispatchAction(fiber, queue, action) {
+    {
+      if (typeof arguments[3] === 'function') {
+        error("State updates from the useState() and useReducer() Hooks don't support the " + 'second callback argument. To execute a side effect after ' + 'rendering, declare it in the component body with useEffect().');
+      }
+    }
+
+    var eventTime = requestEventTime();
+    var lane = requestUpdateLane(fiber);
+    var update = {
+      lane: lane,
+      action: action,
+      eagerReducer: null,
+      eagerState: null,
+      next: null
+    }; // Append the update to the end of the list.
+
+    var pending = queue.pending;
+
+    if (pending === null) {
+      // This is the first update. Create a circular list.
+      update.next = update;
+    } else {
+      update.next = pending.next;
+      pending.next = update;
+    }
+
+    queue.pending = update;
+    var alternate = fiber.alternate;
+
+    if (fiber === currentlyRenderingFiber$1 || alternate !== null && alternate === currentlyRenderingFiber$1) {
+      // This is a render phase update. Stash it in a lazily-created map of
+      // queue -> linked list of updates. After this render pass, we'll restart
+      // and apply the stashed updates on top of the work-in-progress hook.
+      didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;
+    } else {
+      if (fiber.lanes === NoLanes && (alternate === null || alternate.lanes === NoLanes)) {
+        // The queue is currently empty, which means we can eagerly compute the
+        // next state before entering the render phase. If the new state is the
+        // same as the current state, we may be able to bail out entirely.
+        var lastRenderedReducer = queue.lastRenderedReducer;
+
+        if (lastRenderedReducer !== null) {
+          var prevDispatcher;
+
+          {
+            prevDispatcher = ReactCurrentDispatcher$1.current;
+            ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+          }
+
+          try {
+            var currentState = queue.lastRenderedState;
+            var eagerState = lastRenderedReducer(currentState, action); // Stash the eagerly computed state, and the reducer used to compute
+            // it, on the update object. If the reducer hasn't changed by the
+            // time we enter the render phase, then the eager state can be used
+            // without calling the reducer again.
+
+            update.eagerReducer = lastRenderedReducer;
+            update.eagerState = eagerState;
+
+            if (objectIs(eagerState, currentState)) {
+              // Fast path. We can bail out without scheduling React to re-render.
+              // It's still possible that we'll need to rebase this update later,
+              // if the component re-renders for a different reason and by that
+              // time the reducer has changed.
+              return;
+            }
+          } catch (error) {// Suppress the error. It will throw again in the render phase.
+          } finally {
+            {
+              ReactCurrentDispatcher$1.current = prevDispatcher;
+            }
+          }
+        }
+      }
+
+      {
+        // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
+        if ('undefined' !== typeof jest) {
+          warnIfNotScopedWithMatchingAct(fiber);
+          warnIfNotCurrentlyActingUpdatesInDev(fiber);
+        }
+      }
+
+      scheduleUpdateOnFiber(fiber, lane, eventTime);
+    }
+  }
+
+  var ContextOnlyDispatcher = {
+    readContext: readContext,
+    useCallback: throwInvalidHookError,
+    useContext: throwInvalidHookError,
+    useEffect: throwInvalidHookError,
+    useImperativeHandle: throwInvalidHookError,
+    useLayoutEffect: throwInvalidHookError,
+    useMemo: throwInvalidHookError,
+    useReducer: throwInvalidHookError,
+    useRef: throwInvalidHookError,
+    useState: throwInvalidHookError,
+    useDebugValue: throwInvalidHookError,
+    useDeferredValue: throwInvalidHookError,
+    useTransition: throwInvalidHookError,
+    useMutableSource: throwInvalidHookError,
+    useOpaqueIdentifier: throwInvalidHookError,
+    unstable_isNewReconciler: enableNewReconciler
+  };
+  var HooksDispatcherOnMountInDEV = null;
+  var HooksDispatcherOnMountWithHookTypesInDEV = null;
+  var HooksDispatcherOnUpdateInDEV = null;
+  var HooksDispatcherOnRerenderInDEV = null;
+  var InvalidNestedHooksDispatcherOnMountInDEV = null;
+  var InvalidNestedHooksDispatcherOnUpdateInDEV = null;
+  var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
+
+  {
+    var warnInvalidContextAccess = function () {
+      error('Context can only be read while React is rendering. ' + 'In classes, you can read it in the render method or getDerivedStateFromProps. ' + 'In function components, you can read it directly in the function body, but not ' + 'inside Hooks like useReducer() or useMemo().');
+    };
+
+    var warnInvalidHookAccess = function () {
+      error('Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' + 'You can only call Hooks at the top level of your React function. ' + 'For more information, see ' + 'https://reactjs.org/link/rules-of-hooks');
+    };
+
+    HooksDispatcherOnMountInDEV = {
+      readContext: function (context, observedBits) {
+        return readContext(context, observedBits);
+      },
+      useCallback: function (callback, deps) {
+        currentHookNameInDev = 'useCallback';
+        mountHookTypesDev();
+        checkDepsAreArrayDev(deps);
+        return mountCallback(callback, deps);
+      },
+      useContext: function (context, observedBits) {
+        currentHookNameInDev = 'useContext';
+        mountHookTypesDev();
+        return readContext(context, observedBits);
+      },
+      useEffect: function (create, deps) {
+        currentHookNameInDev = 'useEffect';
+        mountHookTypesDev();
+        checkDepsAreArrayDev(deps);
+        return mountEffect(create, deps);
+      },
+      useImperativeHandle: function (ref, create, deps) {
+        currentHookNameInDev = 'useImperativeHandle';
+        mountHookTypesDev();
+        checkDepsAreArrayDev(deps);
+        return mountImperativeHandle(ref, create, deps);
+      },
+      useLayoutEffect: function (create, deps) {
+        currentHookNameInDev = 'useLayoutEffect';
+        mountHookTypesDev();
+        checkDepsAreArrayDev(deps);
+        return mountLayoutEffect(create, deps);
+      },
+      useMemo: function (create, deps) {
+        currentHookNameInDev = 'useMemo';
+        mountHookTypesDev();
+        checkDepsAreArrayDev(deps);
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
+
+        try {
+          return mountMemo(create, deps);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useReducer: function (reducer, initialArg, init) {
+        currentHookNameInDev = 'useReducer';
+        mountHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
+
+        try {
+          return mountReducer(reducer, initialArg, init);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useRef: function (initialValue) {
+        currentHookNameInDev = 'useRef';
+        mountHookTypesDev();
+        return mountRef(initialValue);
+      },
+      useState: function (initialState) {
+        currentHookNameInDev = 'useState';
+        mountHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
+
+        try {
+          return mountState(initialState);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useDebugValue: function (value, formatterFn) {
+        currentHookNameInDev = 'useDebugValue';
+        mountHookTypesDev();
+        return mountDebugValue();
+      },
+      useDeferredValue: function (value) {
+        currentHookNameInDev = 'useDeferredValue';
+        mountHookTypesDev();
+        return mountDeferredValue(value);
+      },
+      useTransition: function () {
+        currentHookNameInDev = 'useTransition';
+        mountHookTypesDev();
+        return mountTransition();
+      },
+      useMutableSource: function (source, getSnapshot, subscribe) {
+        currentHookNameInDev = 'useMutableSource';
+        mountHookTypesDev();
+        return mountMutableSource(source, getSnapshot, subscribe);
+      },
+      useOpaqueIdentifier: function () {
+        currentHookNameInDev = 'useOpaqueIdentifier';
+        mountHookTypesDev();
+        return mountOpaqueIdentifier();
+      },
+      unstable_isNewReconciler: enableNewReconciler
+    };
+    HooksDispatcherOnMountWithHookTypesInDEV = {
+      readContext: function (context, observedBits) {
+        return readContext(context, observedBits);
+      },
+      useCallback: function (callback, deps) {
+        currentHookNameInDev = 'useCallback';
+        updateHookTypesDev();
+        return mountCallback(callback, deps);
+      },
+      useContext: function (context, observedBits) {
+        currentHookNameInDev = 'useContext';
+        updateHookTypesDev();
+        return readContext(context, observedBits);
+      },
+      useEffect: function (create, deps) {
+        currentHookNameInDev = 'useEffect';
+        updateHookTypesDev();
+        return mountEffect(create, deps);
+      },
+      useImperativeHandle: function (ref, create, deps) {
+        currentHookNameInDev = 'useImperativeHandle';
+        updateHookTypesDev();
+        return mountImperativeHandle(ref, create, deps);
+      },
+      useLayoutEffect: function (create, deps) {
+        currentHookNameInDev = 'useLayoutEffect';
+        updateHookTypesDev();
+        return mountLayoutEffect(create, deps);
+      },
+      useMemo: function (create, deps) {
+        currentHookNameInDev = 'useMemo';
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
+
+        try {
+          return mountMemo(create, deps);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useReducer: function (reducer, initialArg, init) {
+        currentHookNameInDev = 'useReducer';
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
+
+        try {
+          return mountReducer(reducer, initialArg, init);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useRef: function (initialValue) {
+        currentHookNameInDev = 'useRef';
+        updateHookTypesDev();
+        return mountRef(initialValue);
+      },
+      useState: function (initialState) {
+        currentHookNameInDev = 'useState';
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
+
+        try {
+          return mountState(initialState);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useDebugValue: function (value, formatterFn) {
+        currentHookNameInDev = 'useDebugValue';
+        updateHookTypesDev();
+        return mountDebugValue();
+      },
+      useDeferredValue: function (value) {
+        currentHookNameInDev = 'useDeferredValue';
+        updateHookTypesDev();
+        return mountDeferredValue(value);
+      },
+      useTransition: function () {
+        currentHookNameInDev = 'useTransition';
+        updateHookTypesDev();
+        return mountTransition();
+      },
+      useMutableSource: function (source, getSnapshot, subscribe) {
+        currentHookNameInDev = 'useMutableSource';
+        updateHookTypesDev();
+        return mountMutableSource(source, getSnapshot, subscribe);
+      },
+      useOpaqueIdentifier: function () {
+        currentHookNameInDev = 'useOpaqueIdentifier';
+        updateHookTypesDev();
+        return mountOpaqueIdentifier();
+      },
+      unstable_isNewReconciler: enableNewReconciler
+    };
+    HooksDispatcherOnUpdateInDEV = {
+      readContext: function (context, observedBits) {
+        return readContext(context, observedBits);
+      },
+      useCallback: function (callback, deps) {
+        currentHookNameInDev = 'useCallback';
+        updateHookTypesDev();
+        return updateCallback(callback, deps);
+      },
+      useContext: function (context, observedBits) {
+        currentHookNameInDev = 'useContext';
+        updateHookTypesDev();
+        return readContext(context, observedBits);
+      },
+      useEffect: function (create, deps) {
+        currentHookNameInDev = 'useEffect';
+        updateHookTypesDev();
+        return updateEffect(create, deps);
+      },
+      useImperativeHandle: function (ref, create, deps) {
+        currentHookNameInDev = 'useImperativeHandle';
+        updateHookTypesDev();
+        return updateImperativeHandle(ref, create, deps);
+      },
+      useLayoutEffect: function (create, deps) {
+        currentHookNameInDev = 'useLayoutEffect';
+        updateHookTypesDev();
+        return updateLayoutEffect(create, deps);
+      },
+      useMemo: function (create, deps) {
+        currentHookNameInDev = 'useMemo';
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+
+        try {
+          return updateMemo(create, deps);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useReducer: function (reducer, initialArg, init) {
+        currentHookNameInDev = 'useReducer';
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+
+        try {
+          return updateReducer(reducer, initialArg, init);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useRef: function (initialValue) {
+        currentHookNameInDev = 'useRef';
+        updateHookTypesDev();
+        return updateRef();
+      },
+      useState: function (initialState) {
+        currentHookNameInDev = 'useState';
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+
+        try {
+          return updateState(initialState);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useDebugValue: function (value, formatterFn) {
+        currentHookNameInDev = 'useDebugValue';
+        updateHookTypesDev();
+        return updateDebugValue();
+      },
+      useDeferredValue: function (value) {
+        currentHookNameInDev = 'useDeferredValue';
+        updateHookTypesDev();
+        return updateDeferredValue(value);
+      },
+      useTransition: function () {
+        currentHookNameInDev = 'useTransition';
+        updateHookTypesDev();
+        return updateTransition();
+      },
+      useMutableSource: function (source, getSnapshot, subscribe) {
+        currentHookNameInDev = 'useMutableSource';
+        updateHookTypesDev();
+        return updateMutableSource(source, getSnapshot, subscribe);
+      },
+      useOpaqueIdentifier: function () {
+        currentHookNameInDev = 'useOpaqueIdentifier';
+        updateHookTypesDev();
+        return updateOpaqueIdentifier();
+      },
+      unstable_isNewReconciler: enableNewReconciler
+    };
+    HooksDispatcherOnRerenderInDEV = {
+      readContext: function (context, observedBits) {
+        return readContext(context, observedBits);
+      },
+      useCallback: function (callback, deps) {
+        currentHookNameInDev = 'useCallback';
+        updateHookTypesDev();
+        return updateCallback(callback, deps);
+      },
+      useContext: function (context, observedBits) {
+        currentHookNameInDev = 'useContext';
+        updateHookTypesDev();
+        return readContext(context, observedBits);
+      },
+      useEffect: function (create, deps) {
+        currentHookNameInDev = 'useEffect';
+        updateHookTypesDev();
+        return updateEffect(create, deps);
+      },
+      useImperativeHandle: function (ref, create, deps) {
+        currentHookNameInDev = 'useImperativeHandle';
+        updateHookTypesDev();
+        return updateImperativeHandle(ref, create, deps);
+      },
+      useLayoutEffect: function (create, deps) {
+        currentHookNameInDev = 'useLayoutEffect';
+        updateHookTypesDev();
+        return updateLayoutEffect(create, deps);
+      },
+      useMemo: function (create, deps) {
+        currentHookNameInDev = 'useMemo';
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnRerenderInDEV;
+
+        try {
+          return updateMemo(create, deps);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useReducer: function (reducer, initialArg, init) {
+        currentHookNameInDev = 'useReducer';
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnRerenderInDEV;
+
+        try {
+          return rerenderReducer(reducer, initialArg, init);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useRef: function (initialValue) {
+        currentHookNameInDev = 'useRef';
+        updateHookTypesDev();
+        return updateRef();
+      },
+      useState: function (initialState) {
+        currentHookNameInDev = 'useState';
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnRerenderInDEV;
+
+        try {
+          return rerenderState(initialState);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useDebugValue: function (value, formatterFn) {
+        currentHookNameInDev = 'useDebugValue';
+        updateHookTypesDev();
+        return updateDebugValue();
+      },
+      useDeferredValue: function (value) {
+        currentHookNameInDev = 'useDeferredValue';
+        updateHookTypesDev();
+        return rerenderDeferredValue(value);
+      },
+      useTransition: function () {
+        currentHookNameInDev = 'useTransition';
+        updateHookTypesDev();
+        return rerenderTransition();
+      },
+      useMutableSource: function (source, getSnapshot, subscribe) {
+        currentHookNameInDev = 'useMutableSource';
+        updateHookTypesDev();
+        return updateMutableSource(source, getSnapshot, subscribe);
+      },
+      useOpaqueIdentifier: function () {
+        currentHookNameInDev = 'useOpaqueIdentifier';
+        updateHookTypesDev();
+        return rerenderOpaqueIdentifier();
+      },
+      unstable_isNewReconciler: enableNewReconciler
+    };
+    InvalidNestedHooksDispatcherOnMountInDEV = {
+      readContext: function (context, observedBits) {
+        warnInvalidContextAccess();
+        return readContext(context, observedBits);
+      },
+      useCallback: function (callback, deps) {
+        currentHookNameInDev = 'useCallback';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        return mountCallback(callback, deps);
+      },
+      useContext: function (context, observedBits) {
+        currentHookNameInDev = 'useContext';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        return readContext(context, observedBits);
+      },
+      useEffect: function (create, deps) {
+        currentHookNameInDev = 'useEffect';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        return mountEffect(create, deps);
+      },
+      useImperativeHandle: function (ref, create, deps) {
+        currentHookNameInDev = 'useImperativeHandle';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        return mountImperativeHandle(ref, create, deps);
+      },
+      useLayoutEffect: function (create, deps) {
+        currentHookNameInDev = 'useLayoutEffect';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        return mountLayoutEffect(create, deps);
+      },
+      useMemo: function (create, deps) {
+        currentHookNameInDev = 'useMemo';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
+
+        try {
+          return mountMemo(create, deps);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useReducer: function (reducer, initialArg, init) {
+        currentHookNameInDev = 'useReducer';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
+
+        try {
+          return mountReducer(reducer, initialArg, init);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useRef: function (initialValue) {
+        currentHookNameInDev = 'useRef';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        return mountRef(initialValue);
+      },
+      useState: function (initialState) {
+        currentHookNameInDev = 'useState';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
+
+        try {
+          return mountState(initialState);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useDebugValue: function (value, formatterFn) {
+        currentHookNameInDev = 'useDebugValue';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        return mountDebugValue();
+      },
+      useDeferredValue: function (value) {
+        currentHookNameInDev = 'useDeferredValue';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        return mountDeferredValue(value);
+      },
+      useTransition: function () {
+        currentHookNameInDev = 'useTransition';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        return mountTransition();
+      },
+      useMutableSource: function (source, getSnapshot, subscribe) {
+        currentHookNameInDev = 'useMutableSource';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        return mountMutableSource(source, getSnapshot, subscribe);
+      },
+      useOpaqueIdentifier: function () {
+        currentHookNameInDev = 'useOpaqueIdentifier';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        return mountOpaqueIdentifier();
+      },
+      unstable_isNewReconciler: enableNewReconciler
+    };
+    InvalidNestedHooksDispatcherOnUpdateInDEV = {
+      readContext: function (context, observedBits) {
+        warnInvalidContextAccess();
+        return readContext(context, observedBits);
+      },
+      useCallback: function (callback, deps) {
+        currentHookNameInDev = 'useCallback';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateCallback(callback, deps);
+      },
+      useContext: function (context, observedBits) {
+        currentHookNameInDev = 'useContext';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return readContext(context, observedBits);
+      },
+      useEffect: function (create, deps) {
+        currentHookNameInDev = 'useEffect';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateEffect(create, deps);
+      },
+      useImperativeHandle: function (ref, create, deps) {
+        currentHookNameInDev = 'useImperativeHandle';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateImperativeHandle(ref, create, deps);
+      },
+      useLayoutEffect: function (create, deps) {
+        currentHookNameInDev = 'useLayoutEffect';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateLayoutEffect(create, deps);
+      },
+      useMemo: function (create, deps) {
+        currentHookNameInDev = 'useMemo';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+
+        try {
+          return updateMemo(create, deps);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useReducer: function (reducer, initialArg, init) {
+        currentHookNameInDev = 'useReducer';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+
+        try {
+          return updateReducer(reducer, initialArg, init);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useRef: function (initialValue) {
+        currentHookNameInDev = 'useRef';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateRef();
+      },
+      useState: function (initialState) {
+        currentHookNameInDev = 'useState';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+
+        try {
+          return updateState(initialState);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useDebugValue: function (value, formatterFn) {
+        currentHookNameInDev = 'useDebugValue';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateDebugValue();
+      },
+      useDeferredValue: function (value) {
+        currentHookNameInDev = 'useDeferredValue';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateDeferredValue(value);
+      },
+      useTransition: function () {
+        currentHookNameInDev = 'useTransition';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateTransition();
+      },
+      useMutableSource: function (source, getSnapshot, subscribe) {
+        currentHookNameInDev = 'useMutableSource';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateMutableSource(source, getSnapshot, subscribe);
+      },
+      useOpaqueIdentifier: function () {
+        currentHookNameInDev = 'useOpaqueIdentifier';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateOpaqueIdentifier();
+      },
+      unstable_isNewReconciler: enableNewReconciler
+    };
+    InvalidNestedHooksDispatcherOnRerenderInDEV = {
+      readContext: function (context, observedBits) {
+        warnInvalidContextAccess();
+        return readContext(context, observedBits);
+      },
+      useCallback: function (callback, deps) {
+        currentHookNameInDev = 'useCallback';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateCallback(callback, deps);
+      },
+      useContext: function (context, observedBits) {
+        currentHookNameInDev = 'useContext';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return readContext(context, observedBits);
+      },
+      useEffect: function (create, deps) {
+        currentHookNameInDev = 'useEffect';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateEffect(create, deps);
+      },
+      useImperativeHandle: function (ref, create, deps) {
+        currentHookNameInDev = 'useImperativeHandle';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateImperativeHandle(ref, create, deps);
+      },
+      useLayoutEffect: function (create, deps) {
+        currentHookNameInDev = 'useLayoutEffect';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateLayoutEffect(create, deps);
+      },
+      useMemo: function (create, deps) {
+        currentHookNameInDev = 'useMemo';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+
+        try {
+          return updateMemo(create, deps);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useReducer: function (reducer, initialArg, init) {
+        currentHookNameInDev = 'useReducer';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+
+        try {
+          return rerenderReducer(reducer, initialArg, init);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useRef: function (initialValue) {
+        currentHookNameInDev = 'useRef';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateRef();
+      },
+      useState: function (initialState) {
+        currentHookNameInDev = 'useState';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        var prevDispatcher = ReactCurrentDispatcher$1.current;
+        ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+
+        try {
+          return rerenderState(initialState);
+        } finally {
+          ReactCurrentDispatcher$1.current = prevDispatcher;
+        }
+      },
+      useDebugValue: function (value, formatterFn) {
+        currentHookNameInDev = 'useDebugValue';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateDebugValue();
+      },
+      useDeferredValue: function (value) {
+        currentHookNameInDev = 'useDeferredValue';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return rerenderDeferredValue(value);
+      },
+      useTransition: function () {
+        currentHookNameInDev = 'useTransition';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return rerenderTransition();
+      },
+      useMutableSource: function (source, getSnapshot, subscribe) {
+        currentHookNameInDev = 'useMutableSource';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateMutableSource(source, getSnapshot, subscribe);
+      },
+      useOpaqueIdentifier: function () {
+        currentHookNameInDev = 'useOpaqueIdentifier';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return rerenderOpaqueIdentifier();
+      },
+      unstable_isNewReconciler: enableNewReconciler
+    };
+  }
+
+  var now$1 = unstable_now;
+  var commitTime = 0;
+  var profilerStartTime = -1;
+
+  function getCommitTime() {
+    return commitTime;
+  }
+
+  function recordCommitTime() {
+
+    commitTime = now$1();
+  }
+
+  function startProfilerTimer(fiber) {
+
+    profilerStartTime = now$1();
+
+    if (fiber.actualStartTime < 0) {
+      fiber.actualStartTime = now$1();
+    }
+  }
+
+  function stopProfilerTimerIfRunning(fiber) {
+
+    profilerStartTime = -1;
+  }
+
+  function stopProfilerTimerIfRunningAndRecordDelta(fiber, overrideBaseTime) {
+
+    if (profilerStartTime >= 0) {
+      var elapsedTime = now$1() - profilerStartTime;
+      fiber.actualDuration += elapsedTime;
+
+      if (overrideBaseTime) {
+        fiber.selfBaseDuration = elapsedTime;
+      }
+
+      profilerStartTime = -1;
+    }
+  }
+
+  function transferActualDuration(fiber) {
+    // Transfer time spent rendering these children so we don't lose it
+    // after we rerender. This is used as a helper in special cases
+    // where we should count the work of multiple passes.
+    var child = fiber.child;
+
+    while (child) {
+      fiber.actualDuration += child.actualDuration;
+      child = child.sibling;
+    }
+  }
+
   var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
   var didReceiveUpdate = false;
   var didWarnAboutBadClass;
@@ -16888,24 +17011,24 @@
     didWarnAboutTailOptions = {};
   }
 
-  function reconcileChildren(current, workInProgress, nextChildren, renderExpirationTime) {
+  function reconcileChildren(current, workInProgress, nextChildren, renderLanes) {
     if (current === null) {
       // If this is a fresh new component that hasn't been rendered yet, we
       // won't update its child set by applying minimal side-effects. Instead,
       // we will add them all to the child before it gets rendered. That means
       // we can optimize this reconciliation pass by not tracking side-effects.
-      workInProgress.child = mountChildFibers(workInProgress, null, nextChildren, renderExpirationTime);
+      workInProgress.child = mountChildFibers(workInProgress, null, nextChildren, renderLanes);
     } else {
       // If the current child is the same as the work in progress, it means that
       // we haven't yet started any work on these children. Therefore, we use
       // the clone algorithm to create a copy of all the current children.
       // If we had any progressed work already, that is invalid at this point so
       // let's throw it out.
-      workInProgress.child = reconcileChildFibers(workInProgress, current.child, nextChildren, renderExpirationTime);
-    }
-  }
-
-  function forceUnmountCurrentAndReconcile(current, workInProgress, nextChildren, renderExpirationTime) {
+      workInProgress.child = reconcileChildFibers(workInProgress, current.child, nextChildren, renderLanes);
+    }
+  }
+
+  function forceUnmountCurrentAndReconcile(current, workInProgress, nextChildren, renderLanes) {
     // This function is fork of reconcileChildren. It's used in cases where we
     // want to reconcile without matching against the existing set. This has the
     // effect of all current children being unmounted; even if the type and key
@@ -16914,15 +17037,15 @@
     // To do this, we're going to go through the reconcile algorithm twice. In
     // the first pass, we schedule a deletion for all the current children by
     // passing null.
-    workInProgress.child = reconcileChildFibers(workInProgress, current.child, null, renderExpirationTime); // In the second pass, we mount the new children. The trick here is that we
+    workInProgress.child = reconcileChildFibers(workInProgress, current.child, null, renderLanes); // In the second pass, we mount the new children. The trick here is that we
     // pass null in place of where we usually pass the current child set. This has
     // the effect of remounting all children regardless of whether their
     // identities match.
 
-    workInProgress.child = reconcileChildFibers(workInProgress, null, nextChildren, renderExpirationTime);
-  }
-
-  function updateForwardRef(current, workInProgress, Component, nextProps, renderExpirationTime) {
+    workInProgress.child = reconcileChildFibers(workInProgress, null, nextChildren, renderLanes);
+  }
+
+  function updateForwardRef(current, workInProgress, Component, nextProps, renderLanes) {
     // TODO: current can be non-null here even if the component
     // hasn't yet mounted. This happens after the first render suspends.
     // We'll need to figure out if this is fine or can cause issues.
@@ -16933,8 +17056,8 @@
         var innerPropTypes = Component.propTypes;
 
         if (innerPropTypes) {
-          checkPropTypes_1(innerPropTypes, nextProps, // Resolved props
-          'prop', getComponentName(Component), getCurrentFiberStackInDev);
+          checkPropTypes(innerPropTypes, nextProps, // Resolved props
+          'prop', getComponentName(Component));
         }
       }
     }
@@ -16943,17 +17066,20 @@
     var ref = workInProgress.ref; // The rest is a fork of updateFunctionComponent
 
     var nextChildren;
-    prepareToReadContext(workInProgress, renderExpirationTime);
+    prepareToReadContext(workInProgress, renderLanes);
 
     {
       ReactCurrentOwner$1.current = workInProgress;
       setIsRendering(true);
-      nextChildren = renderWithHooks(current, workInProgress, render, nextProps, ref, renderExpirationTime);
+      nextChildren = renderWithHooks(current, workInProgress, render, nextProps, ref, renderLanes);
 
       if ( workInProgress.mode & StrictMode) {
-        // Only double-render components with Hooks
-        if (workInProgress.memoizedState !== null) {
-          nextChildren = renderWithHooks(current, workInProgress, render, nextProps, ref, renderExpirationTime);
+        disableLogs();
+
+        try {
+          nextChildren = renderWithHooks(current, workInProgress, render, nextProps, ref, renderLanes);
+        } finally {
+          reenableLogs();
         }
       }
 
@@ -16961,17 +17087,17 @@
     }
 
     if (current !== null && !didReceiveUpdate) {
-      bailoutHooks(current, workInProgress, renderExpirationTime);
-      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderExpirationTime);
+      bailoutHooks(current, workInProgress, renderLanes);
+      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
     } // React DevTools reads this flag.
 
 
-    workInProgress.effectTag |= PerformedWork;
-    reconcileChildren(current, workInProgress, nextChildren, renderExpirationTime);
+    workInProgress.flags |= PerformedWork;
+    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
     return workInProgress.child;
   }
 
-  function updateMemoComponent(current, workInProgress, Component, nextProps, updateExpirationTime, renderExpirationTime) {
+  function updateMemoComponent(current, workInProgress, Component, nextProps, updateLanes, renderLanes) {
     if (current === null) {
       var type = Component.type;
 
@@ -16993,7 +17119,7 @@
           validateFunctionComponentInDev(workInProgress, type);
         }
 
-        return updateSimpleMemoComponent(current, workInProgress, resolvedType, nextProps, updateExpirationTime, renderExpirationTime);
+        return updateSimpleMemoComponent(current, workInProgress, resolvedType, nextProps, updateLanes, renderLanes);
       }
 
       {
@@ -17002,12 +17128,12 @@
         if (innerPropTypes) {
           // Inner memo component props aren't currently validated in createElement.
           // We could move it there, but we'd still need this for lazy code path.
-          checkPropTypes_1(innerPropTypes, nextProps, // Resolved props
-          'prop', getComponentName(type), getCurrentFiberStackInDev);
-        }
-      }
-
-      var child = createFiberFromTypeAndProps(Component.type, null, nextProps, null, workInProgress.mode, renderExpirationTime);
+          checkPropTypes(innerPropTypes, nextProps, // Resolved props
+          'prop', getComponentName(type));
+        }
+      }
+
+      var child = createFiberFromTypeAndProps(Component.type, null, nextProps, workInProgress, workInProgress.mode, renderLanes);
       child.ref = workInProgress.ref;
       child.return = workInProgress;
       workInProgress.child = child;
@@ -17021,14 +17147,14 @@
       if (_innerPropTypes) {
         // Inner memo component props aren't currently validated in createElement.
         // We could move it there, but we'd still need this for lazy code path.
-        checkPropTypes_1(_innerPropTypes, nextProps, // Resolved props
-        'prop', getComponentName(_type), getCurrentFiberStackInDev);
+        checkPropTypes(_innerPropTypes, nextProps, // Resolved props
+        'prop', getComponentName(_type));
       }
     }
 
     var currentChild = current.child; // This is always exactly one child
 
-    if (updateExpirationTime < renderExpirationTime) {
+    if (!includesSomeLane(updateLanes, renderLanes)) {
       // This will be the props with resolved defaultProps,
       // unlike current.memoizedProps which will be the unresolved ones.
       var prevProps = currentChild.memoizedProps; // Default to shallow comparison
@@ -17037,12 +17163,12 @@
       compare = compare !== null ? compare : shallowEqual;
 
       if (compare(prevProps, nextProps) && current.ref === workInProgress.ref) {
-        return bailoutOnAlreadyFinishedWork(current, workInProgress, renderExpirationTime);
+        return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
       }
     } // React DevTools reads this flag.
 
 
-    workInProgress.effectTag |= PerformedWork;
+    workInProgress.flags |= PerformedWork;
     var newChild = createWorkInProgress(currentChild, nextProps);
     newChild.ref = workInProgress.ref;
     newChild.return = workInProgress;
@@ -17050,7 +17176,7 @@
     return newChild;
   }
 
-  function updateSimpleMemoComponent(current, workInProgress, Component, nextProps, updateExpirationTime, renderExpirationTime) {
+  function updateSimpleMemoComponent(current, workInProgress, Component, nextProps, updateLanes, renderLanes) {
     // TODO: current can be non-null here even if the component
     // hasn't yet mounted. This happens when the inner render suspends.
     // We'll need to figure out if this is fine or can cause issues.
@@ -17064,16 +17190,24 @@
           // We warn when you define propTypes on lazy()
           // so let's just skip over it to find memo() outer wrapper.
           // Inner props for memo are validated later.
-          outerMemoType = refineResolvedLazyComponent(outerMemoType);
-        }
-
-        var outerPropTypes = outerMemoType && outerMemoType.propTypes;
-
-        if (outerPropTypes) {
-          checkPropTypes_1(outerPropTypes, nextProps, // Resolved (SimpleMemoComponent has no defaultProps)
-          'prop', getComponentName(outerMemoType), getCurrentFiberStackInDev);
-        } // Inner propTypes will be validated in the function component path.
-
+          var lazyComponent = outerMemoType;
+          var payload = lazyComponent._payload;
+          var init = lazyComponent._init;
+
+          try {
+            outerMemoType = init(payload);
+          } catch (x) {
+            outerMemoType = null;
+          } // Inner propTypes will be validated in the function component path.
+
+
+          var outerPropTypes = outerMemoType && outerMemoType.propTypes;
+
+          if (outerPropTypes) {
+            checkPropTypes(outerPropTypes, nextProps, // Resolved (SimpleMemoComponent has no defaultProps)
+            'prop', getComponentName(outerMemoType));
+          }
+        }
       }
     }
 
@@ -17084,10 +17218,10 @@
        workInProgress.type === current.type )) {
         didReceiveUpdate = false;
 
-        if (updateExpirationTime < renderExpirationTime) {
-          // The pending update priority was cleared at the beginning of
-          // beginWork. We're about to bail out, but there might be additional
-          // updates at a lower priority. Usually, the priority level of the
+        if (!includesSomeLane(renderLanes, updateLanes)) {
+          // The pending lanes were cleared at the beginning of beginWork. We're
+          // about to bail out, but there might be other lanes that weren't
+          // included in the current render. Usually, the priority level of the
           // remaining updates is accumlated during the evaluation of the
           // component (i.e. when processing the update queue). But since since
           // we're bailing out early *without* evaluating the component, we need
@@ -17098,35 +17232,118 @@
           // contains hooks.
           // TODO: Move the reset at in beginWork out of the common path so that
           // this is no longer necessary.
-          workInProgress.expirationTime = current.expirationTime;
-          return bailoutOnAlreadyFinishedWork(current, workInProgress, renderExpirationTime);
-        }
-      }
-    }
-
-    return updateFunctionComponent(current, workInProgress, Component, nextProps, renderExpirationTime);
-  }
-
-  function updateFragment(current, workInProgress, renderExpirationTime) {
+          workInProgress.lanes = current.lanes;
+          return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
+        } else if ((current.flags & ForceUpdateForLegacySuspense) !== NoFlags) {
+          // This is a special case that only exists for legacy mode.
+          // See https://github.com/facebook/react/pull/19216.
+          didReceiveUpdate = true;
+        }
+      }
+    }
+
+    return updateFunctionComponent(current, workInProgress, Component, nextProps, renderLanes);
+  }
+
+  function updateOffscreenComponent(current, workInProgress, renderLanes) {
+    var nextProps = workInProgress.pendingProps;
+    var nextChildren = nextProps.children;
+    var prevState = current !== null ? current.memoizedState : null;
+
+    if (nextProps.mode === 'hidden' || nextProps.mode === 'unstable-defer-without-hiding') {
+      if ((workInProgress.mode & ConcurrentMode) === NoMode) {
+        // In legacy sync mode, don't defer the subtree. Render it now.
+        // TODO: Figure out what we should do in Blocking mode.
+        var nextState = {
+          baseLanes: NoLanes
+        };
+        workInProgress.memoizedState = nextState;
+        pushRenderLanes(workInProgress, renderLanes);
+      } else if (!includesSomeLane(renderLanes, OffscreenLane)) {
+        var nextBaseLanes;
+
+        if (prevState !== null) {
+          var prevBaseLanes = prevState.baseLanes;
+          nextBaseLanes = mergeLanes(prevBaseLanes, renderLanes);
+        } else {
+          nextBaseLanes = renderLanes;
+        } // Schedule this fiber to re-render at offscreen priority. Then bailout.
+
+
+        {
+          markSpawnedWork(OffscreenLane);
+        }
+
+        workInProgress.lanes = workInProgress.childLanes = laneToLanes(OffscreenLane);
+        var _nextState = {
+          baseLanes: nextBaseLanes
+        };
+        workInProgress.memoizedState = _nextState; // We're about to bail out, but we need to push this to the stack anyway
+        // to avoid a push/pop misalignment.
+
+        pushRenderLanes(workInProgress, nextBaseLanes);
+        return null;
+      } else {
+        // Rendering at offscreen, so we can clear the base lanes.
+        var _nextState2 = {
+          baseLanes: NoLanes
+        };
+        workInProgress.memoizedState = _nextState2; // Push the lanes that were skipped when we bailed out.
+
+        var subtreeRenderLanes = prevState !== null ? prevState.baseLanes : renderLanes;
+        pushRenderLanes(workInProgress, subtreeRenderLanes);
+      }
+    } else {
+      var _subtreeRenderLanes;
+
+      if (prevState !== null) {
+        _subtreeRenderLanes = mergeLanes(prevState.baseLanes, renderLanes); // Since we're not hidden anymore, reset the state
+
+        workInProgress.memoizedState = null;
+      } else {
+        // We weren't previously hidden, and we still aren't, so there's nothing
+        // special to do. Need to push to the stack regardless, though, to avoid
+        // a push/pop misalignment.
+        _subtreeRenderLanes = renderLanes;
+      }
+
+      pushRenderLanes(workInProgress, _subtreeRenderLanes);
+    }
+
+    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+    return workInProgress.child;
+  } // Note: These happen to have identical begin phases, for now. We shouldn't hold
+  // ourselves to this constraint, though. If the behavior diverges, we should
+  // fork the function.
+
+
+  var updateLegacyHiddenComponent = updateOffscreenComponent;
+
+  function updateFragment(current, workInProgress, renderLanes) {
     var nextChildren = workInProgress.pendingProps;
-    reconcileChildren(current, workInProgress, nextChildren, renderExpirationTime);
+    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
     return workInProgress.child;
   }
 
-  function updateMode(current, workInProgress, renderExpirationTime) {
+  function updateMode(current, workInProgress, renderLanes) {
     var nextChildren = workInProgress.pendingProps.children;
-    reconcileChildren(current, workInProgress, nextChildren, renderExpirationTime);
+    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
     return workInProgress.child;
   }
 
-  function updateProfiler(current, workInProgress, renderExpirationTime) {
-    {
-      workInProgress.effectTag |= Update;
+  function updateProfiler(current, workInProgress, renderLanes) {
+    {
+      workInProgress.flags |= Update; // Reset effect durations for the next eventual effect phase.
+      // These are reset during render to allow the DevTools commit hook a chance to read them,
+
+      var stateNode = workInProgress.stateNode;
+      stateNode.effectDuration = 0;
+      stateNode.passiveEffectDuration = 0;
     }
 
     var nextProps = workInProgress.pendingProps;
     var nextChildren = nextProps.children;
-    reconcileChildren(current, workInProgress, nextChildren, renderExpirationTime);
+    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
     return workInProgress.child;
   }
 
@@ -17135,11 +17352,11 @@
 
     if (current === null && ref !== null || current !== null && current.ref !== ref) {
       // Schedule a Ref effect
-      workInProgress.effectTag |= Ref;
-    }
-  }
-
-  function updateFunctionComponent(current, workInProgress, Component, nextProps, renderExpirationTime) {
+      workInProgress.flags |= Ref;
+    }
+  }
+
+  function updateFunctionComponent(current, workInProgress, Component, nextProps, renderLanes) {
     {
       if (workInProgress.type !== workInProgress.elementType) {
         // Lazy component props can't be validated in createElement
@@ -17147,8 +17364,8 @@
         var innerPropTypes = Component.propTypes;
 
         if (innerPropTypes) {
-          checkPropTypes_1(innerPropTypes, nextProps, // Resolved props
-          'prop', getComponentName(Component), getCurrentFiberStackInDev);
+          checkPropTypes(innerPropTypes, nextProps, // Resolved props
+          'prop', getComponentName(Component));
         }
       }
     }
@@ -17161,17 +17378,20 @@
     }
 
     var nextChildren;
-    prepareToReadContext(workInProgress, renderExpirationTime);
+    prepareToReadContext(workInProgress, renderLanes);
 
     {
       ReactCurrentOwner$1.current = workInProgress;
       setIsRendering(true);
-      nextChildren = renderWithHooks(current, workInProgress, Component, nextProps, context, renderExpirationTime);
+      nextChildren = renderWithHooks(current, workInProgress, Component, nextProps, context, renderLanes);
 
       if ( workInProgress.mode & StrictMode) {
-        // Only double-render components with Hooks
-        if (workInProgress.memoizedState !== null) {
-          nextChildren = renderWithHooks(current, workInProgress, Component, nextProps, context, renderExpirationTime);
+        disableLogs();
+
+        try {
+          nextChildren = renderWithHooks(current, workInProgress, Component, nextProps, context, renderLanes);
+        } finally {
+          reenableLogs();
         }
       }
 
@@ -17179,17 +17399,17 @@
     }
 
     if (current !== null && !didReceiveUpdate) {
-      bailoutHooks(current, workInProgress, renderExpirationTime);
-      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderExpirationTime);
+      bailoutHooks(current, workInProgress, renderLanes);
+      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
     } // React DevTools reads this flag.
 
 
-    workInProgress.effectTag |= PerformedWork;
-    reconcileChildren(current, workInProgress, nextChildren, renderExpirationTime);
+    workInProgress.flags |= PerformedWork;
+    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
     return workInProgress.child;
   }
 
-  function updateClassComponent(current, workInProgress, Component, nextProps, renderExpirationTime) {
+  function updateClassComponent(current, workInProgress, Component, nextProps, renderLanes) {
     {
       if (workInProgress.type !== workInProgress.elementType) {
         // Lazy component props can't be validated in createElement
@@ -17197,8 +17417,8 @@
         var innerPropTypes = Component.propTypes;
 
         if (innerPropTypes) {
-          checkPropTypes_1(innerPropTypes, nextProps, // Resolved props
-          'prop', getComponentName(Component), getCurrentFiberStackInDev);
+          checkPropTypes(innerPropTypes, nextProps, // Resolved props
+          'prop', getComponentName(Component));
         }
       }
     } // Push context providers early to prevent context stack mismatches.
@@ -17215,7 +17435,7 @@
       hasContext = false;
     }
 
-    prepareToReadContext(workInProgress, renderExpirationTime);
+    prepareToReadContext(workInProgress, renderLanes);
     var instance = workInProgress.stateNode;
     var shouldUpdate;
 
@@ -17228,26 +17448,26 @@
         current.alternate = null;
         workInProgress.alternate = null; // Since this is conceptually a new fiber, schedule a Placement effect
 
-        workInProgress.effectTag |= Placement;
+        workInProgress.flags |= Placement;
       } // In the initial pass we might need to construct the instance.
 
 
       constructClassInstance(workInProgress, Component, nextProps);
-      mountClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
+      mountClassInstance(workInProgress, Component, nextProps, renderLanes);
       shouldUpdate = true;
     } else if (current === null) {
       // In a resume, we'll already have an instance we can reuse.
-      shouldUpdate = resumeMountClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
-    } else {
-      shouldUpdate = updateClassInstance(current, workInProgress, Component, nextProps, renderExpirationTime);
-    }
-
-    var nextUnitOfWork = finishClassComponent(current, workInProgress, Component, shouldUpdate, hasContext, renderExpirationTime);
+      shouldUpdate = resumeMountClassInstance(workInProgress, Component, nextProps, renderLanes);
+    } else {
+      shouldUpdate = updateClassInstance(current, workInProgress, Component, nextProps, renderLanes);
+    }
+
+    var nextUnitOfWork = finishClassComponent(current, workInProgress, Component, shouldUpdate, hasContext, renderLanes);
 
     {
       var inst = workInProgress.stateNode;
 
-      if (inst.props !== nextProps) {
+      if (shouldUpdate && inst.props !== nextProps) {
         if (!didWarnAboutReassigningProps) {
           error('It looks like %s is reassigning its own `this.props` while rendering. ' + 'This is not supported and can lead to confusing bugs.', getComponentName(workInProgress.type) || 'a component');
         }
@@ -17259,10 +17479,10 @@
     return nextUnitOfWork;
   }
 
-  function finishClassComponent(current, workInProgress, Component, shouldUpdate, hasContext, renderExpirationTime) {
+  function finishClassComponent(current, workInProgress, Component, shouldUpdate, hasContext, renderLanes) {
     // Refs should update even if shouldComponentUpdate returns false
     markRef(current, workInProgress);
-    var didCaptureError = (workInProgress.effectTag & DidCapture) !== NoEffect;
+    var didCaptureError = (workInProgress.flags & DidCapture) !== NoFlags;
 
     if (!shouldUpdate && !didCaptureError) {
       // Context providers should defer to sCU for rendering
@@ -17270,7 +17490,7 @@
         invalidateContextProvider(workInProgress, Component, false);
       }
 
-      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderExpirationTime);
+      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
     }
 
     var instance = workInProgress.stateNode; // Rerender
@@ -17295,7 +17515,13 @@
         nextChildren = instance.render();
 
         if ( workInProgress.mode & StrictMode) {
-          instance.render();
+          disableLogs();
+
+          try {
+            instance.render();
+          } finally {
+            reenableLogs();
+          }
         }
 
         setIsRendering(false);
@@ -17303,16 +17529,16 @@
     } // React DevTools reads this flag.
 
 
-    workInProgress.effectTag |= PerformedWork;
+    workInProgress.flags |= PerformedWork;
 
     if (current !== null && didCaptureError) {
       // If we're recovering from an error, reconcile without reusing any of
       // the existing children. Conceptually, the normal children and the children
       // that are shown on error are two different sets, so we shouldn't reuse
       // normal children even if their identities match.
-      forceUnmountCurrentAndReconcile(current, workInProgress, nextChildren, renderExpirationTime);
-    } else {
-      reconcileChildren(current, workInProgress, nextChildren, renderExpirationTime);
+      forceUnmountCurrentAndReconcile(current, workInProgress, nextChildren, renderLanes);
+    } else {
+      reconcileChildren(current, workInProgress, nextChildren, renderLanes);
     } // Memoize state using the values we just used to render.
     // TODO: Restructure so we never read values from the instance.
 
@@ -17339,7 +17565,7 @@
     pushHostContainer(workInProgress, root.containerInfo);
   }
 
-  function updateHostRoot(current, workInProgress, renderExpirationTime) {
+  function updateHostRoot(current, workInProgress, renderLanes) {
     pushHostRootContext(workInProgress);
     var updateQueue = workInProgress.updateQueue;
 
@@ -17353,17 +17579,15 @@
     var prevState = workInProgress.memoizedState;
     var prevChildren = prevState !== null ? prevState.element : null;
     cloneUpdateQueue(current, workInProgress);
-    processUpdateQueue(workInProgress, nextProps, null, renderExpirationTime);
+    processUpdateQueue(workInProgress, nextProps, null, renderLanes);
     var nextState = workInProgress.memoizedState; // Caution: React DevTools currently depends on this property
     // being called "element".
 
     var nextChildren = nextState.element;
 
     if (nextChildren === prevChildren) {
-      // If the state is the same as before, that's a bailout because we had
-      // no work that expires at this time.
       resetHydrationState();
-      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderExpirationTime);
+      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
     }
 
     var root = workInProgress.stateNode;
@@ -17373,7 +17597,19 @@
       // We always try to hydrate. If this isn't a hydration pass there won't
       // be any children to hydrate which is effectively the same thing as
       // not hydrating.
-      var child = mountChildFibers(workInProgress, null, nextChildren, renderExpirationTime);
+      {
+        var mutableSourceEagerHydrationData = root.mutableSourceEagerHydrationData;
+
+        if (mutableSourceEagerHydrationData != null) {
+          for (var i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
+            var mutableSource = mutableSourceEagerHydrationData[i];
+            var version = mutableSourceEagerHydrationData[i + 1];
+            setWorkInProgressVersion(mutableSource, version);
+          }
+        }
+      }
+
+      var child = mountChildFibers(workInProgress, null, nextChildren, renderLanes);
       workInProgress.child = child;
       var node = child;
 
@@ -17384,20 +17620,20 @@
         // Conceptually this is similar to Placement in that a new subtree is
         // inserted into the React tree here. It just happens to not need DOM
         // mutations because it already exists.
-        node.effectTag = node.effectTag & ~Placement | Hydrating;
+        node.flags = node.flags & ~Placement | Hydrating;
         node = node.sibling;
       }
     } else {
       // Otherwise reset hydration state in case we aborted and resumed another
       // root.
-      reconcileChildren(current, workInProgress, nextChildren, renderExpirationTime);
+      reconcileChildren(current, workInProgress, nextChildren, renderLanes);
       resetHydrationState();
     }
 
     return workInProgress.child;
   }
 
-  function updateHostComponent(current, workInProgress, renderExpirationTime) {
+  function updateHostComponent(current, workInProgress, renderLanes) {
     pushHostContext(workInProgress);
 
     if (current === null) {
@@ -17419,22 +17655,11 @@
     } else if (prevProps !== null && shouldSetTextContent(type, prevProps)) {
       // If we're switching from a direct text child to a normal child, or to
       // empty, we need to schedule the text content to be reset.
-      workInProgress.effectTag |= ContentReset;
-    }
-
-    markRef(current, workInProgress); // Check the host config to see if the children are offscreen/hidden.
-
-    if (workInProgress.mode & ConcurrentMode && renderExpirationTime !== Never && shouldDeprioritizeSubtree(type, nextProps)) {
-      {
-        markSpawnedWork(Never);
-      } // Schedule this fiber to re-render at offscreen priority. Then bailout.
-
-
-      workInProgress.expirationTime = workInProgress.childExpirationTime = Never;
-      return null;
-    }
-
-    reconcileChildren(current, workInProgress, nextChildren, renderExpirationTime);
+      workInProgress.flags |= ContentReset;
+    }
+
+    markRef(current, workInProgress);
+    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
     return workInProgress.child;
   }
 
@@ -17448,7 +17673,7 @@
     return null;
   }
 
-  function mountLazyComponent(_current, workInProgress, elementType, updateExpirationTime, renderExpirationTime) {
+  function mountLazyComponent(_current, workInProgress, elementType, updateLanes, renderLanes) {
     if (_current !== null) {
       // A lazy component only mounts if it suspended inside a non-
       // concurrent tree, in an inconsistent state. We want to treat it like
@@ -17457,18 +17682,17 @@
       _current.alternate = null;
       workInProgress.alternate = null; // Since this is conceptually a new fiber, schedule a Placement effect
 
-      workInProgress.effectTag |= Placement;
-    }
-
-    var props = workInProgress.pendingProps; // We can't start a User Timing measurement with correct label yet.
-    // Cancel and resume right after we know the tag.
-
-    cancelWorkTimer(workInProgress);
-    var Component = readLazyComponentType(elementType); // Store the unwrapped component in the type.
+      workInProgress.flags |= Placement;
+    }
+
+    var props = workInProgress.pendingProps;
+    var lazyComponent = elementType;
+    var payload = lazyComponent._payload;
+    var init = lazyComponent._init;
+    var Component = init(payload); // Store the unwrapped component in the type.
 
     workInProgress.type = Component;
     var resolvedTag = workInProgress.tag = resolveLazyComponentTag(Component);
-    startWorkTimer(workInProgress);
     var resolvedProps = resolveDefaultProps(Component, props);
     var child;
 
@@ -17480,7 +17704,7 @@
             workInProgress.type = Component = resolveFunctionForHotReloading(Component);
           }
 
-          child = updateFunctionComponent(null, workInProgress, Component, resolvedProps, renderExpirationTime);
+          child = updateFunctionComponent(null, workInProgress, Component, resolvedProps, renderLanes);
           return child;
         }
 
@@ -17490,7 +17714,7 @@
             workInProgress.type = Component = resolveClassForHotReloading(Component);
           }
 
-          child = updateClassComponent(null, workInProgress, Component, resolvedProps, renderExpirationTime);
+          child = updateClassComponent(null, workInProgress, Component, resolvedProps, renderLanes);
           return child;
         }
 
@@ -17500,7 +17724,7 @@
             workInProgress.type = Component = resolveForwardRefForHotReloading(Component);
           }
 
-          child = updateForwardRef(null, workInProgress, Component, resolvedProps, renderExpirationTime);
+          child = updateForwardRef(null, workInProgress, Component, resolvedProps, renderLanes);
           return child;
         }
 
@@ -17511,14 +17735,14 @@
               var outerPropTypes = Component.propTypes;
 
               if (outerPropTypes) {
-                checkPropTypes_1(outerPropTypes, resolvedProps, // Resolved for outer only
-                'prop', getComponentName(Component), getCurrentFiberStackInDev);
+                checkPropTypes(outerPropTypes, resolvedProps, // Resolved for outer only
+                'prop', getComponentName(Component));
               }
             }
           }
 
           child = updateMemoComponent(null, workInProgress, Component, resolveDefaultProps(Component.type, resolvedProps), // The inner type can have defaults too
-          updateExpirationTime, renderExpirationTime);
+          updateLanes, renderLanes);
           return child;
         }
     }
@@ -17541,7 +17765,7 @@
     }
   }
 
-  function mountIncompleteClassComponent(_current, workInProgress, Component, nextProps, renderExpirationTime) {
+  function mountIncompleteClassComponent(_current, workInProgress, Component, nextProps, renderLanes) {
     if (_current !== null) {
       // An incomplete component only mounts if it suspended inside a non-
       // concurrent tree, in an inconsistent state. We want to treat it like
@@ -17550,7 +17774,7 @@
       _current.alternate = null;
       workInProgress.alternate = null; // Since this is conceptually a new fiber, schedule a Placement effect
 
-      workInProgress.effectTag |= Placement;
+      workInProgress.flags |= Placement;
     } // Promote the fiber to a class and try rendering again.
 
 
@@ -17568,13 +17792,13 @@
       hasContext = false;
     }
 
-    prepareToReadContext(workInProgress, renderExpirationTime);
+    prepareToReadContext(workInProgress, renderLanes);
     constructClassInstance(workInProgress, Component, nextProps);
-    mountClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
-    return finishClassComponent(null, workInProgress, Component, true, hasContext, renderExpirationTime);
-  }
-
-  function mountIndeterminateComponent(_current, workInProgress, Component, renderExpirationTime) {
+    mountClassInstance(workInProgress, Component, nextProps, renderLanes);
+    return finishClassComponent(null, workInProgress, Component, true, hasContext, renderLanes);
+  }
+
+  function mountIndeterminateComponent(_current, workInProgress, Component, renderLanes) {
     if (_current !== null) {
       // An indeterminate component only mounts if it suspended inside a non-
       // concurrent tree, in an inconsistent state. We want to treat it like
@@ -17583,7 +17807,7 @@
       _current.alternate = null;
       workInProgress.alternate = null; // Since this is conceptually a new fiber, schedule a Placement effect
 
-      workInProgress.effectTag |= Placement;
+      workInProgress.flags |= Placement;
     }
 
     var props = workInProgress.pendingProps;
@@ -17594,7 +17818,7 @@
       context = getMaskedContext(workInProgress, unmaskedContext);
     }
 
-    prepareToReadContext(workInProgress, renderExpirationTime);
+    prepareToReadContext(workInProgress, renderLanes);
     var value;
 
     {
@@ -17614,15 +17838,17 @@
 
       setIsRendering(true);
       ReactCurrentOwner$1.current = workInProgress;
-      value = renderWithHooks(null, workInProgress, Component, props, context, renderExpirationTime);
+      value = renderWithHooks(null, workInProgress, Component, props, context, renderLanes);
       setIsRendering(false);
     } // React DevTools reads this flag.
 
 
-    workInProgress.effectTag |= PerformedWork;
-
-    if (typeof value === 'object' && value !== null && typeof value.render === 'function' && value.$$typeof === undefined) {
-      {
+    workInProgress.flags |= PerformedWork;
+
+    {
+      // Support for module components is deprecated and is removed behind a flag.
+      // Whether or not it would crash later, we want to show a good message in DEV first.
+      if (typeof value === 'object' && value !== null && typeof value.render === 'function' && value.$$typeof === undefined) {
         var _componentName = getComponentName(Component) || 'Unknown';
 
         if (!didWarnAboutModulePatternComponent[_componentName]) {
@@ -17630,6 +17856,20 @@
 
           didWarnAboutModulePatternComponent[_componentName] = true;
         }
+      }
+    }
+
+    if ( // Run these checks in production only if the flag is off.
+    // Eventually we'll delete this branch altogether.
+     typeof value === 'object' && value !== null && typeof value.render === 'function' && value.$$typeof === undefined) {
+      {
+        var _componentName2 = getComponentName(Component) || 'Unknown';
+
+        if (!didWarnAboutModulePatternComponent[_componentName2]) {
+          error('The <%s /> component appears to be a function component that returns a class instance. ' + 'Change %s to a class that extends React.Component instead. ' + "If you can't use a class try assigning the prototype on the function as a workaround. " + "`%s.prototype = React.Component.prototype`. Don't use an arrow function since it " + 'cannot be called with `new` by React.', _componentName2, _componentName2, _componentName2);
+
+          didWarnAboutModulePatternComponent[_componentName2] = true;
+        }
       } // Proceed under the assumption that this is a class instance
 
 
@@ -17658,8 +17898,8 @@
       }
 
       adoptClassInstance(workInProgress, value);
-      mountClassInstance(workInProgress, Component, props, renderExpirationTime);
-      return finishClassComponent(null, workInProgress, Component, true, hasContext, renderExpirationTime);
+      mountClassInstance(workInProgress, Component, props, renderLanes);
+      return finishClassComponent(null, workInProgress, Component, true, hasContext, renderLanes);
     } else {
       // Proceed under the assumption that this is a function component
       workInProgress.tag = FunctionComponent;
@@ -17667,14 +17907,17 @@
       {
 
         if ( workInProgress.mode & StrictMode) {
-          // Only double-render components with Hooks
-          if (workInProgress.memoizedState !== null) {
-            value = renderWithHooks(null, workInProgress, Component, props, context, renderExpirationTime);
-          }
-        }
-      }
-
-      reconcileChildren(null, workInProgress, value, renderExpirationTime);
+          disableLogs();
+
+          try {
+            value = renderWithHooks(null, workInProgress, Component, props, context, renderLanes);
+          } finally {
+            reenableLogs();
+          }
+        }
+      }
+
+      reconcileChildren(null, workInProgress, value, renderLanes);
 
       {
         validateFunctionComponentInDev(workInProgress, Component);
@@ -17715,22 +17958,22 @@
       }
 
       if (typeof Component.getDerivedStateFromProps === 'function') {
-        var _componentName2 = getComponentName(Component) || 'Unknown';
-
-        if (!didWarnAboutGetDerivedStateOnFunctionComponent[_componentName2]) {
-          error('%s: Function components do not support getDerivedStateFromProps.', _componentName2);
-
-          didWarnAboutGetDerivedStateOnFunctionComponent[_componentName2] = true;
+        var _componentName3 = getComponentName(Component) || 'Unknown';
+
+        if (!didWarnAboutGetDerivedStateOnFunctionComponent[_componentName3]) {
+          error('%s: Function components do not support getDerivedStateFromProps.', _componentName3);
+
+          didWarnAboutGetDerivedStateOnFunctionComponent[_componentName3] = true;
         }
       }
 
       if (typeof Component.contextType === 'object' && Component.contextType !== null) {
-        var _componentName3 = getComponentName(Component) || 'Unknown';
-
-        if (!didWarnAboutContextTypeOnFunctionComponent[_componentName3]) {
-          error('%s: Function components do not support contextType.', _componentName3);
-
-          didWarnAboutContextTypeOnFunctionComponent[_componentName3] = true;
+        var _componentName4 = getComponentName(Component) || 'Unknown';
+
+        if (!didWarnAboutContextTypeOnFunctionComponent[_componentName4]) {
+          error('%s: Function components do not support contextType.', _componentName4);
+
+          didWarnAboutContextTypeOnFunctionComponent[_componentName4] = true;
         }
       }
     }
@@ -17738,34 +17981,65 @@
 
   var SUSPENDED_MARKER = {
     dehydrated: null,
-    retryTime: NoWork
+    retryLane: NoLane
   };
 
-  function shouldRemainOnFallback(suspenseContext, current, workInProgress) {
-    // If the context is telling us that we should show a fallback, and we're not
-    // already showing content, then we should show the fallback instead.
-    return hasSuspenseContext(suspenseContext, ForceSuspenseFallback) && (current === null || current.memoizedState !== null);
-  }
-
-  function updateSuspenseComponent(current, workInProgress, renderExpirationTime) {
-    var mode = workInProgress.mode;
+  function mountSuspenseOffscreenState(renderLanes) {
+    return {
+      baseLanes: renderLanes
+    };
+  }
+
+  function updateSuspenseOffscreenState(prevOffscreenState, renderLanes) {
+    return {
+      baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes)
+    };
+  } // TODO: Probably should inline this back
+
+
+  function shouldRemainOnFallback(suspenseContext, current, workInProgress, renderLanes) {
+    // If we're already showing a fallback, there are cases where we need to
+    // remain on that fallback regardless of whether the content has resolved.
+    // For example, SuspenseList coordinates when nested content appears.
+    if (current !== null) {
+      var suspenseState = current.memoizedState;
+
+      if (suspenseState === null) {
+        // Currently showing content. Don't hide it, even if ForceSuspenseFallack
+        // is true. More precise name might be "ForceRemainSuspenseFallback".
+        // Note: This is a factoring smell. Can't remain on a fallback if there's
+        // no fallback to remain on.
+        return false;
+      }
+    } // Not currently showing content. Consult the Suspense context.
+
+
+    return hasSuspenseContext(suspenseContext, ForceSuspenseFallback);
+  }
+
+  function getRemainingWorkInPrimaryTree(current, renderLanes) {
+    // TODO: Should not remove render lanes that were pinged during this render
+    return removeLanes(current.childLanes, renderLanes);
+  }
+
+  function updateSuspenseComponent(current, workInProgress, renderLanes) {
     var nextProps = workInProgress.pendingProps; // This is used by DevTools to force a boundary to suspend.
 
     {
       if (shouldSuspend(workInProgress)) {
-        workInProgress.effectTag |= DidCapture;
+        workInProgress.flags |= DidCapture;
       }
     }
 
     var suspenseContext = suspenseStackCursor.current;
-    var nextDidTimeout = false;
-    var didSuspend = (workInProgress.effectTag & DidCapture) !== NoEffect;
+    var showFallback = false;
+    var didSuspend = (workInProgress.flags & DidCapture) !== NoFlags;
 
     if (didSuspend || shouldRemainOnFallback(suspenseContext, current)) {
       // Something in this boundary's subtree already suspended. Switch to
       // rendering the fallback children.
-      nextDidTimeout = true;
-      workInProgress.effectTag &= ~DidCapture;
+      showFallback = true;
+      workInProgress.flags &= ~DidCapture;
     } else {
       // Attempting the main content
       if (current === null || current.memoizedState !== null) {
@@ -17781,246 +18055,302 @@
     }
 
     suspenseContext = setDefaultShallowSuspenseContext(suspenseContext);
-    pushSuspenseContext(workInProgress, suspenseContext); // This next part is a bit confusing. If the children timeout, we switch to
-    // showing the fallback children in place of the "primary" children.
-    // However, we don't want to delete the primary children because then their
-    // state will be lost (both the React state and the host state, e.g.
-    // uncontrolled form inputs). Instead we keep them mounted and hide them.
-    // Both the fallback children AND the primary children are rendered at the
-    // same time. Once the primary children are un-suspended, we can delete
-    // the fallback children — don't need to preserve their state.
+    pushSuspenseContext(workInProgress, suspenseContext); // OK, the next part is confusing. We're about to reconcile the Suspense
+    // boundary's children. This involves some custom reconcilation logic. Two
+    // main reasons this is so complicated.
     //
-    // The two sets of children are siblings in the host environment, but
-    // semantically, for purposes of reconciliation, they are two separate sets.
-    // So we store them using two fragment fibers.
+    // First, Legacy Mode has different semantics for backwards compatibility. The
+    // primary tree will commit in an inconsistent state, so when we do the
+    // second pass to render the fallback, we do some exceedingly, uh, clever
+    // hacks to make that not totally break. Like transferring effects and
+    // deletions from hidden tree. In Concurrent Mode, it's much simpler,
+    // because we bailout on the primary tree completely and leave it in its old
+    // state, no effects. Same as what we do for Offscreen (except that
+    // Offscreen doesn't have the first render pass).
     //
-    // However, we want to avoid allocating extra fibers for every placeholder.
-    // They're only necessary when the children time out, because that's the
-    // only time when both sets are mounted.
+    // Second is hydration. During hydration, the Suspense fiber has a slightly
+    // different layout, where the child points to a dehydrated fragment, which
+    // contains the DOM rendered by the server.
     //
-    // So, the extra fragment fibers are only used if the children time out.
-    // Otherwise, we render the primary children directly. This requires some
-    // custom reconciliation logic to preserve the state of the primary
-    // children. It's essentially a very basic form of re-parenting.
+    // Third, even if you set all that aside, Suspense is like error boundaries in
+    // that we first we try to render one tree, and if that fails, we render again
+    // and switch to a different tree. Like a try/catch block. So we have to track
+    // which branch we're currently rendering. Ideally we would model this using
+    // a stack.
 
     if (current === null) {
+      // Initial mount
       // If we're currently hydrating, try to hydrate this boundary.
       // But only if this has a fallback.
       if (nextProps.fallback !== undefined) {
         tryToClaimNextHydratableInstance(workInProgress); // This could've been a dehydrated suspense component.
-      } // This is the initial mount. This branch is pretty simple because there's
-      // no previous state that needs to be preserved.
-
-
-      if (nextDidTimeout) {
-        // Mount separate fragments for primary and fallback children.
-        var nextFallbackChildren = nextProps.fallback;
-        var primaryChildFragment = createFiberFromFragment(null, mode, NoWork, null);
-        primaryChildFragment.return = workInProgress;
-
-        if ((workInProgress.mode & BlockingMode) === NoMode) {
-          // Outside of blocking mode, we commit the effects from the
-          // partially completed, timed-out tree, too.
-          var progressedState = workInProgress.memoizedState;
-          var progressedPrimaryChild = progressedState !== null ? workInProgress.child.child : workInProgress.child;
-          primaryChildFragment.child = progressedPrimaryChild;
-          var progressedChild = progressedPrimaryChild;
-
-          while (progressedChild !== null) {
-            progressedChild.return = primaryChildFragment;
-            progressedChild = progressedChild.sibling;
-          }
-        }
-
-        var fallbackChildFragment = createFiberFromFragment(nextFallbackChildren, mode, renderExpirationTime, null);
-        fallbackChildFragment.return = workInProgress;
-        primaryChildFragment.sibling = fallbackChildFragment; // Skip the primary children, and continue working on the
-        // fallback children.
-
+      }
+
+      var nextPrimaryChildren = nextProps.children;
+      var nextFallbackChildren = nextProps.fallback;
+
+      if (showFallback) {
+        var fallbackFragment = mountSuspenseFallbackChildren(workInProgress, nextPrimaryChildren, nextFallbackChildren, renderLanes);
+        var primaryChildFragment = workInProgress.child;
+        primaryChildFragment.memoizedState = mountSuspenseOffscreenState(renderLanes);
         workInProgress.memoizedState = SUSPENDED_MARKER;
-        workInProgress.child = primaryChildFragment;
-        return fallbackChildFragment;
-      } else {
-        // Mount the primary children without an intermediate fragment fiber.
-        var nextPrimaryChildren = nextProps.children;
-        workInProgress.memoizedState = null;
-        return workInProgress.child = mountChildFibers(workInProgress, null, nextPrimaryChildren, renderExpirationTime);
-      }
-    } else {
-      // This is an update. This branch is more complicated because we need to
-      // ensure the state of the primary children is preserved.
+        return fallbackFragment;
+      } else if (typeof nextProps.unstable_expectedLoadTime === 'number') {
+        // This is a CPU-bound tree. Skip this tree and show a placeholder to
+        // unblock the surrounding content. Then immediately retry after the
+        // initial commit.
+        var _fallbackFragment = mountSuspenseFallbackChildren(workInProgress, nextPrimaryChildren, nextFallbackChildren, renderLanes);
+
+        var _primaryChildFragment = workInProgress.child;
+        _primaryChildFragment.memoizedState = mountSuspenseOffscreenState(renderLanes);
+        workInProgress.memoizedState = SUSPENDED_MARKER; // Since nothing actually suspended, there will nothing to ping this to
+        // get it started back up to attempt the next item. While in terms of
+        // priority this work has the same priority as this current render, it's
+        // not part of the same transition once the transition has committed. If
+        // it's sync, we still want to yield so that it can be painted.
+        // Conceptually, this is really the same as pinging. We can use any
+        // RetryLane even if it's the one currently rendering since we're leaving
+        // it behind on this node.
+
+        workInProgress.lanes = SomeRetryLane;
+
+        {
+          markSpawnedWork(SomeRetryLane);
+        }
+
+        return _fallbackFragment;
+      } else {
+        return mountSuspensePrimaryChildren(workInProgress, nextPrimaryChildren, renderLanes);
+      }
+    } else {
+      // This is an update.
+      // If the current fiber has a SuspenseState, that means it's already showing
+      // a fallback.
       var prevState = current.memoizedState;
 
       if (prevState !== null) {
-        // wrapped in a fragment fiber.
-
-
-        var currentPrimaryChildFragment = current.child;
-        var currentFallbackChildFragment = currentPrimaryChildFragment.sibling;
-
-        if (nextDidTimeout) {
-          // Still timed out. Reuse the current primary children by cloning
-          // its fragment. We're going to skip over these entirely.
+
+        if (showFallback) {
           var _nextFallbackChildren2 = nextProps.fallback;
-
-          var _primaryChildFragment2 = createWorkInProgress(currentPrimaryChildFragment, currentPrimaryChildFragment.pendingProps);
-
-          _primaryChildFragment2.return = workInProgress;
-
-          if ((workInProgress.mode & BlockingMode) === NoMode) {
-            // Outside of blocking mode, we commit the effects from the
-            // partially completed, timed-out tree, too.
-            var _progressedState = workInProgress.memoizedState;
-
-            var _progressedPrimaryChild = _progressedState !== null ? workInProgress.child.child : workInProgress.child;
-
-            if (_progressedPrimaryChild !== currentPrimaryChildFragment.child) {
-              _primaryChildFragment2.child = _progressedPrimaryChild;
-              var _progressedChild2 = _progressedPrimaryChild;
-
-              while (_progressedChild2 !== null) {
-                _progressedChild2.return = _primaryChildFragment2;
-                _progressedChild2 = _progressedChild2.sibling;
-              }
-            }
-          } // Because primaryChildFragment is a new fiber that we're inserting as the
-          // parent of a new tree, we need to set its treeBaseDuration.
-
-
-          if ( workInProgress.mode & ProfileMode) {
-            // treeBaseDuration is the sum of all the child tree base durations.
-            var _treeBaseDuration = 0;
-            var _hiddenChild = _primaryChildFragment2.child;
-
-            while (_hiddenChild !== null) {
-              _treeBaseDuration += _hiddenChild.treeBaseDuration;
-              _hiddenChild = _hiddenChild.sibling;
-            }
-
-            _primaryChildFragment2.treeBaseDuration = _treeBaseDuration;
-          } // Clone the fallback child fragment, too. These we'll continue
-          // working on.
-
-
-          var _fallbackChildFragment2 = createWorkInProgress(currentFallbackChildFragment, _nextFallbackChildren2);
-
-          _fallbackChildFragment2.return = workInProgress;
-          _primaryChildFragment2.sibling = _fallbackChildFragment2;
-          _primaryChildFragment2.childExpirationTime = NoWork; // Skip the primary children, and continue working on the
+          var _nextPrimaryChildren2 = nextProps.children;
+
+          var _fallbackChildFragment = updateSuspenseFallbackChildren(current, workInProgress, _nextPrimaryChildren2, _nextFallbackChildren2, renderLanes);
+
+          var _primaryChildFragment3 = workInProgress.child;
+          var prevOffscreenState = current.child.memoizedState;
+          _primaryChildFragment3.memoizedState = prevOffscreenState === null ? mountSuspenseOffscreenState(renderLanes) : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
+          _primaryChildFragment3.childLanes = getRemainingWorkInPrimaryTree(current, renderLanes);
+          workInProgress.memoizedState = SUSPENDED_MARKER;
+          return _fallbackChildFragment;
+        } else {
+          var _nextPrimaryChildren3 = nextProps.children;
+
+          var _primaryChildFragment4 = updateSuspensePrimaryChildren(current, workInProgress, _nextPrimaryChildren3, renderLanes);
+
+          workInProgress.memoizedState = null;
+          return _primaryChildFragment4;
+        }
+      } else {
+        // The current tree is not already showing a fallback.
+        if (showFallback) {
+          // Timed out.
+          var _nextFallbackChildren3 = nextProps.fallback;
+          var _nextPrimaryChildren4 = nextProps.children;
+
+          var _fallbackChildFragment2 = updateSuspenseFallbackChildren(current, workInProgress, _nextPrimaryChildren4, _nextFallbackChildren3, renderLanes);
+
+          var _primaryChildFragment5 = workInProgress.child;
+          var _prevOffscreenState = current.child.memoizedState;
+          _primaryChildFragment5.memoizedState = _prevOffscreenState === null ? mountSuspenseOffscreenState(renderLanes) : updateSuspenseOffscreenState(_prevOffscreenState, renderLanes);
+          _primaryChildFragment5.childLanes = getRemainingWorkInPrimaryTree(current, renderLanes); // Skip the primary children, and continue working on the
           // fallback children.
 
           workInProgress.memoizedState = SUSPENDED_MARKER;
-          workInProgress.child = _primaryChildFragment2;
           return _fallbackChildFragment2;
         } else {
-          // No longer suspended. Switch back to showing the primary children,
-          // and remove the intermediate fragment fiber.
-          var _nextPrimaryChildren = nextProps.children;
-          var currentPrimaryChild = currentPrimaryChildFragment.child;
-          var primaryChild = reconcileChildFibers(workInProgress, currentPrimaryChild, _nextPrimaryChildren, renderExpirationTime); // If this render doesn't suspend, we need to delete the fallback
-          // children. Wait until the complete phase, after we've confirmed the
-          // fallback is no longer needed.
-          // TODO: Would it be better to store the fallback fragment on
-          // the stateNode?
-          // Continue rendering the children, like we normally do.
-
-          workInProgress.memoizedState = null;
-          return workInProgress.child = primaryChild;
-        }
-      } else {
-        // The current tree has not already timed out. That means the primary
-        // children are not wrapped in a fragment fiber.
-        var _currentPrimaryChild = current.child;
-
-        if (nextDidTimeout) {
-          // Timed out. Wrap the children in a fragment fiber to keep them
-          // separate from the fallback children.
-          var _nextFallbackChildren3 = nextProps.fallback;
-
-          var _primaryChildFragment3 = createFiberFromFragment( // It shouldn't matter what the pending props are because we aren't
-          // going to render this fragment.
-          null, mode, NoWork, null);
-
-          _primaryChildFragment3.return = workInProgress;
-          _primaryChildFragment3.child = _currentPrimaryChild;
-
-          if (_currentPrimaryChild !== null) {
-            _currentPrimaryChild.return = _primaryChildFragment3;
-          } // Even though we're creating a new fiber, there are no new children,
-          // because we're reusing an already mounted tree. So we don't need to
-          // schedule a placement.
-          // primaryChildFragment.effectTag |= Placement;
-
-
-          if ((workInProgress.mode & BlockingMode) === NoMode) {
-            // Outside of blocking mode, we commit the effects from the
-            // partially completed, timed-out tree, too.
-            var _progressedState2 = workInProgress.memoizedState;
-
-            var _progressedPrimaryChild2 = _progressedState2 !== null ? workInProgress.child.child : workInProgress.child;
-
-            _primaryChildFragment3.child = _progressedPrimaryChild2;
-            var _progressedChild3 = _progressedPrimaryChild2;
-
-            while (_progressedChild3 !== null) {
-              _progressedChild3.return = _primaryChildFragment3;
-              _progressedChild3 = _progressedChild3.sibling;
-            }
-          } // Because primaryChildFragment is a new fiber that we're inserting as the
-          // parent of a new tree, we need to set its treeBaseDuration.
-
-
-          if ( workInProgress.mode & ProfileMode) {
-            // treeBaseDuration is the sum of all the child tree base durations.
-            var _treeBaseDuration2 = 0;
-            var _hiddenChild2 = _primaryChildFragment3.child;
-
-            while (_hiddenChild2 !== null) {
-              _treeBaseDuration2 += _hiddenChild2.treeBaseDuration;
-              _hiddenChild2 = _hiddenChild2.sibling;
-            }
-
-            _primaryChildFragment3.treeBaseDuration = _treeBaseDuration2;
-          } // Create a fragment from the fallback children, too.
-
-
-          var _fallbackChildFragment3 = createFiberFromFragment(_nextFallbackChildren3, mode, renderExpirationTime, null);
-
-          _fallbackChildFragment3.return = workInProgress;
-          _primaryChildFragment3.sibling = _fallbackChildFragment3;
-          _fallbackChildFragment3.effectTag |= Placement;
-          _primaryChildFragment3.childExpirationTime = NoWork; // Skip the primary children, and continue working on the
-          // fallback children.
-
-          workInProgress.memoizedState = SUSPENDED_MARKER;
-          workInProgress.child = _primaryChildFragment3;
-          return _fallbackChildFragment3;
-        } else {
           // Still haven't timed out. Continue rendering the children, like we
           // normally do.
+          var _nextPrimaryChildren5 = nextProps.children;
+
+          var _primaryChildFragment6 = updateSuspensePrimaryChildren(current, workInProgress, _nextPrimaryChildren5, renderLanes);
+
           workInProgress.memoizedState = null;
-          var _nextPrimaryChildren2 = nextProps.children;
-          return workInProgress.child = reconcileChildFibers(workInProgress, _currentPrimaryChild, _nextPrimaryChildren2, renderExpirationTime);
-        }
-      }
-    }
-  }
-
-  function scheduleWorkOnFiber(fiber, renderExpirationTime) {
-    if (fiber.expirationTime < renderExpirationTime) {
-      fiber.expirationTime = renderExpirationTime;
-    }
-
+          return _primaryChildFragment6;
+        }
+      }
+    }
+  }
+
+  function mountSuspensePrimaryChildren(workInProgress, primaryChildren, renderLanes) {
+    var mode = workInProgress.mode;
+    var primaryChildProps = {
+      mode: 'visible',
+      children: primaryChildren
+    };
+    var primaryChildFragment = createFiberFromOffscreen(primaryChildProps, mode, renderLanes, null);
+    primaryChildFragment.return = workInProgress;
+    workInProgress.child = primaryChildFragment;
+    return primaryChildFragment;
+  }
+
+  function mountSuspenseFallbackChildren(workInProgress, primaryChildren, fallbackChildren, renderLanes) {
+    var mode = workInProgress.mode;
+    var progressedPrimaryFragment = workInProgress.child;
+    var primaryChildProps = {
+      mode: 'hidden',
+      children: primaryChildren
+    };
+    var primaryChildFragment;
+    var fallbackChildFragment;
+
+    if ((mode & BlockingMode) === NoMode && progressedPrimaryFragment !== null) {
+      // In legacy mode, we commit the primary tree as if it successfully
+      // completed, even though it's in an inconsistent state.
+      primaryChildFragment = progressedPrimaryFragment;
+      primaryChildFragment.childLanes = NoLanes;
+      primaryChildFragment.pendingProps = primaryChildProps;
+
+      if ( workInProgress.mode & ProfileMode) {
+        // Reset the durations from the first pass so they aren't included in the
+        // final amounts. This seems counterintuitive, since we're intentionally
+        // not measuring part of the render phase, but this makes it match what we
+        // do in Concurrent Mode.
+        primaryChildFragment.actualDuration = 0;
+        primaryChildFragment.actualStartTime = -1;
+        primaryChildFragment.selfBaseDuration = 0;
+        primaryChildFragment.treeBaseDuration = 0;
+      }
+
+      fallbackChildFragment = createFiberFromFragment(fallbackChildren, mode, renderLanes, null);
+    } else {
+      primaryChildFragment = createFiberFromOffscreen(primaryChildProps, mode, NoLanes, null);
+      fallbackChildFragment = createFiberFromFragment(fallbackChildren, mode, renderLanes, null);
+    }
+
+    primaryChildFragment.return = workInProgress;
+    fallbackChildFragment.return = workInProgress;
+    primaryChildFragment.sibling = fallbackChildFragment;
+    workInProgress.child = primaryChildFragment;
+    return fallbackChildFragment;
+  }
+
+  function createWorkInProgressOffscreenFiber(current, offscreenProps) {
+    // The props argument to `createWorkInProgress` is `any` typed, so we use this
+    // wrapper function to constrain it.
+    return createWorkInProgress(current, offscreenProps);
+  }
+
+  function updateSuspensePrimaryChildren(current, workInProgress, primaryChildren, renderLanes) {
+    var currentPrimaryChildFragment = current.child;
+    var currentFallbackChildFragment = currentPrimaryChildFragment.sibling;
+    var primaryChildFragment = createWorkInProgressOffscreenFiber(currentPrimaryChildFragment, {
+      mode: 'visible',
+      children: primaryChildren
+    });
+
+    if ((workInProgress.mode & BlockingMode) === NoMode) {
+      primaryChildFragment.lanes = renderLanes;
+    }
+
+    primaryChildFragment.return = workInProgress;
+    primaryChildFragment.sibling = null;
+
+    if (currentFallbackChildFragment !== null) {
+      // Delete the fallback child fragment
+      currentFallbackChildFragment.nextEffect = null;
+      currentFallbackChildFragment.flags = Deletion;
+      workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
+    }
+
+    workInProgress.child = primaryChildFragment;
+    return primaryChildFragment;
+  }
+
+  function updateSuspenseFallbackChildren(current, workInProgress, primaryChildren, fallbackChildren, renderLanes) {
+    var mode = workInProgress.mode;
+    var currentPrimaryChildFragment = current.child;
+    var currentFallbackChildFragment = currentPrimaryChildFragment.sibling;
+    var primaryChildProps = {
+      mode: 'hidden',
+      children: primaryChildren
+    };
+    var primaryChildFragment;
+
+    if ( // In legacy mode, we commit the primary tree as if it successfully
+    // completed, even though it's in an inconsistent state.
+    (mode & BlockingMode) === NoMode && // Make sure we're on the second pass, i.e. the primary child fragment was
+    // already cloned. In legacy mode, the only case where this isn't true is
+    // when DevTools forces us to display a fallback; we skip the first render
+    // pass entirely and go straight to rendering the fallback. (In Concurrent
+    // Mode, SuspenseList can also trigger this scenario, but this is a legacy-
+    // only codepath.)
+    workInProgress.child !== currentPrimaryChildFragment) {
+      var progressedPrimaryFragment = workInProgress.child;
+      primaryChildFragment = progressedPrimaryFragment;
+      primaryChildFragment.childLanes = NoLanes;
+      primaryChildFragment.pendingProps = primaryChildProps;
+
+      if ( workInProgress.mode & ProfileMode) {
+        // Reset the durations from the first pass so they aren't included in the
+        // final amounts. This seems counterintuitive, since we're intentionally
+        // not measuring part of the render phase, but this makes it match what we
+        // do in Concurrent Mode.
+        primaryChildFragment.actualDuration = 0;
+        primaryChildFragment.actualStartTime = -1;
+        primaryChildFragment.selfBaseDuration = currentPrimaryChildFragment.selfBaseDuration;
+        primaryChildFragment.treeBaseDuration = currentPrimaryChildFragment.treeBaseDuration;
+      } // The fallback fiber was added as a deletion effect during the first pass.
+      // However, since we're going to remain on the fallback, we no longer want
+      // to delete it. So we need to remove it from the list. Deletions are stored
+      // on the same list as effects. We want to keep the effects from the primary
+      // tree. So we copy the primary child fragment's effect list, which does not
+      // include the fallback deletion effect.
+
+
+      var progressedLastEffect = primaryChildFragment.lastEffect;
+
+      if (progressedLastEffect !== null) {
+        workInProgress.firstEffect = primaryChildFragment.firstEffect;
+        workInProgress.lastEffect = progressedLastEffect;
+        progressedLastEffect.nextEffect = null;
+      } else {
+        // TODO: Reset this somewhere else? Lol legacy mode is so weird.
+        workInProgress.firstEffect = workInProgress.lastEffect = null;
+      }
+    } else {
+      primaryChildFragment = createWorkInProgressOffscreenFiber(currentPrimaryChildFragment, primaryChildProps);
+    }
+
+    var fallbackChildFragment;
+
+    if (currentFallbackChildFragment !== null) {
+      fallbackChildFragment = createWorkInProgress(currentFallbackChildFragment, fallbackChildren);
+    } else {
+      fallbackChildFragment = createFiberFromFragment(fallbackChildren, mode, renderLanes, null); // Needs a placement effect because the parent (the Suspense boundary) already
+      // mounted but this is a new fiber.
+
+      fallbackChildFragment.flags |= Placement;
+    }
+
+    fallbackChildFragment.return = workInProgress;
+    primaryChildFragment.return = workInProgress;
+    primaryChildFragment.sibling = fallbackChildFragment;
+    workInProgress.child = primaryChildFragment;
+    return fallbackChildFragment;
+  }
+
+  function scheduleWorkOnFiber(fiber, renderLanes) {
+    fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
     var alternate = fiber.alternate;
 
-    if (alternate !== null && alternate.expirationTime < renderExpirationTime) {
-      alternate.expirationTime = renderExpirationTime;
-    }
-
-    scheduleWorkOnParentPath(fiber.return, renderExpirationTime);
-  }
-
-  function propagateSuspenseContextChange(workInProgress, firstChild, renderExpirationTime) {
+    if (alternate !== null) {
+      alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
+    }
+
+    scheduleWorkOnParentPath(fiber.return, renderLanes);
+  }
+
+  function propagateSuspenseContextChange(workInProgress, firstChild, renderLanes) {
     // Mark any Suspense boundaries with fallbacks as having work to do.
     // If they were previously forced into fallbacks, they may now be able
     // to unblock.
@@ -18031,7 +18361,7 @@
         var state = node.memoizedState;
 
         if (state !== null) {
-          scheduleWorkOnFiber(node, renderExpirationTime);
+          scheduleWorkOnFiber(node, renderLanes);
         }
       } else if (node.tag === SuspenseListComponent) {
         // If the tail is hidden there might not be an Suspense boundaries
@@ -18039,7 +18369,7 @@
         // list itself.
         // We don't have to traverse to the children of the list since
         // the list will propagate the change when it rerenders.
-        scheduleWorkOnFiber(node, renderExpirationTime);
+        scheduleWorkOnFiber(node, renderLanes);
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -18201,7 +18531,6 @@
         renderingStartTime: 0,
         last: lastContentRow,
         tail: tail,
-        tailExpiration: 0,
         tailMode: tailMode,
         lastEffect: lastEffectBeforeRendering
       };
@@ -18212,7 +18541,6 @@
       renderState.renderingStartTime = 0;
       renderState.last = lastContentRow;
       renderState.tail = tail;
-      renderState.tailExpiration = 0;
       renderState.tailMode = tailMode;
       renderState.lastEffect = lastEffectBeforeRendering;
     }
@@ -18225,7 +18553,7 @@
   // That happens in the completeWork phase without going back to beginWork.
 
 
-  function updateSuspenseListComponent(current, workInProgress, renderExpirationTime) {
+  function updateSuspenseListComponent(current, workInProgress, renderLanes) {
     var nextProps = workInProgress.pendingProps;
     var revealOrder = nextProps.revealOrder;
     var tailMode = nextProps.tail;
@@ -18233,21 +18561,21 @@
     validateRevealOrder(revealOrder);
     validateTailOptions(tailMode, revealOrder);
     validateSuspenseListChildren(newChildren, revealOrder);
-    reconcileChildren(current, workInProgress, newChildren, renderExpirationTime);
+    reconcileChildren(current, workInProgress, newChildren, renderLanes);
     var suspenseContext = suspenseStackCursor.current;
     var shouldForceFallback = hasSuspenseContext(suspenseContext, ForceSuspenseFallback);
 
     if (shouldForceFallback) {
       suspenseContext = setShallowSuspenseContext(suspenseContext, ForceSuspenseFallback);
-      workInProgress.effectTag |= DidCapture;
-    } else {
-      var didSuspendBefore = current !== null && (current.effectTag & DidCapture) !== NoEffect;
+      workInProgress.flags |= DidCapture;
+    } else {
+      var didSuspendBefore = current !== null && (current.flags & DidCapture) !== NoFlags;
 
       if (didSuspendBefore) {
         // If we previously forced a fallback, we need to schedule work
         // on any nested boundaries to let them know to try to render
         // again. This is the same as context updating.
-        propagateSuspenseContextChange(workInProgress, workInProgress.child, renderExpirationTime);
+        propagateSuspenseContextChange(workInProgress, workInProgress.child, renderLanes);
       }
 
       suspenseContext = setDefaultShallowSuspenseContext(suspenseContext);
@@ -18256,7 +18584,7 @@
     pushSuspenseContext(workInProgress, suspenseContext);
 
     if ((workInProgress.mode & BlockingMode) === NoMode) {
-      // Outside of blocking mode, SuspenseList doesn't work so we just
+      // In legacy mode, SuspenseList doesn't work so we just
       // use make it a noop by treating it as the default revealOrder.
       workInProgress.memoizedState = null;
     } else {
@@ -18336,7 +18664,7 @@
     return workInProgress.child;
   }
 
-  function updatePortalComponent(current, workInProgress, renderExpirationTime) {
+  function updatePortalComponent(current, workInProgress, renderLanes) {
     pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);
     var nextChildren = workInProgress.pendingProps;
 
@@ -18346,15 +18674,17 @@
       // flow doesn't do during mount. This doesn't happen at the root because
       // the root always starts with a "current" with a null child.
       // TODO: Consider unifying this with how the root works.
-      workInProgress.child = reconcileChildFibers(workInProgress, null, nextChildren, renderExpirationTime);
-    } else {
-      reconcileChildren(current, workInProgress, nextChildren, renderExpirationTime);
+      workInProgress.child = reconcileChildFibers(workInProgress, null, nextChildren, renderLanes);
+    } else {
+      reconcileChildren(current, workInProgress, nextChildren, renderLanes);
     }
 
     return workInProgress.child;
   }
 
-  function updateContextProvider(current, workInProgress, renderExpirationTime) {
+  var hasWarnedAboutUsingNoValuePropOnContextProvider = false;
+
+  function updateContextProvider(current, workInProgress, renderLanes) {
     var providerType = workInProgress.type;
     var context = providerType._context;
     var newProps = workInProgress.pendingProps;
@@ -18362,10 +18692,18 @@
     var newValue = newProps.value;
 
     {
+      if (!('value' in newProps)) {
+        if (!hasWarnedAboutUsingNoValuePropOnContextProvider) {
+          hasWarnedAboutUsingNoValuePropOnContextProvider = true;
+
+          error('The `value` prop is required for the `<Context.Provider>`. Did you misspell it or forget to pass it?');
+        }
+      }
+
       var providerPropTypes = workInProgress.type.propTypes;
 
       if (providerPropTypes) {
-        checkPropTypes_1(providerPropTypes, newProps, 'prop', 'Context.Provider', getCurrentFiberStackInDev);
+        checkPropTypes(providerPropTypes, newProps, 'prop', 'Context.Provider');
       }
     }
 
@@ -18378,23 +18716,23 @@
       if (changedBits === 0) {
         // No change. Bailout early if children are the same.
         if (oldProps.children === newProps.children && !hasContextChanged()) {
-          return bailoutOnAlreadyFinishedWork(current, workInProgress, renderExpirationTime);
+          return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
         }
       } else {
         // The context value changed. Search for matching consumers and schedule
         // them to update.
-        propagateContextChange(workInProgress, context, changedBits, renderExpirationTime);
+        propagateContextChange(workInProgress, context, changedBits, renderLanes);
       }
     }
 
     var newChildren = newProps.children;
-    reconcileChildren(current, workInProgress, newChildren, renderExpirationTime);
+    reconcileChildren(current, workInProgress, newChildren, renderLanes);
     return workInProgress.child;
   }
 
   var hasWarnedAboutUsingContextAsConsumer = false;
 
-  function updateContextConsumer(current, workInProgress, renderExpirationTime) {
+  function updateContextConsumer(current, workInProgress, renderLanes) {
     var context = workInProgress.type; // The logic below for Context differs depending on PROD or DEV mode. In
     // DEV mode, we create a separate object for Context.Consumer that acts
     // like a proxy to Context. This proxy object adds unnecessary code in PROD
@@ -18429,7 +18767,7 @@
       }
     }
 
-    prepareToReadContext(workInProgress, renderExpirationTime);
+    prepareToReadContext(workInProgress, renderLanes);
     var newValue = readContext(context, newProps.unstable_observedBits);
     var newChildren;
 
@@ -18441,8 +18779,8 @@
     } // React DevTools reads this flag.
 
 
-    workInProgress.effectTag |= PerformedWork;
-    reconcileChildren(current, workInProgress, newChildren, renderExpirationTime);
+    workInProgress.flags |= PerformedWork;
+    reconcileChildren(current, workInProgress, newChildren, renderLanes);
     return workInProgress.child;
   }
 
@@ -18450,9 +18788,7 @@
     didReceiveUpdate = true;
   }
 
-  function bailoutOnAlreadyFinishedWork(current, workInProgress, renderExpirationTime) {
-    cancelWorkTimer(workInProgress);
-
+  function bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes) {
     if (current !== null) {
       // Reuse previous dependencies
       workInProgress.dependencies = current.dependencies;
@@ -18463,16 +18799,9 @@
       stopProfilerTimerIfRunning();
     }
 
-    var updateExpirationTime = workInProgress.expirationTime;
-
-    if (updateExpirationTime !== NoWork) {
-      markUnprocessedUpdateTime(updateExpirationTime);
-    } // Check if the children have any pending work.
-
-
-    var childExpirationTime = workInProgress.childExpirationTime;
-
-    if (childExpirationTime < renderExpirationTime) {
+    markSkippedUpdateLanes(workInProgress.lanes); // Check if the children have any pending work.
+
+    if (!includesSomeLane(renderLanes, workInProgress.childLanes)) {
       // The children don't have any work either. We can skip them.
       // TODO: Once we add back resuming, we should check if the children are
       // a work-in-progress set. If so, we need to transfer their effects.
@@ -18535,20 +18864,20 @@
       }
 
       current.nextEffect = null;
-      current.effectTag = Deletion;
-      newWorkInProgress.effectTag |= Placement; // Restart work from the new fiber.
+      current.flags = Deletion;
+      newWorkInProgress.flags |= Placement; // Restart work from the new fiber.
 
       return newWorkInProgress;
     }
   }
 
-  function beginWork(current, workInProgress, renderExpirationTime) {
-    var updateExpirationTime = workInProgress.expirationTime;
+  function beginWork(current, workInProgress, renderLanes) {
+    var updateLanes = workInProgress.lanes;
 
     {
       if (workInProgress._debugNeedsRemount && current !== null) {
         // This will restart the begin phase with a new fiber.
-        return remountFiber(current, workInProgress, createFiberFromTypeAndProps(workInProgress.type, workInProgress.key, workInProgress.pendingProps, workInProgress._debugOwner || null, workInProgress.mode, workInProgress.expirationTime));
+        return remountFiber(current, workInProgress, createFiberFromTypeAndProps(workInProgress.type, workInProgress.key, workInProgress.pendingProps, workInProgress._debugOwner || null, workInProgress.mode, workInProgress.lanes));
       }
     }
 
@@ -18561,7 +18890,7 @@
         // If props or context changed, mark the fiber as having performed work.
         // This may be unset if the props are determined to be equal later (memo).
         didReceiveUpdate = true;
-      } else if (updateExpirationTime < renderExpirationTime) {
+      } else if (!includesSomeLane(renderLanes, updateLanes)) {
         didReceiveUpdate = false; // This fiber does not have any pending work. Bailout without entering
         // the begin phase. There's still some bookkeeping we that needs to be done
         // in this optimized path, mostly pushing stuff onto the stack.
@@ -18574,17 +18903,6 @@
 
           case HostComponent:
             pushHostContext(workInProgress);
-
-            if (workInProgress.mode & ConcurrentMode && renderExpirationTime !== Never && shouldDeprioritizeSubtree(workInProgress.type, newProps)) {
-              {
-                markSpawnedWork(Never);
-              } // Schedule this fiber to re-render at offscreen priority. Then bailout.
-
-
-              workInProgress.expirationTime = workInProgress.childExpirationTime = Never;
-              return null;
-            }
-
             break;
 
           case ClassComponent:
@@ -18612,11 +18930,17 @@
           case Profiler:
             {
               // Profiler should only call onRender when one of its descendants actually rendered.
-              var hasChildWork = workInProgress.childExpirationTime >= renderExpirationTime;
+              var hasChildWork = includesSomeLane(renderLanes, workInProgress.childLanes);
 
               if (hasChildWork) {
-                workInProgress.effectTag |= Update;
-              }
+                workInProgress.flags |= Update;
+              } // Reset effect durations for the next eventual effect phase.
+              // These are reset during render to allow the DevTools commit hook a chance to read them,
+
+
+              var stateNode = workInProgress.stateNode;
+              stateNode.effectDuration = 0;
+              stateNode.passiveEffectDuration = 0;
             }
 
             break;
@@ -18632,17 +18956,19 @@
 
 
                 var primaryChildFragment = workInProgress.child;
-                var primaryChildExpirationTime = primaryChildFragment.childExpirationTime;
-
-                if (primaryChildExpirationTime !== NoWork && primaryChildExpirationTime >= renderExpirationTime) {
+                var primaryChildLanes = primaryChildFragment.childLanes;
+
+                if (includesSomeLane(renderLanes, primaryChildLanes)) {
                   // The primary children have pending work. Use the normal path
                   // to attempt to render the primary children again.
-                  return updateSuspenseComponent(current, workInProgress, renderExpirationTime);
+                  return updateSuspenseComponent(current, workInProgress, renderLanes);
                 } else {
+                  // The primary child fragment does not have pending work marked
+                  // on it
                   pushSuspenseContext(workInProgress, setDefaultShallowSuspenseContext(suspenseStackCursor.current)); // The primary children do not have pending work with sufficient
                   // priority. Bailout.
 
-                  var child = bailoutOnAlreadyFinishedWork(current, workInProgress, renderExpirationTime);
+                  var child = bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
 
                   if (child !== null) {
                     // The fallback children have pending work. Skip over the
@@ -18661,9 +18987,9 @@
 
           case SuspenseListComponent:
             {
-              var didSuspendBefore = (current.effectTag & DidCapture) !== NoEffect;
-
-              var _hasChildWork = workInProgress.childExpirationTime >= renderExpirationTime;
+              var didSuspendBefore = (current.flags & DidCapture) !== NoFlags;
+
+              var _hasChildWork = includesSomeLane(renderLanes, workInProgress.childLanes);
 
               if (didSuspendBefore) {
                 if (_hasChildWork) {
@@ -18672,13 +18998,13 @@
                   // Something might get unblocked by state updates or retries in the
                   // tree which will affect the tail. So we need to use the normal
                   // path to compute the correct tail.
-                  return updateSuspenseListComponent(current, workInProgress, renderExpirationTime);
+                  return updateSuspenseListComponent(current, workInProgress, renderLanes);
                 } // If none of the children had any work, that means that none of
                 // them got retried so they'll still be blocked in the same way
                 // as before. We can fast bail out.
 
 
-                workInProgress.effectTag |= DidCapture;
+                workInProgress.flags |= DidCapture;
               } // If nothing suspended before and we're rendering the same children,
               // then the tail doesn't matter. Anything new that suspends will work
               // in the "together" mode, so we can continue from the state we had.
@@ -18691,6 +19017,7 @@
                 // update in the past but didn't complete it.
                 renderState.rendering = null;
                 renderState.tail = null;
+                renderState.lastEffect = null;
               }
 
               pushSuspenseContext(workInProgress, suspenseStackCursor.current);
@@ -18704,15 +19031,36 @@
                 return null;
               }
             }
-        }
-
-        return bailoutOnAlreadyFinishedWork(current, workInProgress, renderExpirationTime);
-      } else {
-        // An update was scheduled on this fiber, but there are no new props
-        // nor legacy context. Set this to false. If an update queue or context
-        // consumer produces a changed value, it will set this to true. Otherwise,
-        // the component will assume the children have not changed and bail out.
-        didReceiveUpdate = false;
+
+          case OffscreenComponent:
+          case LegacyHiddenComponent:
+            {
+              // Need to check if the tree still needs to be deferred. This is
+              // almost identical to the logic used in the normal update path,
+              // so we'll just enter that. The only difference is we'll bail out
+              // at the next level instead of this one, because the child props
+              // have not changed. Which is fine.
+              // TODO: Probably should refactor `beginWork` to split the bailout
+              // path from the normal path. I'm tempted to do a labeled break here
+              // but I won't :)
+              workInProgress.lanes = NoLanes;
+              return updateOffscreenComponent(current, workInProgress, renderLanes);
+            }
+        }
+
+        return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
+      } else {
+        if ((current.flags & ForceUpdateForLegacySuspense) !== NoFlags) {
+          // This is a special case that only exists for legacy mode.
+          // See https://github.com/facebook/react/pull/19216.
+          didReceiveUpdate = true;
+        } else {
+          // An update was scheduled on this fiber, but there are no new props
+          // nor legacy context. Set this to false. If an update queue or context
+          // consumer produces a changed value, it will set this to true. Otherwise,
+          // the component will assume the children have not changed and bail out.
+          didReceiveUpdate = false;
+        }
       }
     } else {
       didReceiveUpdate = false;
@@ -18723,18 +19071,18 @@
     // move this assignment out of the common path and into each branch.
 
 
-    workInProgress.expirationTime = NoWork;
+    workInProgress.lanes = NoLanes;
 
     switch (workInProgress.tag) {
       case IndeterminateComponent:
         {
-          return mountIndeterminateComponent(current, workInProgress, workInProgress.type, renderExpirationTime);
+          return mountIndeterminateComponent(current, workInProgress, workInProgress.type, renderLanes);
         }
 
       case LazyComponent:
         {
           var elementType = workInProgress.elementType;
-          return mountLazyComponent(current, workInProgress, elementType, updateExpirationTime, renderExpirationTime);
+          return mountLazyComponent(current, workInProgress, elementType, updateLanes, renderLanes);
         }
 
       case FunctionComponent:
@@ -18742,7 +19090,7 @@
           var _Component = workInProgress.type;
           var unresolvedProps = workInProgress.pendingProps;
           var resolvedProps = workInProgress.elementType === _Component ? unresolvedProps : resolveDefaultProps(_Component, unresolvedProps);
-          return updateFunctionComponent(current, workInProgress, _Component, resolvedProps, renderExpirationTime);
+          return updateFunctionComponent(current, workInProgress, _Component, resolvedProps, renderLanes);
         }
 
       case ClassComponent:
@@ -18752,23 +19100,23 @@
 
           var _resolvedProps = workInProgress.elementType === _Component2 ? _unresolvedProps : resolveDefaultProps(_Component2, _unresolvedProps);
 
-          return updateClassComponent(current, workInProgress, _Component2, _resolvedProps, renderExpirationTime);
+          return updateClassComponent(current, workInProgress, _Component2, _resolvedProps, renderLanes);
         }
 
       case HostRoot:
-        return updateHostRoot(current, workInProgress, renderExpirationTime);
+        return updateHostRoot(current, workInProgress, renderLanes);
 
       case HostComponent:
-        return updateHostComponent(current, workInProgress, renderExpirationTime);
+        return updateHostComponent(current, workInProgress, renderLanes);
 
       case HostText:
         return updateHostText(current, workInProgress);
 
       case SuspenseComponent:
-        return updateSuspenseComponent(current, workInProgress, renderExpirationTime);
+        return updateSuspenseComponent(current, workInProgress, renderLanes);
 
       case HostPortal:
-        return updatePortalComponent(current, workInProgress, renderExpirationTime);
+        return updatePortalComponent(current, workInProgress, renderLanes);
 
       case ForwardRef:
         {
@@ -18777,23 +19125,23 @@
 
           var _resolvedProps2 = workInProgress.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
 
-          return updateForwardRef(current, workInProgress, type, _resolvedProps2, renderExpirationTime);
+          return updateForwardRef(current, workInProgress, type, _resolvedProps2, renderLanes);
         }
 
       case Fragment:
-        return updateFragment(current, workInProgress, renderExpirationTime);
+        return updateFragment(current, workInProgress, renderLanes);
 
       case Mode:
-        return updateMode(current, workInProgress, renderExpirationTime);
+        return updateMode(current, workInProgress, renderLanes);
 
       case Profiler:
-        return updateProfiler(current, workInProgress, renderExpirationTime);
+        return updateProfiler(current, workInProgress, renderLanes);
 
       case ContextProvider:
-        return updateContextProvider(current, workInProgress, renderExpirationTime);
+        return updateContextProvider(current, workInProgress, renderLanes);
 
       case ContextConsumer:
-        return updateContextConsumer(current, workInProgress, renderExpirationTime);
+        return updateContextConsumer(current, workInProgress, renderLanes);
 
       case MemoComponent:
         {
@@ -18807,19 +19155,19 @@
               var outerPropTypes = _type2.propTypes;
 
               if (outerPropTypes) {
-                checkPropTypes_1(outerPropTypes, _resolvedProps3, // Resolved for outer only
-                'prop', getComponentName(_type2), getCurrentFiberStackInDev);
+                checkPropTypes(outerPropTypes, _resolvedProps3, // Resolved for outer only
+                'prop', getComponentName(_type2));
               }
             }
           }
 
           _resolvedProps3 = resolveDefaultProps(_type2.type, _resolvedProps3);
-          return updateMemoComponent(current, workInProgress, _type2, _resolvedProps3, updateExpirationTime, renderExpirationTime);
+          return updateMemoComponent(current, workInProgress, _type2, _resolvedProps3, updateLanes, renderLanes);
         }
 
       case SimpleMemoComponent:
         {
-          return updateSimpleMemoComponent(current, workInProgress, workInProgress.type, workInProgress.pendingProps, updateExpirationTime, renderExpirationTime);
+          return updateSimpleMemoComponent(current, workInProgress, workInProgress.type, workInProgress.pendingProps, updateLanes, renderLanes);
         }
 
       case IncompleteClassComponent:
@@ -18829,12 +19177,40 @@
 
           var _resolvedProps4 = workInProgress.elementType === _Component3 ? _unresolvedProps4 : resolveDefaultProps(_Component3, _unresolvedProps4);
 
-          return mountIncompleteClassComponent(current, workInProgress, _Component3, _resolvedProps4, renderExpirationTime);
+          return mountIncompleteClassComponent(current, workInProgress, _Component3, _resolvedProps4, renderLanes);
         }
 
       case SuspenseListComponent:
         {
-          return updateSuspenseListComponent(current, workInProgress, renderExpirationTime);
+          return updateSuspenseListComponent(current, workInProgress, renderLanes);
+        }
+
+      case FundamentalComponent:
+        {
+
+          break;
+        }
+
+      case ScopeComponent:
+        {
+
+          break;
+        }
+
+      case Block:
+        {
+
+          break;
+        }
+
+      case OffscreenComponent:
+        {
+          return updateOffscreenComponent(current, workInProgress, renderLanes);
+        }
+
+      case LegacyHiddenComponent:
+        {
+          return updateLegacyHiddenComponent(current, workInProgress, renderLanes);
         }
     }
 
@@ -18848,11 +19224,11 @@
   function markUpdate(workInProgress) {
     // Tag the fiber with an update effect. This turns a Placement into
     // a PlacementAndUpdate.
-    workInProgress.effectTag |= Update;
+    workInProgress.flags |= Update;
   }
 
   function markRef$1(workInProgress) {
-    workInProgress.effectTag |= Ref;
+    workInProgress.flags |= Ref;
   }
 
   var appendAllChildren;
@@ -18935,6 +19311,12 @@
   }
 
   function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) {
+    if (getIsHydrating()) {
+      // If we're hydrating, we should consume as many items as we can
+      // so we don't leave any behind.
+      return;
+    }
+
     switch (renderState.tailMode) {
       case 'hidden':
         {
@@ -19008,7 +19390,7 @@
     }
   }
 
-  function completeWork(current, workInProgress, renderExpirationTime) {
+  function completeWork(current, workInProgress, renderLanes) {
     var newProps = workInProgress.pendingProps;
 
     switch (workInProgress.tag) {
@@ -19039,6 +19421,7 @@
         {
           popHostContainer(workInProgress);
           popTopLevelContextObject(workInProgress);
+          resetWorkInProgressVersions();
           var fiberRoot = workInProgress.stateNode;
 
           if (fiberRoot.pendingContext) {
@@ -19055,6 +19438,12 @@
               // If we hydrated, then we'll need to schedule an update for
               // the commit side-effects on the root.
               markUpdate(workInProgress);
+            } else if (!fiberRoot.hydrate) {
+              // Schedule an effect to clear this container at the start of the next commit.
+              // This handles the case of React rendering into a container with previous children.
+              // It's also safe to do for updates too, because current.child would only be null
+              // if the previous render was null (so the the container would already be empty).
+              workInProgress.flags |= Snapshot;
             }
           }
 
@@ -19103,13 +19492,11 @@
               }
             } else {
               var instance = createInstance(type, newProps, rootContainerInstance, currentHostContext, workInProgress);
-              appendAllChildren(instance, workInProgress, false, false); // This needs to be set before we mount Flare event listeners
-
-              workInProgress.stateNode = instance;
+              appendAllChildren(instance, workInProgress, false, false);
+              workInProgress.stateNode = instance; // Certain renderers require commit-time effects for initial mount.
               // (eg DOM renderer supports auto-focus for certain elements).
               // Make sure such renderers get scheduled for later work.
 
-
               if (finalizeInitialChildren(instance, type, newProps, rootContainerInstance)) {
                 markUpdate(workInProgress);
               }
@@ -19166,9 +19553,13 @@
           popSuspenseContext(workInProgress);
           var nextState = workInProgress.memoizedState;
 
-          if ((workInProgress.effectTag & DidCapture) !== NoEffect) {
+          if ((workInProgress.flags & DidCapture) !== NoFlags) {
             // Something suspended. Re-render with the fallback children.
-            workInProgress.expirationTime = renderExpirationTime; // Do not reset the effect list.
+            workInProgress.lanes = renderLanes; // Do not reset the effect list.
+
+            if ( (workInProgress.mode & ProfileMode) !== NoMode) {
+              transferActualDuration(workInProgress);
+            }
 
             return workInProgress;
           }
@@ -19183,29 +19574,6 @@
           } else {
             var prevState = current.memoizedState;
             prevDidTimeout = prevState !== null;
-
-            if (!nextDidTimeout && prevState !== null) {
-              // We just switched from the fallback to the normal children.
-              // Delete the fallback.
-              // TODO: Would it be better to store the fallback fragment on
-              // the stateNode during the begin phase?
-              var currentFallbackChild = current.child.sibling;
-
-              if (currentFallbackChild !== null) {
-                // Deletions go at the beginning of the return fiber's effect list
-                var first = workInProgress.firstEffect;
-
-                if (first !== null) {
-                  workInProgress.firstEffect = currentFallbackChild;
-                  currentFallbackChild.nextEffect = first;
-                } else {
-                  workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChild;
-                  currentFallbackChild.nextEffect = null;
-                }
-
-                currentFallbackChild.effectTag = Deletion;
-              }
-            }
           }
 
           if (nextDidTimeout && !prevDidTimeout) {
@@ -19244,7 +19612,7 @@
               // primary children. In mutation mode, we also need the flag to
               // *unhide* children that were previously hidden, so check if this
               // is currently timed out, too.
-              workInProgress.effectTag |= Update;
+              workInProgress.flags |= Update;
             }
           }
 
@@ -19254,6 +19622,11 @@
       case HostPortal:
         popHostContainer(workInProgress);
         updateHostContainer(workInProgress);
+
+        if (current === null) {
+          preparePortalMount(workInProgress.stateNode.containerInfo);
+        }
+
         return null;
 
       case ContextProvider:
@@ -19285,7 +19658,7 @@
             return null;
           }
 
-          var didSuspendAlready = (workInProgress.effectTag & DidCapture) !== NoEffect;
+          var didSuspendAlready = (workInProgress.flags & DidCapture) !== NoFlags;
           var renderedTail = renderState.rendering;
 
           if (renderedTail === null) {
@@ -19300,7 +19673,7 @@
               // something in the previous committed pass suspended. Otherwise,
               // there's no chance so we can skip the expensive call to
               // findFirstSuspended.
-              var cannotBeSuspended = renderHasNotSuspendedYet() && (current === null || (current.effectTag & DidCapture) === NoEffect);
+              var cannotBeSuspended = renderHasNotSuspendedYet() && (current === null || (current.flags & DidCapture) === NoFlags);
 
               if (!cannotBeSuspended) {
                 var row = workInProgress.child;
@@ -19310,7 +19683,7 @@
 
                   if (suspended !== null) {
                     didSuspendAlready = true;
-                    workInProgress.effectTag |= DidCapture;
+                    workInProgress.flags |= DidCapture;
                     cutOffTailIfNeeded(renderState, false); // If this is a newly suspended tree, it might not get committed as
                     // part of the second pass. In that case nothing will subscribe to
                     // its thennables. Instead, we'll transfer its thennables to the
@@ -19328,7 +19701,7 @@
 
                     if (newThennables !== null) {
                       workInProgress.updateQueue = newThennables;
-                      workInProgress.effectTag |= Update;
+                      workInProgress.flags |= Update;
                     } // Rerender the whole list, but this time, we'll force fallbacks
                     // to stay in place.
                     // Reset the effect list before doing the second pass since that's now invalid.
@@ -19340,7 +19713,7 @@
 
                     workInProgress.lastEffect = renderState.lastEffect; // Reset the child fibers to their original state.
 
-                    resetChildFibers(workInProgress, renderExpirationTime); // Set up the Suspense Context to force suspense and immediately
+                    resetChildFibers(workInProgress, renderLanes); // Set up the Suspense Context to force suspense and immediately
                     // rerender the children.
 
                     pushSuspenseContext(workInProgress, setShallowSuspenseContext(suspenseStackCursor.current, ForceSuspenseFallback));
@@ -19350,6 +19723,28 @@
                   row = row.sibling;
                 }
               }
+
+              if (renderState.tail !== null && now() > getRenderTargetTime()) {
+                // We have already passed our CPU deadline but we still have rows
+                // left in the tail. We'll just give up further attempts to render
+                // the main content and only render fallbacks.
+                workInProgress.flags |= DidCapture;
+                didSuspendAlready = true;
+                cutOffTailIfNeeded(renderState, false); // Since nothing actually suspended, there will nothing to ping this
+                // to get it started back up to attempt the next item. While in terms
+                // of priority this work has the same priority as this current render,
+                // it's not part of the same transition once the transition has
+                // committed. If it's sync, we still want to yield so that it can be
+                // painted. Conceptually, this is really the same as pinging.
+                // We can use any RetryLane even if it's the one currently rendering
+                // since we're leaving it behind on this node.
+
+                workInProgress.lanes = SomeRetryLane;
+
+                {
+                  markSpawnedWork(SomeRetryLane);
+                }
+              }
             } else {
               cutOffTailIfNeeded(renderState, false);
             } // Next we're going to render the tail.
@@ -19360,7 +19755,7 @@
               var _suspended = findFirstSuspended(renderedTail);
 
               if (_suspended !== null) {
-                workInProgress.effectTag |= DidCapture;
+                workInProgress.flags |= DidCapture;
                 didSuspendAlready = true; // Ensure we transfer the update queue to the parent so that it doesn't
                 // get lost if this row ends up dropped during a second pass.
 
@@ -19368,43 +19763,47 @@
 
                 if (_newThennables !== null) {
                   workInProgress.updateQueue = _newThennables;
-                  workInProgress.effectTag |= Update;
+                  workInProgress.flags |= Update;
                 }
 
                 cutOffTailIfNeeded(renderState, true); // This might have been modified.
 
-                if (renderState.tail === null && renderState.tailMode === 'hidden' && !renderedTail.alternate) {
-                  // We need to delete the row we just rendered.
-                  // Reset the effect list to what it was before we rendered this
-                  // child. The nested children have already appended themselves.
-                  var lastEffect = workInProgress.lastEffect = renderState.lastEffect; // Remove any effects that were appended after this point.
-
-                  if (lastEffect !== null) {
-                    lastEffect.nextEffect = null;
-                  } // We're done.
-
-
-                  return null;
-                }
-              } else if ( // The time it took to render last row is greater than time until
-              // the expiration.
-              now() * 2 - renderState.renderingStartTime > renderState.tailExpiration && renderExpirationTime > Never) {
+                if (renderState.tail === null && renderState.tailMode === 'hidden' && !renderedTail.alternate && !getIsHydrating() // We don't cut it if we're hydrating.
+                ) {
+                    // We need to delete the row we just rendered.
+                    // Reset the effect list to what it was before we rendered this
+                    // child. The nested children have already appended themselves.
+                    var lastEffect = workInProgress.lastEffect = renderState.lastEffect; // Remove any effects that were appended after this point.
+
+                    if (lastEffect !== null) {
+                      lastEffect.nextEffect = null;
+                    } // We're done.
+
+
+                    return null;
+                  }
+              } else if ( // The time it took to render last row is greater than the remaining
+              // time we have to render. So rendering one more row would likely
+              // exceed it.
+              now() * 2 - renderState.renderingStartTime > getRenderTargetTime() && renderLanes !== OffscreenLane) {
                 // We have now passed our CPU deadline and we'll just give up further
                 // attempts to render the main content and only render fallbacks.
                 // The assumption is that this is usually faster.
-                workInProgress.effectTag |= DidCapture;
+                workInProgress.flags |= DidCapture;
                 didSuspendAlready = true;
                 cutOffTailIfNeeded(renderState, false); // Since nothing actually suspended, there will nothing to ping this
-                // to get it started back up to attempt the next item. If we can show
-                // them, then they really have the same priority as this render.
-                // So we'll pick it back up the very next render pass once we've had
-                // an opportunity to yield for paint.
-
-                var nextPriority = renderExpirationTime - 1;
-                workInProgress.expirationTime = workInProgress.childExpirationTime = nextPriority;
+                // to get it started back up to attempt the next item. While in terms
+                // of priority this work has the same priority as this current render,
+                // it's not part of the same transition once the transition has
+                // committed. If it's sync, we still want to yield so that it can be
+                // painted. Conceptually, this is really the same as pinging.
+                // We can use any RetryLane even if it's the one currently rendering
+                // since we're leaving it behind on this node.
+
+                workInProgress.lanes = SomeRetryLane;
 
                 {
-                  markSpawnedWork(nextPriority);
+                  markSpawnedWork(SomeRetryLane);
                 }
               }
             }
@@ -19432,19 +19831,7 @@
 
           if (renderState.tail !== null) {
             // We still have tail rows to render.
-            if (renderState.tailExpiration === 0) {
-              // Heuristic for how long we're willing to spend rendering rows
-              // until we just give up and show what we have so far.
-              var TAIL_EXPIRATION_TIMEOUT_MS = 500;
-              renderState.tailExpiration = now() + TAIL_EXPIRATION_TIMEOUT_MS; // TODO: This is meant to mimic the train model or JND but this
-              // is a per component value. It should really be since the start
-              // of the total render or last commit. Consider using something like
-              // globalMostRecentFallbackTime. That doesn't account for being
-              // suspended for part of the time or when it's a new render.
-              // It should probably use a global start time value instead.
-            } // Pop a row.
-
-
+            // Pop a row.
             var next = renderState.tail;
             renderState.rendering = next;
             renderState.tail = next.sibling;
@@ -19469,6 +19856,41 @@
 
           return null;
         }
+
+      case FundamentalComponent:
+        {
+
+          break;
+        }
+
+      case ScopeComponent:
+        {
+
+          break;
+        }
+
+      case Block:
+
+        break;
+
+      case OffscreenComponent:
+      case LegacyHiddenComponent:
+        {
+          popRenderLanes(workInProgress);
+
+          if (current !== null) {
+            var _nextState = workInProgress.memoizedState;
+            var _prevState = current.memoizedState;
+            var prevIsHidden = _prevState !== null;
+            var nextIsHidden = _nextState !== null;
+
+            if (prevIsHidden !== nextIsHidden && newProps.mode !== 'unstable-defer-without-hiding') {
+              workInProgress.flags |= Update;
+            }
+          }
+
+          return null;
+        }
     }
 
     {
@@ -19478,7 +19900,7 @@
     }
   }
 
-  function unwindWork(workInProgress, renderExpirationTime) {
+  function unwindWork(workInProgress, renderLanes) {
     switch (workInProgress.tag) {
       case ClassComponent:
         {
@@ -19488,10 +19910,15 @@
             popContext(workInProgress);
           }
 
-          var effectTag = workInProgress.effectTag;
-
-          if (effectTag & ShouldCapture) {
-            workInProgress.effectTag = effectTag & ~ShouldCapture | DidCapture;
+          var flags = workInProgress.flags;
+
+          if (flags & ShouldCapture) {
+            workInProgress.flags = flags & ~ShouldCapture | DidCapture;
+
+            if ( (workInProgress.mode & ProfileMode) !== NoMode) {
+              transferActualDuration(workInProgress);
+            }
+
             return workInProgress;
           }
 
@@ -19502,15 +19929,16 @@
         {
           popHostContainer(workInProgress);
           popTopLevelContextObject(workInProgress);
-          var _effectTag = workInProgress.effectTag;
-
-          if (!((_effectTag & DidCapture) === NoEffect)) {
+          resetWorkInProgressVersions();
+          var _flags = workInProgress.flags;
+
+          if (!((_flags & DidCapture) === NoFlags)) {
             {
               throw Error( "The root failed to unmount after an error. This is likely a bug in React. Please file an issue." );
             }
           }
 
-          workInProgress.effectTag = _effectTag & ~ShouldCapture | DidCapture;
+          workInProgress.flags = _flags & ~ShouldCapture | DidCapture;
           return workInProgress;
         }
 
@@ -19525,10 +19953,14 @@
         {
           popSuspenseContext(workInProgress);
 
-          var _effectTag2 = workInProgress.effectTag;
-
-          if (_effectTag2 & ShouldCapture) {
-            workInProgress.effectTag = _effectTag2 & ~ShouldCapture | DidCapture; // Captured a suspense effect. Re-render the boundary.
+          var _flags2 = workInProgress.flags;
+
+          if (_flags2 & ShouldCapture) {
+            workInProgress.flags = _flags2 & ~ShouldCapture | DidCapture; // Captured a suspense effect. Re-render the boundary.
+
+            if ( (workInProgress.mode & ProfileMode) !== NoMode) {
+              transferActualDuration(workInProgress);
+            }
 
             return workInProgress;
           }
@@ -19552,6 +19984,11 @@
         popProvider(workInProgress);
         return null;
 
+      case OffscreenComponent:
+      case LegacyHiddenComponent:
+        popRenderLanes(workInProgress);
+        return null;
+
       default:
         return null;
     }
@@ -19574,6 +20011,7 @@
         {
           popHostContainer(interruptedWork);
           popTopLevelContextObject(interruptedWork);
+          resetWorkInProgressVersions();
           break;
         }
 
@@ -19598,6 +20036,11 @@
       case ContextProvider:
         popProvider(interruptedWork);
         break;
+
+      case OffscreenComponent:
+      case LegacyHiddenComponent:
+        popRenderLanes(interruptedWork);
+        break;
     }
   }
 
@@ -19611,56 +20054,377 @@
     };
   }
 
-  function logCapturedError(capturedError) {
-
-    var error = capturedError.error;
-
-    {
-      var componentName = capturedError.componentName,
-          componentStack = capturedError.componentStack,
-          errorBoundaryName = capturedError.errorBoundaryName,
-          errorBoundaryFound = capturedError.errorBoundaryFound,
-          willRetry = capturedError.willRetry; // Browsers support silencing uncaught errors by calling
-      // `preventDefault()` in window `error` handler.
-      // We record this information as an expando on the error.
-
-      if (error != null && error._suppressLogging) {
-        if (errorBoundaryFound && willRetry) {
-          // The error is recoverable and was silenced.
-          // Ignore it and don't print the stack addendum.
-          // This is handy for testing error boundaries without noise.
-          return;
-        } // The error is fatal. Since the silencing might have
-        // been accidental, we'll surface it anyway.
-        // However, the browser would have silenced the original error
-        // so we'll print it first, and then print the stack addendum.
-
-
+  // This module is forked in different environments.
+  // By default, return `true` to log errors to the console.
+  // Forks can return `false` if this isn't desirable.
+  function showErrorDialog(boundary, errorInfo) {
+    return true;
+  }
+
+  function logCapturedError(boundary, errorInfo) {
+    try {
+      var logError = showErrorDialog(boundary, errorInfo); // Allow injected showErrorDialog() to prevent default console.error logging.
+      // This enables renderers like ReactNative to better manage redbox behavior.
+
+      if (logError === false) {
+        return;
+      }
+
+      var error = errorInfo.value;
+
+      if (true) {
+        var source = errorInfo.source;
+        var stack = errorInfo.stack;
+        var componentStack = stack !== null ? stack : ''; // Browsers support silencing uncaught errors by calling
+        // `preventDefault()` in window `error` handler.
+        // We record this information as an expando on the error.
+
+        if (error != null && error._suppressLogging) {
+          if (boundary.tag === ClassComponent) {
+            // The error is recoverable and was silenced.
+            // Ignore it and don't print the stack addendum.
+            // This is handy for testing error boundaries without noise.
+            return;
+          } // The error is fatal. Since the silencing might have
+          // been accidental, we'll surface it anyway.
+          // However, the browser would have silenced the original error
+          // so we'll print it first, and then print the stack addendum.
+
+
+          console['error'](error); // Don't transform to our wrapper
+          // For a more detailed description of this block, see:
+          // https://github.com/facebook/react/pull/13384
+        }
+
+        var componentName = source ? getComponentName(source.type) : null;
+        var componentNameMessage = componentName ? "The above error occurred in the <" + componentName + "> component:" : 'The above error occurred in one of your React components:';
+        var errorBoundaryMessage;
+        var errorBoundaryName = getComponentName(boundary.type);
+
+        if (errorBoundaryName) {
+          errorBoundaryMessage = "React will try to recreate this component tree from scratch " + ("using the error boundary you provided, " + errorBoundaryName + ".");
+        } else {
+          errorBoundaryMessage = 'Consider adding an error boundary to your tree to customize error handling behavior.\n' + 'Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.';
+        }
+
+        var combinedMessage = componentNameMessage + "\n" + componentStack + "\n\n" + ("" + errorBoundaryMessage); // In development, we provide our own message with just the component stack.
+        // We don't include the original error message and JS stack because the browser
+        // has already printed it. Even if the application swallows the error, it is still
+        // displayed by the browser thanks to the DEV-only fake event trick in ReactErrorUtils.
+
+        console['error'](combinedMessage); // Don't transform to our wrapper
+      } else {
+        // In production, we print the error directly.
+        // This will include the message, the JS stack, and anything the browser wants to show.
+        // We pass the error object instead of custom message so that the browser displays the error natively.
         console['error'](error); // Don't transform to our wrapper
-        // For a more detailed description of this block, see:
-        // https://github.com/facebook/react/pull/13384
-      }
-
-      var componentNameMessage = componentName ? "The above error occurred in the <" + componentName + "> component:" : 'The above error occurred in one of your React components:';
-      var errorBoundaryMessage; // errorBoundaryFound check is sufficient; errorBoundaryName check is to satisfy Flow.
-
-      if (errorBoundaryFound && errorBoundaryName) {
-        if (willRetry) {
-          errorBoundaryMessage = "React will try to recreate this component tree from scratch " + ("using the error boundary you provided, " + errorBoundaryName + ".");
-        } else {
-          errorBoundaryMessage = "This error was initially handled by the error boundary " + errorBoundaryName + ".\n" + "Recreating the tree from scratch failed so React will unmount the tree.";
-        }
-      } else {
-        errorBoundaryMessage = 'Consider adding an error boundary to your tree to customize error handling behavior.\n' + 'Visit https://fb.me/react-error-boundaries to learn more about error boundaries.';
-      }
-
-      var combinedMessage = "" + componentNameMessage + componentStack + "\n\n" + ("" + errorBoundaryMessage); // In development, we provide our own message with just the component stack.
-      // We don't include the original error message and JS stack because the browser
-      // has already printed it. Even if the application swallows the error, it is still
-      // displayed by the browser thanks to the DEV-only fake event trick in ReactErrorUtils.
-
-      console['error'](combinedMessage); // Don't transform to our wrapper
-    }
+      }
+    } catch (e) {
+      // This method must not throw, or React internal state will get messed up.
+      // If console.error is overridden, or logCapturedError() shows a dialog that throws,
+      // we want to report this error outside of the normal stack as a last resort.
+      // https://github.com/facebook/react/issues/13188
+      setTimeout(function () {
+        throw e;
+      });
+    }
+  }
+
+  var PossiblyWeakMap$1 = typeof WeakMap === 'function' ? WeakMap : Map;
+
+  function createRootErrorUpdate(fiber, errorInfo, lane) {
+    var update = createUpdate(NoTimestamp, lane); // Unmount the root by rendering null.
+
+    update.tag = CaptureUpdate; // Caution: React DevTools currently depends on this property
+    // being called "element".
+
+    update.payload = {
+      element: null
+    };
+    var error = errorInfo.value;
+
+    update.callback = function () {
+      onUncaughtError(error);
+      logCapturedError(fiber, errorInfo);
+    };
+
+    return update;
+  }
+
+  function createClassErrorUpdate(fiber, errorInfo, lane) {
+    var update = createUpdate(NoTimestamp, lane);
+    update.tag = CaptureUpdate;
+    var getDerivedStateFromError = fiber.type.getDerivedStateFromError;
+
+    if (typeof getDerivedStateFromError === 'function') {
+      var error$1 = errorInfo.value;
+
+      update.payload = function () {
+        logCapturedError(fiber, errorInfo);
+        return getDerivedStateFromError(error$1);
+      };
+    }
+
+    var inst = fiber.stateNode;
+
+    if (inst !== null && typeof inst.componentDidCatch === 'function') {
+      update.callback = function callback() {
+        {
+          markFailedErrorBoundaryForHotReloading(fiber);
+        }
+
+        if (typeof getDerivedStateFromError !== 'function') {
+          // To preserve the preexisting retry behavior of error boundaries,
+          // we keep track of which ones already failed during this batch.
+          // This gets reset before we yield back to the browser.
+          // TODO: Warn in strict mode if getDerivedStateFromError is
+          // not defined.
+          markLegacyErrorBoundaryAsFailed(this); // Only log here if componentDidCatch is the only error boundary method defined
+
+          logCapturedError(fiber, errorInfo);
+        }
+
+        var error$1 = errorInfo.value;
+        var stack = errorInfo.stack;
+        this.componentDidCatch(error$1, {
+          componentStack: stack !== null ? stack : ''
+        });
+
+        {
+          if (typeof getDerivedStateFromError !== 'function') {
+            // If componentDidCatch is the only error boundary method defined,
+            // then it needs to call setState to recover from errors.
+            // If no state update is scheduled then the boundary will swallow the error.
+            if (!includesSomeLane(fiber.lanes, SyncLane)) {
+              error('%s: Error boundaries should implement getDerivedStateFromError(). ' + 'In that method, return a state update to display an error message or fallback UI.', getComponentName(fiber.type) || 'Unknown');
+            }
+          }
+        }
+      };
+    } else {
+      update.callback = function () {
+        markFailedErrorBoundaryForHotReloading(fiber);
+      };
+    }
+
+    return update;
+  }
+
+  function attachPingListener(root, wakeable, lanes) {
+    // Attach a listener to the promise to "ping" the root and retry. But only if
+    // one does not already exist for the lanes we're currently rendering (which
+    // acts like a "thread ID" here).
+    var pingCache = root.pingCache;
+    var threadIDs;
+
+    if (pingCache === null) {
+      pingCache = root.pingCache = new PossiblyWeakMap$1();
+      threadIDs = new Set();
+      pingCache.set(wakeable, threadIDs);
+    } else {
+      threadIDs = pingCache.get(wakeable);
+
+      if (threadIDs === undefined) {
+        threadIDs = new Set();
+        pingCache.set(wakeable, threadIDs);
+      }
+    }
+
+    if (!threadIDs.has(lanes)) {
+      // Memoize using the thread ID to prevent redundant listeners.
+      threadIDs.add(lanes);
+      var ping = pingSuspendedRoot.bind(null, root, wakeable, lanes);
+      wakeable.then(ping, ping);
+    }
+  }
+
+  function throwException(root, returnFiber, sourceFiber, value, rootRenderLanes) {
+    // The source fiber did not complete.
+    sourceFiber.flags |= Incomplete; // Its effect list is no longer valid.
+
+    sourceFiber.firstEffect = sourceFiber.lastEffect = null;
+
+    if (value !== null && typeof value === 'object' && typeof value.then === 'function') {
+      // This is a wakeable.
+      var wakeable = value;
+
+      if ((sourceFiber.mode & BlockingMode) === NoMode) {
+        // Reset the memoizedState to what it was before we attempted
+        // to render it.
+        var currentSource = sourceFiber.alternate;
+
+        if (currentSource) {
+          sourceFiber.updateQueue = currentSource.updateQueue;
+          sourceFiber.memoizedState = currentSource.memoizedState;
+          sourceFiber.lanes = currentSource.lanes;
+        } else {
+          sourceFiber.updateQueue = null;
+          sourceFiber.memoizedState = null;
+        }
+      }
+
+      var hasInvisibleParentBoundary = hasSuspenseContext(suspenseStackCursor.current, InvisibleParentSuspenseContext); // Schedule the nearest Suspense to re-render the timed out view.
+
+      var _workInProgress = returnFiber;
+
+      do {
+        if (_workInProgress.tag === SuspenseComponent && shouldCaptureSuspense(_workInProgress, hasInvisibleParentBoundary)) {
+          // Found the nearest boundary.
+          // Stash the promise on the boundary fiber. If the boundary times out, we'll
+          // attach another listener to flip the boundary back to its normal state.
+          var wakeables = _workInProgress.updateQueue;
+
+          if (wakeables === null) {
+            var updateQueue = new Set();
+            updateQueue.add(wakeable);
+            _workInProgress.updateQueue = updateQueue;
+          } else {
+            wakeables.add(wakeable);
+          } // If the boundary is outside of blocking mode, we should *not*
+          // suspend the commit. Pretend as if the suspended component rendered
+          // null and keep rendering. In the commit phase, we'll schedule a
+          // subsequent synchronous update to re-render the Suspense.
+          //
+          // Note: It doesn't matter whether the component that suspended was
+          // inside a blocking mode tree. If the Suspense is outside of it, we
+          // should *not* suspend the commit.
+
+
+          if ((_workInProgress.mode & BlockingMode) === NoMode) {
+            _workInProgress.flags |= DidCapture;
+            sourceFiber.flags |= ForceUpdateForLegacySuspense; // We're going to commit this fiber even though it didn't complete.
+            // But we shouldn't call any lifecycle methods or callbacks. Remove
+            // all lifecycle effect tags.
+
+            sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);
+
+            if (sourceFiber.tag === ClassComponent) {
+              var currentSourceFiber = sourceFiber.alternate;
+
+              if (currentSourceFiber === null) {
+                // This is a new mount. Change the tag so it's not mistaken for a
+                // completed class component. For example, we should not call
+                // componentWillUnmount if it is deleted.
+                sourceFiber.tag = IncompleteClassComponent;
+              } else {
+                // When we try rendering again, we should not reuse the current fiber,
+                // since it's known to be in an inconsistent state. Use a force update to
+                // prevent a bail out.
+                var update = createUpdate(NoTimestamp, SyncLane);
+                update.tag = ForceUpdate;
+                enqueueUpdate(sourceFiber, update);
+              }
+            } // The source fiber did not complete. Mark it with Sync priority to
+            // indicate that it still has pending work.
+
+
+            sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane); // Exit without suspending.
+
+            return;
+          } // Confirmed that the boundary is in a concurrent mode tree. Continue
+          // with the normal suspend path.
+          //
+          // After this we'll use a set of heuristics to determine whether this
+          // render pass will run to completion or restart or "suspend" the commit.
+          // The actual logic for this is spread out in different places.
+          //
+          // This first principle is that if we're going to suspend when we complete
+          // a root, then we should also restart if we get an update or ping that
+          // might unsuspend it, and vice versa. The only reason to suspend is
+          // because you think you might want to restart before committing. However,
+          // it doesn't make sense to restart only while in the period we're suspended.
+          //
+          // Restarting too aggressively is also not good because it starves out any
+          // intermediate loading state. So we use heuristics to determine when.
+          // Suspense Heuristics
+          //
+          // If nothing threw a Promise or all the same fallbacks are already showing,
+          // then don't suspend/restart.
+          //
+          // If this is an initial render of a new tree of Suspense boundaries and
+          // those trigger a fallback, then don't suspend/restart. We want to ensure
+          // that we can show the initial loading state as quickly as possible.
+          //
+          // If we hit a "Delayed" case, such as when we'd switch from content back into
+          // a fallback, then we should always suspend/restart. Transitions apply
+          // to this case. If none is defined, JND is used instead.
+          //
+          // If we're already showing a fallback and it gets "retried", allowing us to show
+          // another level, but there's still an inner boundary that would show a fallback,
+          // then we suspend/restart for 500ms since the last time we showed a fallback
+          // anywhere in the tree. This effectively throttles progressive loading into a
+          // consistent train of commits. This also gives us an opportunity to restart to
+          // get to the completed state slightly earlier.
+          //
+          // If there's ambiguity due to batching it's resolved in preference of:
+          // 1) "delayed", 2) "initial render", 3) "retry".
+          //
+          // We want to ensure that a "busy" state doesn't get force committed. We want to
+          // ensure that new initial loading states can commit as soon as possible.
+
+
+          attachPingListener(root, wakeable, rootRenderLanes);
+          _workInProgress.flags |= ShouldCapture;
+          _workInProgress.lanes = rootRenderLanes;
+          return;
+        } // This boundary already captured during this render. Continue to the next
+        // boundary.
+
+
+        _workInProgress = _workInProgress.return;
+      } while (_workInProgress !== null); // No boundary was found. Fallthrough to error mode.
+      // TODO: Use invariant so the message is stripped in prod?
+
+
+      value = new Error((getComponentName(sourceFiber.type) || 'A React component') + ' suspended while rendering, but no fallback UI was specified.\n' + '\n' + 'Add a <Suspense fallback=...> component higher in the tree to ' + 'provide a loading indicator or placeholder to display.');
+    } // We didn't find a boundary that could handle this type of exception. Start
+    // over and traverse parent path again, this time treating the exception
+    // as an error.
+
+
+    renderDidError();
+    value = createCapturedValue(value, sourceFiber);
+    var workInProgress = returnFiber;
+
+    do {
+      switch (workInProgress.tag) {
+        case HostRoot:
+          {
+            var _errorInfo = value;
+            workInProgress.flags |= ShouldCapture;
+            var lane = pickArbitraryLane(rootRenderLanes);
+            workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
+
+            var _update = createRootErrorUpdate(workInProgress, _errorInfo, lane);
+
+            enqueueCapturedUpdate(workInProgress, _update);
+            return;
+          }
+
+        case ClassComponent:
+          // Capture and retry
+          var errorInfo = value;
+          var ctor = workInProgress.type;
+          var instance = workInProgress.stateNode;
+
+          if ((workInProgress.flags & DidCapture) === NoFlags && (typeof ctor.getDerivedStateFromError === 'function' || instance !== null && typeof instance.componentDidCatch === 'function' && !isAlreadyFailedLegacyErrorBoundary(instance))) {
+            workInProgress.flags |= ShouldCapture;
+
+            var _lane = pickArbitraryLane(rootRenderLanes);
+
+            workInProgress.lanes = mergeLanes(workInProgress.lanes, _lane); // Schedule the error boundary to re-render using updated state
+
+            var _update2 = createClassErrorUpdate(workInProgress, errorInfo, _lane);
+
+            enqueueCapturedUpdate(workInProgress, _update2);
+            return;
+          }
+
+          break;
+      }
+
+      workInProgress = workInProgress.return;
+    } while (workInProgress !== null);
   }
 
   var didWarnAboutUndefinedSnapshotBeforeUpdate = null;
@@ -19670,50 +20434,14 @@
   }
 
   var PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
-  function logError(boundary, errorInfo) {
-    var source = errorInfo.source;
-    var stack = errorInfo.stack;
-
-    if (stack === null && source !== null) {
-      stack = getStackByFiberInDevAndProd(source);
-    }
-
-    var capturedError = {
-      componentName: source !== null ? getComponentName(source.type) : null,
-      componentStack: stack !== null ? stack : '',
-      error: errorInfo.value,
-      errorBoundary: null,
-      errorBoundaryName: null,
-      errorBoundaryFound: false,
-      willRetry: false
-    };
-
-    if (boundary !== null && boundary.tag === ClassComponent) {
-      capturedError.errorBoundary = boundary.stateNode;
-      capturedError.errorBoundaryName = getComponentName(boundary.type);
-      capturedError.errorBoundaryFound = true;
-      capturedError.willRetry = true;
-    }
-
-    try {
-      logCapturedError(capturedError);
-    } catch (e) {
-      // This method must not throw, or React internal state will get messed up.
-      // If console.error is overridden, or logCapturedError() shows a dialog that throws,
-      // we want to report this error outside of the normal stack as a last resort.
-      // https://github.com/facebook/react/issues/13188
-      setTimeout(function () {
-        throw e;
-      });
-    }
-  }
 
   var callComponentWillUnmountWithTimer = function (current, instance) {
-    startPhaseTimer(current, 'componentWillUnmount');
     instance.props = current.memoizedProps;
     instance.state = current.memoizedState;
-    instance.componentWillUnmount();
-    stopPhaseTimer();
+
+    {
+      instance.componentWillUnmount();
+    }
   }; // Capture errors so they don't interrupt unmounting.
 
 
@@ -19770,11 +20498,10 @@
 
       case ClassComponent:
         {
-          if (finishedWork.effectTag & Snapshot) {
+          if (finishedWork.flags & Snapshot) {
             if (current !== null) {
               var prevProps = current.memoizedProps;
               var prevState = current.memoizedState;
-              startPhaseTimer(finishedWork, 'getSnapshotBeforeUpdate');
               var instance = finishedWork.stateNode; // We could update instance props and state here,
               // but instead we rely on them being set during last render.
               // TODO: revisit this when we implement resuming.
@@ -19786,7 +20513,7 @@
                   }
 
                   if (instance.state !== finishedWork.memoizedState) {
-                    error('Expected %s state to match memoized state before ' + 'getSnapshotBeforeUpdate. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance');
+                    error('Expected %s state to match memoized state before ' + 'getSnapshotBeforeUpdate. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.state`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance');
                   }
                 }
               }
@@ -19804,7 +20531,6 @@
               }
 
               instance.__reactInternalSnapshotBeforeUpdate = snapshot;
-              stopPhaseTimer();
             }
           }
 
@@ -19812,6 +20538,17 @@
         }
 
       case HostRoot:
+        {
+          {
+            if (finishedWork.flags & Snapshot) {
+              var root = finishedWork.stateNode;
+              clearContainer(root.containerInfo);
+            }
+          }
+
+          return;
+        }
+
       case HostComponent:
       case HostText:
       case HostPortal:
@@ -19874,12 +20611,12 @@
               if (destroy === null) {
                 addendum = ' You returned null. If your effect does not require clean ' + 'up, return undefined (or nothing).';
               } else if (typeof destroy.then === 'function') {
-                addendum = '\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' + 'Instead, write the async function inside your effect ' + 'and call it immediately:\n\n' + 'useEffect(() => {\n' + '  async function fetchData() {\n' + '    // You can await here\n' + '    const response = await MyAPI.getData(someId);\n' + '    // ...\n' + '  }\n' + '  fetchData();\n' + "}, [someId]); // Or [] if effect doesn't need props or state\n\n" + 'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching';
+                addendum = '\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' + 'Instead, write the async function inside your effect ' + 'and call it immediately:\n\n' + 'useEffect(() => {\n' + '  async function fetchData() {\n' + '    // You can await here\n' + '    const response = await MyAPI.getData(someId);\n' + '    // ...\n' + '  }\n' + '  fetchData();\n' + "}, [someId]); // Or [] if effect doesn't need props or state\n\n" + 'Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching';
               } else {
                 addendum = ' You returned: ' + destroy;
               }
 
-              error('An effect function must not return anything besides a function, ' + 'which is used for clean-up.%s%s', addendum, getStackByFiberInDevAndProd(finishedWork));
+              error('An effect function must not return anything besides a function, ' + 'which is used for clean-up.%s', addendum);
             }
           }
         }
@@ -19889,26 +20626,30 @@
     }
   }
 
-  function commitPassiveHookEffects(finishedWork) {
-    if ((finishedWork.effectTag & Passive) !== NoEffect) {
-      switch (finishedWork.tag) {
-        case FunctionComponent:
-        case ForwardRef:
-        case SimpleMemoComponent:
-        case Block:
-          {
-            // TODO (#17945) We should call all passive destroy functions (for all fibers)
-            // before calling any create functions. The current approach only serializes
-            // these for a single fiber.
-            commitHookEffectListUnmount(Passive$1 | HasEffect, finishedWork);
-            commitHookEffectListMount(Passive$1 | HasEffect, finishedWork);
-            break;
-          }
-      }
-    }
-  }
-
-  function commitLifeCycles(finishedRoot, current, finishedWork, committedExpirationTime) {
+  function schedulePassiveEffects(finishedWork) {
+    var updateQueue = finishedWork.updateQueue;
+    var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
+
+    if (lastEffect !== null) {
+      var firstEffect = lastEffect.next;
+      var effect = firstEffect;
+
+      do {
+        var _effect = effect,
+            next = _effect.next,
+            tag = _effect.tag;
+
+        if ((tag & Passive$1) !== NoFlags$1 && (tag & HasEffect) !== NoFlags$1) {
+          enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
+          enqueuePendingPassiveHookEffectMount(finishedWork, effect);
+        }
+
+        effect = next;
+      } while (effect !== firstEffect);
+    }
+  }
+
+  function commitLifeCycles(finishedRoot, current, finishedWork, committedLanes) {
     switch (finishedWork.tag) {
       case FunctionComponent:
       case ForwardRef:
@@ -19919,8 +20660,11 @@
           // This is done to prevent sibling component effects from interfering with each other,
           // e.g. a destroy function in one component should never override a ref set
           // by a create function in another component during the same commit.
-          commitHookEffectListMount(Layout | HasEffect, finishedWork);
-
+          {
+            commitHookEffectListMount(Layout | HasEffect, finishedWork);
+          }
+
+          schedulePassiveEffects(finishedWork);
           return;
         }
 
@@ -19928,12 +20672,11 @@
         {
           var instance = finishedWork.stateNode;
 
-          if (finishedWork.effectTag & Update) {
+          if (finishedWork.flags & Update) {
             if (current === null) {
-              startPhaseTimer(finishedWork, 'componentDidMount'); // We could update instance props and state here,
+              // We could update instance props and state here,
               // but instead we rely on them being set during last render.
               // TODO: revisit this when we implement resuming.
-
               {
                 if (finishedWork.type === finishedWork.elementType && !didWarnAboutReassigningProps) {
                   if (instance.props !== finishedWork.memoizedProps) {
@@ -19941,17 +20684,17 @@
                   }
 
                   if (instance.state !== finishedWork.memoizedState) {
-                    error('Expected %s state to match memoized state before ' + 'componentDidMount. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance');
+                    error('Expected %s state to match memoized state before ' + 'componentDidMount. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.state`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance');
                   }
                 }
               }
 
-              instance.componentDidMount();
-              stopPhaseTimer();
+              {
+                instance.componentDidMount();
+              }
             } else {
               var prevProps = finishedWork.elementType === finishedWork.type ? current.memoizedProps : resolveDefaultProps(finishedWork.type, current.memoizedProps);
-              var prevState = current.memoizedState;
-              startPhaseTimer(finishedWork, 'componentDidUpdate'); // We could update instance props and state here,
+              var prevState = current.memoizedState; // We could update instance props and state here,
               // but instead we rely on them being set during last render.
               // TODO: revisit this when we implement resuming.
 
@@ -19962,15 +20705,18 @@
                   }
 
                   if (instance.state !== finishedWork.memoizedState) {
-                    error('Expected %s state to match memoized state before ' + 'componentDidUpdate. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance');
+                    error('Expected %s state to match memoized state before ' + 'componentDidUpdate. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.state`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance');
                   }
                 }
               }
 
-              instance.componentDidUpdate(prevProps, prevState, instance.__reactInternalSnapshotBeforeUpdate);
-              stopPhaseTimer();
-            }
-          }
+              {
+                instance.componentDidUpdate(prevProps, prevState, instance.__reactInternalSnapshotBeforeUpdate);
+              }
+            }
+          } // TODO: I think this is now always non-null by the time it reaches the
+          // commit phase. Consider removing the type check.
+
 
           var updateQueue = finishedWork.updateQueue;
 
@@ -19982,7 +20728,7 @@
                 }
 
                 if (instance.state !== finishedWork.memoizedState) {
-                  error('Expected %s state to match memoized state before ' + 'processing the update queue. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance');
+                  error('Expected %s state to match memoized state before ' + 'processing the update queue. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.state`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance');
                 }
               }
             } // We could update instance props and state here,
@@ -19998,6 +20744,8 @@
 
       case HostRoot:
         {
+          // TODO: I think this is now always non-null by the time it reaches the
+          // commit phase. Consider removing the type check.
           var _updateQueue = finishedWork.updateQueue;
 
           if (_updateQueue !== null) {
@@ -20028,7 +20776,7 @@
           // These effects should only be committed when components are first mounted,
           // aka when there is no current/alternate.
 
-          if (current === null && finishedWork.effectTag & Update) {
+          if (current === null && finishedWork.flags & Update) {
             var type = finishedWork.type;
             var props = finishedWork.memoizedProps;
             commitMount(_instance2, type, props);
@@ -20052,11 +20800,15 @@
       case Profiler:
         {
           {
-            var onRender = finishedWork.memoizedProps.onRender;
+            var _finishedWork$memoize2 = finishedWork.memoizedProps,
+                onCommit = _finishedWork$memoize2.onCommit,
+                onRender = _finishedWork$memoize2.onRender;
+            var effectDuration = finishedWork.stateNode.effectDuration;
+            var commitTime = getCommitTime();
 
             if (typeof onRender === 'function') {
               {
-                onRender(finishedWork.memoizedProps.id, current === null ? 'mount' : 'update', finishedWork.actualDuration, finishedWork.treeBaseDuration, finishedWork.actualStartTime, getCommitTime(), finishedRoot.memoizedInteractions);
+                onRender(finishedWork.memoizedProps.id, current === null ? 'mount' : 'update', finishedWork.actualDuration, finishedWork.treeBaseDuration, finishedWork.actualStartTime, commitTime, finishedRoot.memoizedInteractions);
               }
             }
           }
@@ -20074,6 +20826,8 @@
       case IncompleteClassComponent:
       case FundamentalComponent:
       case ScopeComponent:
+      case OffscreenComponent:
+      case LegacyHiddenComponent:
         return;
     }
 
@@ -20107,14 +20861,7 @@
           } else {
             unhideTextInstance(_instance3, node.memoizedProps);
           }
-        } else if (node.tag === SuspenseComponent && node.memoizedState !== null && node.memoizedState.dehydrated === null) {
-          // Found a nested Suspense component that timed out. Skip over the
-          // primary child fragment, which should remain hidden.
-          var fallbackChildFragment = node.child.sibling;
-          fallbackChildFragment.return = node;
-          node = fallbackChildFragment;
-          continue;
-        } else if (node.child !== null) {
+        } else if ((node.tag === OffscreenComponent || node.tag === LegacyHiddenComponent) && node.memoizedState !== null && node !== finishedWork) ; else if (node.child !== null) {
           node.child.return = node;
           node = node.child;
           continue;
@@ -20159,7 +20906,7 @@
       } else {
         {
           if (!ref.hasOwnProperty('current')) {
-            error('Unexpected ref object provided for %s. ' + 'Use either a ref-setter function or React.createRef().%s', getComponentName(finishedWork.type), getStackByFiberInDevAndProd(finishedWork));
+            error('Unexpected ref object provided for %s. ' + 'Use either a ref-setter function or React.createRef().', getComponentName(finishedWork.type));
           }
         }
 
@@ -20200,35 +20947,25 @@
 
             if (lastEffect !== null) {
               var firstEffect = lastEffect.next;
-
-              {
-                // When the owner fiber is deleted, the destroy function of a passive
-                // effect hook is called during the synchronous commit phase. This is
-                // a concession to implementation complexity. Calling it in the
-                // passive effect phase (like they usually are, when dependencies
-                // change during an update) would require either traversing the
-                // children of the deleted fiber again, or including unmount effects
-                // as part of the fiber effect list.
-                //
-                // Because this is during the sync commit phase, we need to change
-                // the priority.
-                //
-                // TODO: Reconsider this implementation trade off.
-                var priorityLevel = renderPriorityLevel > NormalPriority ? NormalPriority : renderPriorityLevel;
-                runWithPriority$1(priorityLevel, function () {
-                  var effect = firstEffect;
-
-                  do {
-                    var _destroy = effect.destroy;
-
-                    if (_destroy !== undefined) {
-                      safelyCallDestroy(current, _destroy);
+              var effect = firstEffect;
+
+              do {
+                var _effect2 = effect,
+                    destroy = _effect2.destroy,
+                    tag = _effect2.tag;
+
+                if (destroy !== undefined) {
+                  if ((tag & Passive$1) !== NoFlags$1) {
+                    enqueuePendingPassiveHookEffectUnmount(current, effect);
+                  } else {
+                    {
+                      safelyCallDestroy(current, destroy);
                     }
-
-                    effect = effect.next;
-                  } while (effect !== firstEffect);
-                });
-              }
+                  }
+                }
+
+                effect = effect.next;
+              } while (effect !== firstEffect);
             }
           }
 
@@ -20249,7 +20986,6 @@
 
       case HostComponent:
         {
-
           safelyDetachRef(current);
           return;
         }
@@ -20260,7 +20996,7 @@
           // We are also not using this parent because
           // the portal will get pushed immediately.
           {
-            unmountHostComponents(finishedRoot, current, renderPriorityLevel);
+            unmountHostComponents(finishedRoot, current);
           }
 
           return;
@@ -20295,7 +21031,7 @@
     var node = root;
 
     while (true) {
-      commitUnmount(finishedRoot, node, renderPriorityLevel); // Visit children because they may contain more composite or host nodes.
+      commitUnmount(finishedRoot, node); // Visit children because they may contain more composite or host nodes.
       // Skip portals because commitUnmount() currently visits them recursively.
 
       if (node.child !== null && ( // If we use mutation we drill down into portals using commitUnmount above.
@@ -20323,27 +21059,33 @@
     }
   }
 
-  function detachFiber(current) {
-    var alternate = current.alternate; // Cut off the return pointers to disconnect it from the tree. Ideally, we
+  function detachFiberMutation(fiber) {
+    // Cut off the return pointers to disconnect it from the tree. Ideally, we
     // should clear the child pointer of the parent alternate to let this
     // get GC:ed but we don't know which for sure which parent is the current
     // one so we'll settle for GC:ing the subtree of this child. This child
     // itself will be GC:ed when the parent updates the next time.
-
-    current.return = null;
-    current.child = null;
-    current.memoizedState = null;
-    current.updateQueue = null;
-    current.dependencies = null;
-    current.alternate = null;
-    current.firstEffect = null;
-    current.lastEffect = null;
-    current.pendingProps = null;
-    current.memoizedProps = null;
-    current.stateNode = null;
-
-    if (alternate !== null) {
-      detachFiber(alternate);
+    // Note: we cannot null out sibling here, otherwise it can cause issues
+    // with findDOMNode and how it requires the sibling field to carry out
+    // traversal in a later effect. See PR #16820. We now clear the sibling
+    // field after effects, see: detachFiberAfterEffects.
+    //
+    // Don't disconnect stateNode now; it will be detached in detachFiberAfterEffects.
+    // It may be required if the current component is an error boundary,
+    // and one of its descendants throws while unmounting a passive effect.
+    fiber.alternate = null;
+    fiber.child = null;
+    fiber.dependencies = null;
+    fiber.firstEffect = null;
+    fiber.lastEffect = null;
+    fiber.memoizedProps = null;
+    fiber.memoizedState = null;
+    fiber.pendingProps = null;
+    fiber.return = null;
+    fiber.updateQueue = null;
+
+    {
+      fiber._debugOwner = null;
     }
   }
 
@@ -20394,7 +21136,7 @@
       while (node.tag !== HostComponent && node.tag !== HostText && node.tag !== DehydratedFragment) {
         // If it is not host node and, we might have a host node inside it.
         // Try to search down until we find one.
-        if (node.effectTag & Placement) {
+        if (node.flags & Placement) {
           // If we don't have a child, try the siblings instead.
           continue siblings;
         } // If we don't have a child, try the siblings instead.
@@ -20410,7 +21152,7 @@
       } // Check if this host node is stable or about to be placed.
 
 
-      if (!(node.effectTag & Placement)) {
+      if (!(node.flags & Placement)) {
         // Found it!
         return node.stateNode;
       }
@@ -20455,11 +21197,11 @@
 
     }
 
-    if (parentFiber.effectTag & ContentReset) {
+    if (parentFiber.flags & ContentReset) {
       // Reset the text content of the parent before doing any insertions
       resetTextContent(parent); // Clear ContentReset from the effect tag
 
-      parentFiber.effectTag &= ~ContentReset;
+      parentFiber.flags &= ~ContentReset;
     }
 
     var before = getHostSibling(finishedWork); // We only have the top Fiber that was inserted but we need to recurse down its
@@ -20575,7 +21317,7 @@
       }
 
       if (node.tag === HostComponent || node.tag === HostText) {
-        commitNestedUnmounts(finishedRoot, node, renderPriorityLevel); // After all the children have unmounted, it is now safe to remove the
+        commitNestedUnmounts(finishedRoot, node); // After all the children have unmounted, it is now safe to remove the
         // node from the tree.
 
         if (currentParentIsContainer) {
@@ -20596,7 +21338,7 @@
           continue;
         }
       } else {
-        commitUnmount(finishedRoot, node, renderPriorityLevel); // Visit children because we may find more host components below.
+        commitUnmount(finishedRoot, node); // Visit children because we may find more host components below.
 
         if (node.child !== null) {
           node.child.return = node;
@@ -20632,10 +21374,15 @@
     {
       // Recursively delete all host nodes from the parent.
       // Detach refs and call componentWillUnmount() on the whole subtree.
-      unmountHostComponents(finishedRoot, current, renderPriorityLevel);
-    }
-
-    detachFiber(current);
+      unmountHostComponents(finishedRoot, current);
+    }
+
+    var alternate = current.alternate;
+    detachFiberMutation(current);
+
+    if (alternate !== null) {
+      detachFiberMutation(alternate);
+    }
   }
 
   function commitWork(current, finishedWork) {
@@ -20652,7 +21399,10 @@
           // This prevents sibling component effects from interfering with each other,
           // e.g. a destroy function in one component should never override a ref set
           // by a create function in another component during the same commit.
-          commitHookEffectListUnmount(Layout | HasEffect, finishedWork);
+          {
+            commitHookEffectListUnmount(Layout | HasEffect, finishedWork);
+          }
+
           return;
         }
 
@@ -20740,6 +21490,27 @@
         {
           return;
         }
+
+      case FundamentalComponent:
+        {
+
+          break;
+        }
+
+      case ScopeComponent:
+        {
+
+          break;
+        }
+
+      case OffscreenComponent:
+      case LegacyHiddenComponent:
+        {
+          var newState = finishedWork.memoizedState;
+          var isHidden = newState !== null;
+          hideOrUnhideAllChildren(finishedWork, isHidden);
+          return;
+        }
     }
 
     {
@@ -20751,19 +21522,23 @@
 
   function commitSuspenseComponent(finishedWork) {
     var newState = finishedWork.memoizedState;
-    var newDidTimeout;
-    var primaryChildParent = finishedWork;
-
-    if (newState === null) {
-      newDidTimeout = false;
-    } else {
-      newDidTimeout = true;
-      primaryChildParent = finishedWork.child;
+
+    if (newState !== null) {
       markCommitTimeOfFallback();
-    }
-
-    if ( primaryChildParent !== null) {
-      hideOrUnhideAllChildren(primaryChildParent, newDidTimeout);
+
+      {
+        // Hide the Offscreen component that contains the primary children. TODO:
+        // Ideally, this effect would have been scheduled on the Offscreen fiber
+        // itself. That's how unhiding works: the Offscreen component schedules an
+        // effect on itself. However, in this case, the component didn't complete,
+        // so the fiber was never added to the effect list in the normal path. We
+        // could have appended it to the effect list in the Suspense component's
+        // second pass, but doing it this way is less complicated. This would be
+        // simpler if we got rid of the effect list and traversed the tree, like
+        // we're planning to do.
+        var primaryChildParent = finishedWork.child;
+        hideOrUnhideAllChildren(primaryChildParent, true);
+      }
     }
   }
 
@@ -20789,12 +21564,12 @@
   }
 
   function attachSuspenseRetryListeners(finishedWork) {
-    // If this boundary just timed out, then it will have a set of thenables.
-    // For each thenable, attach a listener so that when it resolves, React
+    // If this boundary just timed out, then it will have a set of wakeables.
+    // For each wakeable, attach a listener so that when it resolves, React
     // attempts to re-render the boundary in the primary (pre-timeout) state.
-    var thenables = finishedWork.updateQueue;
-
-    if (thenables !== null) {
+    var wakeables = finishedWork.updateQueue;
+
+    if (wakeables !== null) {
       finishedWork.updateQueue = null;
       var retryCache = finishedWork.stateNode;
 
@@ -20802,22 +21577,38 @@
         retryCache = finishedWork.stateNode = new PossiblyWeakSet();
       }
 
-      thenables.forEach(function (thenable) {
+      wakeables.forEach(function (wakeable) {
         // Memoize using the boundary fiber to prevent redundant listeners.
-        var retry = resolveRetryThenable.bind(null, finishedWork, thenable);
-
-        if (!retryCache.has(thenable)) {
-          {
-            if (thenable.__reactDoNotTraceInteractions !== true) {
+        var retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);
+
+        if (!retryCache.has(wakeable)) {
+          {
+            if (wakeable.__reactDoNotTraceInteractions !== true) {
               retry = unstable_wrap(retry);
             }
           }
 
-          retryCache.add(thenable);
-          thenable.then(retry, retry);
+          retryCache.add(wakeable);
+          wakeable.then(retry, retry);
         }
       });
     }
+  } // This function detects when a Suspense boundary goes from visible to hidden.
+  // It returns false if the boundary is already hidden.
+  // TODO: Use an effect tag.
+
+
+  function isSuspenseBoundaryBeingHidden(current, finishedWork) {
+    if (current !== null) {
+      var oldState = current.memoizedState;
+
+      if (oldState === null || oldState.dehydrated !== null) {
+        var newState = finishedWork.memoizedState;
+        return newState !== null && newState.dehydrated === null;
+      }
+    }
+
+    return false;
   }
 
   function commitResetTextContent(current) {
@@ -20825,304 +21616,35 @@
     resetTextContent(current.stateNode);
   }
 
-  var PossiblyWeakMap$1 = typeof WeakMap === 'function' ? WeakMap : Map;
-
-  function createRootErrorUpdate(fiber, errorInfo, expirationTime) {
-    var update = createUpdate(expirationTime, null); // Unmount the root by rendering null.
-
-    update.tag = CaptureUpdate; // Caution: React DevTools currently depends on this property
-    // being called "element".
-
-    update.payload = {
-      element: null
-    };
-    var error = errorInfo.value;
-
-    update.callback = function () {
-      onUncaughtError(error);
-      logError(fiber, errorInfo);
-    };
-
-    return update;
-  }
-
-  function createClassErrorUpdate(fiber, errorInfo, expirationTime) {
-    var update = createUpdate(expirationTime, null);
-    update.tag = CaptureUpdate;
-    var getDerivedStateFromError = fiber.type.getDerivedStateFromError;
-
-    if (typeof getDerivedStateFromError === 'function') {
-      var error$1 = errorInfo.value;
-
-      update.payload = function () {
-        logError(fiber, errorInfo);
-        return getDerivedStateFromError(error$1);
-      };
-    }
-
-    var inst = fiber.stateNode;
-
-    if (inst !== null && typeof inst.componentDidCatch === 'function') {
-      update.callback = function callback() {
-        {
-          markFailedErrorBoundaryForHotReloading(fiber);
-        }
-
-        if (typeof getDerivedStateFromError !== 'function') {
-          // To preserve the preexisting retry behavior of error boundaries,
-          // we keep track of which ones already failed during this batch.
-          // This gets reset before we yield back to the browser.
-          // TODO: Warn in strict mode if getDerivedStateFromError is
-          // not defined.
-          markLegacyErrorBoundaryAsFailed(this); // Only log here if componentDidCatch is the only error boundary method defined
-
-          logError(fiber, errorInfo);
-        }
-
-        var error$1 = errorInfo.value;
-        var stack = errorInfo.stack;
-        this.componentDidCatch(error$1, {
-          componentStack: stack !== null ? stack : ''
-        });
-
-        {
-          if (typeof getDerivedStateFromError !== 'function') {
-            // If componentDidCatch is the only error boundary method defined,
-            // then it needs to call setState to recover from errors.
-            // If no state update is scheduled then the boundary will swallow the error.
-            if (fiber.expirationTime !== Sync) {
-              error('%s: Error boundaries should implement getDerivedStateFromError(). ' + 'In that method, return a state update to display an error message or fallback UI.', getComponentName(fiber.type) || 'Unknown');
-            }
-          }
-        }
-      };
-    } else {
-      update.callback = function () {
-        markFailedErrorBoundaryForHotReloading(fiber);
-      };
-    }
-
-    return update;
-  }
-
-  function attachPingListener(root, renderExpirationTime, thenable) {
-    // Attach a listener to the promise to "ping" the root and retry. But
-    // only if one does not already exist for the current render expiration
-    // time (which acts like a "thread ID" here).
-    var pingCache = root.pingCache;
-    var threadIDs;
-
-    if (pingCache === null) {
-      pingCache = root.pingCache = new PossiblyWeakMap$1();
-      threadIDs = new Set();
-      pingCache.set(thenable, threadIDs);
-    } else {
-      threadIDs = pingCache.get(thenable);
-
-      if (threadIDs === undefined) {
-        threadIDs = new Set();
-        pingCache.set(thenable, threadIDs);
-      }
-    }
-
-    if (!threadIDs.has(renderExpirationTime)) {
-      // Memoize using the thread ID to prevent redundant listeners.
-      threadIDs.add(renderExpirationTime);
-      var ping = pingSuspendedRoot.bind(null, root, thenable, renderExpirationTime);
-      thenable.then(ping, ping);
-    }
-  }
-
-  function throwException(root, returnFiber, sourceFiber, value, renderExpirationTime) {
-    // The source fiber did not complete.
-    sourceFiber.effectTag |= Incomplete; // Its effect list is no longer valid.
-
-    sourceFiber.firstEffect = sourceFiber.lastEffect = null;
-
-    if (value !== null && typeof value === 'object' && typeof value.then === 'function') {
-      // This is a thenable.
-      var thenable = value;
-
-      if ((sourceFiber.mode & BlockingMode) === NoMode) {
-        // Reset the memoizedState to what it was before we attempted
-        // to render it.
-        var currentSource = sourceFiber.alternate;
-
-        if (currentSource) {
-          sourceFiber.updateQueue = currentSource.updateQueue;
-          sourceFiber.memoizedState = currentSource.memoizedState;
-          sourceFiber.expirationTime = currentSource.expirationTime;
-        } else {
-          sourceFiber.updateQueue = null;
-          sourceFiber.memoizedState = null;
-        }
-      }
-
-      var hasInvisibleParentBoundary = hasSuspenseContext(suspenseStackCursor.current, InvisibleParentSuspenseContext); // Schedule the nearest Suspense to re-render the timed out view.
-
-      var _workInProgress = returnFiber;
-
-      do {
-        if (_workInProgress.tag === SuspenseComponent && shouldCaptureSuspense(_workInProgress, hasInvisibleParentBoundary)) {
-          // Found the nearest boundary.
-          // Stash the promise on the boundary fiber. If the boundary times out, we'll
-          // attach another listener to flip the boundary back to its normal state.
-          var thenables = _workInProgress.updateQueue;
-
-          if (thenables === null) {
-            var updateQueue = new Set();
-            updateQueue.add(thenable);
-            _workInProgress.updateQueue = updateQueue;
-          } else {
-            thenables.add(thenable);
-          } // If the boundary is outside of blocking mode, we should *not*
-          // suspend the commit. Pretend as if the suspended component rendered
-          // null and keep rendering. In the commit phase, we'll schedule a
-          // subsequent synchronous update to re-render the Suspense.
-          //
-          // Note: It doesn't matter whether the component that suspended was
-          // inside a blocking mode tree. If the Suspense is outside of it, we
-          // should *not* suspend the commit.
-
-
-          if ((_workInProgress.mode & BlockingMode) === NoMode) {
-            _workInProgress.effectTag |= DidCapture; // We're going to commit this fiber even though it didn't complete.
-            // But we shouldn't call any lifecycle methods or callbacks. Remove
-            // all lifecycle effect tags.
-
-            sourceFiber.effectTag &= ~(LifecycleEffectMask | Incomplete);
-
-            if (sourceFiber.tag === ClassComponent) {
-              var currentSourceFiber = sourceFiber.alternate;
-
-              if (currentSourceFiber === null) {
-                // This is a new mount. Change the tag so it's not mistaken for a
-                // completed class component. For example, we should not call
-                // componentWillUnmount if it is deleted.
-                sourceFiber.tag = IncompleteClassComponent;
-              } else {
-                // When we try rendering again, we should not reuse the current fiber,
-                // since it's known to be in an inconsistent state. Use a force update to
-                // prevent a bail out.
-                var update = createUpdate(Sync, null);
-                update.tag = ForceUpdate;
-                enqueueUpdate(sourceFiber, update);
-              }
-            } // The source fiber did not complete. Mark it with Sync priority to
-            // indicate that it still has pending work.
-
-
-            sourceFiber.expirationTime = Sync; // Exit without suspending.
-
-            return;
-          } // Confirmed that the boundary is in a concurrent mode tree. Continue
-          // with the normal suspend path.
-          //
-          // After this we'll use a set of heuristics to determine whether this
-          // render pass will run to completion or restart or "suspend" the commit.
-          // The actual logic for this is spread out in different places.
-          //
-          // This first principle is that if we're going to suspend when we complete
-          // a root, then we should also restart if we get an update or ping that
-          // might unsuspend it, and vice versa. The only reason to suspend is
-          // because you think you might want to restart before committing. However,
-          // it doesn't make sense to restart only while in the period we're suspended.
-          //
-          // Restarting too aggressively is also not good because it starves out any
-          // intermediate loading state. So we use heuristics to determine when.
-          // Suspense Heuristics
-          //
-          // If nothing threw a Promise or all the same fallbacks are already showing,
-          // then don't suspend/restart.
-          //
-          // If this is an initial render of a new tree of Suspense boundaries and
-          // those trigger a fallback, then don't suspend/restart. We want to ensure
-          // that we can show the initial loading state as quickly as possible.
-          //
-          // If we hit a "Delayed" case, such as when we'd switch from content back into
-          // a fallback, then we should always suspend/restart. SuspenseConfig applies to
-          // this case. If none is defined, JND is used instead.
-          //
-          // If we're already showing a fallback and it gets "retried", allowing us to show
-          // another level, but there's still an inner boundary that would show a fallback,
-          // then we suspend/restart for 500ms since the last time we showed a fallback
-          // anywhere in the tree. This effectively throttles progressive loading into a
-          // consistent train of commits. This also gives us an opportunity to restart to
-          // get to the completed state slightly earlier.
-          //
-          // If there's ambiguity due to batching it's resolved in preference of:
-          // 1) "delayed", 2) "initial render", 3) "retry".
-          //
-          // We want to ensure that a "busy" state doesn't get force committed. We want to
-          // ensure that new initial loading states can commit as soon as possible.
-
-
-          attachPingListener(root, renderExpirationTime, thenable);
-          _workInProgress.effectTag |= ShouldCapture;
-          _workInProgress.expirationTime = renderExpirationTime;
-          return;
-        } // This boundary already captured during this render. Continue to the next
-        // boundary.
-
-
-        _workInProgress = _workInProgress.return;
-      } while (_workInProgress !== null); // No boundary was found. Fallthrough to error mode.
-      // TODO: Use invariant so the message is stripped in prod?
-
-
-      value = new Error((getComponentName(sourceFiber.type) || 'A React component') + ' suspended while rendering, but no fallback UI was specified.\n' + '\n' + 'Add a <Suspense fallback=...> component higher in the tree to ' + 'provide a loading indicator or placeholder to display.' + getStackByFiberInDevAndProd(sourceFiber));
-    } // We didn't find a boundary that could handle this type of exception. Start
-    // over and traverse parent path again, this time treating the exception
-    // as an error.
-
-
-    renderDidError();
-    value = createCapturedValue(value, sourceFiber);
-    var workInProgress = returnFiber;
-
-    do {
-      switch (workInProgress.tag) {
-        case HostRoot:
-          {
-            var _errorInfo = value;
-            workInProgress.effectTag |= ShouldCapture;
-            workInProgress.expirationTime = renderExpirationTime;
-
-            var _update = createRootErrorUpdate(workInProgress, _errorInfo, renderExpirationTime);
-
-            enqueueCapturedUpdate(workInProgress, _update);
-            return;
-          }
-
-        case ClassComponent:
-          // Capture and retry
-          var errorInfo = value;
-          var ctor = workInProgress.type;
-          var instance = workInProgress.stateNode;
-
-          if ((workInProgress.effectTag & DidCapture) === NoEffect && (typeof ctor.getDerivedStateFromError === 'function' || instance !== null && typeof instance.componentDidCatch === 'function' && !isAlreadyFailedLegacyErrorBoundary(instance))) {
-            workInProgress.effectTag |= ShouldCapture;
-            workInProgress.expirationTime = renderExpirationTime; // Schedule the error boundary to re-render using updated state
-
-            var _update2 = createClassErrorUpdate(workInProgress, errorInfo, renderExpirationTime);
-
-            enqueueCapturedUpdate(workInProgress, _update2);
-            return;
-          }
-
-          break;
-      }
-
-      workInProgress = workInProgress.return;
-    } while (workInProgress !== null);
+  var COMPONENT_TYPE = 0;
+  var HAS_PSEUDO_CLASS_TYPE = 1;
+  var ROLE_TYPE = 2;
+  var TEST_NAME_TYPE = 3;
+  var TEXT_TYPE = 4;
+
+  if (typeof Symbol === 'function' && Symbol.for) {
+    var symbolFor$1 = Symbol.for;
+    COMPONENT_TYPE = symbolFor$1('selector.component');
+    HAS_PSEUDO_CLASS_TYPE = symbolFor$1('selector.has_pseudo_class');
+    ROLE_TYPE = symbolFor$1('selector.role');
+    TEST_NAME_TYPE = symbolFor$1('selector.test_id');
+    TEXT_TYPE = symbolFor$1('selector.text');
+  }
+  var commitHooks = [];
+  function onCommitRoot$1() {
+    {
+      commitHooks.forEach(function (commitHook) {
+        return commitHook();
+      });
+    }
   }
 
   var ceil = Math.ceil;
-  var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher,
+  var ReactCurrentDispatcher$2 = ReactSharedInternals.ReactCurrentDispatcher,
       ReactCurrentOwner$2 = ReactSharedInternals.ReactCurrentOwner,
       IsSomeRendererActing = ReactSharedInternals.IsSomeRendererActing;
   var NoContext =
-  /*                    */
+  /*             */
   0;
   var BatchedContext =
   /*               */
@@ -21142,188 +21664,254 @@
   var CommitContext =
   /*                */
   32;
+  var RetryAfterError =
+  /*       */
+  64;
   var RootIncomplete = 0;
   var RootFatalErrored = 1;
   var RootErrored = 2;
   var RootSuspended = 3;
   var RootSuspendedWithDelay = 4;
-  var RootCompleted = 5;
-  // Describes where we are in the React execution stack
+  var RootCompleted = 5; // Describes where we are in the React execution stack
+
   var executionContext = NoContext; // The root we're working on
 
   var workInProgressRoot = null; // The fiber we're working on
 
-  var workInProgress = null; // The expiration time we're rendering
-
-  var renderExpirationTime$1 = NoWork; // Whether to root completed, errored, suspended, etc.
+  var workInProgress = null; // The lanes we're rendering
+
+  var workInProgressRootRenderLanes = NoLanes; // Stack that allows components to change the render lanes for its subtree
+  // This is a superset of the lanes we started working on at the root. The only
+  // case where it's different from `workInProgressRootRenderLanes` is when we
+  // enter a subtree that is hidden and needs to be unhidden: Suspense and
+  // Offscreen component.
+  //
+  // Most things in the work loop should deal with workInProgressRootRenderLanes.
+  // Most things in begin/complete phases should deal with subtreeRenderLanes.
+
+  var subtreeRenderLanes = NoLanes;
+  var subtreeRenderLanesCursor = createCursor(NoLanes); // Whether to root completed, errored, suspended, etc.
 
   var workInProgressRootExitStatus = RootIncomplete; // A fatal error, if one is thrown
 
-  var workInProgressRootFatalError = null; // Most recent event time among processed updates during this render.
-  // This is conceptually a time stamp but expressed in terms of an ExpirationTime
-  // because we deal mostly with expiration times in the hot path, so this avoids
-  // the conversion happening in the hot path.
-
-  var workInProgressRootLatestProcessedExpirationTime = Sync;
-  var workInProgressRootLatestSuspenseTimeout = Sync;
-  var workInProgressRootCanSuspendUsingConfig = null; // The work left over by components that were visited during this render. Only
+  var workInProgressRootFatalError = null; // "Included" lanes refer to lanes that were worked on during this render. It's
+  // slightly different than `renderLanes` because `renderLanes` can change as you
+  // enter and exit an Offscreen tree. This value is the combination of all render
+  // lanes for the entire render phase.
+
+  var workInProgressRootIncludedLanes = NoLanes; // The work left over by components that were visited during this render. Only
   // includes unprocessed updates, not work in bailed out children.
 
-  var workInProgressRootNextUnprocessedUpdateTime = NoWork; // If we're pinged while rendering we don't always restart immediately.
-  // This flag determines if it might be worthwhile to restart if an opportunity
-  // happens latere.
-
-  var workInProgressRootHasPendingPing = false; // The most recent time we committed a fallback. This lets us ensure a train
+  var workInProgressRootSkippedLanes = NoLanes; // Lanes that were updated (in an interleaved event) during this render.
+
+  var workInProgressRootUpdatedLanes = NoLanes; // Lanes that were pinged (in an interleaved event) during this render.
+
+  var workInProgressRootPingedLanes = NoLanes;
+  var mostRecentlyUpdatedRoot = null; // The most recent time we committed a fallback. This lets us ensure a train
   // model where we don't commit new loading states in too quick succession.
 
   var globalMostRecentFallbackTime = 0;
-  var FALLBACK_THROTTLE_MS = 500;
+  var FALLBACK_THROTTLE_MS = 500; // The absolute time for when we should start giving up on rendering
+  // more and prefer CPU suspense heuristics instead.
+
+  var workInProgressRootRenderTargetTime = Infinity; // How long a render is supposed to take before we start following CPU
+  // suspense heuristics and opt out of rendering more content.
+
+  var RENDER_TIMEOUT_MS = 500;
+
+  function resetRenderTimer() {
+    workInProgressRootRenderTargetTime = now() + RENDER_TIMEOUT_MS;
+  }
+
+  function getRenderTargetTime() {
+    return workInProgressRootRenderTargetTime;
+  }
   var nextEffect = null;
   var hasUncaughtError = false;
   var firstUncaughtError = null;
   var legacyErrorBoundariesThatAlreadyFailed = null;
   var rootDoesHavePassiveEffects = false;
   var rootWithPendingPassiveEffects = null;
-  var pendingPassiveEffectsRenderPriority = NoPriority;
-  var pendingPassiveEffectsExpirationTime = NoWork;
+  var pendingPassiveEffectsRenderPriority = NoPriority$1;
+  var pendingPassiveEffectsLanes = NoLanes;
+  var pendingPassiveHookEffectsMount = [];
+  var pendingPassiveHookEffectsUnmount = [];
   var rootsWithPendingDiscreteUpdates = null; // Use these to prevent an infinite loop of nested updates
 
   var NESTED_UPDATE_LIMIT = 50;
   var nestedUpdateCount = 0;
   var rootWithNestedUpdates = null;
   var NESTED_PASSIVE_UPDATE_LIMIT = 50;
-  var nestedPassiveUpdateCount = 0;
-  var interruptedBy = null; // Marks the need to reschedule pending interactions at these expiration times
+  var nestedPassiveUpdateCount = 0; // Marks the need to reschedule pending interactions at these lanes
   // during the commit phase. This enables them to be traced across components
   // that spawn new work during render. E.g. hidden boundaries, suspended SSR
   // hydration or SuspenseList.
-
-  var spawnedWorkDuringRender = null; // Expiration times are computed by adding to the current time (the start
-  // time). However, if two updates are scheduled within the same event, we
-  // should treat their start times as simultaneous, even if the actual clock
-  // time has advanced between the first and second call.
-  // In other words, because expiration times determine how updates are batched,
-  // we want all updates of like priority that occur within the same event to
-  // receive the same expiration time. Otherwise we get tearing.
-
-  var currentEventTime = NoWork;
-  function requestCurrentTimeForUpdate() {
+  // TODO: Can use a bitmask instead of an array
+
+  var spawnedWorkDuringRender = null; // If two updates are scheduled within the same event, we should treat their
+  // event times as simultaneous, even if the actual clock time has advanced
+  // between the first and second call.
+
+  var currentEventTime = NoTimestamp;
+  var currentEventWipLanes = NoLanes;
+  var currentEventPendingLanes = NoLanes; // Dev only flag that tracks if passive effects are currently being flushed.
+  // We warn about state updates for unmounted components differently in this case.
+
+  var isFlushingPassiveEffects = false;
+  var focusedInstanceHandle = null;
+  var shouldFireAfterActiveInstanceBlur = false;
+  function getWorkInProgressRoot() {
+    return workInProgressRoot;
+  }
+  function requestEventTime() {
     if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
       // We're inside React, so it's fine to read the actual time.
-      return msToExpirationTime(now());
+      return now();
     } // We're not inside React, so we may be in the middle of a browser event.
 
 
-    if (currentEventTime !== NoWork) {
+    if (currentEventTime !== NoTimestamp) {
       // Use the same start time for all updates until we enter React again.
       return currentEventTime;
     } // This is the first update since React yielded. Compute a new start time.
 
 
-    currentEventTime = msToExpirationTime(now());
+    currentEventTime = now();
     return currentEventTime;
   }
-  function getCurrentTime() {
-    return msToExpirationTime(now());
-  }
-  function computeExpirationForFiber(currentTime, fiber, suspenseConfig) {
+  function requestUpdateLane(fiber) {
+    // Special cases
     var mode = fiber.mode;
 
     if ((mode & BlockingMode) === NoMode) {
-      return Sync;
-    }
-
-    var priorityLevel = getCurrentPriorityLevel();
-
-    if ((mode & ConcurrentMode) === NoMode) {
-      return priorityLevel === ImmediatePriority ? Sync : Batched;
-    }
-
-    if ((executionContext & RenderContext) !== NoContext) {
-      // Use whatever time we're already rendering
-      // TODO: Should there be a way to opt out, like with `runWithPriority`?
-      return renderExpirationTime$1;
-    }
-
-    var expirationTime;
-
-    if (suspenseConfig !== null) {
-      // Compute an expiration time based on the Suspense timeout.
-      expirationTime = computeSuspenseExpiration(currentTime, suspenseConfig.timeoutMs | 0 || LOW_PRIORITY_EXPIRATION);
-    } else {
-      // Compute an expiration time based on the Scheduler priority.
-      switch (priorityLevel) {
-        case ImmediatePriority:
-          expirationTime = Sync;
-          break;
-
-        case UserBlockingPriority$1:
-          // TODO: Rename this to computeUserBlockingExpiration
-          expirationTime = computeInteractiveExpiration(currentTime);
-          break;
-
-        case NormalPriority:
-        case LowPriority:
-          // TODO: Handle LowPriority
-          // TODO: Rename this to... something better.
-          expirationTime = computeAsyncExpiration(currentTime);
-          break;
-
-        case IdlePriority:
-          expirationTime = Idle;
-          break;
-
-        default:
-          {
-            {
-              throw Error( "Expected a valid priority level" );
-            }
-          }
-
-      }
-    } // If we're in the middle of rendering a tree, do not update at the same
-    // expiration time that is already rendering.
-    // TODO: We shouldn't have to do this if the update is on a different root.
-    // Refactor computeExpirationForFiber + scheduleUpdate so we have access to
-    // the root when we check for this condition.
-
-
-    if (workInProgressRoot !== null && expirationTime === renderExpirationTime$1) {
-      // This is a trick to move this update into a separate batch
-      expirationTime -= 1;
-    }
-
-    return expirationTime;
-  }
-  function scheduleUpdateOnFiber(fiber, expirationTime) {
+      return SyncLane;
+    } else if ((mode & ConcurrentMode) === NoMode) {
+      return getCurrentPriorityLevel() === ImmediatePriority$1 ? SyncLane : SyncBatchedLane;
+    } // The algorithm for assigning an update to a lane should be stable for all
+    // updates at the same priority within the same event. To do this, the inputs
+    // to the algorithm must be the same. For example, we use the `renderLanes`
+    // to avoid choosing a lane that is already in the middle of rendering.
+    //
+    // However, the "included" lanes could be mutated in between updates in the
+    // same event, like if you perform an update inside `flushSync`. Or any other
+    // code path that might call `prepareFreshStack`.
+    //
+    // The trick we use is to cache the first of each of these inputs within an
+    // event. Then reset the cached values once we can be sure the event is over.
+    // Our heuristic for that is whenever we enter a concurrent work loop.
+    //
+    // We'll do the same for `currentEventPendingLanes` below.
+
+
+    if (currentEventWipLanes === NoLanes) {
+      currentEventWipLanes = workInProgressRootIncludedLanes;
+    }
+
+    var isTransition = requestCurrentTransition() !== NoTransition;
+
+    if (isTransition) {
+      if (currentEventPendingLanes !== NoLanes) {
+        currentEventPendingLanes = mostRecentlyUpdatedRoot !== null ? mostRecentlyUpdatedRoot.pendingLanes : NoLanes;
+      }
+
+      return findTransitionLane(currentEventWipLanes, currentEventPendingLanes);
+    } // TODO: Remove this dependency on the Scheduler priority.
+    // To do that, we're replacing it with an update lane priority.
+
+
+    var schedulerPriority = getCurrentPriorityLevel(); // The old behavior was using the priority level of the Scheduler.
+    // This couples React to the Scheduler internals, so we're replacing it
+    // with the currentUpdateLanePriority above. As an example of how this
+    // could be problematic, if we're not inside `Scheduler.runWithPriority`,
+    // then we'll get the priority of the current running Scheduler task,
+    // which is probably not what we want.
+
+    var lane;
+
+    if ( // TODO: Temporary. We're removing the concept of discrete updates.
+    (executionContext & DiscreteEventContext) !== NoContext && schedulerPriority === UserBlockingPriority$2) {
+      lane = findUpdateLane(InputDiscreteLanePriority, currentEventWipLanes);
+    } else {
+      var schedulerLanePriority = schedulerPriorityToLanePriority(schedulerPriority);
+
+      lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+    }
+
+    return lane;
+  }
+
+  function requestRetryLane(fiber) {
+    // This is a fork of `requestUpdateLane` designed specifically for Suspense
+    // "retries" — a special update that attempts to flip a Suspense boundary
+    // from its placeholder state to its primary/resolved state.
+    // Special cases
+    var mode = fiber.mode;
+
+    if ((mode & BlockingMode) === NoMode) {
+      return SyncLane;
+    } else if ((mode & ConcurrentMode) === NoMode) {
+      return getCurrentPriorityLevel() === ImmediatePriority$1 ? SyncLane : SyncBatchedLane;
+    } // See `requestUpdateLane` for explanation of `currentEventWipLanes`
+
+
+    if (currentEventWipLanes === NoLanes) {
+      currentEventWipLanes = workInProgressRootIncludedLanes;
+    }
+
+    return findRetryLane(currentEventWipLanes);
+  }
+
+  function scheduleUpdateOnFiber(fiber, lane, eventTime) {
     checkForNestedUpdates();
     warnAboutRenderPhaseUpdatesInDEV(fiber);
-    var root = markUpdateTimeFromFiberToRoot(fiber, expirationTime);
+    var root = markUpdateLaneFromFiberToRoot(fiber, lane);
 
     if (root === null) {
       warnAboutUpdateOnUnmountedFiberInDEV(fiber);
-      return;
-    }
-
-    checkForInterruption(fiber, expirationTime);
-    recordScheduleUpdate(); // TODO: computeExpirationForFiber also reads the priority. Pass the
+      return null;
+    } // Mark that the root has a pending update.
+
+
+    markRootUpdated(root, lane, eventTime);
+
+    if (root === workInProgressRoot) {
+      // Received an update to a tree that's in the middle of rendering. Mark
+      // that there was an interleaved update work on this root. Unless the
+      // `deferRenderPhaseUpdateToNextBatch` flag is off and this is a render
+      // phase update. In that case, we don't treat render phase updates as if
+      // they were interleaved, for backwards compat reasons.
+      {
+        workInProgressRootUpdatedLanes = mergeLanes(workInProgressRootUpdatedLanes, lane);
+      }
+
+      if (workInProgressRootExitStatus === RootSuspendedWithDelay) {
+        // The root already suspended with a delay, which means this render
+        // definitely won't finish. Since we have a new update, let's mark it as
+        // suspended now, right before marking the incoming update. This has the
+        // effect of interrupting the current render and switching to the update.
+        // TODO: Make sure this doesn't override pings that happen while we've
+        // already started rendering.
+        markRootSuspended$1(root, workInProgressRootRenderLanes);
+      }
+    } // TODO: requestUpdateLanePriority also reads the priority. Pass the
     // priority as an argument to that function and this one.
 
+
     var priorityLevel = getCurrentPriorityLevel();
 
-    if (expirationTime === Sync) {
+    if (lane === SyncLane) {
       if ( // Check if we're inside unbatchedUpdates
       (executionContext & LegacyUnbatchedContext) !== NoContext && // Check if we're not already rendering
       (executionContext & (RenderContext | CommitContext)) === NoContext) {
         // Register pending interactions on the root to avoid losing traced interaction data.
-        schedulePendingInteractions(root, expirationTime); // This is a legacy edge case. The initial mount of a ReactDOM.render-ed
+        schedulePendingInteractions(root, lane); // This is a legacy edge case. The initial mount of a ReactDOM.render-ed
         // root inside of batchedUpdates should be synchronous, but layout updates
         // should be deferred until the end of the batch.
 
         performSyncWorkOnRoot(root);
       } else {
-        ensureRootIsScheduled(root);
-        schedulePendingInteractions(root, expirationTime);
+        ensureRootIsScheduled(root, eventTime);
+        schedulePendingInteractions(root, lane);
 
         if (executionContext === NoContext) {
           // Flush the synchronous work now, unless we're already working or inside
@@ -21331,314 +21919,242 @@
           // scheduleCallbackForFiber to preserve the ability to schedule a callback
           // without immediately flushing it. We only do this for user-initiated
           // updates, to preserve historical behavior of legacy mode.
+          resetRenderTimer();
           flushSyncCallbackQueue();
         }
       }
     } else {
-      ensureRootIsScheduled(root);
-      schedulePendingInteractions(root, expirationTime);
-    }
-
-    if ((executionContext & DiscreteEventContext) !== NoContext && ( // Only updates at user-blocking priority or greater are considered
-    // discrete, even inside a discrete event.
-    priorityLevel === UserBlockingPriority$1 || priorityLevel === ImmediatePriority)) {
-      // This is the result of a discrete event. Track the lowest priority
-      // discrete update per root so we can flush them early, if needed.
-      if (rootsWithPendingDiscreteUpdates === null) {
-        rootsWithPendingDiscreteUpdates = new Map([[root, expirationTime]]);
-      } else {
-        var lastDiscreteTime = rootsWithPendingDiscreteUpdates.get(root);
-
-        if (lastDiscreteTime === undefined || lastDiscreteTime > expirationTime) {
-          rootsWithPendingDiscreteUpdates.set(root, expirationTime);
-        }
-      }
-    }
-  }
-  var scheduleWork = scheduleUpdateOnFiber; // This is split into a separate function so we can mark a fiber with pending
+      // Schedule a discrete update but only if it's not Sync.
+      if ((executionContext & DiscreteEventContext) !== NoContext && ( // Only updates at user-blocking priority or greater are considered
+      // discrete, even inside a discrete event.
+      priorityLevel === UserBlockingPriority$2 || priorityLevel === ImmediatePriority$1)) {
+        // This is the result of a discrete event. Track the lowest priority
+        // discrete update per root so we can flush them early, if needed.
+        if (rootsWithPendingDiscreteUpdates === null) {
+          rootsWithPendingDiscreteUpdates = new Set([root]);
+        } else {
+          rootsWithPendingDiscreteUpdates.add(root);
+        }
+      } // Schedule other updates after in case the callback is sync.
+
+
+      ensureRootIsScheduled(root, eventTime);
+      schedulePendingInteractions(root, lane);
+    } // We use this when assigning a lane for a transition inside
+    // `requestUpdateLane`. We assume it's the same as the root being updated,
+    // since in the common case of a single root app it probably is. If it's not
+    // the same root, then it's not a huge deal, we just might batch more stuff
+    // together more than necessary.
+
+
+    mostRecentlyUpdatedRoot = root;
+  } // This is split into a separate function so we can mark a fiber with pending
   // work without treating it as a typical update that originates from an event;
   // e.g. retrying a Suspense boundary isn't an update, but it does schedule work
   // on a fiber.
 
-  function markUpdateTimeFromFiberToRoot(fiber, expirationTime) {
-    // Update the source fiber's expiration time
-    if (fiber.expirationTime < expirationTime) {
-      fiber.expirationTime = expirationTime;
-    }
-
-    var alternate = fiber.alternate;
-
-    if (alternate !== null && alternate.expirationTime < expirationTime) {
-      alternate.expirationTime = expirationTime;
+  function markUpdateLaneFromFiberToRoot(sourceFiber, lane) {
+    // Update the source fiber's lanes
+    sourceFiber.lanes = mergeLanes(sourceFiber.lanes, lane);
+    var alternate = sourceFiber.alternate;
+
+    if (alternate !== null) {
+      alternate.lanes = mergeLanes(alternate.lanes, lane);
+    }
+
+    {
+      if (alternate === null && (sourceFiber.flags & (Placement | Hydrating)) !== NoFlags) {
+        warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
+      }
     } // Walk the parent path to the root and update the child expiration time.
 
 
-    var node = fiber.return;
-    var root = null;
-
-    if (node === null && fiber.tag === HostRoot) {
-      root = fiber.stateNode;
-    } else {
-      while (node !== null) {
-        alternate = node.alternate;
-
-        if (node.childExpirationTime < expirationTime) {
-          node.childExpirationTime = expirationTime;
-
-          if (alternate !== null && alternate.childExpirationTime < expirationTime) {
-            alternate.childExpirationTime = expirationTime;
-          }
-        } else if (alternate !== null && alternate.childExpirationTime < expirationTime) {
-          alternate.childExpirationTime = expirationTime;
-        }
-
-        if (node.return === null && node.tag === HostRoot) {
-          root = node.stateNode;
-          break;
-        }
-
-        node = node.return;
-      }
-    }
-
-    if (root !== null) {
-      if (workInProgressRoot === root) {
-        // Received an update to a tree that's in the middle of rendering. Mark
-        // that's unprocessed work on this root.
-        markUnprocessedUpdateTime(expirationTime);
-
-        if (workInProgressRootExitStatus === RootSuspendedWithDelay) {
-          // The root already suspended with a delay, which means this render
-          // definitely won't finish. Since we have a new update, let's mark it as
-          // suspended now, right before marking the incoming update. This has the
-          // effect of interrupting the current render and switching to the update.
-          // TODO: This happens to work when receiving an update during the render
-          // phase, because of the trick inside computeExpirationForFiber to
-          // subtract 1 from `renderExpirationTime` to move it into a
-          // separate bucket. But we should probably model it with an exception,
-          // using the same mechanism we use to force hydration of a subtree.
-          // TODO: This does not account for low pri updates that were already
-          // scheduled before the root started rendering. Need to track the next
-          // pending expiration time (perhaps by backtracking the return path) and
-          // then trigger a restart in the `renderDidSuspendDelayIfPossible` path.
-          markRootSuspendedAtTime(root, renderExpirationTime$1);
-        }
-      } // Mark that the root has a pending update.
-
-
-      markRootUpdatedAtTime(root, expirationTime);
-    }
-
-    return root;
-  }
-
-  function getNextRootExpirationTimeToWorkOn(root) {
-    // Determines the next expiration time that the root should render, taking
-    // into account levels that may be suspended, or levels that may have
-    // received a ping.
-    var lastExpiredTime = root.lastExpiredTime;
-
-    if (lastExpiredTime !== NoWork) {
-      return lastExpiredTime;
-    } // "Pending" refers to any update that hasn't committed yet, including if it
-    // suspended. The "suspended" range is therefore a subset.
-
-
-    var firstPendingTime = root.firstPendingTime;
-
-    if (!isRootSuspendedAtTime(root, firstPendingTime)) {
-      // The highest priority pending time is not suspended. Let's work on that.
-      return firstPendingTime;
-    } // If the first pending time is suspended, check if there's a lower priority
-    // pending level that we know about. Or check if we received a ping. Work
-    // on whichever is higher priority.
-
-
-    var lastPingedTime = root.lastPingedTime;
-    var nextKnownPendingLevel = root.nextKnownPendingLevel;
-    var nextLevel = lastPingedTime > nextKnownPendingLevel ? lastPingedTime : nextKnownPendingLevel;
-
-    if ( nextLevel <= Idle && firstPendingTime !== nextLevel) {
-      // Don't work on Idle/Never priority unless everything else is committed.
-      return NoWork;
-    }
-
-    return nextLevel;
+    var node = sourceFiber;
+    var parent = sourceFiber.return;
+
+    while (parent !== null) {
+      parent.childLanes = mergeLanes(parent.childLanes, lane);
+      alternate = parent.alternate;
+
+      if (alternate !== null) {
+        alternate.childLanes = mergeLanes(alternate.childLanes, lane);
+      } else {
+        {
+          if ((parent.flags & (Placement | Hydrating)) !== NoFlags) {
+            warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
+          }
+        }
+      }
+
+      node = parent;
+      parent = parent.return;
+    }
+
+    if (node.tag === HostRoot) {
+      var root = node.stateNode;
+      return root;
+    } else {
+      return null;
+    }
   } // Use this function to schedule a task for a root. There's only one task per
-  // root; if a task was already scheduled, we'll check to make sure the
-  // expiration time of the existing task is the same as the expiration time of
-  // the next level that the root has work on. This function is called on every
-  // update, and right before exiting a task.
-
-
-  function ensureRootIsScheduled(root) {
-    var lastExpiredTime = root.lastExpiredTime;
-
-    if (lastExpiredTime !== NoWork) {
-      // Special case: Expired work should flush synchronously.
-      root.callbackExpirationTime = Sync;
-      root.callbackPriority = ImmediatePriority;
-      root.callbackNode = scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
-      return;
-    }
-
-    var expirationTime = getNextRootExpirationTimeToWorkOn(root);
-    var existingCallbackNode = root.callbackNode;
-
-    if (expirationTime === NoWork) {
-      // There's nothing to work on.
+  // root; if a task was already scheduled, we'll check to make sure the priority
+  // of the existing task is the same as the priority of the next level that the
+  // root has work on. This function is called on every update, and right before
+  // exiting a task.
+
+
+  function ensureRootIsScheduled(root, currentTime) {
+    var existingCallbackNode = root.callbackNode; // Check if any lanes are being starved by other work. If so, mark them as
+    // expired so we know to work on those next.
+
+    markStarvedLanesAsExpired(root, currentTime); // Determine the next lanes to work on, and their priority.
+
+    var nextLanes = getNextLanes(root, root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes); // This returns the priority level computed during the `getNextLanes` call.
+
+    var newCallbackPriority = returnNextLanesPriority();
+
+    if (nextLanes === NoLanes) {
+      // Special case: There's nothing to work on.
       if (existingCallbackNode !== null) {
+        cancelCallback(existingCallbackNode);
         root.callbackNode = null;
-        root.callbackExpirationTime = NoWork;
-        root.callbackPriority = NoPriority;
+        root.callbackPriority = NoLanePriority;
       }
 
       return;
-    } // TODO: If this is an update, we already read the current time. Pass the
-    // time as an argument.
-
-
-    var currentTime = requestCurrentTimeForUpdate();
-    var priorityLevel = inferPriorityFromExpirationTime(currentTime, expirationTime); // If there's an existing render task, confirm it has the correct priority and
-    // expiration time. Otherwise, we'll cancel it and schedule a new one.
+    } // Check if there's an existing task. We may be able to reuse it.
+
 
     if (existingCallbackNode !== null) {
       var existingCallbackPriority = root.callbackPriority;
-      var existingCallbackExpirationTime = root.callbackExpirationTime;
-
-      if ( // Callback must have the exact same expiration time.
-      existingCallbackExpirationTime === expirationTime && // Callback must have greater or equal priority.
-      existingCallbackPriority >= priorityLevel) {
-        // Existing callback is sufficient.
-        return;
-      } // Need to schedule a new task.
-      // TODO: Instead of scheduling a new task, we should be able to change the
-      // priority of the existing one.
+
+      if (existingCallbackPriority === newCallbackPriority) {
+        // The priority hasn't changed. We can reuse the existing task. Exit.
+        return;
+      } // The priority changed. Cancel the existing callback. We'll schedule a new
+      // one below.
 
 
       cancelCallback(existingCallbackNode);
-    }
-
-    root.callbackExpirationTime = expirationTime;
-    root.callbackPriority = priorityLevel;
-    var callbackNode;
-
-    if (expirationTime === Sync) {
-      // Sync React callbacks are scheduled on a special internal queue
-      callbackNode = scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
-    } else {
-      callbackNode = scheduleCallback(priorityLevel, performConcurrentWorkOnRoot.bind(null, root), // Compute a task timeout based on the expiration time. This also affects
-      // ordering because tasks are processed in timeout order.
-      {
-        timeout: expirationTimeToMs(expirationTime) - now()
-      });
-    }
-
-    root.callbackNode = callbackNode;
+    } // Schedule a new callback.
+
+
+    var newCallbackNode;
+
+    if (newCallbackPriority === SyncLanePriority) {
+      // Special case: Sync React callbacks are scheduled on a special
+      // internal queue
+      newCallbackNode = scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
+    } else if (newCallbackPriority === SyncBatchedLanePriority) {
+      newCallbackNode = scheduleCallback(ImmediatePriority$1, performSyncWorkOnRoot.bind(null, root));
+    } else {
+      var schedulerPriorityLevel = lanePriorityToSchedulerPriority(newCallbackPriority);
+      newCallbackNode = scheduleCallback(schedulerPriorityLevel, performConcurrentWorkOnRoot.bind(null, root));
+    }
+
+    root.callbackPriority = newCallbackPriority;
+    root.callbackNode = newCallbackNode;
   } // This is the entry point for every concurrent task, i.e. anything that
   // goes through Scheduler.
 
 
-  function performConcurrentWorkOnRoot(root, didTimeout) {
+  function performConcurrentWorkOnRoot(root) {
     // Since we know we're in a React event, we can clear the current
     // event time. The next update will compute a new event time.
-    currentEventTime = NoWork;
-
-    if (didTimeout) {
-      // The render task took too long to complete. Mark the current time as
-      // expired to synchronously render all expired work in a single batch.
-      var currentTime = requestCurrentTimeForUpdate();
-      markRootExpiredAtTime(root, currentTime); // This will schedule a synchronous callback.
-
-      ensureRootIsScheduled(root);
-      return null;
+    currentEventTime = NoTimestamp;
+    currentEventWipLanes = NoLanes;
+    currentEventPendingLanes = NoLanes;
+
+    if (!((executionContext & (RenderContext | CommitContext)) === NoContext)) {
+      {
+        throw Error( "Should not already be working." );
+      }
+    } // Flush any pending passive effects before deciding which lanes to work on,
+    // in case they schedule additional work.
+
+
+    var originalCallbackNode = root.callbackNode;
+    var didFlushPassiveEffects = flushPassiveEffects();
+
+    if (didFlushPassiveEffects) {
+      // Something in the passive effect phase may have canceled the current task.
+      // Check if the task node for this root was changed.
+      if (root.callbackNode !== originalCallbackNode) {
+        // The current task was canceled. Exit. We don't need to call
+        // `ensureRootIsScheduled` because the check above implies either that
+        // there's a new task, or that there's no remaining work on this root.
+        return null;
+      }
     } // Determine the next expiration time to work on, using the fields stored
     // on the root.
 
 
-    var expirationTime = getNextRootExpirationTimeToWorkOn(root);
-
-    if (expirationTime !== NoWork) {
-      var originalCallbackNode = root.callbackNode;
-
-      if (!((executionContext & (RenderContext | CommitContext)) === NoContext)) {
-        {
-          throw Error( "Should not already be working." );
-        }
-      }
-
-      flushPassiveEffects(); // If the root or expiration time have changed, throw out the existing stack
-      // and prepare a fresh one. Otherwise we'll continue where we left off.
-
-      if (root !== workInProgressRoot || expirationTime !== renderExpirationTime$1) {
-        prepareFreshStack(root, expirationTime);
-        startWorkOnPendingInteractions(root, expirationTime);
-      } // If we have a work-in-progress fiber, it means there's still work to do
-      // in this root.
-
-
-      if (workInProgress !== null) {
-        var prevExecutionContext = executionContext;
-        executionContext |= RenderContext;
-        var prevDispatcher = pushDispatcher();
-        var prevInteractions = pushInteractions(root);
-        startWorkLoopTimer(workInProgress);
-
-        do {
-          try {
-            workLoopConcurrent();
-            break;
-          } catch (thrownValue) {
-            handleError(root, thrownValue);
-          }
-        } while (true);
-
-        resetContextDependencies();
-        executionContext = prevExecutionContext;
-        popDispatcher(prevDispatcher);
-
-        {
-          popInteractions(prevInteractions);
-        }
-
-        if (workInProgressRootExitStatus === RootFatalErrored) {
-          var fatalError = workInProgressRootFatalError;
-          stopInterruptedWorkLoopTimer();
-          prepareFreshStack(root, expirationTime);
-          markRootSuspendedAtTime(root, expirationTime);
-          ensureRootIsScheduled(root);
-          throw fatalError;
-        }
-
-        if (workInProgress !== null) {
-          // There's still work left over. Exit without committing.
-          stopInterruptedWorkLoopTimer();
-        } else {
-          // We now have a consistent tree. The next step is either to commit it,
-          // or, if something suspended, wait to commit it after a timeout.
-          stopFinishedWorkLoopTimer();
-          var finishedWork = root.finishedWork = root.current.alternate;
-          root.finishedExpirationTime = expirationTime;
-          finishConcurrentRender(root, finishedWork, workInProgressRootExitStatus, expirationTime);
-        }
-
-        ensureRootIsScheduled(root);
-
-        if (root.callbackNode === originalCallbackNode) {
-          // The task node scheduled for this root is the same one that's
-          // currently executed. Need to return a continuation.
-          return performConcurrentWorkOnRoot.bind(null, root);
-        }
-      }
+    var lanes = getNextLanes(root, root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes);
+
+    if (lanes === NoLanes) {
+      // Defensive coding. This is never expected to happen.
+      return null;
+    }
+
+    var exitStatus = renderRootConcurrent(root, lanes);
+
+    if (includesSomeLane(workInProgressRootIncludedLanes, workInProgressRootUpdatedLanes)) {
+      // The render included lanes that were updated during the render phase.
+      // For example, when unhiding a hidden tree, we include all the lanes
+      // that were previously skipped when the tree was hidden. That set of
+      // lanes is a superset of the lanes we started rendering with.
+      //
+      // So we'll throw out the current work and restart.
+      prepareFreshStack(root, NoLanes);
+    } else if (exitStatus !== RootIncomplete) {
+      if (exitStatus === RootErrored) {
+        executionContext |= RetryAfterError; // If an error occurred during hydration,
+        // discard server response and fall back to client side render.
+
+        if (root.hydrate) {
+          root.hydrate = false;
+          clearContainer(root.containerInfo);
+        } // If something threw an error, try rendering one more time. We'll render
+        // synchronously to block concurrent data mutations, and we'll includes
+        // all pending updates are included. If it still fails after the second
+        // attempt, we'll give up and commit the resulting tree.
+
+
+        lanes = getLanesToRetrySynchronouslyOnError(root);
+
+        if (lanes !== NoLanes) {
+          exitStatus = renderRootSync(root, lanes);
+        }
+      }
+
+      if (exitStatus === RootFatalErrored) {
+        var fatalError = workInProgressRootFatalError;
+        prepareFreshStack(root, NoLanes);
+        markRootSuspended$1(root, lanes);
+        ensureRootIsScheduled(root, now());
+        throw fatalError;
+      } // We now have a consistent tree. The next step is either to commit it,
+      // or, if something suspended, wait to commit it after a timeout.
+
+
+      var finishedWork = root.current.alternate;
+      root.finishedWork = finishedWork;
+      root.finishedLanes = lanes;
+      finishConcurrentRender(root, exitStatus, lanes);
+    }
+
+    ensureRootIsScheduled(root, now());
+
+    if (root.callbackNode === originalCallbackNode) {
+      // The task node scheduled for this root is the same one that's
+      // currently executed. Need to return a continuation.
+      return performConcurrentWorkOnRoot.bind(null, root);
     }
 
     return null;
   }
 
-  function finishConcurrentRender(root, finishedWork, exitStatus, expirationTime) {
-    // Set this to null to indicate there's no in-progress render.
-    workInProgressRoot = null;
-
+  function finishConcurrentRender(root, exitStatus, lanes) {
     switch (exitStatus) {
       case RootIncomplete:
       case RootFatalErrored:
@@ -21655,70 +22171,40 @@
 
       case RootErrored:
         {
-          // If this was an async render, the error may have happened due to
-          // a mutation in a concurrent event. Try rendering one more time,
-          // synchronously, to see if the error goes away. If there are
-          // lower priority updates, let's include those, too, in case they
-          // fix the inconsistency. Render at Idle to include all updates.
-          // If it was Idle or Never or some not-yet-invented time, render
-          // at that time.
-          markRootExpiredAtTime(root, expirationTime > Idle ? Idle : expirationTime); // We assume that this second render pass will be synchronous
-          // and therefore not hit this path again.
-
+          // We should have already attempted to retry this tree. If we reached
+          // this point, it errored again. Commit it.
+          commitRoot(root);
           break;
         }
 
       case RootSuspended:
         {
-          markRootSuspendedAtTime(root, expirationTime);
-          var lastSuspendedTime = root.lastSuspendedTime;
-
-          if (expirationTime === lastSuspendedTime) {
-            root.nextKnownPendingLevel = getRemainingExpirationTime(finishedWork);
-          } // We have an acceptable loading state. We need to figure out if we
+          markRootSuspended$1(root, lanes); // We have an acceptable loading state. We need to figure out if we
           // should immediately commit it or wait a bit.
-          // If we have processed new updates during this render, we may now
-          // have a new loading state ready. We want to ensure that we commit
-          // that as soon as possible.
-
-
-          var hasNotProcessedNewUpdates = workInProgressRootLatestProcessedExpirationTime === Sync;
-
-          if (hasNotProcessedNewUpdates && // do not delay if we're inside an act() scope
-          !( IsThisRendererActing.current)) {
-            // If we have not processed any new updates during this pass, then
-            // this is either a retry of an existing fallback state or a
-            // hidden tree. Hidden trees shouldn't be batched with other work
-            // and after that's fixed it can only be a retry. We're going to
-            // throttle committing retries so that we don't show too many
-            // loading states too quickly.
+
+          if (includesOnlyRetries(lanes) && // do not delay if we're inside an act() scope
+          !shouldForceFlushFallbacksInDEV()) {
+            // This render only included retries, no updates. Throttle committing
+            // retries so that we don't show too many loading states too quickly.
             var msUntilTimeout = globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - now(); // Don't bother with a very short suspense time.
 
             if (msUntilTimeout > 10) {
-              if (workInProgressRootHasPendingPing) {
-                var lastPingedTime = root.lastPingedTime;
-
-                if (lastPingedTime === NoWork || lastPingedTime >= expirationTime) {
-                  // This render was pinged but we didn't get to restart
-                  // earlier so try restarting now instead.
-                  root.lastPingedTime = expirationTime;
-                  prepareFreshStack(root, expirationTime);
-                  break;
-                }
-              }
-
-              var nextTime = getNextRootExpirationTimeToWorkOn(root);
-
-              if (nextTime !== NoWork && nextTime !== expirationTime) {
+              var nextLanes = getNextLanes(root, NoLanes);
+
+              if (nextLanes !== NoLanes) {
                 // There's additional work on this root.
                 break;
               }
 
-              if (lastSuspendedTime !== NoWork && lastSuspendedTime !== expirationTime) {
+              var suspendedLanes = root.suspendedLanes;
+
+              if (!isSubsetOfLanes(suspendedLanes, lanes)) {
                 // We should prefer to render the fallback of at the last
                 // suspended level. Ping the last suspended level to try
                 // rendering it again.
-                root.lastPingedTime = lastSuspendedTime;
+                // FIXME: What if the suspended lanes are Idle? Should not restart.
+                var eventTime = requestEventTime();
+                markRootPinged(root, suspendedLanes);
                 break;
               } // The render is suspended, it hasn't timed out, and there's no
               // lower priority work to do. Instead of committing the fallback
@@ -21737,86 +22223,36 @@
 
       case RootSuspendedWithDelay:
         {
-          markRootSuspendedAtTime(root, expirationTime);
-          var _lastSuspendedTime = root.lastSuspendedTime;
-
-          if (expirationTime === _lastSuspendedTime) {
-            root.nextKnownPendingLevel = getRemainingExpirationTime(finishedWork);
-          }
-
-          if ( // do not delay if we're inside an act() scope
-          !( IsThisRendererActing.current)) {
-            // We're suspended in a state that should be avoided. We'll try to
-            // avoid committing it for as long as the timeouts let us.
-            if (workInProgressRootHasPendingPing) {
-              var _lastPingedTime = root.lastPingedTime;
-
-              if (_lastPingedTime === NoWork || _lastPingedTime >= expirationTime) {
-                // This render was pinged but we didn't get to restart earlier
-                // so try restarting now instead.
-                root.lastPingedTime = expirationTime;
-                prepareFreshStack(root, expirationTime);
-                break;
-              }
-            }
-
-            var _nextTime = getNextRootExpirationTimeToWorkOn(root);
-
-            if (_nextTime !== NoWork && _nextTime !== expirationTime) {
-              // There's additional work on this root.
-              break;
-            }
-
-            if (_lastSuspendedTime !== NoWork && _lastSuspendedTime !== expirationTime) {
-              // We should prefer to render the fallback of at the last
-              // suspended level. Ping the last suspended level to try
-              // rendering it again.
-              root.lastPingedTime = _lastSuspendedTime;
-              break;
-            }
-
-            var _msUntilTimeout;
-
-            if (workInProgressRootLatestSuspenseTimeout !== Sync) {
-              // We have processed a suspense config whose expiration time we
-              // can use as the timeout.
-              _msUntilTimeout = expirationTimeToMs(workInProgressRootLatestSuspenseTimeout) - now();
-            } else if (workInProgressRootLatestProcessedExpirationTime === Sync) {
-              // This should never normally happen because only new updates
-              // cause delayed states, so we should have processed something.
-              // However, this could also happen in an offscreen tree.
-              _msUntilTimeout = 0;
-            } else {
-              // If we don't have a suspense config, we're going to use a
-              // heuristic to determine how long we can suspend.
-              var eventTimeMs = inferTimeFromExpirationTime(workInProgressRootLatestProcessedExpirationTime);
-              var currentTimeMs = now();
-              var timeUntilExpirationMs = expirationTimeToMs(expirationTime) - currentTimeMs;
-              var timeElapsed = currentTimeMs - eventTimeMs;
-
-              if (timeElapsed < 0) {
-                // We get this wrong some time since we estimate the time.
-                timeElapsed = 0;
-              }
-
-              _msUntilTimeout = jnd(timeElapsed) - timeElapsed; // Clamp the timeout to the expiration time. TODO: Once the
-              // event time is exact instead of inferred from expiration time
-              // we don't need this.
-
-              if (timeUntilExpirationMs < _msUntilTimeout) {
-                _msUntilTimeout = timeUntilExpirationMs;
-              }
-            } // Don't bother with a very short suspense time.
+          markRootSuspended$1(root, lanes);
+
+          if (includesOnlyTransitions(lanes)) {
+            // This is a transition, so we should exit without committing a
+            // placeholder and without scheduling a timeout. Delay indefinitely
+            // until we receive more data.
+            break;
+          }
+
+          if (!shouldForceFlushFallbacksInDEV()) {
+            // This is not a transition, but we did trigger an avoided state.
+            // Schedule a placeholder to display after a short delay, using the Just
+            // Noticeable Difference.
+            // TODO: Is the JND optimization worth the added complexity? If this is
+            // the only reason we track the event time, then probably not.
+            // Consider removing.
+            var mostRecentEventTime = getMostRecentEventTime(root, lanes);
+            var eventTimeMs = mostRecentEventTime;
+            var timeElapsedMs = now() - eventTimeMs;
+
+            var _msUntilTimeout = jnd(timeElapsedMs) - timeElapsedMs; // Don't bother with a very short suspense time.
 
 
             if (_msUntilTimeout > 10) {
-              // The render is suspended, it hasn't timed out, and there's no
-              // lower priority work to do. Instead of committing the fallback
-              // immediately, wait for more data to arrive.
+              // Instead of committing the fallback immediately, wait for more data
+              // to arrive.
               root.timeoutHandle = scheduleTimeout(commitRoot.bind(null, root), _msUntilTimeout);
               break;
             }
-          } // The work expired. Commit immediately.
+          } // Commit the placeholder.
 
 
           commitRoot(root);
@@ -21826,21 +22262,6 @@
       case RootCompleted:
         {
           // The work completed. Ready to commit.
-          if ( // do not delay if we're inside an act() scope
-          !( IsThisRendererActing.current) && workInProgressRootLatestProcessedExpirationTime !== Sync && workInProgressRootCanSuspendUsingConfig !== null) {
-            // If we have exceeded the minimum loading delay, which probably
-            // means we have shown a spinner already, we might have to suspend
-            // a bit longer to ensure that the spinner is shown for
-            // enough time.
-            var _msUntilTimeout2 = computeMsUntilSuspenseLoadingDelay(workInProgressRootLatestProcessedExpirationTime, expirationTime, workInProgressRootCanSuspendUsingConfig);
-
-            if (_msUntilTimeout2 > 10) {
-              markRootSuspendedAtTime(root, expirationTime);
-              root.timeoutHandle = scheduleTimeout(commitRoot.bind(null, root), _msUntilTimeout2);
-              break;
-            }
-          }
-
           commitRoot(root);
           break;
         }
@@ -21854,93 +22275,93 @@
           }
         }
     }
+  }
+
+  function markRootSuspended$1(root, suspendedLanes) {
+    // When suspending, we should always exclude lanes that were pinged or (more
+    // rarely, since we try to avoid it) updated during the render phase.
+    // TODO: Lol maybe there's a better way to factor this besides this
+    // obnoxiously named function :)
+    suspendedLanes = removeLanes(suspendedLanes, workInProgressRootPingedLanes);
+    suspendedLanes = removeLanes(suspendedLanes, workInProgressRootUpdatedLanes);
+    markRootSuspended(root, suspendedLanes);
   } // This is the entry point for synchronous tasks that don't go
   // through Scheduler
 
 
   function performSyncWorkOnRoot(root) {
-    // Check if there's expired work on this root. Otherwise, render at Sync.
-    var lastExpiredTime = root.lastExpiredTime;
-    var expirationTime = lastExpiredTime !== NoWork ? lastExpiredTime : Sync;
-
     if (!((executionContext & (RenderContext | CommitContext)) === NoContext)) {
       {
         throw Error( "Should not already be working." );
       }
     }
 
-    flushPassiveEffects(); // If the root or expiration time have changed, throw out the existing stack
-    // and prepare a fresh one. Otherwise we'll continue where we left off.
-
-    if (root !== workInProgressRoot || expirationTime !== renderExpirationTime$1) {
-      prepareFreshStack(root, expirationTime);
-      startWorkOnPendingInteractions(root, expirationTime);
-    } // If we have a work-in-progress fiber, it means there's still work to do
-    // in this root.
-
-
-    if (workInProgress !== null) {
-      var prevExecutionContext = executionContext;
-      executionContext |= RenderContext;
-      var prevDispatcher = pushDispatcher();
-      var prevInteractions = pushInteractions(root);
-      startWorkLoopTimer(workInProgress);
-
-      do {
-        try {
-          workLoopSync();
-          break;
-        } catch (thrownValue) {
-          handleError(root, thrownValue);
-        }
-      } while (true);
-
-      resetContextDependencies();
-      executionContext = prevExecutionContext;
-      popDispatcher(prevDispatcher);
-
-      {
-        popInteractions(prevInteractions);
-      }
-
-      if (workInProgressRootExitStatus === RootFatalErrored) {
-        var fatalError = workInProgressRootFatalError;
-        stopInterruptedWorkLoopTimer();
-        prepareFreshStack(root, expirationTime);
-        markRootSuspendedAtTime(root, expirationTime);
-        ensureRootIsScheduled(root);
-        throw fatalError;
-      }
-
-      if (workInProgress !== null) {
-        // This is a sync render, so we should have finished the whole tree.
-        {
-          {
-            throw Error( "Cannot commit an incomplete root. This error is likely caused by a bug in React. Please file an issue." );
-          }
-        }
-      } else {
-        // We now have a consistent tree. Because this is a sync render, we
-        // will commit it even if something suspended.
-        stopFinishedWorkLoopTimer();
-        root.finishedWork = root.current.alternate;
-        root.finishedExpirationTime = expirationTime;
-        finishSyncRender(root);
-      } // Before exiting, make sure there's a callback scheduled for the next
-      // pending level.
-
-
-      ensureRootIsScheduled(root);
-    }
-
+    flushPassiveEffects();
+    var lanes;
+    var exitStatus;
+
+    if (root === workInProgressRoot && includesSomeLane(root.expiredLanes, workInProgressRootRenderLanes)) {
+      // There's a partial tree, and at least one of its lanes has expired. Finish
+      // rendering it before rendering the rest of the expired work.
+      lanes = workInProgressRootRenderLanes;
+      exitStatus = renderRootSync(root, lanes);
+
+      if (includesSomeLane(workInProgressRootIncludedLanes, workInProgressRootUpdatedLanes)) {
+        // The render included lanes that were updated during the render phase.
+        // For example, when unhiding a hidden tree, we include all the lanes
+        // that were previously skipped when the tree was hidden. That set of
+        // lanes is a superset of the lanes we started rendering with.
+        //
+        // Note that this only happens when part of the tree is rendered
+        // concurrently. If the whole tree is rendered synchronously, then there
+        // are no interleaved events.
+        lanes = getNextLanes(root, lanes);
+        exitStatus = renderRootSync(root, lanes);
+      }
+    } else {
+      lanes = getNextLanes(root, NoLanes);
+      exitStatus = renderRootSync(root, lanes);
+    }
+
+    if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
+      executionContext |= RetryAfterError; // If an error occurred during hydration,
+      // discard server response and fall back to client side render.
+
+      if (root.hydrate) {
+        root.hydrate = false;
+        clearContainer(root.containerInfo);
+      } // If something threw an error, try rendering one more time. We'll render
+      // synchronously to block concurrent data mutations, and we'll includes
+      // all pending updates are included. If it still fails after the second
+      // attempt, we'll give up and commit the resulting tree.
+
+
+      lanes = getLanesToRetrySynchronouslyOnError(root);
+
+      if (lanes !== NoLanes) {
+        exitStatus = renderRootSync(root, lanes);
+      }
+    }
+
+    if (exitStatus === RootFatalErrored) {
+      var fatalError = workInProgressRootFatalError;
+      prepareFreshStack(root, NoLanes);
+      markRootSuspended$1(root, lanes);
+      ensureRootIsScheduled(root, now());
+      throw fatalError;
+    } // We now have a consistent tree. Because this is a sync render, we
+    // will commit it even if something suspended.
+
+
+    var finishedWork = root.current.alternate;
+    root.finishedWork = finishedWork;
+    root.finishedLanes = lanes;
+    commitRoot(root); // Before exiting, make sure there's a callback scheduled for the next
+    // pending level.
+
+    ensureRootIsScheduled(root, now());
     return null;
   }
-
-  function finishSyncRender(root) {
-    // Set this to null to indicate there's no in-progress render.
-    workInProgressRoot = null;
-    commitRoot(root);
-  }
   function flushDiscreteUpdates() {
     // TODO: Should be able to flush inside batchedUpdates, but not inside `act`.
     // However, `act` uses `batchedUpdates`, so there's no way to distinguish
@@ -21964,9 +22385,6 @@
 
     flushPassiveEffects();
   }
-  function syncUpdates(fn, a, b, c) {
-    return runWithPriority$1(ImmediatePriority, fn.bind(null, a, b, c));
-  }
 
   function flushPendingDiscreteUpdates() {
     if (rootsWithPendingDiscreteUpdates !== null) {
@@ -21974,13 +22392,14 @@
       // immediately flush them.
       var roots = rootsWithPendingDiscreteUpdates;
       rootsWithPendingDiscreteUpdates = null;
-      roots.forEach(function (expirationTime, root) {
-        markRootExpiredAtTime(root, expirationTime);
-        ensureRootIsScheduled(root);
-      }); // Now flush the immediate queue.
-
-      flushSyncCallbackQueue();
-    }
+      roots.forEach(function (root) {
+        markDiscreteUpdatesExpired(root);
+        ensureRootIsScheduled(root, now());
+      });
+    } // Now flush the immediate queue.
+
+
+    flushSyncCallbackQueue();
   }
 
   function batchedUpdates$1(fn, a) {
@@ -21994,6 +22413,7 @@
 
       if (executionContext === NoContext) {
         // Flush the immediate callbacks that were scheduled during this batch
+        resetRenderTimer();
         flushSyncCallbackQueue();
       }
     }
@@ -22009,6 +22429,7 @@
 
       if (executionContext === NoContext) {
         // Flush the immediate callbacks that were scheduled during this batch
+        resetRenderTimer();
         flushSyncCallbackQueue();
       }
     }
@@ -22017,15 +22438,17 @@
     var prevExecutionContext = executionContext;
     executionContext |= DiscreteEventContext;
 
-    try {
-      // Should this
-      return runWithPriority$1(UserBlockingPriority$1, fn.bind(null, a, b, c, d));
-    } finally {
-      executionContext = prevExecutionContext;
-
-      if (executionContext === NoContext) {
-        // Flush the immediate callbacks that were scheduled during this batch
-        flushSyncCallbackQueue();
+    {
+      try {
+        return runWithPriority$1(UserBlockingPriority$2, fn.bind(null, a, b, c, d));
+      } finally {
+        executionContext = prevExecutionContext;
+
+        if (executionContext === NoContext) {
+          // Flush the immediate callbacks that were scheduled during this batch
+          resetRenderTimer();
+          flushSyncCallbackQueue();
+        }
       }
     }
   }
@@ -22041,36 +22464,53 @@
 
       if (executionContext === NoContext) {
         // Flush the immediate callbacks that were scheduled during this batch
+        resetRenderTimer();
         flushSyncCallbackQueue();
       }
     }
   }
   function flushSync(fn, a) {
-    if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
-      {
-        {
-          throw Error( "flushSync was called from inside a lifecycle method. It cannot be called when React is already rendering." );
-        }
-      }
-    }
-
     var prevExecutionContext = executionContext;
+
+    if ((prevExecutionContext & (RenderContext | CommitContext)) !== NoContext) {
+      {
+        error('flushSync was called from inside a lifecycle method. React cannot ' + 'flush when React is already rendering. Consider moving this call to ' + 'a scheduler task or micro task.');
+      }
+
+      return fn(a);
+    }
+
     executionContext |= BatchedContext;
 
-    try {
-      return runWithPriority$1(ImmediatePriority, fn.bind(null, a));
-    } finally {
-      executionContext = prevExecutionContext; // Flush the immediate callbacks that were scheduled during this batch.
-      // Note that this will happen even if batchedUpdates is higher up
-      // the stack.
-
-      flushSyncCallbackQueue();
-    }
-  }
-
-  function prepareFreshStack(root, expirationTime) {
+    {
+      try {
+        if (fn) {
+          return runWithPriority$1(ImmediatePriority$1, fn.bind(null, a));
+        } else {
+          return undefined;
+        }
+      } finally {
+        executionContext = prevExecutionContext; // Flush the immediate callbacks that were scheduled during this batch.
+        // Note that this will happen even if batchedUpdates is higher up
+        // the stack.
+
+        flushSyncCallbackQueue();
+      }
+    }
+  }
+  function pushRenderLanes(fiber, lanes) {
+    push(subtreeRenderLanesCursor, subtreeRenderLanes, fiber);
+    subtreeRenderLanes = mergeLanes(subtreeRenderLanes, lanes);
+    workInProgressRootIncludedLanes = mergeLanes(workInProgressRootIncludedLanes, lanes);
+  }
+  function popRenderLanes(fiber) {
+    subtreeRenderLanes = subtreeRenderLanesCursor.current;
+    pop(subtreeRenderLanesCursor, fiber);
+  }
+
+  function prepareFreshStack(root, lanes) {
     root.finishedWork = null;
-    root.finishedExpirationTime = NoWork;
+    root.finishedLanes = NoLanes;
     var timeoutHandle = root.timeoutHandle;
 
     if (timeoutHandle !== noTimeout) {
@@ -22092,14 +22532,12 @@
 
     workInProgressRoot = root;
     workInProgress = createWorkInProgress(root.current, null);
-    renderExpirationTime$1 = expirationTime;
+    workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;
     workInProgressRootExitStatus = RootIncomplete;
     workInProgressRootFatalError = null;
-    workInProgressRootLatestProcessedExpirationTime = Sync;
-    workInProgressRootLatestSuspenseTimeout = Sync;
-    workInProgressRootCanSuspendUsingConfig = null;
-    workInProgressRootNextUnprocessedUpdateTime = NoWork;
-    workInProgressRootHasPendingPing = false;
+    workInProgressRootSkippedLanes = NoLanes;
+    workInProgressRootUpdatedLanes = NoLanes;
+    workInProgressRootPingedLanes = NoLanes;
 
     {
       spawnedWorkDuringRender = null;
@@ -22112,13 +22550,18 @@
 
   function handleError(root, thrownValue) {
     do {
+      var erroredWork = workInProgress;
+
       try {
         // Reset module-level state that was set during the render phase.
         resetContextDependencies();
         resetHooksAfterThrow();
-        resetCurrentFiber();
-
-        if (workInProgress === null || workInProgress.return === null) {
+        resetCurrentFiber(); // TODO: I found and added this missing line while investigating a
+        // separate issue. Write a regression test using string refs.
+
+        ReactCurrentOwner$2.current = null;
+
+        if (erroredWork === null || erroredWork.return === null) {
           // Expected to be working on a non-root fiber. This is a fatal error
           // because there's no ancestor that can handle it; the root is
           // supposed to capture all errors that weren't caught by an error
@@ -22128,25 +22571,35 @@
           // sibling, or the parent if there are no siblings. But since the root
           // has no siblings nor a parent, we set it to null. Usually this is
           // handled by `completeUnitOfWork` or `unwindWork`, but since we're
-          // interntionally not calling those, we need set it here.
+          // intentionally not calling those, we need set it here.
           // TODO: Consider calling `unwindWork` to pop the contexts.
 
           workInProgress = null;
-          return null;
-        }
-
-        if (enableProfilerTimer && workInProgress.mode & ProfileMode) {
+          return;
+        }
+
+        if (enableProfilerTimer && erroredWork.mode & ProfileMode) {
           // Record the time spent rendering before an error was thrown. This
           // avoids inaccurate Profiler durations in the case of a
           // suspended render.
-          stopProfilerTimerIfRunningAndRecordDelta(workInProgress, true);
-        }
-
-        throwException(root, workInProgress.return, workInProgress, thrownValue, renderExpirationTime$1);
-        workInProgress = completeUnitOfWork(workInProgress);
+          stopProfilerTimerIfRunningAndRecordDelta(erroredWork, true);
+        }
+
+        throwException(root, erroredWork.return, erroredWork, thrownValue, workInProgressRootRenderLanes);
+        completeUnitOfWork(erroredWork);
       } catch (yetAnotherThrownValue) {
         // Something in the return path also threw.
         thrownValue = yetAnotherThrownValue;
+
+        if (workInProgress === erroredWork && erroredWork !== null) {
+          // If this boundary has already errored, then we had trouble processing
+          // the error. Bubble it to the next boundary.
+          erroredWork = erroredWork.return;
+          workInProgress = erroredWork;
+        } else {
+          erroredWork = workInProgress;
+        }
+
         continue;
       } // Return to the normal work loop.
 
@@ -22155,9 +22608,9 @@
     } while (true);
   }
 
-  function pushDispatcher(root) {
-    var prevDispatcher = ReactCurrentDispatcher$1.current;
-    ReactCurrentDispatcher$1.current = ContextOnlyDispatcher;
+  function pushDispatcher() {
+    var prevDispatcher = ReactCurrentDispatcher$2.current;
+    ReactCurrentDispatcher$2.current = ContextOnlyDispatcher;
 
     if (prevDispatcher === null) {
       // The React isomorphic package does not include a default dispatcher.
@@ -22170,7 +22623,7 @@
   }
 
   function popDispatcher(prevDispatcher) {
-    ReactCurrentDispatcher$1.current = prevDispatcher;
+    ReactCurrentDispatcher$2.current = prevDispatcher;
   }
 
   function pushInteractions(root) {
@@ -22190,23 +22643,8 @@
   function markCommitTimeOfFallback() {
     globalMostRecentFallbackTime = now();
   }
-  function markRenderEventTimeAndConfig(expirationTime, suspenseConfig) {
-    if (expirationTime < workInProgressRootLatestProcessedExpirationTime && expirationTime > Idle) {
-      workInProgressRootLatestProcessedExpirationTime = expirationTime;
-    }
-
-    if (suspenseConfig !== null) {
-      if (expirationTime < workInProgressRootLatestSuspenseTimeout && expirationTime > Idle) {
-        workInProgressRootLatestSuspenseTimeout = expirationTime; // Most of the time we only have one config and getting wrong is not bad.
-
-        workInProgressRootCanSuspendUsingConfig = suspenseConfig;
-      }
-    }
-  }
-  function markUnprocessedUpdateTime(expirationTime) {
-    if (expirationTime > workInProgressRootNextUnprocessedUpdateTime) {
-      workInProgressRootNextUnprocessedUpdateTime = expirationTime;
-    }
+  function markSkippedUpdateLanes(lane) {
+    workInProgressRootSkippedLanes = mergeLanes(lane, workInProgressRootSkippedLanes);
   }
   function renderDidSuspend() {
     if (workInProgressRootExitStatus === RootIncomplete) {
@@ -22216,16 +22654,19 @@
   function renderDidSuspendDelayIfPossible() {
     if (workInProgressRootExitStatus === RootIncomplete || workInProgressRootExitStatus === RootSuspended) {
       workInProgressRootExitStatus = RootSuspendedWithDelay;
-    } // Check if there's a lower priority update somewhere else in the tree.
-
-
-    if (workInProgressRootNextUnprocessedUpdateTime !== NoWork && workInProgressRoot !== null) {
-      // Mark the current render as suspended, and then mark that there's a
-      // pending update.
-      // TODO: This should immediately interrupt the current render, instead
-      // of waiting until the next time we yield.
-      markRootSuspendedAtTime(workInProgressRoot, renderExpirationTime$1);
-      markRootUpdatedAtTime(workInProgressRoot, workInProgressRootNextUnprocessedUpdateTime);
+    } // Check if there are updates that we skipped tree that might have unblocked
+    // this render.
+
+
+    if (workInProgressRoot !== null && (includesNonIdleWork(workInProgressRootSkippedLanes) || includesNonIdleWork(workInProgressRootUpdatedLanes))) {
+      // Mark the current render as suspended so that we switch to working on
+      // the updates that were skipped. Usually we only suspend at the end of
+      // the render phase.
+      // TODO: We should probably always mark the root as suspended immediately
+      // (inside this function), since by suspending at the end of the render
+      // phase introduces a potential mistake where we suspend lanes that were
+      // pinged or updated while we were rendering.
+      markRootSuspended$1(workInProgressRoot, workInProgressRootRenderLanes);
     }
   }
   function renderDidError() {
@@ -22241,19 +22682,50 @@
     return workInProgressRootExitStatus === RootIncomplete;
   }
 
-  function inferTimeFromExpirationTime(expirationTime) {
-    // We don't know exactly when the update was scheduled, but we can infer an
-    // approximate start time from the expiration time.
-    var earliestExpirationTimeMs = expirationTimeToMs(expirationTime);
-    return earliestExpirationTimeMs - LOW_PRIORITY_EXPIRATION;
-  }
-
-  function inferTimeFromExpirationTimeWithSuspenseConfig(expirationTime, suspenseConfig) {
-    // We don't know exactly when the update was scheduled, but we can infer an
-    // approximate start time from the expiration time by subtracting the timeout
-    // that was added to the event time.
-    var earliestExpirationTimeMs = expirationTimeToMs(expirationTime);
-    return earliestExpirationTimeMs - (suspenseConfig.timeoutMs | 0 || LOW_PRIORITY_EXPIRATION);
+  function renderRootSync(root, lanes) {
+    var prevExecutionContext = executionContext;
+    executionContext |= RenderContext;
+    var prevDispatcher = pushDispatcher(); // If the root or lanes have changed, throw out the existing stack
+    // and prepare a fresh one. Otherwise we'll continue where we left off.
+
+    if (workInProgressRoot !== root || workInProgressRootRenderLanes !== lanes) {
+      prepareFreshStack(root, lanes);
+      startWorkOnPendingInteractions(root, lanes);
+    }
+
+    var prevInteractions = pushInteractions(root);
+
+    do {
+      try {
+        workLoopSync();
+        break;
+      } catch (thrownValue) {
+        handleError(root, thrownValue);
+      }
+    } while (true);
+
+    resetContextDependencies();
+
+    {
+      popInteractions(prevInteractions);
+    }
+
+    executionContext = prevExecutionContext;
+    popDispatcher(prevDispatcher);
+
+    if (workInProgress !== null) {
+      // This is a sync render, so we should have finished the whole tree.
+      {
+        {
+          throw Error( "Cannot commit an incomplete root. This error is likely caused by a bug in React. Please file an issue." );
+        }
+      }
+    }
+
+
+    workInProgressRoot = null;
+    workInProgressRootRenderLanes = NoLanes;
+    return workInProgressRootExitStatus;
   } // The work loop is an extremely hot path. Tell Closure not to inline it.
 
   /** @noinline */
@@ -22262,7 +22734,53 @@
   function workLoopSync() {
     // Already timed out, so perform work without checking if we need to yield.
     while (workInProgress !== null) {
-      workInProgress = performUnitOfWork(workInProgress);
+      performUnitOfWork(workInProgress);
+    }
+  }
+
+  function renderRootConcurrent(root, lanes) {
+    var prevExecutionContext = executionContext;
+    executionContext |= RenderContext;
+    var prevDispatcher = pushDispatcher(); // If the root or lanes have changed, throw out the existing stack
+    // and prepare a fresh one. Otherwise we'll continue where we left off.
+
+    if (workInProgressRoot !== root || workInProgressRootRenderLanes !== lanes) {
+      resetRenderTimer();
+      prepareFreshStack(root, lanes);
+      startWorkOnPendingInteractions(root, lanes);
+    }
+
+    var prevInteractions = pushInteractions(root);
+
+    do {
+      try {
+        workLoopConcurrent();
+        break;
+      } catch (thrownValue) {
+        handleError(root, thrownValue);
+      }
+    } while (true);
+
+    resetContextDependencies();
+
+    {
+      popInteractions(prevInteractions);
+    }
+
+    popDispatcher(prevDispatcher);
+    executionContext = prevExecutionContext;
+
+
+    if (workInProgress !== null) {
+
+      return RootIncomplete;
+    } else {
+
+
+      workInProgressRoot = null;
+      workInProgressRootRenderLanes = NoLanes; // Return the final exit status.
+
+      return workInProgressRootExitStatus;
     }
   }
   /** @noinline */
@@ -22271,7 +22789,7 @@
   function workLoopConcurrent() {
     // Perform work until Scheduler asks us to yield
     while (workInProgress !== null && !shouldYield()) {
-      workInProgress = performUnitOfWork(workInProgress);
+      performUnitOfWork(workInProgress);
     }
   }
 
@@ -22280,16 +22798,15 @@
     // nothing should rely on this, but relying on it here means that we don't
     // need an additional field on the work in progress.
     var current = unitOfWork.alternate;
-    startWorkTimer(unitOfWork);
     setCurrentFiber(unitOfWork);
     var next;
 
     if ( (unitOfWork.mode & ProfileMode) !== NoMode) {
       startProfilerTimer(unitOfWork);
-      next = beginWork$1(current, unitOfWork, renderExpirationTime$1);
+      next = beginWork$1(current, unitOfWork, subtreeRenderLanes);
       stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
     } else {
-      next = beginWork$1(current, unitOfWork, renderExpirationTime$1);
+      next = beginWork$1(current, unitOfWork, subtreeRenderLanes);
     }
 
     resetCurrentFiber();
@@ -22297,62 +22814,64 @@
 
     if (next === null) {
       // If this doesn't spawn new work, complete the current work.
-      next = completeUnitOfWork(unitOfWork);
+      completeUnitOfWork(unitOfWork);
+    } else {
+      workInProgress = next;
     }
 
     ReactCurrentOwner$2.current = null;
-    return next;
   }
 
   function completeUnitOfWork(unitOfWork) {
     // Attempt to complete the current unit of work, then move to the next
     // sibling. If there are no more siblings, return to the parent fiber.
-    workInProgress = unitOfWork;
+    var completedWork = unitOfWork;
 
     do {
       // The current, flushed, state of this fiber is the alternate. Ideally
       // nothing should rely on this, but relying on it here means that we don't
       // need an additional field on the work in progress.
-      var current = workInProgress.alternate;
-      var returnFiber = workInProgress.return; // Check if the work completed or if something threw.
-
-      if ((workInProgress.effectTag & Incomplete) === NoEffect) {
-        setCurrentFiber(workInProgress);
+      var current = completedWork.alternate;
+      var returnFiber = completedWork.return; // Check if the work completed or if something threw.
+
+      if ((completedWork.flags & Incomplete) === NoFlags) {
+        setCurrentFiber(completedWork);
         var next = void 0;
 
-        if ( (workInProgress.mode & ProfileMode) === NoMode) {
-          next = completeWork(current, workInProgress, renderExpirationTime$1);
-        } else {
-          startProfilerTimer(workInProgress);
-          next = completeWork(current, workInProgress, renderExpirationTime$1); // Update render duration assuming we didn't error.
-
-          stopProfilerTimerIfRunningAndRecordDelta(workInProgress, false);
-        }
-
-        stopWorkTimer(workInProgress);
+        if ( (completedWork.mode & ProfileMode) === NoMode) {
+          next = completeWork(current, completedWork, subtreeRenderLanes);
+        } else {
+          startProfilerTimer(completedWork);
+          next = completeWork(current, completedWork, subtreeRenderLanes); // Update render duration assuming we didn't error.
+
+          stopProfilerTimerIfRunningAndRecordDelta(completedWork, false);
+        }
+
         resetCurrentFiber();
-        resetChildExpirationTime(workInProgress);
 
         if (next !== null) {
           // Completing this fiber spawned new work. Work on that next.
-          return next;
-        }
+          workInProgress = next;
+          return;
+        }
+
+        resetChildLanes(completedWork);
 
         if (returnFiber !== null && // Do not append effects to parents if a sibling failed to complete
-        (returnFiber.effectTag & Incomplete) === NoEffect) {
+        (returnFiber.flags & Incomplete) === NoFlags) {
           // Append all the effects of the subtree and this fiber onto the effect
           // list of the parent. The completion order of the children affects the
           // side-effect order.
           if (returnFiber.firstEffect === null) {
-            returnFiber.firstEffect = workInProgress.firstEffect;
-          }
-
-          if (workInProgress.lastEffect !== null) {
+            returnFiber.firstEffect = completedWork.firstEffect;
+          }
+
+          if (completedWork.lastEffect !== null) {
             if (returnFiber.lastEffect !== null) {
-              returnFiber.lastEffect.nextEffect = workInProgress.firstEffect;
-            }
-
-            returnFiber.lastEffect = workInProgress.lastEffect;
+              returnFiber.lastEffect.nextEffect = completedWork.firstEffect;
+            }
+
+            returnFiber.lastEffect = completedWork.lastEffect;
           } // If this fiber had side-effects, we append it AFTER the children's
           // side-effects. We can perform certain side-effects earlier if needed,
           // by doing multiple passes over the effect list. We don't want to
@@ -22361,96 +22880,89 @@
           // at the end.
 
 
-          var effectTag = workInProgress.effectTag; // Skip both NoWork and PerformedWork tags when creating the effect
+          var flags = completedWork.flags; // Skip both NoWork and PerformedWork tags when creating the effect
           // list. PerformedWork effect is read by React DevTools but shouldn't be
           // committed.
 
-          if (effectTag > PerformedWork) {
+          if (flags > PerformedWork) {
             if (returnFiber.lastEffect !== null) {
-              returnFiber.lastEffect.nextEffect = workInProgress;
+              returnFiber.lastEffect.nextEffect = completedWork;
             } else {
-              returnFiber.firstEffect = workInProgress;
-            }
-
-            returnFiber.lastEffect = workInProgress;
+              returnFiber.firstEffect = completedWork;
+            }
+
+            returnFiber.lastEffect = completedWork;
           }
         }
       } else {
         // This fiber did not complete because something threw. Pop values off
         // the stack without entering the complete phase. If this is a boundary,
         // capture values if possible.
-        var _next = unwindWork(workInProgress); // Because this fiber did not complete, don't reset its expiration time.
-
-
-        if ( (workInProgress.mode & ProfileMode) !== NoMode) {
-          // Record the render duration for the fiber that errored.
-          stopProfilerTimerIfRunningAndRecordDelta(workInProgress, false); // Include the time spent working on failed children before continuing.
-
-          var actualDuration = workInProgress.actualDuration;
-          var child = workInProgress.child;
-
-          while (child !== null) {
-            actualDuration += child.actualDuration;
-            child = child.sibling;
-          }
-
-          workInProgress.actualDuration = actualDuration;
-        }
+        var _next = unwindWork(completedWork); // Because this fiber did not complete, don't reset its expiration time.
+
 
         if (_next !== null) {
           // If completing this work spawned new work, do that next. We'll come
           // back here again.
           // Since we're restarting, remove anything that is not a host effect
           // from the effect tag.
-          // TODO: The name stopFailedWorkTimer is misleading because Suspense
-          // also captures and restarts.
-          stopFailedWorkTimer(workInProgress);
-          _next.effectTag &= HostEffectMask;
-          return _next;
-        }
-
-        stopWorkTimer(workInProgress);
+          _next.flags &= HostEffectMask;
+          workInProgress = _next;
+          return;
+        }
+
+        if ( (completedWork.mode & ProfileMode) !== NoMode) {
+          // Record the render duration for the fiber that errored.
+          stopProfilerTimerIfRunningAndRecordDelta(completedWork, false); // Include the time spent working on failed children before continuing.
+
+          var actualDuration = completedWork.actualDuration;
+          var child = completedWork.child;
+
+          while (child !== null) {
+            actualDuration += child.actualDuration;
+            child = child.sibling;
+          }
+
+          completedWork.actualDuration = actualDuration;
+        }
 
         if (returnFiber !== null) {
           // Mark the parent fiber as incomplete and clear its effect list.
           returnFiber.firstEffect = returnFiber.lastEffect = null;
-          returnFiber.effectTag |= Incomplete;
-        }
-      }
-
-      var siblingFiber = workInProgress.sibling;
+          returnFiber.flags |= Incomplete;
+        }
+      }
+
+      var siblingFiber = completedWork.sibling;
 
       if (siblingFiber !== null) {
         // If there is more work to do in this returnFiber, do that next.
-        return siblingFiber;
+        workInProgress = siblingFiber;
+        return;
       } // Otherwise, return to the parent
 
 
-      workInProgress = returnFiber;
-    } while (workInProgress !== null); // We've reached the root.
+      completedWork = returnFiber; // Update the next thing we're working on in case something throws.
+
+      workInProgress = completedWork;
+    } while (completedWork !== null); // We've reached the root.
 
 
     if (workInProgressRootExitStatus === RootIncomplete) {
       workInProgressRootExitStatus = RootCompleted;
     }
-
-    return null;
-  }
-
-  function getRemainingExpirationTime(fiber) {
-    var updateExpirationTime = fiber.expirationTime;
-    var childExpirationTime = fiber.childExpirationTime;
-    return updateExpirationTime > childExpirationTime ? updateExpirationTime : childExpirationTime;
-  }
-
-  function resetChildExpirationTime(completedWork) {
-    if (renderExpirationTime$1 !== Never && completedWork.childExpirationTime === Never) {
+  }
+
+  function resetChildLanes(completedWork) {
+    if ( // TODO: Move this check out of the hot path by moving `resetChildLanes`
+    // to switch statement in `completeWork`.
+    (completedWork.tag === LegacyHiddenComponent || completedWork.tag === OffscreenComponent) && completedWork.memoizedState !== null && !includesSomeLane(subtreeRenderLanes, OffscreenLane) && (completedWork.mode & ConcurrentMode) !== NoLanes) {
       // The children of this component are hidden. Don't bubble their
       // expiration times.
       return;
     }
 
-    var newChildExpirationTime = NoWork; // Bubble up the earliest expiration time.
+    var newChildLanes = NoLanes; // Bubble up the earliest expiration time.
 
     if ( (completedWork.mode & ProfileMode) !== NoMode) {
       // In profiling mode, resetChildExpirationTime is also used to reset
@@ -22468,16 +22980,7 @@
       var child = completedWork.child;
 
       while (child !== null) {
-        var childUpdateExpirationTime = child.expirationTime;
-        var childChildExpirationTime = child.childExpirationTime;
-
-        if (childUpdateExpirationTime > newChildExpirationTime) {
-          newChildExpirationTime = childUpdateExpirationTime;
-        }
-
-        if (childChildExpirationTime > newChildExpirationTime) {
-          newChildExpirationTime = childChildExpirationTime;
-        }
+        newChildLanes = mergeLanes(newChildLanes, mergeLanes(child.lanes, child.childLanes));
 
         if (shouldBubbleActualDurations) {
           actualDuration += child.actualDuration;
@@ -22487,33 +22990,34 @@
         child = child.sibling;
       }
 
+      var isTimedOutSuspense = completedWork.tag === SuspenseComponent && completedWork.memoizedState !== null;
+
+      if (isTimedOutSuspense) {
+        // Don't count time spent in a timed out Suspense subtree as part of the base duration.
+        var primaryChildFragment = completedWork.child;
+
+        if (primaryChildFragment !== null) {
+          treeBaseDuration -= primaryChildFragment.treeBaseDuration;
+        }
+      }
+
       completedWork.actualDuration = actualDuration;
       completedWork.treeBaseDuration = treeBaseDuration;
     } else {
       var _child = completedWork.child;
 
       while (_child !== null) {
-        var _childUpdateExpirationTime = _child.expirationTime;
-        var _childChildExpirationTime = _child.childExpirationTime;
-
-        if (_childUpdateExpirationTime > newChildExpirationTime) {
-          newChildExpirationTime = _childUpdateExpirationTime;
-        }
-
-        if (_childChildExpirationTime > newChildExpirationTime) {
-          newChildExpirationTime = _childChildExpirationTime;
-        }
-
+        newChildLanes = mergeLanes(newChildLanes, mergeLanes(_child.lanes, _child.childLanes));
         _child = _child.sibling;
       }
     }
 
-    completedWork.childExpirationTime = newChildExpirationTime;
+    completedWork.childLanes = newChildLanes;
   }
 
   function commitRoot(root) {
     var renderPriorityLevel = getCurrentPriorityLevel();
-    runWithPriority$1(ImmediatePriority, commitRootImpl.bind(null, root, renderPriorityLevel));
+    runWithPriority$1(ImmediatePriority$1, commitRootImpl.bind(null, root, renderPriorityLevel));
     return null;
   }
 
@@ -22537,14 +23041,15 @@
     }
 
     var finishedWork = root.finishedWork;
-    var expirationTime = root.finishedExpirationTime;
+    var lanes = root.finishedLanes;
 
     if (finishedWork === null) {
+
       return null;
     }
 
     root.finishedWork = null;
-    root.finishedExpirationTime = NoWork;
+    root.finishedLanes = NoLanes;
 
     if (!(finishedWork !== root.current)) {
       {
@@ -22554,30 +23059,31 @@
     // So we can clear these now to allow a new callback to be scheduled.
 
 
-    root.callbackNode = null;
-    root.callbackExpirationTime = NoWork;
-    root.callbackPriority = NoPriority;
-    root.nextKnownPendingLevel = NoWork;
-    startCommitTimer(); // Update the first and last pending times on this root. The new first
+    root.callbackNode = null; // Update the first and last pending times on this root. The new first
     // pending time is whatever is left on the root fiber.
 
-    var remainingExpirationTimeBeforeCommit = getRemainingExpirationTime(finishedWork);
-    markRootFinishedAtTime(root, expirationTime, remainingExpirationTimeBeforeCommit);
+    var remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);
+    markRootFinished(root, remainingLanes); // Clear already finished discrete updates in case that a later call of
+    // `flushDiscreteUpdates` starts a useless render pass which may cancels
+    // a scheduled timeout.
+
+    if (rootsWithPendingDiscreteUpdates !== null) {
+      if (!hasDiscreteLanes(remainingLanes) && rootsWithPendingDiscreteUpdates.has(root)) {
+        rootsWithPendingDiscreteUpdates.delete(root);
+      }
+    }
 
     if (root === workInProgressRoot) {
       // We can reset these now that they are finished.
       workInProgressRoot = null;
       workInProgress = null;
-      renderExpirationTime$1 = NoWork;
-    } // This indicates that the last root we worked on is not the same one that
-    // we're committing now. This most commonly happens when a suspended root
-    // times out.
-    // Get the list of effects.
+      workInProgressRootRenderLanes = NoLanes;
+    } // Get the list of effects.
 
 
     var firstEffect;
 
-    if (finishedWork.effectTag > PerformedWork) {
+    if (finishedWork.flags > PerformedWork) {
       // A fiber's effect list consists only of its children, not itself. So if
       // the root has an effect, we need to add it to the end of the list. The
       // resulting list is the set that would belong to the root's parent, if it
@@ -22594,6 +23100,7 @@
     }
 
     if (firstEffect !== null) {
+
       var prevExecutionContext = executionContext;
       executionContext |= CommitContext;
       var prevInteractions = pushInteractions(root); // Reset this to null before calling lifecycles
@@ -22605,8 +23112,8 @@
       // state of the host tree right before we mutate it. This is where
       // getSnapshotBeforeUpdate is called.
 
-      startCommitSnapshotEffectsTimer();
-      prepareForCommit(root.containerInfo);
+      focusedInstanceHandle = prepareForCommit(root.containerInfo);
+      shouldFireAfterActiveInstanceBlur = false;
       nextEffect = firstEffect;
 
       do {
@@ -22625,9 +23132,10 @@
             nextEffect = nextEffect.nextEffect;
           }
         }
-      } while (nextEffect !== null);
-
-      stopCommitSnapshotEffectsTimer();
+      } while (nextEffect !== null); // We no longer need to track the active instance fiber
+
+
+      focusedInstanceHandle = null;
 
       {
         // Mark the current commit time to be shared by all Profilers in this
@@ -22636,7 +23144,6 @@
       } // The next phase is the mutation phase, where we mutate the host tree.
 
 
-      startCommitHostEffectsTimer();
       nextEffect = firstEffect;
 
       do {
@@ -22658,7 +23165,6 @@
         }
       } while (nextEffect !== null);
 
-      stopCommitHostEffectsTimer();
       resetAfterCommit(root.containerInfo); // The work-in-progress tree is now the current tree. This must come after
       // the mutation phase, so that the previous tree is still current during
       // componentWillUnmount, but before the layout phase, so that the finished
@@ -22668,12 +23174,11 @@
       // the host tree after it's been mutated. The idiomatic use case for this is
       // layout, but class component lifecycles also fire here for legacy reasons.
 
-      startCommitLifeCyclesTimer();
       nextEffect = firstEffect;
 
       do {
         {
-          invokeGuardedCallback(null, commitLayoutEffects, null, root, expirationTime);
+          invokeGuardedCallback(null, commitLayoutEffects, null, root, lanes);
 
           if (hasCaughtError()) {
             if (!(nextEffect !== null)) {
@@ -22690,7 +23195,6 @@
         }
       } while (nextEffect !== null);
 
-      stopCommitLifeCyclesTimer();
       nextEffect = null; // Tell Scheduler to yield at the end of the frame, so the browser has an
       // opportunity to paint.
 
@@ -22707,20 +23211,11 @@
       // no effects.
       // TODO: Maybe there's a better way to report this.
 
-      startCommitSnapshotEffectsTimer();
-      stopCommitSnapshotEffectsTimer();
-
       {
         recordCommitTime();
       }
-
-      startCommitHostEffectsTimer();
-      stopCommitHostEffectsTimer();
-      startCommitLifeCyclesTimer();
-      stopCommitLifeCyclesTimer();
-    }
-
-    stopCommitTimer();
+    }
+
     var rootDidHavePassiveEffects = rootDoesHavePassiveEffects;
 
     if (rootDoesHavePassiveEffects) {
@@ -22728,7 +23223,7 @@
       // schedule a callback until after flushing layout work.
       rootDoesHavePassiveEffects = false;
       rootWithPendingPassiveEffects = root;
-      pendingPassiveEffectsExpirationTime = expirationTime;
+      pendingPassiveEffectsLanes = lanes;
       pendingPassiveEffectsRenderPriority = renderPriorityLevel;
     } else {
       // We are done with the effect chain at this point so let's clear the
@@ -22739,14 +23234,19 @@
       while (nextEffect !== null) {
         var nextNextEffect = nextEffect.nextEffect;
         nextEffect.nextEffect = null;
+
+        if (nextEffect.flags & Deletion) {
+          detachFiberAfterEffects(nextEffect);
+        }
+
         nextEffect = nextNextEffect;
       }
-    } // Check if there's remaining work on this root
-
-
-    var remainingExpirationTime = root.firstPendingTime;
-
-    if (remainingExpirationTime !== NoWork) {
+    } // Read this again, since an effect might have updated it
+
+
+    remainingLanes = root.pendingLanes; // Check if there's remaining work on this root
+
+    if (remainingLanes !== NoLanes) {
       {
         if (spawnedWorkDuringRender !== null) {
           var expirationTimes = spawnedWorkDuringRender;
@@ -22757,7 +23257,7 @@
           }
         }
 
-        schedulePendingInteractions(root, remainingExpirationTime);
+        schedulePendingInteractions(root, remainingLanes);
       }
     } else {
       // If there's no remaining work, we can clear the set of already failed
@@ -22771,11 +23271,11 @@
         // Otherwise, we'll wait until after the passive effects are flushed.
         // Wait to do this until after remaining work has been scheduled,
         // so that we don't prematurely signal complete for interactions when there's e.g. hidden work.
-        finishPendingInteractions(root, expirationTime);
-      }
-    }
-
-    if (remainingExpirationTime === Sync) {
+        finishPendingInteractions(root, lanes);
+      }
+    }
+
+    if (remainingLanes === SyncLane) {
       // Count the number of times the root synchronously re-renders without
       // finishing. If there are too many, it indicates an infinite update loop.
       if (root === rootWithNestedUpdates) {
@@ -22788,10 +23288,15 @@
       nestedUpdateCount = 0;
     }
 
-    onCommitRoot(finishedWork.stateNode, expirationTime); // Always call this before exiting `commitRoot`, to ensure that any
+    onCommitRoot(finishedWork.stateNode, renderPriorityLevel);
+
+    {
+      onCommitRoot$1();
+    } // Always call this before exiting `commitRoot`, to ensure that any
     // additional work on this root is scheduled.
 
-    ensureRootIsScheduled(root);
+
+    ensureRootIsScheduled(root, now());
 
     if (hasUncaughtError) {
       hasUncaughtError = false;
@@ -22801,36 +23306,51 @@
     }
 
     if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
-      // This is a legacy edge case. We just committed the initial mount of
       // a ReactDOM.render-ed root inside of batchedUpdates. The commit fired
       // synchronously, but layout updates should be deferred until the end
       // of the batch.
+
+
       return null;
     } // If layout work was scheduled, flush it now.
 
 
     flushSyncCallbackQueue();
+
     return null;
   }
 
   function commitBeforeMutationEffects() {
     while (nextEffect !== null) {
-      var effectTag = nextEffect.effectTag;
-
-      if ((effectTag & Snapshot) !== NoEffect) {
+      var current = nextEffect.alternate;
+
+      if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
+        if ((nextEffect.flags & Deletion) !== NoFlags) {
+          if (doesFiberContain(nextEffect, focusedInstanceHandle)) {
+            shouldFireAfterActiveInstanceBlur = true;
+          }
+        } else {
+          // TODO: Move this out of the hot path using a dedicated effect tag.
+          if (nextEffect.tag === SuspenseComponent && isSuspenseBoundaryBeingHidden(current, nextEffect) && doesFiberContain(nextEffect, focusedInstanceHandle)) {
+            shouldFireAfterActiveInstanceBlur = true;
+          }
+        }
+      }
+
+      var flags = nextEffect.flags;
+
+      if ((flags & Snapshot) !== NoFlags) {
         setCurrentFiber(nextEffect);
-        recordEffect();
-        var current = nextEffect.alternate;
         commitBeforeMutationLifeCycles(current, nextEffect);
         resetCurrentFiber();
       }
 
-      if ((effectTag & Passive) !== NoEffect) {
+      if ((flags & Passive) !== NoFlags) {
         // If there are passive effects, schedule a callback to flush at
         // the earliest opportunity.
         if (!rootDoesHavePassiveEffects) {
           rootDoesHavePassiveEffects = true;
-          scheduleCallback(NormalPriority, function () {
+          scheduleCallback(NormalPriority$1, function () {
             flushPassiveEffects();
             return null;
           });
@@ -22845,13 +23365,13 @@
     // TODO: Should probably move the bulk of this function to commitWork.
     while (nextEffect !== null) {
       setCurrentFiber(nextEffect);
-      var effectTag = nextEffect.effectTag;
-
-      if (effectTag & ContentReset) {
+      var flags = nextEffect.flags;
+
+      if (flags & ContentReset) {
         commitResetTextContent(nextEffect);
       }
 
-      if (effectTag & Ref) {
+      if (flags & Ref) {
         var current = nextEffect.alternate;
 
         if (current !== null) {
@@ -22863,9 +23383,9 @@
       // switch on that value.
 
 
-      var primaryEffectTag = effectTag & (Placement | Update | Deletion | Hydrating);
-
-      switch (primaryEffectTag) {
+      var primaryFlags = flags & (Placement | Update | Deletion | Hydrating);
+
+      switch (primaryFlags) {
         case Placement:
           {
             commitPlacement(nextEffect); // Clear the "placement" from effect tag so that we know that this is
@@ -22873,7 +23393,7 @@
             // TODO: findDOMNode doesn't rely on this any more but isMounted does
             // and isMounted is deprecated anyway so we should be able to kill this.
 
-            nextEffect.effectTag &= ~Placement;
+            nextEffect.flags &= ~Placement;
             break;
           }
 
@@ -22883,7 +23403,7 @@
             commitPlacement(nextEffect); // Clear the "placement" from effect tag so that we know that this is
             // inserted, before any life-cycles like componentDidMount gets called.
 
-            nextEffect.effectTag &= ~Placement; // Update
+            nextEffect.flags &= ~Placement; // Update
 
             var _current = nextEffect.alternate;
             commitWork(_current, nextEffect);
@@ -22892,13 +23412,13 @@
 
         case Hydrating:
           {
-            nextEffect.effectTag &= ~Hydrating;
+            nextEffect.flags &= ~Hydrating;
             break;
           }
 
         case HydratingAndUpdate:
           {
-            nextEffect.effectTag &= ~Hydrating; // Update
+            nextEffect.flags &= ~Hydrating; // Update
 
             var _current2 = nextEffect.alternate;
             commitWork(_current2, nextEffect);
@@ -22914,33 +23434,32 @@
 
         case Deletion:
           {
-            commitDeletion(root, nextEffect, renderPriorityLevel);
+            commitDeletion(root, nextEffect);
             break;
           }
-      } // TODO: Only record a mutation effect if primaryEffectTag is non-zero.
-
-
-      recordEffect();
+      }
+
       resetCurrentFiber();
       nextEffect = nextEffect.nextEffect;
     }
   }
 
-  function commitLayoutEffects(root, committedExpirationTime) {
-    // TODO: Should probably move the bulk of this function to commitWork.
+  function commitLayoutEffects(root, committedLanes) {
+
+
     while (nextEffect !== null) {
       setCurrentFiber(nextEffect);
-      var effectTag = nextEffect.effectTag;
-
-      if (effectTag & (Update | Callback)) {
-        recordEffect();
+      var flags = nextEffect.flags;
+
+      if (flags & (Update | Callback)) {
         var current = nextEffect.alternate;
         commitLifeCycles(root, current, nextEffect);
       }
 
-      if (effectTag & Ref) {
-        recordEffect();
-        commitAttachRef(nextEffect);
+      {
+        if (flags & Ref) {
+          commitAttachRef(nextEffect);
+        }
       }
 
       resetCurrentFiber();
@@ -22949,11 +23468,53 @@
   }
 
   function flushPassiveEffects() {
-    if (pendingPassiveEffectsRenderPriority !== NoPriority) {
-      var priorityLevel = pendingPassiveEffectsRenderPriority > NormalPriority ? NormalPriority : pendingPassiveEffectsRenderPriority;
-      pendingPassiveEffectsRenderPriority = NoPriority;
-      return runWithPriority$1(priorityLevel, flushPassiveEffectsImpl);
-    }
+    // Returns whether passive effects were flushed.
+    if (pendingPassiveEffectsRenderPriority !== NoPriority$1) {
+      var priorityLevel = pendingPassiveEffectsRenderPriority > NormalPriority$1 ? NormalPriority$1 : pendingPassiveEffectsRenderPriority;
+      pendingPassiveEffectsRenderPriority = NoPriority$1;
+
+      {
+        return runWithPriority$1(priorityLevel, flushPassiveEffectsImpl);
+      }
+    }
+
+    return false;
+  }
+  function enqueuePendingPassiveHookEffectMount(fiber, effect) {
+    pendingPassiveHookEffectsMount.push(effect, fiber);
+
+    if (!rootDoesHavePassiveEffects) {
+      rootDoesHavePassiveEffects = true;
+      scheduleCallback(NormalPriority$1, function () {
+        flushPassiveEffects();
+        return null;
+      });
+    }
+  }
+  function enqueuePendingPassiveHookEffectUnmount(fiber, effect) {
+    pendingPassiveHookEffectsUnmount.push(effect, fiber);
+
+    {
+      fiber.flags |= PassiveUnmountPendingDev;
+      var alternate = fiber.alternate;
+
+      if (alternate !== null) {
+        alternate.flags |= PassiveUnmountPendingDev;
+      }
+    }
+
+    if (!rootDoesHavePassiveEffects) {
+      rootDoesHavePassiveEffects = true;
+      scheduleCallback(NormalPriority$1, function () {
+        flushPassiveEffects();
+        return null;
+      });
+    }
+  }
+
+  function invokePassiveEffectCreate(effect) {
+    var create = effect.create;
+    effect.destroy = create();
   }
 
   function flushPassiveEffectsImpl() {
@@ -22962,9 +23523,9 @@
     }
 
     var root = rootWithPendingPassiveEffects;
-    var expirationTime = pendingPassiveEffectsExpirationTime;
+    var lanes = pendingPassiveEffectsLanes;
     rootWithPendingPassiveEffects = null;
-    pendingPassiveEffectsExpirationTime = NoWork;
+    pendingPassiveEffectsLanes = NoLanes;
 
     if (!((executionContext & (RenderContext | CommitContext)) === NoContext)) {
       {
@@ -22972,46 +23533,117 @@
       }
     }
 
+    {
+      isFlushingPassiveEffects = true;
+    }
+
     var prevExecutionContext = executionContext;
     executionContext |= CommitContext;
-    var prevInteractions = pushInteractions(root);
-
-    {
-      // Note: This currently assumes there are no passive effects on the root fiber
-      // because the root is not part of its own effect list.
-      // This could change in the future.
-      var _effect2 = root.current.firstEffect;
-
-      while (_effect2 !== null) {
-        {
-          setCurrentFiber(_effect2);
-          invokeGuardedCallback(null, commitPassiveHookEffects, null, _effect2);
+    var prevInteractions = pushInteractions(root); // It's important that ALL pending passive effect destroy functions are called
+    // before ANY passive effect create functions are called.
+    // Otherwise effects in sibling components might interfere with each other.
+    // e.g. a destroy function in one component may unintentionally override a ref
+    // value set by a create function in another component.
+    // Layout effects have the same constraint.
+    // First pass: Destroy stale passive effects.
+
+    var unmountEffects = pendingPassiveHookEffectsUnmount;
+    pendingPassiveHookEffectsUnmount = [];
+
+    for (var i = 0; i < unmountEffects.length; i += 2) {
+      var _effect = unmountEffects[i];
+      var fiber = unmountEffects[i + 1];
+      var destroy = _effect.destroy;
+      _effect.destroy = undefined;
+
+      {
+        fiber.flags &= ~PassiveUnmountPendingDev;
+        var alternate = fiber.alternate;
+
+        if (alternate !== null) {
+          alternate.flags &= ~PassiveUnmountPendingDev;
+        }
+      }
+
+      if (typeof destroy === 'function') {
+        {
+          setCurrentFiber(fiber);
+
+          {
+            invokeGuardedCallback(null, destroy, null);
+          }
 
           if (hasCaughtError()) {
-            if (!(_effect2 !== null)) {
+            if (!(fiber !== null)) {
               {
                 throw Error( "Should be working on an effect." );
               }
             }
 
-            var _error5 = clearCaughtError();
-
-            captureCommitPhaseError(_effect2, _error5);
+            var error = clearCaughtError();
+            captureCommitPhaseError(fiber, error);
           }
 
           resetCurrentFiber();
         }
-
-        var nextNextEffect = _effect2.nextEffect; // Remove nextEffect pointer to assist GC
-
-        _effect2.nextEffect = null;
-        _effect2 = nextNextEffect;
-      }
+      }
+    } // Second pass: Create new passive effects.
+
+
+    var mountEffects = pendingPassiveHookEffectsMount;
+    pendingPassiveHookEffectsMount = [];
+
+    for (var _i = 0; _i < mountEffects.length; _i += 2) {
+      var _effect2 = mountEffects[_i];
+      var _fiber = mountEffects[_i + 1];
+
+      {
+        setCurrentFiber(_fiber);
+
+        {
+          invokeGuardedCallback(null, invokePassiveEffectCreate, null, _effect2);
+        }
+
+        if (hasCaughtError()) {
+          if (!(_fiber !== null)) {
+            {
+              throw Error( "Should be working on an effect." );
+            }
+          }
+
+          var _error4 = clearCaughtError();
+
+          captureCommitPhaseError(_fiber, _error4);
+        }
+
+        resetCurrentFiber();
+      }
+    } // Note: This currently assumes there are no passive effects on the root fiber
+    // because the root is not part of its own effect list.
+    // This could change in the future.
+
+
+    var effect = root.current.firstEffect;
+
+    while (effect !== null) {
+      var nextNextEffect = effect.nextEffect; // Remove nextEffect pointer to assist GC
+
+      effect.nextEffect = null;
+
+      if (effect.flags & Deletion) {
+        detachFiberAfterEffects(effect);
+      }
+
+      effect = nextNextEffect;
     }
 
     {
       popInteractions(prevInteractions);
-      finishPendingInteractions(root, expirationTime);
+      finishPendingInteractions(root, lanes);
+    }
+
+    {
+      isFlushingPassiveEffects = false;
     }
 
     executionContext = prevExecutionContext;
@@ -23044,13 +23676,15 @@
 
   function captureCommitPhaseErrorOnRoot(rootFiber, sourceFiber, error) {
     var errorInfo = createCapturedValue(error, sourceFiber);
-    var update = createRootErrorUpdate(rootFiber, errorInfo, Sync);
+    var update = createRootErrorUpdate(rootFiber, errorInfo, SyncLane);
     enqueueUpdate(rootFiber, update);
-    var root = markUpdateTimeFromFiberToRoot(rootFiber, Sync);
+    var eventTime = requestEventTime();
+    var root = markUpdateLaneFromFiberToRoot(rootFiber, SyncLane);
 
     if (root !== null) {
-      ensureRootIsScheduled(root);
-      schedulePendingInteractions(root, Sync);
+      markRootUpdated(root, SyncLane, eventTime);
+      ensureRootIsScheduled(root, eventTime);
+      schedulePendingInteractions(root, SyncLane);
     }
   }
 
@@ -23074,14 +23708,29 @@
 
         if (typeof ctor.getDerivedStateFromError === 'function' || typeof instance.componentDidCatch === 'function' && !isAlreadyFailedLegacyErrorBoundary(instance)) {
           var errorInfo = createCapturedValue(error, sourceFiber);
-          var update = createClassErrorUpdate(fiber, errorInfo, // TODO: This is always sync
-          Sync);
+          var update = createClassErrorUpdate(fiber, errorInfo, SyncLane);
           enqueueUpdate(fiber, update);
-          var root = markUpdateTimeFromFiberToRoot(fiber, Sync);
+          var eventTime = requestEventTime();
+          var root = markUpdateLaneFromFiberToRoot(fiber, SyncLane);
 
           if (root !== null) {
-            ensureRootIsScheduled(root);
-            schedulePendingInteractions(root, Sync);
+            markRootUpdated(root, SyncLane, eventTime);
+            ensureRootIsScheduled(root, eventTime);
+            schedulePendingInteractions(root, SyncLane);
+          } else {
+            // This component has already been unmounted.
+            // We can't schedule any follow up work for the root because the fiber is already unmounted,
+            // but we can still call the log-only boundary so the error isn't swallowed.
+            //
+            // TODO This is only a temporary bandaid for the old reconciler fork.
+            // We can delete this special case once the new fork is merged.
+            if (typeof instance.componentDidCatch === 'function' && !isAlreadyFailedLegacyErrorBoundary(instance)) {
+              try {
+                instance.componentDidCatch(error, errorInfo);
+              } catch (errorToIgnore) {// TODO Ignore this error? Rethrow it?
+                // This is kind of an edge case.
+              }
+            }
           }
 
           return;
@@ -23091,81 +23740,61 @@
       fiber = fiber.return;
     }
   }
-  function pingSuspendedRoot(root, thenable, suspendedTime) {
+  function pingSuspendedRoot(root, wakeable, pingedLanes) {
     var pingCache = root.pingCache;
 
     if (pingCache !== null) {
-      // The thenable resolved, so we no longer need to memoize, because it will
+      // The wakeable resolved, so we no longer need to memoize, because it will
       // never be thrown again.
-      pingCache.delete(thenable);
-    }
-
-    if (workInProgressRoot === root && renderExpirationTime$1 === suspendedTime) {
+      pingCache.delete(wakeable);
+    }
+
+    var eventTime = requestEventTime();
+    markRootPinged(root, pingedLanes);
+
+    if (workInProgressRoot === root && isSubsetOfLanes(workInProgressRootRenderLanes, pingedLanes)) {
       // Received a ping at the same priority level at which we're currently
       // rendering. We might want to restart this render. This should mirror
       // the logic of whether or not a root suspends once it completes.
       // TODO: If we're rendering sync either due to Sync, Batched or expired,
       // we should probably never restart.
-      // If we're suspended with delay, we'll always suspend so we can always
-      // restart. If we're suspended without any updates, it might be a retry.
-      // If it's early in the retry we can restart. We can't know for sure
-      // whether we'll eventually process an update during this render pass,
-      // but it's somewhat unlikely that we get to a ping before that, since
-      // getting to the root most update is usually very fast.
-      if (workInProgressRootExitStatus === RootSuspendedWithDelay || workInProgressRootExitStatus === RootSuspended && workInProgressRootLatestProcessedExpirationTime === Sync && now() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS) {
-        // Restart from the root. Don't need to schedule a ping because
-        // we're already working on this tree.
-        prepareFreshStack(root, renderExpirationTime$1);
+      // If we're suspended with delay, or if it's a retry, we'll always suspend
+      // so we can always restart.
+      if (workInProgressRootExitStatus === RootSuspendedWithDelay || workInProgressRootExitStatus === RootSuspended && includesOnlyRetries(workInProgressRootRenderLanes) && now() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS) {
+        // Restart from the root.
+        prepareFreshStack(root, NoLanes);
       } else {
         // Even though we can't restart right now, we might get an
         // opportunity later. So we mark this render as having a ping.
-        workInProgressRootHasPendingPing = true;
-      }
-
-      return;
-    }
-
-    if (!isRootSuspendedAtTime(root, suspendedTime)) {
-      // The root is no longer suspended at this time.
-      return;
-    }
-
-    var lastPingedTime = root.lastPingedTime;
-
-    if (lastPingedTime !== NoWork && lastPingedTime < suspendedTime) {
-      // There's already a lower priority ping scheduled.
-      return;
-    } // Mark the time at which this ping was scheduled.
-
-
-    root.lastPingedTime = suspendedTime;
-
-    ensureRootIsScheduled(root);
-    schedulePendingInteractions(root, suspendedTime);
-  }
-
-  function retryTimedOutBoundary(boundaryFiber, retryTime) {
+        workInProgressRootPingedLanes = mergeLanes(workInProgressRootPingedLanes, pingedLanes);
+      }
+    }
+
+    ensureRootIsScheduled(root, eventTime);
+    schedulePendingInteractions(root, pingedLanes);
+  }
+
+  function retryTimedOutBoundary(boundaryFiber, retryLane) {
     // The boundary fiber (a Suspense component or SuspenseList component)
     // previously was rendered in its fallback state. One of the promises that
     // suspended it has resolved, which means at least part of the tree was
     // likely unblocked. Try rendering again, at a new expiration time.
-    if (retryTime === NoWork) {
-      var suspenseConfig = null; // Retries don't carry over the already committed update.
-
-      var currentTime = requestCurrentTimeForUpdate();
-      retryTime = computeExpirationForFiber(currentTime, boundaryFiber, suspenseConfig);
+    if (retryLane === NoLane) {
+      retryLane = requestRetryLane(boundaryFiber);
     } // TODO: Special case idle priority?
 
 
-    var root = markUpdateTimeFromFiberToRoot(boundaryFiber, retryTime);
+    var eventTime = requestEventTime();
+    var root = markUpdateLaneFromFiberToRoot(boundaryFiber, retryLane);
 
     if (root !== null) {
-      ensureRootIsScheduled(root);
-      schedulePendingInteractions(root, retryTime);
-    }
-  }
-  function resolveRetryThenable(boundaryFiber, thenable) {
-    var retryTime = NoWork; // Default
+      markRootUpdated(root, retryLane, eventTime);
+      ensureRootIsScheduled(root, eventTime);
+      schedulePendingInteractions(root, retryLane);
+    }
+  }
+  function resolveRetryWakeable(boundaryFiber, wakeable) {
+    var retryLane = NoLane; // Default
 
     var retryCache;
 
@@ -23174,12 +23803,12 @@
     }
 
     if (retryCache !== null) {
-      // The thenable resolved, so we no longer need to memoize, because it will
+      // The wakeable resolved, so we no longer need to memoize, because it will
       // never be thrown again.
-      retryCache.delete(thenable);
-    }
-
-    retryTimedOutBoundary(boundaryFiber, retryTime);
+      retryCache.delete(wakeable);
+    }
+
+    retryTimedOutBoundary(boundaryFiber, retryLane);
   } // Computes the next Just Noticeable Difference (JND) boundary.
   // The theory is that a person can't tell the difference between small differences in time.
   // Therefore, if we wait a bit longer than necessary that won't translate to a noticeable
@@ -23194,30 +23823,6 @@
     return timeElapsed < 120 ? 120 : timeElapsed < 480 ? 480 : timeElapsed < 1080 ? 1080 : timeElapsed < 1920 ? 1920 : timeElapsed < 3000 ? 3000 : timeElapsed < 4320 ? 4320 : ceil(timeElapsed / 1960) * 1960;
   }
 
-  function computeMsUntilSuspenseLoadingDelay(mostRecentEventTime, committedExpirationTime, suspenseConfig) {
-    var busyMinDurationMs = suspenseConfig.busyMinDurationMs | 0;
-
-    if (busyMinDurationMs <= 0) {
-      return 0;
-    }
-
-    var busyDelayMs = suspenseConfig.busyDelayMs | 0; // Compute the time until this render pass would expire.
-
-    var currentTimeMs = now();
-    var eventTimeMs = inferTimeFromExpirationTimeWithSuspenseConfig(mostRecentEventTime, suspenseConfig);
-    var timeElapsed = currentTimeMs - eventTimeMs;
-
-    if (timeElapsed <= busyDelayMs) {
-      // If we haven't yet waited longer than the initial delay, we don't
-      // have to wait any additional time.
-      return 0;
-    }
-
-    var msUntilTimeout = busyDelayMs + busyMinDurationMs - timeElapsed; // This is the value that is passed to `setTimeout`.
-
-    return msUntilTimeout;
-  }
-
   function checkForNestedUpdates() {
     if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
       nestedUpdateCount = 0;
@@ -23249,22 +23854,53 @@
     }
   }
 
-  function stopFinishedWorkLoopTimer() {
-    var didCompleteRoot = true;
-    stopWorkLoopTimer(interruptedBy, didCompleteRoot);
-    interruptedBy = null;
-  }
-
-  function stopInterruptedWorkLoopTimer() {
-    // TODO: Track which fiber caused the interruption.
-    var didCompleteRoot = false;
-    stopWorkLoopTimer(interruptedBy, didCompleteRoot);
-    interruptedBy = null;
-  }
-
-  function checkForInterruption(fiberThatReceivedUpdate, updateExpirationTime) {
-    if ( workInProgressRoot !== null && updateExpirationTime > renderExpirationTime$1) {
-      interruptedBy = fiberThatReceivedUpdate;
+  var didWarnStateUpdateForNotYetMountedComponent = null;
+
+  function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
+    {
+      if ((executionContext & RenderContext) !== NoContext) {
+        // We let the other warning about render phase updates deal with this one.
+        return;
+      }
+
+      if (!(fiber.mode & (BlockingMode | ConcurrentMode))) {
+        return;
+      }
+
+      var tag = fiber.tag;
+
+      if (tag !== IndeterminateComponent && tag !== HostRoot && tag !== ClassComponent && tag !== FunctionComponent && tag !== ForwardRef && tag !== MemoComponent && tag !== SimpleMemoComponent && tag !== Block) {
+        // Only warn for user-defined components, not internal ones like Suspense.
+        return;
+      } // We show the whole stack but dedupe on the top component's name because
+      // the problematic code almost always lies inside that component.
+
+
+      var componentName = getComponentName(fiber.type) || 'ReactComponent';
+
+      if (didWarnStateUpdateForNotYetMountedComponent !== null) {
+        if (didWarnStateUpdateForNotYetMountedComponent.has(componentName)) {
+          return;
+        }
+
+        didWarnStateUpdateForNotYetMountedComponent.add(componentName);
+      } else {
+        didWarnStateUpdateForNotYetMountedComponent = new Set([componentName]);
+      }
+
+      var previousFiber = current;
+
+      try {
+        setCurrentFiber(fiber);
+
+        error("Can't perform a React state update on a component that hasn't mounted yet. " + 'This indicates that you have a side-effect in your render function that ' + 'asynchronously later calls tries to update the component. Move this work to ' + 'useEffect instead.');
+      } finally {
+        if (previousFiber) {
+          setCurrentFiber(fiber);
+        } else {
+          resetCurrentFiber();
+        }
+      }
     }
   }
 
@@ -23277,7 +23913,13 @@
       if (tag !== HostRoot && tag !== ClassComponent && tag !== FunctionComponent && tag !== ForwardRef && tag !== MemoComponent && tag !== SimpleMemoComponent && tag !== Block) {
         // Only warn for user-defined components, not internal ones like Suspense.
         return;
-      }
+      } // If there are pending passive effects unmounts for this Fiber,
+      // we can assume that they would have prevented this update.
+
+
+      if ((fiber.flags & PassiveUnmountPendingDev) !== NoFlags) {
+        return;
+      } // We show the whole stack but dedupe on the top component's name because
       // the problematic code almost always lies inside that component.
 
 
@@ -23293,7 +23935,21 @@
         didWarnStateUpdateForUnmountedComponent = new Set([componentName]);
       }
 
-      error("Can't perform a React state update on an unmounted component. This " + 'is a no-op, but it indicates a memory leak in your application. To ' + 'fix, cancel all subscriptions and asynchronous tasks in %s.%s', tag === ClassComponent ? 'the componentWillUnmount method' : 'a useEffect cleanup function', getStackByFiberInDevAndProd(fiber));
+      if (isFlushingPassiveEffects) ; else {
+        var previousFiber = current;
+
+        try {
+          setCurrentFiber(fiber);
+
+          error("Can't perform a React state update on an unmounted component. This " + 'is a no-op, but it indicates a memory leak in your application. To ' + 'fix, cancel all subscriptions and asynchronous tasks in %s.', tag === ClassComponent ? 'the componentWillUnmount method' : 'a useEffect cleanup function');
+        } finally {
+          if (previousFiber) {
+            setCurrentFiber(fiber);
+          } else {
+            resetCurrentFiber();
+          }
+        }
+      }
     }
   }
 
@@ -23302,7 +23958,7 @@
   {
     var dummyFiber = null;
 
-    beginWork$1 = function (current, unitOfWork, expirationTime) {
+    beginWork$1 = function (current, unitOfWork, lanes) {
       // If a component throws an error, we replay it again in a synchronously
       // dispatched event, so that the debugger will treat it as an uncaught
       // error See ReactErrorUtils for more information.
@@ -23311,7 +23967,7 @@
       var originalWorkInProgressCopy = assignFiberPropertiesInDEV(dummyFiber, unitOfWork);
 
       try {
-        return beginWork(current, unitOfWork, expirationTime);
+        return beginWork(current, unitOfWork, lanes);
       } catch (originalError) {
         if (originalError !== null && typeof originalError === 'object' && typeof originalError.then === 'function') {
           // Don't replay promises. Treat everything else like an error.
@@ -23335,7 +23991,7 @@
         } // Run beginWork again.
 
 
-        invokeGuardedCallback(null, beginWork, null, current, unitOfWork, expirationTime);
+        invokeGuardedCallback(null, beginWork, null, current, unitOfWork, lanes);
 
         if (hasCaughtError()) {
           var replayError = clearCaughtError(); // `invokeGuardedCallback` sometimes sets an expando `_suppressLogging`.
@@ -23359,7 +24015,7 @@
 
   function warnAboutRenderPhaseUpdatesInDEV(fiber) {
     {
-      if (isRendering && (executionContext & RenderContext) !== NoContext) {
+      if (isRendering && (executionContext & RenderContext) !== NoContext && !getIsUpdatingOpaqueValueInRenderPhaseInDEV()) {
         switch (fiber.tag) {
           case FunctionComponent:
           case ForwardRef:
@@ -23373,7 +24029,7 @@
                 didWarnAboutUpdateInRenderForAnotherComponent.add(dedupeKey);
                 var setStateComponentName = getComponentName(fiber.type) || 'Unknown';
 
-                error('Cannot update a component (`%s`) while rendering a ' + 'different component (`%s`). To locate the bad setState() call inside `%s`, ' + 'follow the stack trace as described in https://fb.me/setstate-in-render', setStateComponentName, renderingComponentName, renderingComponentName);
+                error('Cannot update a component (`%s`) while rendering a ' + 'different component (`%s`). To locate the bad setState() call inside `%s`, ' + 'follow the stack trace as described in https://reactjs.org/link/setstate-in-render', setStateComponentName, renderingComponentName, renderingComponentName);
               }
 
               break;
@@ -23401,14 +24057,28 @@
   function warnIfNotScopedWithMatchingAct(fiber) {
     {
       if ( IsSomeRendererActing.current === true && IsThisRendererActing.current !== true) {
-        error("It looks like you're using the wrong act() around your test interactions.\n" + 'Be sure to use the matching version of act() corresponding to your renderer:\n\n' + '// for react-dom:\n' + "import {act} from 'react-dom/test-utils';\n" + '// ...\n' + 'act(() => ...);\n\n' + '// for react-test-renderer:\n' + "import TestRenderer from 'react-test-renderer';\n" + 'const {act} = TestRenderer;\n' + '// ...\n' + 'act(() => ...);' + '%s', getStackByFiberInDevAndProd(fiber));
+        var previousFiber = current;
+
+        try {
+          setCurrentFiber(fiber);
+
+          error("It looks like you're using the wrong act() around your test interactions.\n" + 'Be sure to use the matching version of act() corresponding to your renderer:\n\n' + '// for react-dom:\n' + // Break up imports to avoid accidentally parsing them as dependencies.
+          'import {act} fr' + "om 'react-dom/test-utils';\n" + '// ...\n' + 'act(() => ...);\n\n' + '// for react-test-renderer:\n' + // Break up imports to avoid accidentally parsing them as dependencies.
+          'import TestRenderer fr' + "om react-test-renderer';\n" + 'const {act} = TestRenderer;\n' + '// ...\n' + 'act(() => ...);');
+        } finally {
+          if (previousFiber) {
+            setCurrentFiber(fiber);
+          } else {
+            resetCurrentFiber();
+          }
+        }
       }
     }
   }
   function warnIfNotCurrentlyActingEffectsInDEV(fiber) {
     {
       if ( (fiber.mode & StrictMode) !== NoMode && IsSomeRendererActing.current === false && IsThisRendererActing.current === false) {
-        error('An update to %s ran an effect, but was not wrapped in act(...).\n\n' + 'When testing, code that causes React state updates should be ' + 'wrapped into act(...):\n\n' + 'act(() => {\n' + '  /* fire events that update state */\n' + '});\n' + '/* assert on the output */\n\n' + "This ensures that you're testing the behavior the user would see " + 'in the browser.' + ' Learn more at https://fb.me/react-wrap-tests-with-act' + '%s', getComponentName(fiber.type), getStackByFiberInDevAndProd(fiber));
+        error('An update to %s ran an effect, but was not wrapped in act(...).\n\n' + 'When testing, code that causes React state updates should be ' + 'wrapped into act(...):\n\n' + 'act(() => {\n' + '  /* fire events that update state */\n' + '});\n' + '/* assert on the output */\n\n' + "This ensures that you're testing the behavior the user would see " + 'in the browser.' + ' Learn more at https://reactjs.org/link/wrap-tests-with-act', getComponentName(fiber.type));
       }
     }
   }
@@ -23416,7 +24086,19 @@
   function warnIfNotCurrentlyActingUpdatesInDEV(fiber) {
     {
       if ( executionContext === NoContext && IsSomeRendererActing.current === false && IsThisRendererActing.current === false) {
-        error('An update to %s inside a test was not wrapped in act(...).\n\n' + 'When testing, code that causes React state updates should be ' + 'wrapped into act(...):\n\n' + 'act(() => {\n' + '  /* fire events that update state */\n' + '});\n' + '/* assert on the output */\n\n' + "This ensures that you're testing the behavior the user would see " + 'in the browser.' + ' Learn more at https://fb.me/react-wrap-tests-with-act' + '%s', getComponentName(fiber.type), getStackByFiberInDevAndProd(fiber));
+        var previousFiber = current;
+
+        try {
+          setCurrentFiber(fiber);
+
+          error('An update to %s inside a test was not wrapped in act(...).\n\n' + 'When testing, code that causes React state updates should be ' + 'wrapped into act(...):\n\n' + 'act(() => {\n' + '  /* fire events that update state */\n' + '});\n' + '/* assert on the output */\n\n' + "This ensures that you're testing the behavior the user would see " + 'in the browser.' + ' Learn more at https://reactjs.org/link/wrap-tests-with-act', getComponentName(fiber.type));
+        } finally {
+          if (previousFiber) {
+            setCurrentFiber(fiber);
+          } else {
+            resetCurrentFiber();
+          }
+        }
       }
     }
   }
@@ -23434,31 +24116,35 @@
         if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {
           didWarnAboutUnmockedScheduler = true;
 
-          error('In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' + 'to guarantee consistent behaviour across tests and browsers. ' + 'For example, with jest: \n' + "jest.mock('scheduler', () => require('scheduler/unstable_mock'));\n\n" + 'For more info, visit https://fb.me/react-mock-scheduler');
-        }
-      }
-    }
-  }
-
-  function computeThreadID(root, expirationTime) {
+          error('In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' + 'to guarantee consistent behaviour across tests and browsers. ' + 'For example, with jest: \n' + // Break up requires to avoid accidentally parsing them as dependencies.
+          "jest.mock('scheduler', () => require" + "('scheduler/unstable_mock'));\n\n" + 'For more info, visit https://reactjs.org/link/mock-scheduler');
+        }
+      }
+    }
+  }
+
+  function computeThreadID(root, lane) {
     // Interaction threads are unique per root and expiration time.
-    return expirationTime * 1000 + root.interactionThreadID;
-  }
-
-  function markSpawnedWork(expirationTime) {
+    // NOTE: Intentionally unsound cast. All that matters is that it's a number
+    // and it represents a batch of work. Could make a helper function instead,
+    // but meh this is fine for now.
+    return lane * 1000 + root.interactionThreadID;
+  }
+
+  function markSpawnedWork(lane) {
 
     if (spawnedWorkDuringRender === null) {
-      spawnedWorkDuringRender = [expirationTime];
-    } else {
-      spawnedWorkDuringRender.push(expirationTime);
-    }
-  }
-
-  function scheduleInteractions(root, expirationTime, interactions) {
+      spawnedWorkDuringRender = [lane];
+    } else {
+      spawnedWorkDuringRender.push(lane);
+    }
+  }
+
+  function scheduleInteractions(root, lane, interactions) {
 
     if (interactions.size > 0) {
       var pendingInteractionMap = root.pendingInteractionMap;
-      var pendingInteractions = pendingInteractionMap.get(expirationTime);
+      var pendingInteractions = pendingInteractionMap.get(lane);
 
       if (pendingInteractions != null) {
         interactions.forEach(function (interaction) {
@@ -23470,7 +24156,7 @@
           pendingInteractions.add(interaction);
         });
       } else {
-        pendingInteractionMap.set(expirationTime, new Set(interactions)); // Update the pending async work count for the current interactions.
+        pendingInteractionMap.set(lane, new Set(interactions)); // Update the pending async work count for the current interactions.
 
         interactions.forEach(function (interaction) {
           interaction.__count++;
@@ -23480,25 +24166,25 @@
       var subscriber = __subscriberRef.current;
 
       if (subscriber !== null) {
-        var threadID = computeThreadID(root, expirationTime);
+        var threadID = computeThreadID(root, lane);
         subscriber.onWorkScheduled(interactions, threadID);
       }
     }
   }
 
-  function schedulePendingInteractions(root, expirationTime) {
-
-    scheduleInteractions(root, expirationTime, __interactionsRef.current);
-  }
-
-  function startWorkOnPendingInteractions(root, expirationTime) {
+  function schedulePendingInteractions(root, lane) {
+
+    scheduleInteractions(root, lane, __interactionsRef.current);
+  }
+
+  function startWorkOnPendingInteractions(root, lanes) {
     // we can accurately attribute time spent working on it, And so that cascading
     // work triggered during the render phase will be associated with it.
 
 
     var interactions = new Set();
-    root.pendingInteractionMap.forEach(function (scheduledInteractions, scheduledExpirationTime) {
-      if (scheduledExpirationTime >= expirationTime) {
+    root.pendingInteractionMap.forEach(function (scheduledInteractions, scheduledLane) {
+      if (includesSomeLane(lanes, scheduledLane)) {
         scheduledInteractions.forEach(function (interaction) {
           return interactions.add(interaction);
         });
@@ -23515,13 +24201,13 @@
       var subscriber = __subscriberRef.current;
 
       if (subscriber !== null) {
-        var threadID = computeThreadID(root, expirationTime);
+        var threadID = computeThreadID(root, lanes);
 
         try {
           subscriber.onWorkStarted(interactions, threadID);
         } catch (error) {
           // If the subscriber throws, rethrow it in a separate task
-          scheduleCallback(ImmediatePriority, function () {
+          scheduleCallback(ImmediatePriority$1, function () {
             throw error;
           });
         }
@@ -23529,21 +24215,22 @@
     }
   }
 
-  function finishPendingInteractions(root, committedExpirationTime) {
-
-    var earliestRemainingTimeAfterCommit = root.firstPendingTime;
+  function finishPendingInteractions(root, committedLanes) {
+
+    var remainingLanesAfterCommit = root.pendingLanes;
     var subscriber;
 
     try {
       subscriber = __subscriberRef.current;
 
       if (subscriber !== null && root.memoizedInteractions.size > 0) {
-        var threadID = computeThreadID(root, committedExpirationTime);
+        // FIXME: More than one lane can finish in a single commit.
+        var threadID = computeThreadID(root, committedLanes);
         subscriber.onWorkStopped(root.memoizedInteractions, threadID);
       }
     } catch (error) {
       // If the subscriber throws, rethrow it in a separate task
-      scheduleCallback(ImmediatePriority, function () {
+      scheduleCallback(ImmediatePriority$1, function () {
         throw error;
       });
     } finally {
@@ -23551,12 +24238,12 @@
       // Unless the render was suspended or cascading work was scheduled,
       // In which case– leave pending interactions until the subsequent render.
       var pendingInteractionMap = root.pendingInteractionMap;
-      pendingInteractionMap.forEach(function (scheduledInteractions, scheduledExpirationTime) {
+      pendingInteractionMap.forEach(function (scheduledInteractions, lane) {
         // Only decrement the pending interaction count if we're done.
         // If there's still work at the current priority,
         // That indicates that we are waiting for suspense data.
-        if (scheduledExpirationTime > earliestRemainingTimeAfterCommit) {
-          pendingInteractionMap.delete(scheduledExpirationTime);
+        if (!includesSomeLane(remainingLanesAfterCommit, lane)) {
+          pendingInteractionMap.delete(lane);
           scheduledInteractions.forEach(function (interaction) {
             interaction.__count--;
 
@@ -23565,7 +24252,7 @@
                 subscriber.onInteractionScheduledWorkCompleted(interaction);
               } catch (error) {
                 // If the subscriber throws, rethrow it in a separate task
-                scheduleCallback(ImmediatePriority, function () {
+                scheduleCallback(ImmediatePriority$1, function () {
                   throw error;
                 });
               }
@@ -23574,116 +24261,416 @@
         }
       });
     }
-  }
-
-  var onScheduleFiberRoot = null;
-  var onCommitFiberRoot = null;
-  var onCommitFiberUnmount = null;
-  var hasLoggedError = false;
-  var isDevToolsPresent = typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined';
-  function injectInternals(internals) {
-    if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
-      // No DevTools
+  } // `act` testing API
+
+  function shouldForceFlushFallbacksInDEV() {
+    // Never force flush in production. This function should get stripped out.
+    return  actingUpdatesScopeDepth > 0;
+  }
+  // so we can tell if any async act() calls try to run in parallel.
+
+
+  var actingUpdatesScopeDepth = 0;
+
+  function detachFiberAfterEffects(fiber) {
+    fiber.sibling = null;
+    fiber.stateNode = null;
+  }
+
+  var resolveFamily = null; // $FlowFixMe Flow gets confused by a WeakSet feature check below.
+
+  var failedBoundaries = null;
+  var setRefreshHandler = function (handler) {
+    {
+      resolveFamily = handler;
+    }
+  };
+  function resolveFunctionForHotReloading(type) {
+    {
+      if (resolveFamily === null) {
+        // Hot reloading is disabled.
+        return type;
+      }
+
+      var family = resolveFamily(type);
+
+      if (family === undefined) {
+        return type;
+      } // Use the latest known implementation.
+
+
+      return family.current;
+    }
+  }
+  function resolveClassForHotReloading(type) {
+    // No implementation differences.
+    return resolveFunctionForHotReloading(type);
+  }
+  function resolveForwardRefForHotReloading(type) {
+    {
+      if (resolveFamily === null) {
+        // Hot reloading is disabled.
+        return type;
+      }
+
+      var family = resolveFamily(type);
+
+      if (family === undefined) {
+        // Check if we're dealing with a real forwardRef. Don't want to crash early.
+        if (type !== null && type !== undefined && typeof type.render === 'function') {
+          // ForwardRef is special because its resolved .type is an object,
+          // but it's possible that we only have its inner render function in the map.
+          // If that inner render function is different, we'll build a new forwardRef type.
+          var currentRender = resolveFunctionForHotReloading(type.render);
+
+          if (type.render !== currentRender) {
+            var syntheticType = {
+              $$typeof: REACT_FORWARD_REF_TYPE,
+              render: currentRender
+            };
+
+            if (type.displayName !== undefined) {
+              syntheticType.displayName = type.displayName;
+            }
+
+            return syntheticType;
+          }
+        }
+
+        return type;
+      } // Use the latest known implementation.
+
+
+      return family.current;
+    }
+  }
+  function isCompatibleFamilyForHotReloading(fiber, element) {
+    {
+      if (resolveFamily === null) {
+        // Hot reloading is disabled.
+        return false;
+      }
+
+      var prevType = fiber.elementType;
+      var nextType = element.type; // If we got here, we know types aren't === equal.
+
+      var needsCompareFamilies = false;
+      var $$typeofNextType = typeof nextType === 'object' && nextType !== null ? nextType.$$typeof : null;
+
+      switch (fiber.tag) {
+        case ClassComponent:
+          {
+            if (typeof nextType === 'function') {
+              needsCompareFamilies = true;
+            }
+
+            break;
+          }
+
+        case FunctionComponent:
+          {
+            if (typeof nextType === 'function') {
+              needsCompareFamilies = true;
+            } else if ($$typeofNextType === REACT_LAZY_TYPE) {
+              // We don't know the inner type yet.
+              // We're going to assume that the lazy inner type is stable,
+              // and so it is sufficient to avoid reconciling it away.
+              // We're not going to unwrap or actually use the new lazy type.
+              needsCompareFamilies = true;
+            }
+
+            break;
+          }
+
+        case ForwardRef:
+          {
+            if ($$typeofNextType === REACT_FORWARD_REF_TYPE) {
+              needsCompareFamilies = true;
+            } else if ($$typeofNextType === REACT_LAZY_TYPE) {
+              needsCompareFamilies = true;
+            }
+
+            break;
+          }
+
+        case MemoComponent:
+        case SimpleMemoComponent:
+          {
+            if ($$typeofNextType === REACT_MEMO_TYPE) {
+              // TODO: if it was but can no longer be simple,
+              // we shouldn't set this.
+              needsCompareFamilies = true;
+            } else if ($$typeofNextType === REACT_LAZY_TYPE) {
+              needsCompareFamilies = true;
+            }
+
+            break;
+          }
+
+        default:
+          return false;
+      } // Check if both types have a family and it's the same one.
+
+
+      if (needsCompareFamilies) {
+        // Note: memo() and forwardRef() we'll compare outer rather than inner type.
+        // This means both of them need to be registered to preserve state.
+        // If we unwrapped and compared the inner types for wrappers instead,
+        // then we would risk falsely saying two separate memo(Foo)
+        // calls are equivalent because they wrap the same Foo function.
+        var prevFamily = resolveFamily(prevType);
+
+        if (prevFamily !== undefined && prevFamily === resolveFamily(nextType)) {
+          return true;
+        }
+      }
+
       return false;
     }
-
-    var hook = __REACT_DEVTOOLS_GLOBAL_HOOK__;
-
-    if (hook.isDisabled) {
-      // This isn't a real property on the hook, but it can be set to opt out
-      // of DevTools integration and associated warnings and logs.
-      // https://github.com/facebook/react/issues/3877
-      return true;
-    }
-
-    if (!hook.supportsFiber) {
-      {
-        error('The installed version of React DevTools is too old and will not work ' + 'with the current version of React. Please update React DevTools. ' + 'https://fb.me/react-devtools');
-      } // DevTools exists, even though it doesn't support Fiber.
-
-
-      return true;
-    }
-
-    try {
-      var rendererID = hook.inject(internals); // We have successfully injected, so now it is safe to set up hooks.
-
-      if (true) {
-        // Only used by Fast Refresh
-        if (typeof hook.onScheduleFiberRoot === 'function') {
-          onScheduleFiberRoot = function (root, children) {
-            try {
-              hook.onScheduleFiberRoot(rendererID, root, children);
-            } catch (err) {
-              if (true && !hasLoggedError) {
-                hasLoggedError = true;
-
-                error('React instrumentation encountered an error: %s', err);
-              }
-            }
-          };
-        }
-      }
-
-      onCommitFiberRoot = function (root, expirationTime) {
-        try {
-          var didError = (root.current.effectTag & DidCapture) === DidCapture;
-
-          if (enableProfilerTimer) {
-            var currentTime = getCurrentTime();
-            var priorityLevel = inferPriorityFromExpirationTime(currentTime, expirationTime);
-            hook.onCommitFiberRoot(rendererID, root, priorityLevel, didError);
-          } else {
-            hook.onCommitFiberRoot(rendererID, root, undefined, didError);
-          }
-        } catch (err) {
-          if (true) {
-            if (!hasLoggedError) {
-              hasLoggedError = true;
-
-              error('React instrumentation encountered an error: %s', err);
-            }
-          }
-        }
-      };
-
-      onCommitFiberUnmount = function (fiber) {
-        try {
-          hook.onCommitFiberUnmount(rendererID, fiber);
-        } catch (err) {
-          if (true) {
-            if (!hasLoggedError) {
-              hasLoggedError = true;
-
-              error('React instrumentation encountered an error: %s', err);
-            }
-          }
-        }
-      };
-    } catch (err) {
-      // Catch all errors because it is unsafe to throw during initialization.
-      {
-        error('React instrumentation encountered an error: %s.', err);
-      }
-    } // DevTools exists
-
-
-    return true;
-  }
-  function onScheduleRoot(root, children) {
-    if (typeof onScheduleFiberRoot === 'function') {
-      onScheduleFiberRoot(root, children);
-    }
-  }
-  function onCommitRoot(root, expirationTime) {
-    if (typeof onCommitFiberRoot === 'function') {
-      onCommitFiberRoot(root, expirationTime);
-    }
-  }
-  function onCommitUnmount(fiber) {
-    if (typeof onCommitFiberUnmount === 'function') {
-      onCommitFiberUnmount(fiber);
-    }
+  }
+  function markFailedErrorBoundaryForHotReloading(fiber) {
+    {
+      if (resolveFamily === null) {
+        // Hot reloading is disabled.
+        return;
+      }
+
+      if (typeof WeakSet !== 'function') {
+        return;
+      }
+
+      if (failedBoundaries === null) {
+        failedBoundaries = new WeakSet();
+      }
+
+      failedBoundaries.add(fiber);
+    }
+  }
+  var scheduleRefresh = function (root, update) {
+    {
+      if (resolveFamily === null) {
+        // Hot reloading is disabled.
+        return;
+      }
+
+      var staleFamilies = update.staleFamilies,
+          updatedFamilies = update.updatedFamilies;
+      flushPassiveEffects();
+      flushSync(function () {
+        scheduleFibersWithFamiliesRecursively(root.current, updatedFamilies, staleFamilies);
+      });
+    }
+  };
+  var scheduleRoot = function (root, element) {
+    {
+      if (root.context !== emptyContextObject) {
+        // Super edge case: root has a legacy _renderSubtree context
+        // but we don't know the parentComponent so we can't pass it.
+        // Just ignore. We'll delete this with _renderSubtree code path later.
+        return;
+      }
+
+      flushPassiveEffects();
+      flushSync(function () {
+        updateContainer(element, root, null, null);
+      });
+    }
+  };
+
+  function scheduleFibersWithFamiliesRecursively(fiber, updatedFamilies, staleFamilies) {
+    {
+      var alternate = fiber.alternate,
+          child = fiber.child,
+          sibling = fiber.sibling,
+          tag = fiber.tag,
+          type = fiber.type;
+      var candidateType = null;
+
+      switch (tag) {
+        case FunctionComponent:
+        case SimpleMemoComponent:
+        case ClassComponent:
+          candidateType = type;
+          break;
+
+        case ForwardRef:
+          candidateType = type.render;
+          break;
+      }
+
+      if (resolveFamily === null) {
+        throw new Error('Expected resolveFamily to be set during hot reload.');
+      }
+
+      var needsRender = false;
+      var needsRemount = false;
+
+      if (candidateType !== null) {
+        var family = resolveFamily(candidateType);
+
+        if (family !== undefined) {
+          if (staleFamilies.has(family)) {
+            needsRemount = true;
+          } else if (updatedFamilies.has(family)) {
+            if (tag === ClassComponent) {
+              needsRemount = true;
+            } else {
+              needsRender = true;
+            }
+          }
+        }
+      }
+
+      if (failedBoundaries !== null) {
+        if (failedBoundaries.has(fiber) || alternate !== null && failedBoundaries.has(alternate)) {
+          needsRemount = true;
+        }
+      }
+
+      if (needsRemount) {
+        fiber._debugNeedsRemount = true;
+      }
+
+      if (needsRemount || needsRender) {
+        scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+      }
+
+      if (child !== null && !needsRemount) {
+        scheduleFibersWithFamiliesRecursively(child, updatedFamilies, staleFamilies);
+      }
+
+      if (sibling !== null) {
+        scheduleFibersWithFamiliesRecursively(sibling, updatedFamilies, staleFamilies);
+      }
+    }
+  }
+
+  var findHostInstancesForRefresh = function (root, families) {
+    {
+      var hostInstances = new Set();
+      var types = new Set(families.map(function (family) {
+        return family.current;
+      }));
+      findHostInstancesForMatchingFibersRecursively(root.current, types, hostInstances);
+      return hostInstances;
+    }
+  };
+
+  function findHostInstancesForMatchingFibersRecursively(fiber, types, hostInstances) {
+    {
+      var child = fiber.child,
+          sibling = fiber.sibling,
+          tag = fiber.tag,
+          type = fiber.type;
+      var candidateType = null;
+
+      switch (tag) {
+        case FunctionComponent:
+        case SimpleMemoComponent:
+        case ClassComponent:
+          candidateType = type;
+          break;
+
+        case ForwardRef:
+          candidateType = type.render;
+          break;
+      }
+
+      var didMatch = false;
+
+      if (candidateType !== null) {
+        if (types.has(candidateType)) {
+          didMatch = true;
+        }
+      }
+
+      if (didMatch) {
+        // We have a match. This only drills down to the closest host components.
+        // There's no need to search deeper because for the purpose of giving
+        // visual feedback, "flashing" outermost parent rectangles is sufficient.
+        findHostInstancesForFiberShallowly(fiber, hostInstances);
+      } else {
+        // If there's no match, maybe there will be one further down in the child tree.
+        if (child !== null) {
+          findHostInstancesForMatchingFibersRecursively(child, types, hostInstances);
+        }
+      }
+
+      if (sibling !== null) {
+        findHostInstancesForMatchingFibersRecursively(sibling, types, hostInstances);
+      }
+    }
+  }
+
+  function findHostInstancesForFiberShallowly(fiber, hostInstances) {
+    {
+      var foundHostInstances = findChildHostInstancesForFiberShallowly(fiber, hostInstances);
+
+      if (foundHostInstances) {
+        return;
+      } // If we didn't find any host children, fallback to closest host parent.
+
+
+      var node = fiber;
+
+      while (true) {
+        switch (node.tag) {
+          case HostComponent:
+            hostInstances.add(node.stateNode);
+            return;
+
+          case HostPortal:
+            hostInstances.add(node.stateNode.containerInfo);
+            return;
+
+          case HostRoot:
+            hostInstances.add(node.stateNode.containerInfo);
+            return;
+        }
+
+        if (node.return === null) {
+          throw new Error('Expected to reach root first.');
+        }
+
+        node = node.return;
+      }
+    }
+  }
+
+  function findChildHostInstancesForFiberShallowly(fiber, hostInstances) {
+    {
+      var node = fiber;
+      var foundHostInstances = false;
+
+      while (true) {
+        if (node.tag === HostComponent) {
+          // We got a match.
+          foundHostInstances = true;
+          hostInstances.add(node.stateNode); // There may still be more, so keep searching.
+        } else if (node.child !== null) {
+          node.child.return = node;
+          node = node.child;
+          continue;
+        }
+
+        if (node === fiber) {
+          return foundHostInstances;
+        }
+
+        while (node.sibling === null) {
+          if (node.return === null || node.return === fiber) {
+            return foundHostInstances;
+          }
+
+          node = node.return;
+        }
+
+        node.sibling.return = node.return;
+        node = node.sibling;
+      }
+    }
+
+    return false;
   }
 
   var hasBadMapPolyfill;
@@ -23693,13 +24680,11 @@
 
     try {
       var nonExtensibleObject = Object.preventExtensions({});
-      var testMap = new Map([[nonExtensibleObject, null]]);
-      var testSet = new Set([nonExtensibleObject]); // This is necessary for Rollup to not consider these unused.
-      // https://github.com/rollup/rollup/issues/1771
-      // TODO: we can remove these if Rollup fixes the bug.
-
-      testMap.set(0, 0);
-      testSet.add(0);
+      /* eslint-disable no-new */
+
+      new Map([[nonExtensibleObject, null]]);
+      new Set([nonExtensibleObject]);
+      /* eslint-enable no-new */
     } catch (e) {
       // TODO: Consider warning about bad polyfills
       hasBadMapPolyfill = true;
@@ -23728,12 +24713,12 @@
     this.dependencies = null;
     this.mode = mode; // Effects
 
-    this.effectTag = NoEffect;
+    this.flags = NoFlags;
     this.nextEffect = null;
     this.firstEffect = null;
     this.lastEffect = null;
-    this.expirationTime = NoWork;
-    this.childExpirationTime = NoWork;
+    this.lanes = NoLanes;
+    this.childLanes = NoLanes;
     this.alternate = null;
 
     {
@@ -23760,16 +24745,11 @@
       this.actualStartTime = -1;
       this.selfBaseDuration = 0;
       this.treeBaseDuration = 0;
-    } // This is normally DEV-only except www when it adds listeners.
-    // TODO: remove the User Timing integration in favor of Root Events.
-
-
-    {
+    }
+
+    {
+      // This isn't directly used but is handy for debugging internals:
       this._debugID = debugCounter++;
-      this._debugIsCurrentlyTiming = false;
-    }
-
-    {
       this._debugSource = null;
       this._debugOwner = null;
       this._debugNeedsRemount = false;
@@ -23799,17 +24779,17 @@
     return new FiberNode(tag, pendingProps, key, mode);
   };
 
-  function shouldConstruct(Component) {
+  function shouldConstruct$1(Component) {
     var prototype = Component.prototype;
     return !!(prototype && prototype.isReactComponent);
   }
 
   function isSimpleFunctionComponent(type) {
-    return typeof type === 'function' && !shouldConstruct(type) && type.defaultProps === undefined;
+    return typeof type === 'function' && !shouldConstruct$1(type) && type.defaultProps === undefined;
   }
   function resolveLazyComponentTag(Component) {
     if (typeof Component === 'function') {
-      return shouldConstruct(Component) ? ClassComponent : FunctionComponent;
+      return shouldConstruct$1(Component) ? ClassComponent : FunctionComponent;
     } else if (Component !== undefined && Component !== null) {
       var $$typeof = Component.$$typeof;
 
@@ -23841,10 +24821,7 @@
 
       {
         // DEV-only fields
-        {
-          workInProgress._debugID = current._debugID;
-        }
-
+        workInProgress._debugID = current._debugID;
         workInProgress._debugSource = current._debugSource;
         workInProgress._debugOwner = current._debugOwner;
         workInProgress._debugHookTypes = current._debugHookTypes;
@@ -23853,10 +24830,12 @@
       workInProgress.alternate = current;
       current.alternate = workInProgress;
     } else {
-      workInProgress.pendingProps = pendingProps; // We already have an alternate.
+      workInProgress.pendingProps = pendingProps; // Needed because Blocks store data on type.
+
+      workInProgress.type = current.type; // We already have an alternate.
       // Reset the effect tag.
 
-      workInProgress.effectTag = NoEffect; // The effect list is no longer valid.
+      workInProgress.flags = NoFlags; // The effect list is no longer valid.
 
       workInProgress.nextEffect = null;
       workInProgress.firstEffect = null;
@@ -23872,8 +24851,8 @@
       }
     }
 
-    workInProgress.childExpirationTime = current.childExpirationTime;
-    workInProgress.expirationTime = current.expirationTime;
+    workInProgress.childLanes = current.childLanes;
+    workInProgress.lanes = current.lanes;
     workInProgress.child = current.child;
     workInProgress.memoizedProps = current.memoizedProps;
     workInProgress.memoizedState = current.memoizedState;
@@ -23882,9 +24861,8 @@
 
     var currentDependencies = current.dependencies;
     workInProgress.dependencies = currentDependencies === null ? null : {
-      expirationTime: currentDependencies.expirationTime,
-      firstContext: currentDependencies.firstContext,
-      responders: currentDependencies.responders
+      lanes: currentDependencies.lanes,
+      firstContext: currentDependencies.firstContext
     }; // These will be overridden during the parent's reconciliation
 
     workInProgress.sibling = current.sibling;
@@ -23919,7 +24897,7 @@
     return workInProgress;
   } // Used to reuse a Fiber for a second pass.
 
-  function resetWorkInProgress(workInProgress, renderExpirationTime) {
+  function resetWorkInProgress(workInProgress, renderLanes) {
     // This resets the Fiber to what createFiber or createWorkInProgress would
     // have set the values to before during the first pass. Ideally this wouldn't
     // be necessary but unfortunately many code paths reads from the workInProgress
@@ -23928,7 +24906,7 @@
     // avoid doing another reconciliation.
     // Reset the effect tag but keep any Placement tags, since that's something
     // that child fiber is setting, not the reconciliation.
-    workInProgress.effectTag &= Placement; // The effect list is no longer valid.
+    workInProgress.flags &= Placement; // The effect list is no longer valid.
 
     workInProgress.nextEffect = null;
     workInProgress.firstEffect = null;
@@ -23937,13 +24915,14 @@
 
     if (current === null) {
       // Reset to createFiber's initial values.
-      workInProgress.childExpirationTime = NoWork;
-      workInProgress.expirationTime = renderExpirationTime;
+      workInProgress.childLanes = NoLanes;
+      workInProgress.lanes = renderLanes;
       workInProgress.child = null;
       workInProgress.memoizedProps = null;
       workInProgress.memoizedState = null;
       workInProgress.updateQueue = null;
       workInProgress.dependencies = null;
+      workInProgress.stateNode = null;
 
       {
         // Note: We don't reset the actualTime counts. It's useful to accumulate
@@ -23953,19 +24932,20 @@
       }
     } else {
       // Reset to the cloned values that createWorkInProgress would've.
-      workInProgress.childExpirationTime = current.childExpirationTime;
-      workInProgress.expirationTime = current.expirationTime;
+      workInProgress.childLanes = current.childLanes;
+      workInProgress.lanes = current.lanes;
       workInProgress.child = current.child;
       workInProgress.memoizedProps = current.memoizedProps;
       workInProgress.memoizedState = current.memoizedState;
-      workInProgress.updateQueue = current.updateQueue; // Clone the dependencies object. This is mutated during the render phase, so
+      workInProgress.updateQueue = current.updateQueue; // Needed because Blocks store data on type.
+
+      workInProgress.type = current.type; // Clone the dependencies object. This is mutated during the render phase, so
       // it cannot be shared with the current fiber.
 
       var currentDependencies = current.dependencies;
       workInProgress.dependencies = currentDependencies === null ? null : {
-        expirationTime: currentDependencies.expirationTime,
-        firstContext: currentDependencies.firstContext,
-        responders: currentDependencies.responders
+        lanes: currentDependencies.lanes,
+        firstContext: currentDependencies.firstContext
       };
 
       {
@@ -23999,14 +24979,13 @@
     return createFiber(HostRoot, null, null, mode);
   }
   function createFiberFromTypeAndProps(type, // React$ElementType
-  key, pendingProps, owner, mode, expirationTime) {
-    var fiber;
+  key, pendingProps, owner, mode, lanes) {
     var fiberTag = IndeterminateComponent; // The resolved type is set if we know what the final type will be. I.e. it's not lazy.
 
     var resolvedType = type;
 
     if (typeof type === 'function') {
-      if (shouldConstruct(type)) {
+      if (shouldConstruct$1(type)) {
         fiberTag = ClassComponent;
 
         {
@@ -24022,11 +25001,11 @@
     } else {
       getTag: switch (type) {
         case REACT_FRAGMENT_TYPE:
-          return createFiberFromFragment(pendingProps.children, mode, expirationTime, key);
-
-        case REACT_CONCURRENT_MODE_TYPE:
+          return createFiberFromFragment(pendingProps.children, mode, lanes, key);
+
+        case REACT_DEBUG_TRACING_MODE_TYPE:
           fiberTag = Mode;
-          mode |= ConcurrentMode | BlockingMode | StrictMode;
+          mode |= DebugTracingMode;
           break;
 
         case REACT_STRICT_MODE_TYPE:
@@ -24035,13 +25014,23 @@
           break;
 
         case REACT_PROFILER_TYPE:
-          return createFiberFromProfiler(pendingProps, mode, expirationTime, key);
+          return createFiberFromProfiler(pendingProps, mode, lanes, key);
 
         case REACT_SUSPENSE_TYPE:
-          return createFiberFromSuspense(pendingProps, mode, expirationTime, key);
+          return createFiberFromSuspense(pendingProps, mode, lanes, key);
 
         case REACT_SUSPENSE_LIST_TYPE:
-          return createFiberFromSuspenseList(pendingProps, mode, expirationTime, key);
+          return createFiberFromSuspenseList(pendingProps, mode, lanes, key);
+
+        case REACT_OFFSCREEN_TYPE:
+          return createFiberFromOffscreen(pendingProps, mode, lanes, key);
+
+        case REACT_LEGACY_HIDDEN_TYPE:
+          return createFiberFromLegacyHidden(pendingProps, mode, lanes, key);
+
+        case REACT_SCOPE_TYPE:
+
+        // eslint-disable-next-line no-fallthrough
 
         default:
           {
@@ -24077,7 +25066,6 @@
                 case REACT_BLOCK_TYPE:
                   fiberTag = Block;
                   break getTag;
-
               }
             }
 
@@ -24104,13 +25092,18 @@
       }
     }
 
-    fiber = createFiber(fiberTag, pendingProps, key, mode);
+    var fiber = createFiber(fiberTag, pendingProps, key, mode);
     fiber.elementType = type;
     fiber.type = resolvedType;
-    fiber.expirationTime = expirationTime;
+    fiber.lanes = lanes;
+
+    {
+      fiber._debugOwner = owner;
+    }
+
     return fiber;
   }
-  function createFiberFromElement(element, mode, expirationTime) {
+  function createFiberFromElement(element, mode, lanes) {
     var owner = null;
 
     {
@@ -24120,7 +25113,7 @@
     var type = element.type;
     var key = element.key;
     var pendingProps = element.props;
-    var fiber = createFiberFromTypeAndProps(type, key, pendingProps, owner, mode, expirationTime);
+    var fiber = createFiberFromTypeAndProps(type, key, pendingProps, owner, mode, lanes);
 
     {
       fiber._debugSource = element._source;
@@ -24129,16 +25122,16 @@
 
     return fiber;
   }
-  function createFiberFromFragment(elements, mode, expirationTime, key) {
+  function createFiberFromFragment(elements, mode, lanes, key) {
     var fiber = createFiber(Fragment, elements, key, mode);
-    fiber.expirationTime = expirationTime;
+    fiber.lanes = lanes;
     return fiber;
   }
 
-  function createFiberFromProfiler(pendingProps, mode, expirationTime, key) {
-    {
-      if (typeof pendingProps.id !== 'string' || typeof pendingProps.onRender !== 'function') {
-        error('Profiler must specify an "id" string and "onRender" function as props');
+  function createFiberFromProfiler(pendingProps, mode, lanes, key) {
+    {
+      if (typeof pendingProps.id !== 'string') {
+        error('Profiler must specify an "id" as a prop');
       }
     }
 
@@ -24146,21 +25139,29 @@
 
     fiber.elementType = REACT_PROFILER_TYPE;
     fiber.type = REACT_PROFILER_TYPE;
-    fiber.expirationTime = expirationTime;
+    fiber.lanes = lanes;
+
+    {
+      fiber.stateNode = {
+        effectDuration: 0,
+        passiveEffectDuration: 0
+      };
+    }
+
     return fiber;
   }
 
-  function createFiberFromSuspense(pendingProps, mode, expirationTime, key) {
+  function createFiberFromSuspense(pendingProps, mode, lanes, key) {
     var fiber = createFiber(SuspenseComponent, pendingProps, key, mode); // TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.
     // This needs to be fixed in getComponentName so that it relies on the tag
     // instead.
 
     fiber.type = REACT_SUSPENSE_TYPE;
     fiber.elementType = REACT_SUSPENSE_TYPE;
-    fiber.expirationTime = expirationTime;
+    fiber.lanes = lanes;
     return fiber;
   }
-  function createFiberFromSuspenseList(pendingProps, mode, expirationTime, key) {
+  function createFiberFromSuspenseList(pendingProps, mode, lanes, key) {
     var fiber = createFiber(SuspenseListComponent, pendingProps, key, mode);
 
     {
@@ -24171,12 +25172,38 @@
     }
 
     fiber.elementType = REACT_SUSPENSE_LIST_TYPE;
-    fiber.expirationTime = expirationTime;
+    fiber.lanes = lanes;
+    return fiber;
+  }
+  function createFiberFromOffscreen(pendingProps, mode, lanes, key) {
+    var fiber = createFiber(OffscreenComponent, pendingProps, key, mode); // TODO: The OffscreenComponent fiber shouldn't have a type. It has a tag.
+    // This needs to be fixed in getComponentName so that it relies on the tag
+    // instead.
+
+    {
+      fiber.type = REACT_OFFSCREEN_TYPE;
+    }
+
+    fiber.elementType = REACT_OFFSCREEN_TYPE;
+    fiber.lanes = lanes;
     return fiber;
   }
-  function createFiberFromText(content, mode, expirationTime) {
+  function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) {
+    var fiber = createFiber(LegacyHiddenComponent, pendingProps, key, mode); // TODO: The LegacyHidden fiber shouldn't have a type. It has a tag.
+    // This needs to be fixed in getComponentName so that it relies on the tag
+    // instead.
+
+    {
+      fiber.type = REACT_LEGACY_HIDDEN_TYPE;
+    }
+
+    fiber.elementType = REACT_LEGACY_HIDDEN_TYPE;
+    fiber.lanes = lanes;
+    return fiber;
+  }
+  function createFiberFromText(content, mode, lanes) {
     var fiber = createFiber(HostText, content, null, mode);
-    fiber.expirationTime = expirationTime;
+    fiber.lanes = lanes;
     return fiber;
   }
   function createFiberFromHostInstanceForDeletion() {
@@ -24186,10 +25213,10 @@
     fiber.type = 'DELETED';
     return fiber;
   }
-  function createFiberFromPortal(portal, mode, expirationTime) {
+  function createFiberFromPortal(portal, mode, lanes) {
     var pendingProps = portal.children !== null ? portal.children : [];
     var fiber = createFiber(HostPortal, pendingProps, portal.key, mode);
-    fiber.expirationTime = expirationTime;
+    fiber.lanes = lanes;
     fiber.stateNode = {
       containerInfo: portal.containerInfo,
       pendingChildren: null,
@@ -24227,12 +25254,12 @@
     target.memoizedState = source.memoizedState;
     target.dependencies = source.dependencies;
     target.mode = source.mode;
-    target.effectTag = source.effectTag;
+    target.flags = source.flags;
     target.nextEffect = source.nextEffect;
     target.firstEffect = source.firstEffect;
     target.lastEffect = source.lastEffect;
-    target.expirationTime = source.expirationTime;
-    target.childExpirationTime = source.childExpirationTime;
+    target.lanes = source.lanes;
+    target.childLanes = source.childLanes;
     target.alternate = source.alternate;
 
     {
@@ -24242,13 +25269,9 @@
       target.treeBaseDuration = source.treeBaseDuration;
     }
 
-    {
-      target._debugID = source._debugID;
-    }
-
+    target._debugID = source._debugID;
     target._debugSource = source._debugSource;
     target._debugOwner = source._debugOwner;
-    target._debugIsCurrentlyTiming = source._debugIsCurrentlyTiming;
     target._debugNeedsRemount = source._debugNeedsRemount;
     target._debugHookTypes = source._debugHookTypes;
     return target;
@@ -24256,30 +25279,53 @@
 
   function FiberRootNode(containerInfo, tag, hydrate) {
     this.tag = tag;
-    this.current = null;
     this.containerInfo = containerInfo;
     this.pendingChildren = null;
+    this.current = null;
     this.pingCache = null;
-    this.finishedExpirationTime = NoWork;
     this.finishedWork = null;
     this.timeoutHandle = noTimeout;
     this.context = null;
     this.pendingContext = null;
     this.hydrate = hydrate;
     this.callbackNode = null;
-    this.callbackPriority = NoPriority;
-    this.firstPendingTime = NoWork;
-    this.firstSuspendedTime = NoWork;
-    this.lastSuspendedTime = NoWork;
-    this.nextKnownPendingLevel = NoWork;
-    this.lastPingedTime = NoWork;
-    this.lastExpiredTime = NoWork;
+    this.callbackPriority = NoLanePriority;
+    this.eventTimes = createLaneMap(NoLanes);
+    this.expirationTimes = createLaneMap(NoTimestamp);
+    this.pendingLanes = NoLanes;
+    this.suspendedLanes = NoLanes;
+    this.pingedLanes = NoLanes;
+    this.expiredLanes = NoLanes;
+    this.mutableReadLanes = NoLanes;
+    this.finishedLanes = NoLanes;
+    this.entangledLanes = NoLanes;
+    this.entanglements = createLaneMap(NoLanes);
+
+    {
+      this.mutableSourceEagerHydrationData = null;
+    }
 
     {
       this.interactionThreadID = unstable_getThreadID();
       this.memoizedInteractions = new Set();
       this.pendingInteractionMap = new Map();
     }
+
+    {
+      switch (tag) {
+        case BlockingRoot:
+          this._debugRootType = 'createBlockingRoot()';
+          break;
+
+        case ConcurrentRoot:
+          this._debugRootType = 'createRoot()';
+          break;
+
+        case LegacyRoot:
+          this._debugRootType = 'createLegacyRoot()';
+          break;
+      }
+    }
   }
 
   function createFiberRoot(containerInfo, tag, hydrate, hydrationCallbacks) {
@@ -24293,89 +25339,34 @@
     initializeUpdateQueue(uninitializedFiber);
     return root;
   }
-  function isRootSuspendedAtTime(root, expirationTime) {
-    var firstSuspendedTime = root.firstSuspendedTime;
-    var lastSuspendedTime = root.lastSuspendedTime;
-    return firstSuspendedTime !== NoWork && firstSuspendedTime >= expirationTime && lastSuspendedTime <= expirationTime;
-  }
-  function markRootSuspendedAtTime(root, expirationTime) {
-    var firstSuspendedTime = root.firstSuspendedTime;
-    var lastSuspendedTime = root.lastSuspendedTime;
-
-    if (firstSuspendedTime < expirationTime) {
-      root.firstSuspendedTime = expirationTime;
-    }
-
-    if (lastSuspendedTime > expirationTime || firstSuspendedTime === NoWork) {
-      root.lastSuspendedTime = expirationTime;
-    }
-
-    if (expirationTime <= root.lastPingedTime) {
-      root.lastPingedTime = NoWork;
-    }
-
-    if (expirationTime <= root.lastExpiredTime) {
-      root.lastExpiredTime = NoWork;
-    }
-  }
-  function markRootUpdatedAtTime(root, expirationTime) {
-    // Update the range of pending times
-    var firstPendingTime = root.firstPendingTime;
-
-    if (expirationTime > firstPendingTime) {
-      root.firstPendingTime = expirationTime;
-    } // Update the range of suspended times. Treat everything lower priority or
-    // equal to this update as unsuspended.
-
-
-    var firstSuspendedTime = root.firstSuspendedTime;
-
-    if (firstSuspendedTime !== NoWork) {
-      if (expirationTime >= firstSuspendedTime) {
-        // The entire suspended range is now unsuspended.
-        root.firstSuspendedTime = root.lastSuspendedTime = root.nextKnownPendingLevel = NoWork;
-      } else if (expirationTime >= root.lastSuspendedTime) {
-        root.lastSuspendedTime = expirationTime + 1;
-      } // This is a pending level. Check if it's higher priority than the next
-      // known pending level.
-
-
-      if (expirationTime > root.nextKnownPendingLevel) {
-        root.nextKnownPendingLevel = expirationTime;
-      }
-    }
-  }
-  function markRootFinishedAtTime(root, finishedExpirationTime, remainingExpirationTime) {
-    // Update the range of pending times
-    root.firstPendingTime = remainingExpirationTime; // Update the range of suspended times. Treat everything higher priority or
-    // equal to this update as unsuspended.
-
-    if (finishedExpirationTime <= root.lastSuspendedTime) {
-      // The entire suspended range is now unsuspended.
-      root.firstSuspendedTime = root.lastSuspendedTime = root.nextKnownPendingLevel = NoWork;
-    } else if (finishedExpirationTime <= root.firstSuspendedTime) {
-      // Part of the suspended range is now unsuspended. Narrow the range to
-      // include everything between the unsuspended time (non-inclusive) and the
-      // last suspended time.
-      root.firstSuspendedTime = finishedExpirationTime - 1;
-    }
-
-    if (finishedExpirationTime <= root.lastPingedTime) {
-      // Clear the pinged time
-      root.lastPingedTime = NoWork;
-    }
-
-    if (finishedExpirationTime <= root.lastExpiredTime) {
-      // Clear the expired time
-      root.lastExpiredTime = NoWork;
-    }
-  }
-  function markRootExpiredAtTime(root, expirationTime) {
-    var lastExpiredTime = root.lastExpiredTime;
-
-    if (lastExpiredTime === NoWork || lastExpiredTime > expirationTime) {
-      root.lastExpiredTime = expirationTime;
-    }
+
+  // This ensures that the version used for server rendering matches the one
+  // that is eventually read during hydration.
+  // If they don't match there's a potential tear and a full deopt render is required.
+
+  function registerMutableSourceForHydration(root, mutableSource) {
+    var getVersion = mutableSource._getVersion;
+    var version = getVersion(mutableSource._source); // TODO Clear this data once all pending hydration work is finished.
+    // Retaining it forever may interfere with GC.
+
+    if (root.mutableSourceEagerHydrationData == null) {
+      root.mutableSourceEagerHydrationData = [mutableSource, version];
+    } else {
+      root.mutableSourceEagerHydrationData.push(mutableSource, version);
+    }
+  }
+
+  function createPortal(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
+  implementation) {
+    var key = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    return {
+      // This tag allow us to uniquely identify this as a React Portal
+      $$typeof: REACT_PORTAL_TYPE,
+      key: key == null ? null : '' + key,
+      children: children,
+      containerInfo: containerInfo,
+      implementation: implementation
+    };
   }
 
   var didWarnAboutNestedUpdates;
@@ -24436,11 +25427,24 @@
 
         if (!didWarnAboutFindNodeInStrictMode[componentName]) {
           didWarnAboutFindNodeInStrictMode[componentName] = true;
-
-          if (fiber.mode & StrictMode) {
-            error('%s is deprecated in StrictMode. ' + '%s was passed an instance of %s which is inside StrictMode. ' + 'Instead, add a ref directly to the element you want to reference. ' + 'Learn more about using refs safely here: ' + 'https://fb.me/react-strict-mode-find-node%s', methodName, methodName, componentName, getStackByFiberInDevAndProd(hostFiber));
-          } else {
-            error('%s is deprecated in StrictMode. ' + '%s was passed an instance of %s which renders StrictMode children. ' + 'Instead, add a ref directly to the element you want to reference. ' + 'Learn more about using refs safely here: ' + 'https://fb.me/react-strict-mode-find-node%s', methodName, methodName, componentName, getStackByFiberInDevAndProd(hostFiber));
+          var previousFiber = current;
+
+          try {
+            setCurrentFiber(hostFiber);
+
+            if (fiber.mode & StrictMode) {
+              error('%s is deprecated in StrictMode. ' + '%s was passed an instance of %s which is inside StrictMode. ' + 'Instead, add a ref directly to the element you want to reference. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-find-node', methodName, methodName, componentName);
+            } else {
+              error('%s is deprecated in StrictMode. ' + '%s was passed an instance of %s which renders StrictMode children. ' + 'Instead, add a ref directly to the element you want to reference. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-find-node', methodName, methodName, componentName);
+            }
+          } finally {
+            // Ideally this should reset to previous but this shouldn't be called in
+            // render and there's another warning for that anyway.
+            if (previousFiber) {
+              setCurrentFiber(previousFiber);
+            } else {
+              resetCurrentFiber();
+            }
           }
         }
       }
@@ -24458,7 +25462,7 @@
     }
 
     var current$1 = container.current;
-    var currentTime = requestCurrentTimeForUpdate();
+    var eventTime = requestEventTime();
 
     {
       // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
@@ -24468,8 +25472,8 @@
       }
     }
 
-    var suspenseConfig = requestCurrentSuspenseConfig();
-    var expirationTime = computeExpirationForFiber(currentTime, current$1, suspenseConfig);
+    var lane = requestUpdateLane(current$1);
+
     var context = getContextForSubtree(parentComponent);
 
     if (container.context === null) {
@@ -24486,7 +25490,7 @@
       }
     }
 
-    var update = createUpdate(expirationTime, suspenseConfig); // Caution: React DevTools currently depends on this property
+    var update = createUpdate(eventTime, lane); // Caution: React DevTools currently depends on this property
     // being called "element".
 
     update.payload = {
@@ -24505,8 +25509,8 @@
     }
 
     enqueueUpdate(current$1, update);
-    scheduleWork(current$1, expirationTime);
-    return expirationTime;
+    scheduleUpdateOnFiber(current$1, lane, eventTime);
+    return lane;
   }
   function getPublicRootInstance(container) {
     var containerFiber = container.current;
@@ -24524,23 +25528,21 @@
     }
   }
 
-  function markRetryTimeImpl(fiber, retryTime) {
+  function markRetryLaneImpl(fiber, retryLane) {
     var suspenseState = fiber.memoizedState;
 
     if (suspenseState !== null && suspenseState.dehydrated !== null) {
-      if (suspenseState.retryTime < retryTime) {
-        suspenseState.retryTime = retryTime;
-      }
+      suspenseState.retryLane = higherPriorityLane(suspenseState.retryLane, retryLane);
     }
   } // Increases the priority of thennables when they resolve within this boundary.
 
 
-  function markRetryTimeIfNotHydrated(fiber, retryTime) {
-    markRetryTimeImpl(fiber, retryTime);
+  function markRetryLaneIfNotHydrated(fiber, retryLane) {
+    markRetryLaneImpl(fiber, retryLane);
     var alternate = fiber.alternate;
 
     if (alternate) {
-      markRetryTimeImpl(alternate, retryTime);
+      markRetryLaneImpl(alternate, retryLane);
     }
   }
 
@@ -24553,9 +25555,10 @@
       return;
     }
 
-    var expTime = computeInteractiveExpiration(requestCurrentTimeForUpdate());
-    scheduleWork(fiber, expTime);
-    markRetryTimeIfNotHydrated(fiber, expTime);
+    var eventTime = requestEventTime();
+    var lane = InputDiscreteHydrationLane;
+    scheduleUpdateOnFiber(fiber, lane, eventTime);
+    markRetryLaneIfNotHydrated(fiber, lane);
   }
   function attemptContinuousHydration$1(fiber) {
     if (fiber.tag !== SuspenseComponent) {
@@ -24566,8 +25569,10 @@
       return;
     }
 
-    scheduleWork(fiber, ContinuousHydration);
-    markRetryTimeIfNotHydrated(fiber, ContinuousHydration);
+    var eventTime = requestEventTime();
+    var lane = SelectiveHydrationLane;
+    scheduleUpdateOnFiber(fiber, lane, eventTime);
+    markRetryLaneIfNotHydrated(fiber, lane);
   }
   function attemptHydrationAtCurrentPriority$1(fiber) {
     if (fiber.tag !== SuspenseComponent) {
@@ -24576,10 +25581,18 @@
       return;
     }
 
-    var currentTime = requestCurrentTimeForUpdate();
-    var expTime = computeExpirationForFiber(currentTime, fiber, null);
-    scheduleWork(fiber, expTime);
-    markRetryTimeIfNotHydrated(fiber, expTime);
+    var eventTime = requestEventTime();
+    var lane = requestUpdateLane(fiber);
+    scheduleUpdateOnFiber(fiber, lane, eventTime);
+    markRetryLaneIfNotHydrated(fiber, lane);
+  }
+  function runWithPriority$2(priority, fn) {
+
+    try {
+      setCurrentUpdateLanePriority(priority);
+      return fn();
+    } finally {
+    }
   }
   function findHostInstanceWithNoPortals(fiber) {
     var hostFiber = findCurrentHostFiberWithNoPortals(fiber);
@@ -24603,29 +25616,96 @@
     return shouldSuspendImpl(fiber);
   }
   var overrideHookState = null;
+  var overrideHookStateDeletePath = null;
+  var overrideHookStateRenamePath = null;
   var overrideProps = null;
+  var overridePropsDeletePath = null;
+  var overridePropsRenamePath = null;
   var scheduleUpdate = null;
   var setSuspenseHandler = null;
 
   {
-    var copyWithSetImpl = function (obj, path, idx, value) {
-      if (idx >= path.length) {
+    var copyWithDeleteImpl = function (obj, path, index) {
+      var key = path[index];
+      var updated = Array.isArray(obj) ? obj.slice() : _assign({}, obj);
+
+      if (index + 1 === path.length) {
+        if (Array.isArray(updated)) {
+          updated.splice(key, 1);
+        } else {
+          delete updated[key];
+        }
+
+        return updated;
+      } // $FlowFixMe number or string is fine here
+
+
+      updated[key] = copyWithDeleteImpl(obj[key], path, index + 1);
+      return updated;
+    };
+
+    var copyWithDelete = function (obj, path) {
+      return copyWithDeleteImpl(obj, path, 0);
+    };
+
+    var copyWithRenameImpl = function (obj, oldPath, newPath, index) {
+      var oldKey = oldPath[index];
+      var updated = Array.isArray(obj) ? obj.slice() : _assign({}, obj);
+
+      if (index + 1 === oldPath.length) {
+        var newKey = newPath[index]; // $FlowFixMe number or string is fine here
+
+        updated[newKey] = updated[oldKey];
+
+        if (Array.isArray(updated)) {
+          updated.splice(oldKey, 1);
+        } else {
+          delete updated[oldKey];
+        }
+      } else {
+        // $FlowFixMe number or string is fine here
+        updated[oldKey] = copyWithRenameImpl( // $FlowFixMe number or string is fine here
+        obj[oldKey], oldPath, newPath, index + 1);
+      }
+
+      return updated;
+    };
+
+    var copyWithRename = function (obj, oldPath, newPath) {
+      if (oldPath.length !== newPath.length) {
+        warn('copyWithRename() expects paths of the same length');
+
+        return;
+      } else {
+        for (var i = 0; i < newPath.length - 1; i++) {
+          if (oldPath[i] !== newPath[i]) {
+            warn('copyWithRename() expects paths to be the same except for the deepest key');
+
+            return;
+          }
+        }
+      }
+
+      return copyWithRenameImpl(obj, oldPath, newPath, 0);
+    };
+
+    var copyWithSetImpl = function (obj, path, index, value) {
+      if (index >= path.length) {
         return value;
       }
 
-      var key = path[idx];
+      var key = path[index];
       var updated = Array.isArray(obj) ? obj.slice() : _assign({}, obj); // $FlowFixMe number or string is fine here
 
-      updated[key] = copyWithSetImpl(obj[key], path, idx + 1, value);
+      updated[key] = copyWithSetImpl(obj[key], path, index + 1, value);
       return updated;
     };
 
     var copyWithSet = function (obj, path, value) {
       return copyWithSetImpl(obj, path, 0, value);
-    }; // Support DevTools editable values for useState and useReducer.
-
-
-    overrideHookState = function (fiber, id, path, value) {
+    };
+
+    var findHook = function (fiber, id) {
       // For now, the "id" of stateful hooks is just the stateful hook index.
       // This may change in the future with e.g. nested hooks.
       var currentHook = fiber.memoizedState;
@@ -24635,17 +25715,58 @@
         id--;
       }
 
-      if (currentHook !== null) {
-        var newState = copyWithSet(currentHook.memoizedState, path, value);
-        currentHook.memoizedState = newState;
-        currentHook.baseState = newState; // We aren't actually adding an update to the queue,
+      return currentHook;
+    }; // Support DevTools editable values for useState and useReducer.
+
+
+    overrideHookState = function (fiber, id, path, value) {
+      var hook = findHook(fiber, id);
+
+      if (hook !== null) {
+        var newState = copyWithSet(hook.memoizedState, path, value);
+        hook.memoizedState = newState;
+        hook.baseState = newState; // We aren't actually adding an update to the queue,
         // because there is no update we can add for useReducer hooks that won't trigger an error.
         // (There's no appropriate action type for DevTools overrides.)
         // As a result though, React will see the scheduled update as a noop and bailout.
         // Shallow cloning props works as a workaround for now to bypass the bailout check.
 
         fiber.memoizedProps = _assign({}, fiber.memoizedProps);
-        scheduleWork(fiber, Sync);
+        scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+      }
+    };
+
+    overrideHookStateDeletePath = function (fiber, id, path) {
+      var hook = findHook(fiber, id);
+
+      if (hook !== null) {
+        var newState = copyWithDelete(hook.memoizedState, path);
+        hook.memoizedState = newState;
+        hook.baseState = newState; // We aren't actually adding an update to the queue,
+        // because there is no update we can add for useReducer hooks that won't trigger an error.
+        // (There's no appropriate action type for DevTools overrides.)
+        // As a result though, React will see the scheduled update as a noop and bailout.
+        // Shallow cloning props works as a workaround for now to bypass the bailout check.
+
+        fiber.memoizedProps = _assign({}, fiber.memoizedProps);
+        scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+      }
+    };
+
+    overrideHookStateRenamePath = function (fiber, id, oldPath, newPath) {
+      var hook = findHook(fiber, id);
+
+      if (hook !== null) {
+        var newState = copyWithRename(hook.memoizedState, oldPath, newPath);
+        hook.memoizedState = newState;
+        hook.baseState = newState; // We aren't actually adding an update to the queue,
+        // because there is no update we can add for useReducer hooks that won't trigger an error.
+        // (There's no appropriate action type for DevTools overrides.)
+        // As a result though, React will see the scheduled update as a noop and bailout.
+        // Shallow cloning props works as a workaround for now to bypass the bailout check.
+
+        fiber.memoizedProps = _assign({}, fiber.memoizedProps);
+        scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
       }
     }; // Support DevTools props for function components, forwardRef, memo, host components, etc.
 
@@ -24657,11 +25778,31 @@
         fiber.alternate.pendingProps = fiber.pendingProps;
       }
 
-      scheduleWork(fiber, Sync);
+      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+    };
+
+    overridePropsDeletePath = function (fiber, path) {
+      fiber.pendingProps = copyWithDelete(fiber.memoizedProps, path);
+
+      if (fiber.alternate) {
+        fiber.alternate.pendingProps = fiber.pendingProps;
+      }
+
+      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+    };
+
+    overridePropsRenamePath = function (fiber, oldPath, newPath) {
+      fiber.pendingProps = copyWithRename(fiber.memoizedProps, oldPath, newPath);
+
+      if (fiber.alternate) {
+        fiber.alternate.pendingProps = fiber.pendingProps;
+      }
+
+      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
     };
 
     scheduleUpdate = function (fiber) {
-      scheduleWork(fiber, Sync);
+      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
     };
 
     setSuspenseHandler = function (newShouldSuspendImpl) {
@@ -24669,44 +25810,52 @@
     };
   }
 
+  function findHostInstanceByFiber(fiber) {
+    var hostFiber = findCurrentHostFiber(fiber);
+
+    if (hostFiber === null) {
+      return null;
+    }
+
+    return hostFiber.stateNode;
+  }
+
+  function emptyFindFiberByHostInstance(instance) {
+    return null;
+  }
+
+  function getCurrentFiberForDevTools() {
+    return current;
+  }
+
   function injectIntoDevTools(devToolsConfig) {
     var findFiberByHostInstance = devToolsConfig.findFiberByHostInstance;
     var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
-    return injectInternals(_assign({}, devToolsConfig, {
+    return injectInternals({
+      bundleType: devToolsConfig.bundleType,
+      version: devToolsConfig.version,
+      rendererPackageName: devToolsConfig.rendererPackageName,
+      rendererConfig: devToolsConfig.rendererConfig,
       overrideHookState: overrideHookState,
+      overrideHookStateDeletePath: overrideHookStateDeletePath,
+      overrideHookStateRenamePath: overrideHookStateRenamePath,
       overrideProps: overrideProps,
+      overridePropsDeletePath: overridePropsDeletePath,
+      overridePropsRenamePath: overridePropsRenamePath,
       setSuspenseHandler: setSuspenseHandler,
       scheduleUpdate: scheduleUpdate,
       currentDispatcherRef: ReactCurrentDispatcher,
-      findHostInstanceByFiber: function (fiber) {
-        var hostFiber = findCurrentHostFiber(fiber);
-
-        if (hostFiber === null) {
-          return null;
-        }
-
-        return hostFiber.stateNode;
-      },
-      findFiberByHostInstance: function (instance) {
-        if (!findFiberByHostInstance) {
-          // Might not be implemented by the renderer.
-          return null;
-        }
-
-        return findFiberByHostInstance(instance);
-      },
+      findHostInstanceByFiber: findHostInstanceByFiber,
+      findFiberByHostInstance: findFiberByHostInstance || emptyFindFiberByHostInstance,
       // React Refresh
       findHostInstancesForRefresh:  findHostInstancesForRefresh ,
       scheduleRefresh:  scheduleRefresh ,
       scheduleRoot:  scheduleRoot ,
       setRefreshHandler:  setRefreshHandler ,
       // Enables DevTools to append owner stacks to error messages in DEV mode.
-      getCurrentFiber:  function () {
-        return current;
-      } 
-    }));
-  }
-  var IsSomeRendererActing$1 = ReactSharedInternals.IsSomeRendererActing;
+      getCurrentFiber:  getCurrentFiberForDevTools 
+    });
+  }
 
   function ReactDOMRoot(container, options) {
     this._internalRoot = createRootImpl(container, ConcurrentRoot, options);
@@ -24758,12 +25907,21 @@
     // Tag is either LegacyRoot or Concurrent Root
     var hydrate = options != null && options.hydrate === true;
     var hydrationCallbacks = options != null && options.hydrationOptions || null;
+    var mutableSources = options != null && options.hydrationOptions != null && options.hydrationOptions.mutableSources || null;
     var root = createContainer(container, tag, hydrate);
     markContainerAsRoot(root.current, container);
-
-    if (hydrate && tag !== LegacyRoot) {
-      var doc = container.nodeType === DOCUMENT_NODE ? container : container.ownerDocument;
-      eagerlyTrapReplayableEvents(container, doc);
+    var containerNodeType = container.nodeType;
+
+    {
+      var rootContainerElement = container.nodeType === COMMENT_NODE ? container.parentNode : container;
+      listenToAllSupportedEvents(rootContainerElement);
+    }
+
+    if (mutableSources) {
+      for (var i = 0; i < mutableSources.length; i++) {
+        var mutableSource = mutableSources[i];
+        registerMutableSourceForHydration(root, mutableSource);
+      }
     }
 
     return root;
@@ -24793,7 +25951,7 @@
 
       var isRootRenderedBySomeReact = !!container._reactRootContainer;
       var rootEl = getReactRootElementInContainer(container);
-      var hasNonRootReactChild = !!(rootEl && getInstanceFromNode$1(rootEl));
+      var hasNonRootReactChild = !!(rootEl && getInstanceFromNode(rootEl));
 
       if (hasNonRootReactChild && !isRootRenderedBySomeReact) {
         error('render(...): Replacing React-rendered children with a new root ' + 'component. If you intended to update the children of this node, ' + 'you should instead have the existing children update their state ' + 'and render the new components instead of calling ReactDOM.render.');
@@ -24846,7 +26004,7 @@
       if (shouldHydrate && !forceHydrate && !warnedAboutHydrateAPI) {
         warnedAboutHydrateAPI = true;
 
-        warn('render(): Calling ReactDOM.render() to hydrate server-rendered markup ' + 'will stop working in React v17. Replace the ReactDOM.render() call ' + 'with ReactDOM.hydrate() if you want React to attach to the server HTML.');
+        warn('render(): Calling ReactDOM.render() to hydrate server-rendered markup ' + 'will stop working in React v18. Replace the ReactDOM.render() call ' + 'with ReactDOM.hydrate() if you want React to attach to the server HTML.');
       }
     }
 
@@ -24981,7 +26139,7 @@
       }
     }
 
-    if (!(parentComponent != null && has$1(parentComponent))) {
+    if (!(parentComponent != null && has(parentComponent))) {
       {
         throw Error( "parentComponent must be a valid React Component" );
       }
@@ -25007,7 +26165,7 @@
     if (container._reactRootContainer) {
       {
         var rootEl = getReactRootElementInContainer(container);
-        var renderedByDifferentReact = rootEl && !getInstanceFromNode$1(rootEl);
+        var renderedByDifferentReact = rootEl && !getInstanceFromNode(rootEl);
 
         if (renderedByDifferentReact) {
           error("unmountComponentAtNode(): The node you're attempting to unmount " + 'was rendered by another copy of React.');
@@ -25029,7 +26187,7 @@
       {
         var _rootEl = getReactRootElementInContainer(container);
 
-        var hasNonRootReactChild = !!(_rootEl && getInstanceFromNode$1(_rootEl)); // Check if the container itself is a React root node.
+        var hasNonRootReactChild = !!(_rootEl && getInstanceFromNode(_rootEl)); // Check if the container itself is a React root node.
 
         var isContainerReactRoot = container.nodeType === ELEMENT_NODE && isValidContainer(container.parentNode) && !!container.parentNode._reactRootContainer;
 
@@ -25042,31 +26200,17 @@
     }
   }
 
-  function createPortal(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
-  implementation) {
-    var key = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-    return {
-      // This tag allow us to uniquely identify this as a React Portal
-      $$typeof: REACT_PORTAL_TYPE,
-      key: key == null ? null : '' + key,
-      children: children,
-      containerInfo: containerInfo,
-      implementation: implementation
-    };
-  }
-
-  var ReactVersion = '16.13.1';
-
   setAttemptUserBlockingHydration(attemptUserBlockingHydration$1);
   setAttemptContinuousHydration(attemptContinuousHydration$1);
   setAttemptHydrationAtCurrentPriority(attemptHydrationAtCurrentPriority$1);
+  setAttemptHydrationAtPriority(runWithPriority$2);
   var didWarnAboutUnstableCreatePortal = false;
 
   {
     if (typeof Map !== 'function' || // $FlowIssue Flow incorrectly thinks Map has no prototype
     Map.prototype == null || typeof Map.prototype.forEach !== 'function' || typeof Set !== 'function' || // $FlowIssue Flow incorrectly thinks Set has no prototype
     Set.prototype == null || typeof Set.prototype.clear !== 'function' || typeof Set.prototype.forEach !== 'function') {
-      error('React depends on Map and Set built-in types. Make sure that you load a ' + 'polyfill in older browsers. https://fb.me/react-polyfills');
+      error('React depends on Map and Set built-in types. Make sure that you load a ' + 'polyfill in older browsers. https://reactjs.org/link/react-polyfills');
     }
   }
 
@@ -25099,7 +26243,7 @@
       if (!didWarnAboutUnstableCreatePortal) {
         didWarnAboutUnstableCreatePortal = true;
 
-        warn('The ReactDOM.unstable_createPortal() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactDOM.createPortal() instead. It has the exact same API, ' + 'but without the "unstable_" prefix.');
+        warn('The ReactDOM.unstable_createPortal() alias has been deprecated, ' + 'and will be removed in React 18+. Update your code to use ' + 'ReactDOM.createPortal() instead. It has the exact same API, ' + 'but without the "unstable_" prefix.');
       }
     }
 
@@ -25107,9 +26251,10 @@
   }
 
   var Internals = {
-    // Keep in sync with ReactDOMUnstableNativeDependencies.js
-    // ReactTestUtils.js, and ReactTestUtilsAct.js. This is an array for better minification.
-    Events: [getInstanceFromNode$1, getNodeFromInstance$1, getFiberCurrentPropsFromNode$1, injectEventPluginsByName, eventNameDispatchConfigs, accumulateTwoPhaseDispatches, accumulateDirectDispatches, enqueueStateRestore, restoreStateIfNeeded, dispatchEvent, runEventsInBatch, flushPassiveEffects, IsThisRendererActing]
+    // Keep in sync with ReactTestUtils.js, and ReactTestUtilsAct.js.
+    // This is an array for better minification.
+    Events: [getInstanceFromNode, getNodeFromInstance, getFiberCurrentPropsFromNode, enqueueStateRestore, restoreStateIfNeeded, flushPassiveEffects, // TODO: This is related to `act`, not events. Move to separate key?
+    IsThisRendererActing]
   };
   var foundDevTools = injectIntoDevTools({
     findFiberByHostInstance: getClosestInstanceFromNode,
@@ -25126,7 +26271,7 @@
 
         if (/^(https?|file):$/.test(protocol)) {
           // eslint-disable-next-line react-internal/no-production-logging
-          console.info('%cDownload the React DevTools ' + 'for a better development experience: ' + 'https://fb.me/react-devtools' + (protocol === 'file:' ? '\nYou might need to use a local HTTP server (instead of file://): ' + 'https://fb.me/react-devtools-faq' : ''), 'font-weight:bold');
+          console.info('%cDownload the React DevTools ' + 'for a better development experience: ' + 'https://reactjs.org/link/react-devtools' + (protocol === 'file:' ? '\nYou might need to use a local HTTP server (instead of file://): ' + 'https://reactjs.org/link/react-devtools-faq' : ''), 'font-weight:bold');
         }
       }
     }