diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
index 084ac17327e8d..0d19580f82bb8 100644
--- a/compiled/facebook-www/REVISION
+++ b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-ffb8eaca5966fc7733bd0a23f4055e26d2cc59d7
+ca41adb8c1b256705f73d1fb657421a03dfad82c
diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js
index fda9ac59f70f0..626f6e84efb1f 100644
--- a/compiled/facebook-www/React-dev.modern.js
+++ b/compiled/facebook-www/React-dev.modern.js
@@ -27,7 +27,7 @@ if (
 }
           "use strict";
 
-var ReactVersion = "18.3.0-www-modern-0ed50ada";
+var ReactVersion = "18.3.0-www-modern-82c50b6a";
 
 // ATTENTION
 // When adding new symbols to this file,
diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js
index a773b0a750cfc..d9e476a2457f1 100644
--- a/compiled/facebook-www/ReactART-dev.classic.js
+++ b/compiled/facebook-www/ReactART-dev.classic.js
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = "18.3.0-www-classic-b7529c47";
+var ReactVersion = "18.3.0-www-classic-26b068f9";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
@@ -177,7 +177,8 @@ var revertRemovalOfSiblingPrerendering =
   enableUnifiedSyncLane = dynamicFeatureFlags.enableUnifiedSyncLane,
   enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
   enableDeferRootSchedulingToMicrotask =
-    dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask; // On WWW, false is used for a new modern build.
+    dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask,
+  diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase; // On WWW, false is used for a new modern build.
 var enableProfilerTimer = true;
 var enableProfilerCommitHooks = true;
 var enableProfilerNestedUpdatePhase = true;
@@ -17583,18 +17584,23 @@ function updateHostComponent(
       // In mutation mode, this is sufficient for a bailout because
       // we won't touch this node even if children changed.
       return;
-    } // If we get updated because one of our children updated, we don't
-    getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host
-    // component is hitting the resume path. Figure out why. Possibly
-    // related to `hidden`.
+    }
+
+    if (diffInCommitPhase) {
+      markUpdate(workInProgress);
+    } else {
+      // component is hitting the resume path. Figure out why. Possibly
+      // related to `hidden`.
 
-    var updatePayload = prepareUpdate(); // TODO: Type this specific to this type of component.
+      getHostContext();
+      var updatePayload = prepareUpdate(); // TODO: Type this specific to this type of component.
 
-    workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
-    // is a new ref we mark this as an update. All the work is done in commitWork.
+      workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
+      // is a new ref we mark this as an update. All the work is done in commitWork.
 
-    if (updatePayload) {
-      markUpdate(workInProgress);
+      if (updatePayload) {
+        markUpdate(workInProgress);
+      }
     }
   }
 } // This function must be called at the very end of the complete phase, because
@@ -21225,7 +21231,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) {
             var _updatePayload = finishedWork.updateQueue;
             finishedWork.updateQueue = null;
 
-            if (_updatePayload !== null) {
+            if (_updatePayload !== null || diffInCommitPhase) {
               try {
                 commitUpdate(
                   _instance2,
diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js
index 4e1c010d1ec69..5ebe69b840b6e 100644
--- a/compiled/facebook-www/ReactART-dev.modern.js
+++ b/compiled/facebook-www/ReactART-dev.modern.js
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = "18.3.0-www-modern-71e9d049";
+var ReactVersion = "18.3.0-www-modern-ae1f3bca";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
@@ -177,7 +177,8 @@ var revertRemovalOfSiblingPrerendering =
   enableUnifiedSyncLane = dynamicFeatureFlags.enableUnifiedSyncLane,
   enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
   enableDeferRootSchedulingToMicrotask =
-    dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask; // On WWW, true is used for a new modern build.
+    dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask,
+  diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase; // On WWW, true is used for a new modern build.
 var enableProfilerTimer = true;
 var enableProfilerCommitHooks = true;
 var enableProfilerNestedUpdatePhase = true;
@@ -17277,18 +17278,23 @@ function updateHostComponent(
       // In mutation mode, this is sufficient for a bailout because
       // we won't touch this node even if children changed.
       return;
-    } // If we get updated because one of our children updated, we don't
-    getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host
-    // component is hitting the resume path. Figure out why. Possibly
-    // related to `hidden`.
+    }
+
+    if (diffInCommitPhase) {
+      markUpdate(workInProgress);
+    } else {
+      // component is hitting the resume path. Figure out why. Possibly
+      // related to `hidden`.
 
-    var updatePayload = prepareUpdate(); // TODO: Type this specific to this type of component.
+      getHostContext();
+      var updatePayload = prepareUpdate(); // TODO: Type this specific to this type of component.
 
-    workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
-    // is a new ref we mark this as an update. All the work is done in commitWork.
+      workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
+      // is a new ref we mark this as an update. All the work is done in commitWork.
 
-    if (updatePayload) {
-      markUpdate(workInProgress);
+      if (updatePayload) {
+        markUpdate(workInProgress);
+      }
     }
   }
 } // This function must be called at the very end of the complete phase, because
@@ -20890,7 +20896,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) {
             var _updatePayload = finishedWork.updateQueue;
             finishedWork.updateQueue = null;
 
-            if (_updatePayload !== null) {
+            if (_updatePayload !== null || diffInCommitPhase) {
               try {
                 commitUpdate(
                   _instance2,
diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js
index 91605ce428803..f18111ccc94e1 100644
--- a/compiled/facebook-www/ReactART-prod.classic.js
+++ b/compiled/facebook-www/ReactART-prod.classic.js
@@ -73,6 +73,7 @@ var ReactSharedInternals =
   enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
   enableDeferRootSchedulingToMicrotask =
     dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask,
+  diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase,
   REACT_ELEMENT_TYPE = Symbol.for("react.element"),
   REACT_PORTAL_TYPE = Symbol.for("react.portal"),
   REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
@@ -5240,6 +5241,9 @@ function getChildContextValues(context) {
     collectNearestChildContextValues(currentFiber, context, childContextValues);
   return childContextValues;
 }
+function markUpdate(workInProgress) {
+  workInProgress.flags |= 4;
+}
 function scheduleRetryEffect(workInProgress, retryQueue) {
   null !== retryQueue
     ? (workInProgress.flags |= 4)
@@ -5359,8 +5363,10 @@ function completeWork(current, workInProgress, renderLanes) {
       renderLanes = workInProgress.type;
       if (null !== current && null != workInProgress.stateNode)
         current.memoizedProps !== newProps &&
-          (workInProgress.updateQueue = UPDATE_SIGNAL) &&
-          (workInProgress.flags |= 4),
+          (diffInCommitPhase
+            ? markUpdate(workInProgress)
+            : (workInProgress.updateQueue = UPDATE_SIGNAL) &&
+              markUpdate(workInProgress)),
           current.ref !== workInProgress.ref &&
             (workInProgress.flags |= 2097664);
       else {
@@ -5427,7 +5433,7 @@ function completeWork(current, workInProgress, renderLanes) {
       return null;
     case 6:
       if (current && null != workInProgress.stateNode)
-        current.memoizedProps !== newProps && (workInProgress.flags |= 4);
+        current.memoizedProps !== newProps && markUpdate(workInProgress);
       else {
         if ("string" !== typeof newProps && null === workInProgress.stateNode)
           throw Error(formatProdErrorMessage(166));
@@ -5597,8 +5603,8 @@ function completeWork(current, workInProgress, renderLanes) {
             }),
             shim$1(),
             null !== workInProgress.ref &&
-              ((workInProgress.flags |= 2097664), (workInProgress.flags |= 4)))
-          : (null !== workInProgress.ref && (workInProgress.flags |= 4),
+              ((workInProgress.flags |= 2097664), markUpdate(workInProgress)))
+          : (null !== workInProgress.ref && markUpdate(workInProgress),
             current.ref !== workInProgress.ref &&
               (workInProgress.flags |= 2097664)),
         bubbleProperties(workInProgress),
@@ -6665,7 +6671,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         current = null !== current ? current.memoizedProps : newProps;
         var updatePayload = finishedWork.updateQueue;
         finishedWork.updateQueue = null;
-        if (null !== updatePayload)
+        if (null !== updatePayload || diffInCommitPhase)
           try {
             flags._applyProps(flags, newProps, current);
           } catch (error$108) {
@@ -10072,7 +10078,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-classic-0d8af644",
+    version: "18.3.0-www-classic-9e45a6d4",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1344 = {
@@ -10103,7 +10109,7 @@ var internals$jscomp$inline_1344 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-0d8af644"
+  reconcilerVersion: "18.3.0-www-classic-9e45a6d4"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1345 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js
index 68ce4a6507803..e0098cb8bb68f 100644
--- a/compiled/facebook-www/ReactART-prod.modern.js
+++ b/compiled/facebook-www/ReactART-prod.modern.js
@@ -73,6 +73,7 @@ var ReactSharedInternals =
   enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
   enableDeferRootSchedulingToMicrotask =
     dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask,
+  diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase,
   REACT_ELEMENT_TYPE = Symbol.for("react.element"),
   REACT_PORTAL_TYPE = Symbol.for("react.portal"),
   REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
@@ -4995,6 +4996,9 @@ function getChildContextValues(context) {
     collectNearestChildContextValues(currentFiber, context, childContextValues);
   return childContextValues;
 }
+function markUpdate(workInProgress) {
+  workInProgress.flags |= 4;
+}
 function scheduleRetryEffect(workInProgress, retryQueue) {
   null !== retryQueue
     ? (workInProgress.flags |= 4)
@@ -5108,8 +5112,10 @@ function completeWork(current, workInProgress, renderLanes) {
       renderLanes = workInProgress.type;
       if (null !== current && null != workInProgress.stateNode)
         current.memoizedProps !== newProps &&
-          (workInProgress.updateQueue = UPDATE_SIGNAL) &&
-          (workInProgress.flags |= 4),
+          (diffInCommitPhase
+            ? markUpdate(workInProgress)
+            : (workInProgress.updateQueue = UPDATE_SIGNAL) &&
+              markUpdate(workInProgress)),
           current.ref !== workInProgress.ref &&
             (workInProgress.flags |= 2097664);
       else {
@@ -5176,7 +5182,7 @@ function completeWork(current, workInProgress, renderLanes) {
       return null;
     case 6:
       if (current && null != workInProgress.stateNode)
-        current.memoizedProps !== newProps && (workInProgress.flags |= 4);
+        current.memoizedProps !== newProps && markUpdate(workInProgress);
       else {
         if ("string" !== typeof newProps && null === workInProgress.stateNode)
           throw Error(formatProdErrorMessage(166));
@@ -5342,8 +5348,8 @@ function completeWork(current, workInProgress, renderLanes) {
             }),
             shim$1(),
             null !== workInProgress.ref &&
-              ((workInProgress.flags |= 2097664), (workInProgress.flags |= 4)))
-          : (null !== workInProgress.ref && (workInProgress.flags |= 4),
+              ((workInProgress.flags |= 2097664), markUpdate(workInProgress)))
+          : (null !== workInProgress.ref && markUpdate(workInProgress),
             current.ref !== workInProgress.ref &&
               (workInProgress.flags |= 2097664)),
         bubbleProperties(workInProgress),
@@ -6401,7 +6407,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         current = null !== current ? current.memoizedProps : newProps;
         var updatePayload = finishedWork.updateQueue;
         finishedWork.updateQueue = null;
-        if (null !== updatePayload)
+        if (null !== updatePayload || diffInCommitPhase)
           try {
             flags._applyProps(flags, newProps, current);
           } catch (error$107) {
@@ -9737,7 +9743,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-modern-77b45d24",
+    version: "18.3.0-www-modern-f0a7ed1e",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1324 = {
@@ -9768,7 +9774,7 @@ var internals$jscomp$inline_1324 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-77b45d24"
+  reconcilerVersion: "18.3.0-www-modern-f0a7ed1e"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1325 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
index 3fe6e4a0c4b3a..7d9245d5518dd 100644
--- a/compiled/facebook-www/ReactDOM-dev.classic.js
+++ b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -144,7 +144,8 @@ var disableInputAttributeSyncing =
   enableCustomElementPropertySupport =
     dynamicFeatureFlags.enableCustomElementPropertySupport,
   enableDeferRootSchedulingToMicrotask =
-    dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask; // On WWW, false is used for a new modern build.
+    dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask,
+  diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase; // On WWW, false is used for a new modern build.
 var enableProfilerTimer = true;
 var enableProfilerCommitHooks = true;
 var enableProfilerNestedUpdatePhase = true;
@@ -5037,6 +5038,44 @@ function createDangerousStringForStyles(styles) {
     return serialized || null;
   }
 }
+
+function setValueForStyle(style, styleName, value) {
+  var isCustomProperty = styleName.indexOf("--") === 0;
+
+  {
+    if (!isCustomProperty) {
+      warnValidStyle(styleName, value);
+    }
+  }
+
+  if (value == null || typeof value === "boolean" || value === "") {
+    if (isCustomProperty) {
+      style.setProperty(styleName, "");
+    } else if (styleName === "float") {
+      style.cssFloat = "";
+    } else {
+      style[styleName] = "";
+    }
+  } else if (isCustomProperty) {
+    style.setProperty(styleName, value);
+  } else if (
+    typeof value === "number" &&
+    value !== 0 &&
+    !isUnitlessNumber(styleName)
+  ) {
+    style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers
+  } else {
+    if (styleName === "float") {
+      style.cssFloat = value;
+    } else {
+      {
+        checkCSSPropertyStringCoercion(value, styleName);
+      }
+
+      style[styleName] = ("" + value).trim();
+    }
+  }
+}
 /**
  * Sets the value for multiple styles on a node.  If a value is specified as
  * '' (empty string), the corresponding style property will be unset.
@@ -5045,7 +5084,7 @@ function createDangerousStringForStyles(styles) {
  * @param {object} styles
  */
 
-function setValueForStyles(node, styles) {
+function setValueForStyles(node, styles, prevStyles) {
   if (styles != null && typeof styles !== "object") {
     throw new Error(
       "The `style` prop expects a mapping from style properties to values, " +
@@ -5064,45 +5103,44 @@ function setValueForStyles(node, styles) {
 
   var style = node.style;
 
-  for (var styleName in styles) {
-    if (!styles.hasOwnProperty(styleName)) {
-      continue;
+  if (diffInCommitPhase && prevStyles != null) {
+    {
+      validateShorthandPropertyCollisionInDev(prevStyles, styles);
     }
 
-    var value = styles[styleName];
-    var isCustomProperty = styleName.indexOf("--") === 0;
+    for (var styleName in prevStyles) {
+      if (
+        prevStyles.hasOwnProperty(styleName) &&
+        (styles == null || !styles.hasOwnProperty(styleName))
+      ) {
+        // Clear style
+        var isCustomProperty = styleName.indexOf("--") === 0;
 
-    {
-      if (!isCustomProperty) {
-        warnValidStyle(styleName, value);
+        if (isCustomProperty) {
+          style.setProperty(styleName, "");
+        } else if (styleName === "float") {
+          style.cssFloat = "";
+        } else {
+          style[styleName] = "";
+        }
       }
     }
 
-    if (value == null || typeof value === "boolean" || value === "") {
-      if (isCustomProperty) {
-        style.setProperty(styleName, "");
-      } else if (styleName === "float") {
-        style.cssFloat = "";
-      } else {
-        style[styleName] = "";
-      }
-    } else if (isCustomProperty) {
-      style.setProperty(styleName, value);
-    } else if (
-      typeof value === "number" &&
-      value !== 0 &&
-      !isUnitlessNumber(styleName)
-    ) {
-      style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers
-    } else {
-      if (styleName === "float") {
-        style.cssFloat = value;
-      } else {
-        {
-          checkCSSPropertyStringCoercion(value, styleName);
-        }
+    for (var _styleName in styles) {
+      var value = styles[_styleName];
 
-        style[styleName] = ("" + value).trim();
+      if (
+        styles.hasOwnProperty(_styleName) &&
+        prevStyles[_styleName] !== value
+      ) {
+        setValueForStyle(style, _styleName, value);
+      }
+    }
+  } else {
+    for (var _styleName2 in styles) {
+      if (styles.hasOwnProperty(_styleName2)) {
+        var _value = styles[_styleName2];
+        setValueForStyle(style, _styleName2, _value);
       }
     }
   }
@@ -5148,19 +5186,45 @@ function expandShorthandMap(styles) {
  *   becomes .style.fontVariant = ''
  */
 
-function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) {
+function validateShorthandPropertyCollisionInDev(prevStyles, nextStyles) {
   {
     if (!nextStyles) {
       return;
+    } // Compute the diff as it would happen elsewhere.
+
+    var expandedUpdates = {};
+
+    if (prevStyles) {
+      for (var key in prevStyles) {
+        if (prevStyles.hasOwnProperty(key) && !nextStyles.hasOwnProperty(key)) {
+          var longhands = shorthandToLonghand[key] || [key];
+
+          for (var i = 0; i < longhands.length; i++) {
+            expandedUpdates[longhands[i]] = key;
+          }
+        }
+      }
+    }
+
+    for (var _key in nextStyles) {
+      if (
+        nextStyles.hasOwnProperty(_key) &&
+        (!prevStyles || prevStyles[_key] !== nextStyles[_key])
+      ) {
+        var _longhands = shorthandToLonghand[_key] || [_key];
+
+        for (var _i = 0; _i < _longhands.length; _i++) {
+          expandedUpdates[_longhands[_i]] = _key;
+        }
+      }
     }
 
-    var expandedUpdates = expandShorthandMap(styleUpdates);
     var expandedStyles = expandShorthandMap(nextStyles);
     var warnedAbout = {};
 
-    for (var key in expandedUpdates) {
-      var originalKey = expandedUpdates[key];
-      var correctOriginalKey = expandedStyles[key];
+    for (var _key2 in expandedUpdates) {
+      var originalKey = expandedUpdates[_key2];
+      var correctOriginalKey = expandedStyles[_key2];
 
       if (correctOriginalKey && originalKey !== correctOriginalKey) {
         var warningKey = originalKey + "," + correctOriginalKey;
@@ -5177,7 +5241,7 @@ function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) {
             "avoid this, don't mix shorthand and non-shorthand properties " +
             "for the same value; instead, replace the shorthand with " +
             "separate values.",
-          isValueEmpty(styleUpdates[originalKey]) ? "Removing" : "Updating",
+          isValueEmpty(nextStyles[originalKey]) ? "Removing" : "Updating",
           originalKey,
           correctOriginalKey
         );
@@ -7877,11 +7941,13 @@ function prepareToHydrateHostInstance(fiber, hostContext) {
     shouldWarnIfMismatchDev
   ); // TODO: Type this specific to this type of component.
 
-  fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
-  // is a new ref we mark this as an update.
+  if (!diffInCommitPhase) {
+    fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
+    // is a new ref we mark this as an update.
 
-  if (updatePayload !== null) {
-    return true;
+    if (updatePayload !== null) {
+      return true;
+    }
   }
 
   return false;
@@ -21932,29 +21998,34 @@ function updateHostComponent(
       // In mutation mode, this is sufficient for a bailout because
       // we won't touch this node even if children changed.
       return;
-    } // If we get updated because one of our children updated, we don't
-    // have newProps so we'll have to reuse them.
-    // TODO: Split the update API as separate for the props vs. children.
-    // Even better would be if children weren't special cased at all tho.
-
-    var instance = workInProgress.stateNode;
-    var currentHostContext = getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host
-    // component is hitting the resume path. Figure out why. Possibly
-    // related to `hidden`.
+    }
 
-    var updatePayload = prepareUpdate(
-      instance,
-      type,
-      oldProps,
-      newProps,
-      currentHostContext
-    ); // TODO: Type this specific to this type of component.
+    if (diffInCommitPhase) {
+      markUpdate(workInProgress);
+    } else {
+      // If we get updated because one of our children updated, we don't
+      // have newProps so we'll have to reuse them.
+      // TODO: Split the update API as separate for the props vs. children.
+      // Even better would be if children weren't special cased at all tho.
+      var instance = workInProgress.stateNode; // TODO: Experiencing an error where oldProps is null. Suggests a host
+      // component is hitting the resume path. Figure out why. Possibly
+      // related to `hidden`.
+
+      var currentHostContext = getHostContext();
+      var updatePayload = prepareUpdate(
+        instance,
+        type,
+        oldProps,
+        newProps,
+        currentHostContext
+      ); // TODO: Type this specific to this type of component.
 
-    workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
-    // is a new ref we mark this as an update. All the work is done in commitWork.
+      workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
+      // is a new ref we mark this as an update. All the work is done in commitWork.
 
-    if (updatePayload) {
-      markUpdate(workInProgress);
+      if (updatePayload) {
+        markUpdate(workInProgress);
+      }
     }
   }
 } // This function must be called at the very end of the complete phase, because
@@ -26114,7 +26185,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) {
             var _updatePayload = finishedWork.updateQueue;
             finishedWork.updateQueue = null;
 
-            if (_updatePayload !== null) {
+            if (_updatePayload !== null || diffInCommitPhase) {
               try {
                 commitUpdate(
                   _instance2,
@@ -33351,7 +33422,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-27be8f4e";
+var ReactVersion = "18.3.0-www-classic-6d02b9b0";
 
 function createPortal$1(
   children,
@@ -37826,7 +37897,7 @@ function trapClickOnNonInteractiveElement(node) {
 var xlinkNamespace = "http://www.w3.org/1999/xlink";
 var xmlNamespace = "http://www.w3.org/XML/1998/namespace";
 
-function setProp(domElement, tag, key, value, props) {
+function setProp(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "children": {
       if (typeof value === "string") {
@@ -37873,7 +37944,7 @@ function setProp(domElement, tag, key, value, props) {
     }
 
     case "style": {
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     }
     // These attributes accept URLs. These must not allow javascript: URLS.
@@ -38261,6 +38332,20 @@ function setProp(domElement, tag, key, value, props) {
       break;
     // Properties that should not be allowed on custom elements.
 
+    case "is": {
+      {
+        if (prevValue != null) {
+          error('Cannot update the "is" prop after it has been initialized.');
+        }
+      } // TODO: We shouldn't actually set this attribute, because we've already
+      // passed it to createElement. We don't also need the attribute.
+      // However, our tests currently query for it so it's plausible someone
+      // else does too so it's break.
+
+      setValueForAttribute(domElement, "is", value);
+      break;
+    }
+
     case "innerText":
     case "textContent":
       if (enableCustomElementPropertySupport) {
@@ -38290,10 +38375,10 @@ function setProp(domElement, tag, key, value, props) {
   }
 }
 
-function setPropOnCustomElement(domElement, tag, key, value, props) {
+function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "style": {
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     }
 
@@ -38485,7 +38570,7 @@ function setInitialProperties(domElement, tag, props) {
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, propKey, propValue, props);
+            setProp(domElement, tag, propKey, propValue, props, null);
           }
         }
       } // TODO: Make sure we check if this is still unmounted or do any clean
@@ -38524,7 +38609,7 @@ function setInitialProperties(domElement, tag, props) {
           // defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey, _propValue, props);
+            setProp(domElement, tag, _propKey, _propValue, props, null);
           }
         }
       }
@@ -38708,7 +38793,7 @@ function setInitialProperties(domElement, tag, props) {
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey4, _propValue4, props);
+            setProp(domElement, tag, _propKey4, _propValue4, props, null);
           }
         }
       }
@@ -38734,7 +38819,8 @@ function setInitialProperties(domElement, tag, props) {
             tag,
             _propKey5,
             _propValue5,
-            props
+            props,
+            null
           );
         }
 
@@ -38754,7 +38840,7 @@ function setInitialProperties(domElement, tag, props) {
       continue;
     }
 
-    setProp(domElement, tag, _propKey6, _propValue6, props);
+    setProp(domElement, tag, _propKey6, _propValue6, props, null);
   }
 } // Calculate the diff between the two objects.
 
@@ -38871,16 +38957,514 @@ function diffProperties(domElement, tag, lastProps, nextProps) {
 
   if (styleUpdates) {
     {
-      validateShorthandPropertyCollisionInDev(styleUpdates, nextProps.style);
+      validateShorthandPropertyCollisionInDev(lastProps.style, nextProps.style);
     }
 
     (updatePayload = updatePayload || []).push("style", styleUpdates);
   }
 
   return updatePayload;
+}
+function updateProperties(domElement, tag, lastProps, nextProps) {
+  {
+    validatePropertiesInDevelopment(tag, nextProps);
+  }
+
+  switch (tag) {
+    case "div":
+    case "span":
+    case "svg":
+    case "path":
+    case "a":
+    case "g":
+    case "p":
+    case "li": {
+      // Fast track the most common tag types
+      break;
+    }
+
+    case "input": {
+      // 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 (nextProps.type === "radio" && nextProps.name != null) {
+        updateInputChecked(domElement, nextProps);
+      }
+
+      for (var propKey in lastProps) {
+        var lastProp = lastProps[propKey];
+
+        if (
+          lastProps.hasOwnProperty(propKey) &&
+          lastProp != null &&
+          !nextProps.hasOwnProperty(propKey)
+        ) {
+          switch (propKey) {
+            case "checked": {
+              var checked = nextProps.defaultChecked;
+              var inputElement = domElement;
+              inputElement.checked =
+                !!checked &&
+                typeof checked !== "function" &&
+                checked !== "symbol";
+              break;
+            }
+
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+            // defaultChecked and defaultValue are ignored by setProp
+
+            default: {
+              setProp(domElement, tag, propKey, null, nextProps, lastProp);
+            }
+          }
+        }
+      }
+
+      for (var _propKey7 in nextProps) {
+        var nextProp = nextProps[_propKey7];
+        var _lastProp = lastProps[_propKey7];
+
+        if (
+          nextProps.hasOwnProperty(_propKey7) &&
+          nextProp !== _lastProp &&
+          (nextProp != null || _lastProp != null)
+        ) {
+          switch (_propKey7) {
+            case "checked": {
+              var _checked =
+                nextProp != null ? nextProp : nextProps.defaultChecked;
+
+              var _inputElement = domElement;
+              _inputElement.checked =
+                !!_checked &&
+                typeof _checked !== "function" &&
+                _checked !== "symbol";
+              break;
+            }
+
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+
+            case "children":
+            case "dangerouslySetInnerHTML": {
+              if (nextProp != null) {
+                throw new Error(
+                  tag +
+                    " is a void element tag and must neither have `children` nor " +
+                    "use `dangerouslySetInnerHTML`."
+                );
+              }
+
+              break;
+            }
+            // defaultChecked and defaultValue are ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey7,
+                nextProp,
+                nextProps,
+                _lastProp
+              );
+            }
+          }
+        }
+      }
+
+      {
+        var wasControlled =
+          lastProps.type === "checkbox" || lastProps.type === "radio"
+            ? lastProps.checked != null
+            : lastProps.value != null;
+        var isControlled =
+          nextProps.type === "checkbox" || nextProps.type === "radio"
+            ? nextProps.checked != null
+            : nextProps.value != null;
+
+        if (
+          !wasControlled &&
+          isControlled &&
+          !didWarnUncontrolledToControlled
+        ) {
+          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 (
+          wasControlled &&
+          !isControlled &&
+          !didWarnControlledToUncontrolled
+        ) {
+          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;
+        }
+      } // Update the wrapper around inputs *after* updating props. This has to
+      // happen after updating the rest of props. Otherwise HTML5 input validations
+      // raise warnings and prevent the new value from being assigned.
+
+      updateInput(domElement, nextProps);
+      return;
+    }
+
+    case "select": {
+      for (var _propKey8 in lastProps) {
+        var _lastProp2 = lastProps[_propKey8];
+
+        if (
+          lastProps.hasOwnProperty(_propKey8) &&
+          _lastProp2 != null &&
+          !nextProps.hasOwnProperty(_propKey8)
+        ) {
+          switch (_propKey8) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+            // defaultValue are ignored by setProp
+
+            default: {
+              setProp(domElement, tag, _propKey8, null, nextProps, _lastProp2);
+            }
+          }
+        }
+      }
+
+      for (var _propKey9 in nextProps) {
+        var _nextProp = nextProps[_propKey9];
+        var _lastProp3 = lastProps[_propKey9];
+
+        if (
+          nextProps.hasOwnProperty(_propKey9) &&
+          _nextProp !== _lastProp3 &&
+          (_nextProp != null || _lastProp3 != null)
+        ) {
+          switch (_propKey9) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+            // defaultValue are ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey9,
+                _nextProp,
+                nextProps,
+                _lastProp3
+              );
+            }
+          }
+        }
+      } // <select> value update needs to occur after <option> children
+      // reconciliation
+
+      updateSelect(domElement, lastProps, nextProps);
+      return;
+    }
+
+    case "textarea": {
+      for (var _propKey10 in lastProps) {
+        var _lastProp4 = lastProps[_propKey10];
+
+        if (
+          lastProps.hasOwnProperty(_propKey10) &&
+          _lastProp4 != null &&
+          !nextProps.hasOwnProperty(_propKey10)
+        ) {
+          switch (_propKey10) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+
+            case "children": {
+              // TODO: This doesn't actually do anything if it updates.
+              break;
+            }
+            // defaultValue is ignored by setProp
+
+            default: {
+              setProp(domElement, tag, _propKey10, null, nextProps, _lastProp4);
+            }
+          }
+        }
+      }
+
+      for (var _propKey11 in nextProps) {
+        var _nextProp2 = nextProps[_propKey11];
+        var _lastProp5 = lastProps[_propKey11];
+
+        if (
+          nextProps.hasOwnProperty(_propKey11) &&
+          _nextProp2 !== _lastProp5 &&
+          (_nextProp2 != null || _lastProp5 != null)
+        ) {
+          switch (_propKey11) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+
+            case "children": {
+              // TODO: This doesn't actually do anything if it updates.
+              break;
+            }
+
+            case "dangerouslySetInnerHTML": {
+              if (_nextProp2 != null) {
+                // TODO: Do we really need a special error message for this. It's also pretty blunt.
+                throw new Error(
+                  "`dangerouslySetInnerHTML` does not make sense on <textarea>."
+                );
+              }
+
+              break;
+            }
+            // defaultValue is ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey11,
+                _nextProp2,
+                nextProps,
+                _lastProp5
+              );
+            }
+          }
+        }
+      }
+
+      updateTextarea(domElement, nextProps);
+      return;
+    }
+
+    case "option": {
+      for (var _propKey12 in lastProps) {
+        var _lastProp6 = lastProps[_propKey12];
+
+        if (
+          lastProps.hasOwnProperty(_propKey12) &&
+          _lastProp6 != null &&
+          !nextProps.hasOwnProperty(_propKey12)
+        ) {
+          switch (_propKey12) {
+            case "selected": {
+              // TODO: Remove support for selected on option.
+              domElement.selected = false;
+              break;
+            }
+
+            default: {
+              setProp(domElement, tag, _propKey12, null, nextProps, _lastProp6);
+            }
+          }
+        }
+      }
+
+      for (var _propKey13 in nextProps) {
+        var _nextProp3 = nextProps[_propKey13];
+        var _lastProp7 = lastProps[_propKey13];
+
+        if (
+          nextProps.hasOwnProperty(_propKey13) &&
+          _nextProp3 !== _lastProp7 &&
+          (_nextProp3 != null || _lastProp7 != null)
+        ) {
+          switch (_propKey13) {
+            case "selected": {
+              // TODO: Remove support for selected on option.
+              domElement.selected =
+                _nextProp3 &&
+                typeof _nextProp3 !== "function" &&
+                typeof _nextProp3 !== "symbol";
+              break;
+            }
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey13,
+                _nextProp3,
+                nextProps,
+                _lastProp7
+              );
+            }
+          }
+        }
+      }
+
+      return;
+    }
+
+    case "img":
+    case "link":
+    case "area":
+    case "base":
+    case "br":
+    case "col":
+    case "embed":
+    case "hr":
+    case "keygen":
+    case "meta":
+    case "param":
+    case "source":
+    case "track":
+    case "wbr":
+    case "menuitem": {
+      // Void elements
+      for (var _propKey14 in lastProps) {
+        var _lastProp8 = lastProps[_propKey14];
+
+        if (
+          lastProps.hasOwnProperty(_propKey14) &&
+          _lastProp8 != null &&
+          !nextProps.hasOwnProperty(_propKey14)
+        ) {
+          setProp(domElement, tag, _propKey14, null, nextProps, _lastProp8);
+        }
+      }
+
+      for (var _propKey15 in nextProps) {
+        var _nextProp4 = nextProps[_propKey15];
+        var _lastProp9 = lastProps[_propKey15];
+
+        if (
+          nextProps.hasOwnProperty(_propKey15) &&
+          _nextProp4 !== _lastProp9 &&
+          (_nextProp4 != null || _lastProp9 != null)
+        ) {
+          switch (_propKey15) {
+            case "children":
+            case "dangerouslySetInnerHTML": {
+              if (_nextProp4 != null) {
+                // TODO: Can we make this a DEV warning to avoid this deny list?
+                throw new Error(
+                  tag +
+                    " is a void element tag and must neither have `children` nor " +
+                    "use `dangerouslySetInnerHTML`."
+                );
+              }
+
+              break;
+            }
+            // defaultChecked and defaultValue are ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey15,
+                _nextProp4,
+                nextProps,
+                _lastProp9
+              );
+            }
+          }
+        }
+      }
+
+      return;
+    }
+
+    default: {
+      if (isCustomElement(tag)) {
+        for (var _propKey16 in lastProps) {
+          var _lastProp10 = lastProps[_propKey16];
+
+          if (
+            lastProps.hasOwnProperty(_propKey16) &&
+            _lastProp10 != null &&
+            !nextProps.hasOwnProperty(_propKey16)
+          ) {
+            setPropOnCustomElement(
+              domElement,
+              tag,
+              _propKey16,
+              null,
+              nextProps,
+              _lastProp10
+            );
+          }
+        }
+
+        for (var _propKey17 in nextProps) {
+          var _nextProp5 = nextProps[_propKey17];
+          var _lastProp11 = lastProps[_propKey17];
+
+          if (
+            nextProps.hasOwnProperty(_propKey17) &&
+            _nextProp5 !== _lastProp11 &&
+            (_nextProp5 != null || _lastProp11 != null)
+          ) {
+            setPropOnCustomElement(
+              domElement,
+              tag,
+              _propKey17,
+              _nextProp5,
+              nextProps,
+              _lastProp11
+            );
+          }
+        }
+
+        return;
+      }
+    }
+  }
+
+  for (var _propKey18 in lastProps) {
+    var _lastProp12 = lastProps[_propKey18];
+
+    if (
+      lastProps.hasOwnProperty(_propKey18) &&
+      _lastProp12 != null &&
+      !nextProps.hasOwnProperty(_propKey18)
+    ) {
+      setProp(domElement, tag, _propKey18, null, nextProps, _lastProp12);
+    }
+  }
+
+  for (var _propKey19 in nextProps) {
+    var _nextProp6 = nextProps[_propKey19];
+    var _lastProp13 = lastProps[_propKey19];
+
+    if (
+      nextProps.hasOwnProperty(_propKey19) &&
+      _nextProp6 !== _lastProp13 &&
+      (_nextProp6 != null || _lastProp13 != null)
+    ) {
+      setProp(domElement, tag, _propKey19, _nextProp6, nextProps, _lastProp13);
+    }
+  }
 } // Apply the diff.
 
-function updateProperties(
+function updatePropertiesWithDiff(
   domElement,
   updatePayload,
   tag,
@@ -38944,7 +39528,7 @@ function updateProperties(
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
           }
         }
       }
@@ -39000,10 +39584,10 @@ function updateProperties(
 
     case "select": {
       for (var _i = 0; _i < updatePayload.length; _i += 2) {
-        var _propKey7 = updatePayload[_i];
+        var _propKey20 = updatePayload[_i];
         var _propValue7 = updatePayload[_i + 1];
 
-        switch (_propKey7) {
+        switch (_propKey20) {
           case "value": {
             // This is handled by updateWrapper below.
             break;
@@ -39011,7 +39595,7 @@ function updateProperties(
           // defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey7, _propValue7, nextProps);
+            setProp(domElement, tag, _propKey20, _propValue7, nextProps, null);
           }
         }
       } // <select> value update needs to occur after <option> children
@@ -39023,10 +39607,10 @@ function updateProperties(
 
     case "textarea": {
       for (var _i2 = 0; _i2 < updatePayload.length; _i2 += 2) {
-        var _propKey8 = updatePayload[_i2];
+        var _propKey21 = updatePayload[_i2];
         var _propValue8 = updatePayload[_i2 + 1];
 
-        switch (_propKey8) {
+        switch (_propKey21) {
           case "value": {
             // This is handled by updateWrapper below.
             break;
@@ -39050,7 +39634,7 @@ function updateProperties(
           // defaultValue is ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey8, _propValue8, nextProps);
+            setProp(domElement, tag, _propKey21, _propValue8, nextProps, null);
           }
         }
       }
@@ -39061,10 +39645,10 @@ function updateProperties(
 
     case "option": {
       for (var _i3 = 0; _i3 < updatePayload.length; _i3 += 2) {
-        var _propKey9 = updatePayload[_i3];
+        var _propKey22 = updatePayload[_i3];
         var _propValue9 = updatePayload[_i3 + 1];
 
-        switch (_propKey9) {
+        switch (_propKey22) {
           case "selected": {
             // TODO: Remove support for selected on option.
             domElement.selected =
@@ -39075,7 +39659,7 @@ function updateProperties(
           }
 
           default: {
-            setProp(domElement, tag, _propKey9, _propValue9, nextProps);
+            setProp(domElement, tag, _propKey22, _propValue9, nextProps, null);
           }
         }
       }
@@ -39100,10 +39684,10 @@ function updateProperties(
     case "menuitem": {
       // Void elements
       for (var _i4 = 0; _i4 < updatePayload.length; _i4 += 2) {
-        var _propKey10 = updatePayload[_i4];
+        var _propKey23 = updatePayload[_i4];
         var _propValue10 = updatePayload[_i4 + 1];
 
-        switch (_propKey10) {
+        switch (_propKey23) {
           case "children":
           case "dangerouslySetInnerHTML": {
             if (_propValue10 != null) {
@@ -39120,7 +39704,7 @@ function updateProperties(
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey10, _propValue10, nextProps);
+            setProp(domElement, tag, _propKey23, _propValue10, nextProps, null);
           }
         }
       }
@@ -39131,14 +39715,15 @@ function updateProperties(
     default: {
       if (isCustomElement(tag)) {
         for (var _i5 = 0; _i5 < updatePayload.length; _i5 += 2) {
-          var _propKey11 = updatePayload[_i5];
+          var _propKey24 = updatePayload[_i5];
           var _propValue11 = updatePayload[_i5 + 1];
           setPropOnCustomElement(
             domElement,
             tag,
-            _propKey11,
+            _propKey24,
             _propValue11,
-            nextProps
+            nextProps,
+            null
           );
         }
 
@@ -39148,9 +39733,9 @@ function updateProperties(
   } // Apply the diff.
 
   for (var _i6 = 0; _i6 < updatePayload.length; _i6 += 2) {
-    var _propKey12 = updatePayload[_i6];
+    var _propKey25 = updatePayload[_i6];
     var _propValue12 = updatePayload[_i6 + 1];
-    setProp(domElement, tag, _propKey12, _propValue12, nextProps);
+    setProp(domElement, tag, _propKey25, _propValue12, nextProps, null);
   }
 }
 
@@ -40197,7 +40782,18 @@ function diffHydratedProperties(
       }
 
       if (!isConcurrentMode || !enableClientRenderFallbackOnTextMismatch) {
-        updatePayload = ["children", children];
+        if (diffInCommitPhase) {
+          // We really should be patching this in the commit phase but since
+          // this only affects legacy mode hydration which is deprecated anyway
+          // we can get away with it.
+          // Host singletons get their children appended and don't use the text
+          // content mechanism.
+          if (tag !== "body") {
+            domElement.textContent = children;
+          }
+        } else {
+          updatePayload = ["children", children];
+        }
       }
     }
   }
@@ -41320,6 +41916,11 @@ function finalizeInitialChildren(domElement, type, props, hostContext) {
   }
 }
 function prepareUpdate(domElement, type, oldProps, newProps, hostContext) {
+  if (diffInCommitPhase) {
+    // TODO: Figure out how to validateDOMNesting when children turn into a string.
+    return null;
+  }
+
   {
     var hostContextDev = hostContext;
 
@@ -41456,8 +42057,19 @@ function commitUpdate(
   newProps,
   internalInstanceHandle
 ) {
-  // Apply the diff to the DOM node.
-  updateProperties(domElement, updatePayload, type, oldProps, newProps); // Update the props handle so that we know which props are the ones with
+  if (diffInCommitPhase) {
+    // Diff and update the properties.
+    updateProperties(domElement, type, oldProps, newProps);
+  } else {
+    // Apply the diff to the DOM node.
+    updatePropertiesWithDiff(
+      domElement,
+      updatePayload,
+      type,
+      oldProps,
+      newProps
+    );
+  } // Update the props handle so that we know which props are the ones with
   // with current event handlers.
 
   updateFiberProps(domElement, newProps);
diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
index 45abe365ce6c6..46179e7089835 100644
--- a/compiled/facebook-www/ReactDOM-dev.modern.js
+++ b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -261,7 +261,8 @@ var disableInputAttributeSyncing =
   enableCustomElementPropertySupport =
     dynamicFeatureFlags.enableCustomElementPropertySupport,
   enableDeferRootSchedulingToMicrotask =
-    dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask; // On WWW, true is used for a new modern build.
+    dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask,
+  diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase; // On WWW, true is used for a new modern build.
 var enableProfilerTimer = true;
 var enableProfilerCommitHooks = true;
 var enableProfilerNestedUpdatePhase = true;
@@ -4850,6 +4851,44 @@ function createDangerousStringForStyles(styles) {
     return serialized || null;
   }
 }
+
+function setValueForStyle(style, styleName, value) {
+  var isCustomProperty = styleName.indexOf("--") === 0;
+
+  {
+    if (!isCustomProperty) {
+      warnValidStyle(styleName, value);
+    }
+  }
+
+  if (value == null || typeof value === "boolean" || value === "") {
+    if (isCustomProperty) {
+      style.setProperty(styleName, "");
+    } else if (styleName === "float") {
+      style.cssFloat = "";
+    } else {
+      style[styleName] = "";
+    }
+  } else if (isCustomProperty) {
+    style.setProperty(styleName, value);
+  } else if (
+    typeof value === "number" &&
+    value !== 0 &&
+    !isUnitlessNumber(styleName)
+  ) {
+    style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers
+  } else {
+    if (styleName === "float") {
+      style.cssFloat = value;
+    } else {
+      {
+        checkCSSPropertyStringCoercion(value, styleName);
+      }
+
+      style[styleName] = ("" + value).trim();
+    }
+  }
+}
 /**
  * Sets the value for multiple styles on a node.  If a value is specified as
  * '' (empty string), the corresponding style property will be unset.
@@ -4858,7 +4897,7 @@ function createDangerousStringForStyles(styles) {
  * @param {object} styles
  */
 
-function setValueForStyles(node, styles) {
+function setValueForStyles(node, styles, prevStyles) {
   if (styles != null && typeof styles !== "object") {
     throw new Error(
       "The `style` prop expects a mapping from style properties to values, " +
@@ -4877,45 +4916,44 @@ function setValueForStyles(node, styles) {
 
   var style = node.style;
 
-  for (var styleName in styles) {
-    if (!styles.hasOwnProperty(styleName)) {
-      continue;
+  if (diffInCommitPhase && prevStyles != null) {
+    {
+      validateShorthandPropertyCollisionInDev(prevStyles, styles);
     }
 
-    var value = styles[styleName];
-    var isCustomProperty = styleName.indexOf("--") === 0;
+    for (var styleName in prevStyles) {
+      if (
+        prevStyles.hasOwnProperty(styleName) &&
+        (styles == null || !styles.hasOwnProperty(styleName))
+      ) {
+        // Clear style
+        var isCustomProperty = styleName.indexOf("--") === 0;
 
-    {
-      if (!isCustomProperty) {
-        warnValidStyle(styleName, value);
+        if (isCustomProperty) {
+          style.setProperty(styleName, "");
+        } else if (styleName === "float") {
+          style.cssFloat = "";
+        } else {
+          style[styleName] = "";
+        }
       }
     }
 
-    if (value == null || typeof value === "boolean" || value === "") {
-      if (isCustomProperty) {
-        style.setProperty(styleName, "");
-      } else if (styleName === "float") {
-        style.cssFloat = "";
-      } else {
-        style[styleName] = "";
-      }
-    } else if (isCustomProperty) {
-      style.setProperty(styleName, value);
-    } else if (
-      typeof value === "number" &&
-      value !== 0 &&
-      !isUnitlessNumber(styleName)
-    ) {
-      style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers
-    } else {
-      if (styleName === "float") {
-        style.cssFloat = value;
-      } else {
-        {
-          checkCSSPropertyStringCoercion(value, styleName);
-        }
+    for (var _styleName in styles) {
+      var value = styles[_styleName];
 
-        style[styleName] = ("" + value).trim();
+      if (
+        styles.hasOwnProperty(_styleName) &&
+        prevStyles[_styleName] !== value
+      ) {
+        setValueForStyle(style, _styleName, value);
+      }
+    }
+  } else {
+    for (var _styleName2 in styles) {
+      if (styles.hasOwnProperty(_styleName2)) {
+        var _value = styles[_styleName2];
+        setValueForStyle(style, _styleName2, _value);
       }
     }
   }
@@ -4961,19 +4999,45 @@ function expandShorthandMap(styles) {
  *   becomes .style.fontVariant = ''
  */
 
-function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) {
+function validateShorthandPropertyCollisionInDev(prevStyles, nextStyles) {
   {
     if (!nextStyles) {
       return;
+    } // Compute the diff as it would happen elsewhere.
+
+    var expandedUpdates = {};
+
+    if (prevStyles) {
+      for (var key in prevStyles) {
+        if (prevStyles.hasOwnProperty(key) && !nextStyles.hasOwnProperty(key)) {
+          var longhands = shorthandToLonghand[key] || [key];
+
+          for (var i = 0; i < longhands.length; i++) {
+            expandedUpdates[longhands[i]] = key;
+          }
+        }
+      }
+    }
+
+    for (var _key in nextStyles) {
+      if (
+        nextStyles.hasOwnProperty(_key) &&
+        (!prevStyles || prevStyles[_key] !== nextStyles[_key])
+      ) {
+        var _longhands = shorthandToLonghand[_key] || [_key];
+
+        for (var _i = 0; _i < _longhands.length; _i++) {
+          expandedUpdates[_longhands[_i]] = _key;
+        }
+      }
     }
 
-    var expandedUpdates = expandShorthandMap(styleUpdates);
     var expandedStyles = expandShorthandMap(nextStyles);
     var warnedAbout = {};
 
-    for (var key in expandedUpdates) {
-      var originalKey = expandedUpdates[key];
-      var correctOriginalKey = expandedStyles[key];
+    for (var _key2 in expandedUpdates) {
+      var originalKey = expandedUpdates[_key2];
+      var correctOriginalKey = expandedStyles[_key2];
 
       if (correctOriginalKey && originalKey !== correctOriginalKey) {
         var warningKey = originalKey + "," + correctOriginalKey;
@@ -4990,7 +5054,7 @@ function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) {
             "avoid this, don't mix shorthand and non-shorthand properties " +
             "for the same value; instead, replace the shorthand with " +
             "separate values.",
-          isValueEmpty(styleUpdates[originalKey]) ? "Removing" : "Updating",
+          isValueEmpty(nextStyles[originalKey]) ? "Removing" : "Updating",
           originalKey,
           correctOriginalKey
         );
@@ -7809,11 +7873,13 @@ function prepareToHydrateHostInstance(fiber, hostContext) {
     shouldWarnIfMismatchDev
   ); // TODO: Type this specific to this type of component.
 
-  fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
-  // is a new ref we mark this as an update.
+  if (!diffInCommitPhase) {
+    fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
+    // is a new ref we mark this as an update.
 
-  if (updatePayload !== null) {
-    return true;
+    if (updatePayload !== null) {
+      return true;
+    }
   }
 
   return false;
@@ -21802,29 +21868,34 @@ function updateHostComponent(
       // In mutation mode, this is sufficient for a bailout because
       // we won't touch this node even if children changed.
       return;
-    } // If we get updated because one of our children updated, we don't
-    // have newProps so we'll have to reuse them.
-    // TODO: Split the update API as separate for the props vs. children.
-    // Even better would be if children weren't special cased at all tho.
-
-    var instance = workInProgress.stateNode;
-    var currentHostContext = getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host
-    // component is hitting the resume path. Figure out why. Possibly
-    // related to `hidden`.
-
-    var updatePayload = prepareUpdate(
-      instance,
-      type,
-      oldProps,
-      newProps,
-      currentHostContext
-    ); // TODO: Type this specific to this type of component.
-
-    workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
-    // is a new ref we mark this as an update. All the work is done in commitWork.
+    }
 
-    if (updatePayload) {
+    if (diffInCommitPhase) {
       markUpdate(workInProgress);
+    } else {
+      // If we get updated because one of our children updated, we don't
+      // have newProps so we'll have to reuse them.
+      // TODO: Split the update API as separate for the props vs. children.
+      // Even better would be if children weren't special cased at all tho.
+      var instance = workInProgress.stateNode; // TODO: Experiencing an error where oldProps is null. Suggests a host
+      // component is hitting the resume path. Figure out why. Possibly
+      // related to `hidden`.
+
+      var currentHostContext = getHostContext();
+      var updatePayload = prepareUpdate(
+        instance,
+        type,
+        oldProps,
+        newProps,
+        currentHostContext
+      ); // TODO: Type this specific to this type of component.
+
+      workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
+      // is a new ref we mark this as an update. All the work is done in commitWork.
+
+      if (updatePayload) {
+        markUpdate(workInProgress);
+      }
     }
   }
 } // This function must be called at the very end of the complete phase, because
@@ -25955,7 +26026,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) {
             var _updatePayload = finishedWork.updateQueue;
             finishedWork.updateQueue = null;
 
-            if (_updatePayload !== null) {
+            if (_updatePayload !== null || diffInCommitPhase) {
               try {
                 commitUpdate(
                   _instance2,
@@ -33187,7 +33258,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-77b45d24";
+var ReactVersion = "18.3.0-www-modern-f0a7ed1e";
 
 function createPortal$1(
   children,
@@ -38328,7 +38399,7 @@ function trapClickOnNonInteractiveElement(node) {
 var xlinkNamespace = "http://www.w3.org/1999/xlink";
 var xmlNamespace = "http://www.w3.org/XML/1998/namespace";
 
-function setProp(domElement, tag, key, value, props) {
+function setProp(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "children": {
       if (typeof value === "string") {
@@ -38375,7 +38446,7 @@ function setProp(domElement, tag, key, value, props) {
     }
 
     case "style": {
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     }
     // These attributes accept URLs. These must not allow javascript: URLS.
@@ -38763,6 +38834,20 @@ function setProp(domElement, tag, key, value, props) {
       break;
     // Properties that should not be allowed on custom elements.
 
+    case "is": {
+      {
+        if (prevValue != null) {
+          error('Cannot update the "is" prop after it has been initialized.');
+        }
+      } // TODO: We shouldn't actually set this attribute, because we've already
+      // passed it to createElement. We don't also need the attribute.
+      // However, our tests currently query for it so it's plausible someone
+      // else does too so it's break.
+
+      setValueForAttribute(domElement, "is", value);
+      break;
+    }
+
     case "innerText":
     case "textContent":
       if (enableCustomElementPropertySupport) {
@@ -38792,10 +38877,10 @@ function setProp(domElement, tag, key, value, props) {
   }
 }
 
-function setPropOnCustomElement(domElement, tag, key, value, props) {
+function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "style": {
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     }
 
@@ -38987,7 +39072,7 @@ function setInitialProperties(domElement, tag, props) {
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, propKey, propValue, props);
+            setProp(domElement, tag, propKey, propValue, props, null);
           }
         }
       } // TODO: Make sure we check if this is still unmounted or do any clean
@@ -39026,7 +39111,7 @@ function setInitialProperties(domElement, tag, props) {
           // defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey, _propValue, props);
+            setProp(domElement, tag, _propKey, _propValue, props, null);
           }
         }
       }
@@ -39210,7 +39295,7 @@ function setInitialProperties(domElement, tag, props) {
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey4, _propValue4, props);
+            setProp(domElement, tag, _propKey4, _propValue4, props, null);
           }
         }
       }
@@ -39236,7 +39321,8 @@ function setInitialProperties(domElement, tag, props) {
             tag,
             _propKey5,
             _propValue5,
-            props
+            props,
+            null
           );
         }
 
@@ -39256,7 +39342,7 @@ function setInitialProperties(domElement, tag, props) {
       continue;
     }
 
-    setProp(domElement, tag, _propKey6, _propValue6, props);
+    setProp(domElement, tag, _propKey6, _propValue6, props, null);
   }
 } // Calculate the diff between the two objects.
 
@@ -39373,16 +39459,514 @@ function diffProperties(domElement, tag, lastProps, nextProps) {
 
   if (styleUpdates) {
     {
-      validateShorthandPropertyCollisionInDev(styleUpdates, nextProps.style);
+      validateShorthandPropertyCollisionInDev(lastProps.style, nextProps.style);
     }
 
     (updatePayload = updatePayload || []).push("style", styleUpdates);
   }
 
   return updatePayload;
+}
+function updateProperties(domElement, tag, lastProps, nextProps) {
+  {
+    validatePropertiesInDevelopment(tag, nextProps);
+  }
+
+  switch (tag) {
+    case "div":
+    case "span":
+    case "svg":
+    case "path":
+    case "a":
+    case "g":
+    case "p":
+    case "li": {
+      // Fast track the most common tag types
+      break;
+    }
+
+    case "input": {
+      // 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 (nextProps.type === "radio" && nextProps.name != null) {
+        updateInputChecked(domElement, nextProps);
+      }
+
+      for (var propKey in lastProps) {
+        var lastProp = lastProps[propKey];
+
+        if (
+          lastProps.hasOwnProperty(propKey) &&
+          lastProp != null &&
+          !nextProps.hasOwnProperty(propKey)
+        ) {
+          switch (propKey) {
+            case "checked": {
+              var checked = nextProps.defaultChecked;
+              var inputElement = domElement;
+              inputElement.checked =
+                !!checked &&
+                typeof checked !== "function" &&
+                checked !== "symbol";
+              break;
+            }
+
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+            // defaultChecked and defaultValue are ignored by setProp
+
+            default: {
+              setProp(domElement, tag, propKey, null, nextProps, lastProp);
+            }
+          }
+        }
+      }
+
+      for (var _propKey7 in nextProps) {
+        var nextProp = nextProps[_propKey7];
+        var _lastProp = lastProps[_propKey7];
+
+        if (
+          nextProps.hasOwnProperty(_propKey7) &&
+          nextProp !== _lastProp &&
+          (nextProp != null || _lastProp != null)
+        ) {
+          switch (_propKey7) {
+            case "checked": {
+              var _checked =
+                nextProp != null ? nextProp : nextProps.defaultChecked;
+
+              var _inputElement = domElement;
+              _inputElement.checked =
+                !!_checked &&
+                typeof _checked !== "function" &&
+                _checked !== "symbol";
+              break;
+            }
+
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+
+            case "children":
+            case "dangerouslySetInnerHTML": {
+              if (nextProp != null) {
+                throw new Error(
+                  tag +
+                    " is a void element tag and must neither have `children` nor " +
+                    "use `dangerouslySetInnerHTML`."
+                );
+              }
+
+              break;
+            }
+            // defaultChecked and defaultValue are ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey7,
+                nextProp,
+                nextProps,
+                _lastProp
+              );
+            }
+          }
+        }
+      }
+
+      {
+        var wasControlled =
+          lastProps.type === "checkbox" || lastProps.type === "radio"
+            ? lastProps.checked != null
+            : lastProps.value != null;
+        var isControlled =
+          nextProps.type === "checkbox" || nextProps.type === "radio"
+            ? nextProps.checked != null
+            : nextProps.value != null;
+
+        if (
+          !wasControlled &&
+          isControlled &&
+          !didWarnUncontrolledToControlled
+        ) {
+          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 (
+          wasControlled &&
+          !isControlled &&
+          !didWarnControlledToUncontrolled
+        ) {
+          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;
+        }
+      } // Update the wrapper around inputs *after* updating props. This has to
+      // happen after updating the rest of props. Otherwise HTML5 input validations
+      // raise warnings and prevent the new value from being assigned.
+
+      updateInput(domElement, nextProps);
+      return;
+    }
+
+    case "select": {
+      for (var _propKey8 in lastProps) {
+        var _lastProp2 = lastProps[_propKey8];
+
+        if (
+          lastProps.hasOwnProperty(_propKey8) &&
+          _lastProp2 != null &&
+          !nextProps.hasOwnProperty(_propKey8)
+        ) {
+          switch (_propKey8) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+            // defaultValue are ignored by setProp
+
+            default: {
+              setProp(domElement, tag, _propKey8, null, nextProps, _lastProp2);
+            }
+          }
+        }
+      }
+
+      for (var _propKey9 in nextProps) {
+        var _nextProp = nextProps[_propKey9];
+        var _lastProp3 = lastProps[_propKey9];
+
+        if (
+          nextProps.hasOwnProperty(_propKey9) &&
+          _nextProp !== _lastProp3 &&
+          (_nextProp != null || _lastProp3 != null)
+        ) {
+          switch (_propKey9) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+            // defaultValue are ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey9,
+                _nextProp,
+                nextProps,
+                _lastProp3
+              );
+            }
+          }
+        }
+      } // <select> value update needs to occur after <option> children
+      // reconciliation
+
+      updateSelect(domElement, lastProps, nextProps);
+      return;
+    }
+
+    case "textarea": {
+      for (var _propKey10 in lastProps) {
+        var _lastProp4 = lastProps[_propKey10];
+
+        if (
+          lastProps.hasOwnProperty(_propKey10) &&
+          _lastProp4 != null &&
+          !nextProps.hasOwnProperty(_propKey10)
+        ) {
+          switch (_propKey10) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+
+            case "children": {
+              // TODO: This doesn't actually do anything if it updates.
+              break;
+            }
+            // defaultValue is ignored by setProp
+
+            default: {
+              setProp(domElement, tag, _propKey10, null, nextProps, _lastProp4);
+            }
+          }
+        }
+      }
+
+      for (var _propKey11 in nextProps) {
+        var _nextProp2 = nextProps[_propKey11];
+        var _lastProp5 = lastProps[_propKey11];
+
+        if (
+          nextProps.hasOwnProperty(_propKey11) &&
+          _nextProp2 !== _lastProp5 &&
+          (_nextProp2 != null || _lastProp5 != null)
+        ) {
+          switch (_propKey11) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+
+            case "children": {
+              // TODO: This doesn't actually do anything if it updates.
+              break;
+            }
+
+            case "dangerouslySetInnerHTML": {
+              if (_nextProp2 != null) {
+                // TODO: Do we really need a special error message for this. It's also pretty blunt.
+                throw new Error(
+                  "`dangerouslySetInnerHTML` does not make sense on <textarea>."
+                );
+              }
+
+              break;
+            }
+            // defaultValue is ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey11,
+                _nextProp2,
+                nextProps,
+                _lastProp5
+              );
+            }
+          }
+        }
+      }
+
+      updateTextarea(domElement, nextProps);
+      return;
+    }
+
+    case "option": {
+      for (var _propKey12 in lastProps) {
+        var _lastProp6 = lastProps[_propKey12];
+
+        if (
+          lastProps.hasOwnProperty(_propKey12) &&
+          _lastProp6 != null &&
+          !nextProps.hasOwnProperty(_propKey12)
+        ) {
+          switch (_propKey12) {
+            case "selected": {
+              // TODO: Remove support for selected on option.
+              domElement.selected = false;
+              break;
+            }
+
+            default: {
+              setProp(domElement, tag, _propKey12, null, nextProps, _lastProp6);
+            }
+          }
+        }
+      }
+
+      for (var _propKey13 in nextProps) {
+        var _nextProp3 = nextProps[_propKey13];
+        var _lastProp7 = lastProps[_propKey13];
+
+        if (
+          nextProps.hasOwnProperty(_propKey13) &&
+          _nextProp3 !== _lastProp7 &&
+          (_nextProp3 != null || _lastProp7 != null)
+        ) {
+          switch (_propKey13) {
+            case "selected": {
+              // TODO: Remove support for selected on option.
+              domElement.selected =
+                _nextProp3 &&
+                typeof _nextProp3 !== "function" &&
+                typeof _nextProp3 !== "symbol";
+              break;
+            }
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey13,
+                _nextProp3,
+                nextProps,
+                _lastProp7
+              );
+            }
+          }
+        }
+      }
+
+      return;
+    }
+
+    case "img":
+    case "link":
+    case "area":
+    case "base":
+    case "br":
+    case "col":
+    case "embed":
+    case "hr":
+    case "keygen":
+    case "meta":
+    case "param":
+    case "source":
+    case "track":
+    case "wbr":
+    case "menuitem": {
+      // Void elements
+      for (var _propKey14 in lastProps) {
+        var _lastProp8 = lastProps[_propKey14];
+
+        if (
+          lastProps.hasOwnProperty(_propKey14) &&
+          _lastProp8 != null &&
+          !nextProps.hasOwnProperty(_propKey14)
+        ) {
+          setProp(domElement, tag, _propKey14, null, nextProps, _lastProp8);
+        }
+      }
+
+      for (var _propKey15 in nextProps) {
+        var _nextProp4 = nextProps[_propKey15];
+        var _lastProp9 = lastProps[_propKey15];
+
+        if (
+          nextProps.hasOwnProperty(_propKey15) &&
+          _nextProp4 !== _lastProp9 &&
+          (_nextProp4 != null || _lastProp9 != null)
+        ) {
+          switch (_propKey15) {
+            case "children":
+            case "dangerouslySetInnerHTML": {
+              if (_nextProp4 != null) {
+                // TODO: Can we make this a DEV warning to avoid this deny list?
+                throw new Error(
+                  tag +
+                    " is a void element tag and must neither have `children` nor " +
+                    "use `dangerouslySetInnerHTML`."
+                );
+              }
+
+              break;
+            }
+            // defaultChecked and defaultValue are ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey15,
+                _nextProp4,
+                nextProps,
+                _lastProp9
+              );
+            }
+          }
+        }
+      }
+
+      return;
+    }
+
+    default: {
+      if (isCustomElement(tag)) {
+        for (var _propKey16 in lastProps) {
+          var _lastProp10 = lastProps[_propKey16];
+
+          if (
+            lastProps.hasOwnProperty(_propKey16) &&
+            _lastProp10 != null &&
+            !nextProps.hasOwnProperty(_propKey16)
+          ) {
+            setPropOnCustomElement(
+              domElement,
+              tag,
+              _propKey16,
+              null,
+              nextProps,
+              _lastProp10
+            );
+          }
+        }
+
+        for (var _propKey17 in nextProps) {
+          var _nextProp5 = nextProps[_propKey17];
+          var _lastProp11 = lastProps[_propKey17];
+
+          if (
+            nextProps.hasOwnProperty(_propKey17) &&
+            _nextProp5 !== _lastProp11 &&
+            (_nextProp5 != null || _lastProp11 != null)
+          ) {
+            setPropOnCustomElement(
+              domElement,
+              tag,
+              _propKey17,
+              _nextProp5,
+              nextProps,
+              _lastProp11
+            );
+          }
+        }
+
+        return;
+      }
+    }
+  }
+
+  for (var _propKey18 in lastProps) {
+    var _lastProp12 = lastProps[_propKey18];
+
+    if (
+      lastProps.hasOwnProperty(_propKey18) &&
+      _lastProp12 != null &&
+      !nextProps.hasOwnProperty(_propKey18)
+    ) {
+      setProp(domElement, tag, _propKey18, null, nextProps, _lastProp12);
+    }
+  }
+
+  for (var _propKey19 in nextProps) {
+    var _nextProp6 = nextProps[_propKey19];
+    var _lastProp13 = lastProps[_propKey19];
+
+    if (
+      nextProps.hasOwnProperty(_propKey19) &&
+      _nextProp6 !== _lastProp13 &&
+      (_nextProp6 != null || _lastProp13 != null)
+    ) {
+      setProp(domElement, tag, _propKey19, _nextProp6, nextProps, _lastProp13);
+    }
+  }
 } // Apply the diff.
 
-function updateProperties(
+function updatePropertiesWithDiff(
   domElement,
   updatePayload,
   tag,
@@ -39446,7 +40030,7 @@ function updateProperties(
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
           }
         }
       }
@@ -39502,10 +40086,10 @@ function updateProperties(
 
     case "select": {
       for (var _i = 0; _i < updatePayload.length; _i += 2) {
-        var _propKey7 = updatePayload[_i];
+        var _propKey20 = updatePayload[_i];
         var _propValue7 = updatePayload[_i + 1];
 
-        switch (_propKey7) {
+        switch (_propKey20) {
           case "value": {
             // This is handled by updateWrapper below.
             break;
@@ -39513,7 +40097,7 @@ function updateProperties(
           // defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey7, _propValue7, nextProps);
+            setProp(domElement, tag, _propKey20, _propValue7, nextProps, null);
           }
         }
       } // <select> value update needs to occur after <option> children
@@ -39525,10 +40109,10 @@ function updateProperties(
 
     case "textarea": {
       for (var _i2 = 0; _i2 < updatePayload.length; _i2 += 2) {
-        var _propKey8 = updatePayload[_i2];
+        var _propKey21 = updatePayload[_i2];
         var _propValue8 = updatePayload[_i2 + 1];
 
-        switch (_propKey8) {
+        switch (_propKey21) {
           case "value": {
             // This is handled by updateWrapper below.
             break;
@@ -39552,7 +40136,7 @@ function updateProperties(
           // defaultValue is ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey8, _propValue8, nextProps);
+            setProp(domElement, tag, _propKey21, _propValue8, nextProps, null);
           }
         }
       }
@@ -39563,10 +40147,10 @@ function updateProperties(
 
     case "option": {
       for (var _i3 = 0; _i3 < updatePayload.length; _i3 += 2) {
-        var _propKey9 = updatePayload[_i3];
+        var _propKey22 = updatePayload[_i3];
         var _propValue9 = updatePayload[_i3 + 1];
 
-        switch (_propKey9) {
+        switch (_propKey22) {
           case "selected": {
             // TODO: Remove support for selected on option.
             domElement.selected =
@@ -39577,7 +40161,7 @@ function updateProperties(
           }
 
           default: {
-            setProp(domElement, tag, _propKey9, _propValue9, nextProps);
+            setProp(domElement, tag, _propKey22, _propValue9, nextProps, null);
           }
         }
       }
@@ -39602,10 +40186,10 @@ function updateProperties(
     case "menuitem": {
       // Void elements
       for (var _i4 = 0; _i4 < updatePayload.length; _i4 += 2) {
-        var _propKey10 = updatePayload[_i4];
+        var _propKey23 = updatePayload[_i4];
         var _propValue10 = updatePayload[_i4 + 1];
 
-        switch (_propKey10) {
+        switch (_propKey23) {
           case "children":
           case "dangerouslySetInnerHTML": {
             if (_propValue10 != null) {
@@ -39622,7 +40206,7 @@ function updateProperties(
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey10, _propValue10, nextProps);
+            setProp(domElement, tag, _propKey23, _propValue10, nextProps, null);
           }
         }
       }
@@ -39633,14 +40217,15 @@ function updateProperties(
     default: {
       if (isCustomElement(tag)) {
         for (var _i5 = 0; _i5 < updatePayload.length; _i5 += 2) {
-          var _propKey11 = updatePayload[_i5];
+          var _propKey24 = updatePayload[_i5];
           var _propValue11 = updatePayload[_i5 + 1];
           setPropOnCustomElement(
             domElement,
             tag,
-            _propKey11,
+            _propKey24,
             _propValue11,
-            nextProps
+            nextProps,
+            null
           );
         }
 
@@ -39650,9 +40235,9 @@ function updateProperties(
   } // Apply the diff.
 
   for (var _i6 = 0; _i6 < updatePayload.length; _i6 += 2) {
-    var _propKey12 = updatePayload[_i6];
+    var _propKey25 = updatePayload[_i6];
     var _propValue12 = updatePayload[_i6 + 1];
-    setProp(domElement, tag, _propKey12, _propValue12, nextProps);
+    setProp(domElement, tag, _propKey25, _propValue12, nextProps, null);
   }
 }
 
@@ -40699,7 +41284,18 @@ function diffHydratedProperties(
       }
 
       if (!isConcurrentMode || !enableClientRenderFallbackOnTextMismatch) {
-        updatePayload = ["children", children];
+        if (diffInCommitPhase) {
+          // We really should be patching this in the commit phase but since
+          // this only affects legacy mode hydration which is deprecated anyway
+          // we can get away with it.
+          // Host singletons get their children appended and don't use the text
+          // content mechanism.
+          if (tag !== "body") {
+            domElement.textContent = children;
+          }
+        } else {
+          updatePayload = ["children", children];
+        }
       }
     }
   }
@@ -41822,6 +42418,11 @@ function finalizeInitialChildren(domElement, type, props, hostContext) {
   }
 }
 function prepareUpdate(domElement, type, oldProps, newProps, hostContext) {
+  if (diffInCommitPhase) {
+    // TODO: Figure out how to validateDOMNesting when children turn into a string.
+    return null;
+  }
+
   {
     var hostContextDev = hostContext;
 
@@ -41958,8 +42559,19 @@ function commitUpdate(
   newProps,
   internalInstanceHandle
 ) {
-  // Apply the diff to the DOM node.
-  updateProperties(domElement, updatePayload, type, oldProps, newProps); // Update the props handle so that we know which props are the ones with
+  if (diffInCommitPhase) {
+    // Diff and update the properties.
+    updateProperties(domElement, type, oldProps, newProps);
+  } else {
+    // Apply the diff to the DOM node.
+    updatePropertiesWithDiff(
+      domElement,
+      updatePayload,
+      type,
+      oldProps,
+      newProps
+    );
+  } // Update the props handle so that we know which props are the ones with
   // with current event handlers.
 
   updateFiberProps(domElement, newProps);
diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
index 9634b115479b5..70c7a065cdf33 100644
--- a/compiled/facebook-www/ReactDOM-prod.classic.js
+++ b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -55,6 +55,7 @@ var ReactSharedInternals =
     dynamicFeatureFlags.enableCustomElementPropertySupport,
   enableDeferRootSchedulingToMicrotask =
     dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask,
+  diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase,
   REACT_ELEMENT_TYPE = Symbol.for("react.element"),
   REACT_PORTAL_TYPE = Symbol.for("react.portal"),
   REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
@@ -1079,6 +1080,21 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
     null !== multiple && (multiple.selected = !0);
   }
 }
+function updateSelect(element, prevProps, props) {
+  prevProps = !!prevProps.multiple;
+  var value = props.value;
+  null != value
+    ? updateOptions(element, !!props.multiple, value, !1)
+    : prevProps !== !!props.multiple &&
+      (null != props.defaultValue
+        ? updateOptions(element, !!props.multiple, props.defaultValue, !0)
+        : updateOptions(
+            element,
+            !!props.multiple,
+            props.multiple ? [] : "",
+            !1
+          ));
+}
 function updateTextarea(element, props) {
   var value = getToStringValue(props.value);
   if (
@@ -1181,30 +1197,44 @@ var unitlessNumbers = new Set(
     " "
   )
 );
-function setValueForStyles(node, styles) {
+function setValueForStyle(style, styleName, value) {
+  var isCustomProperty = 0 === styleName.indexOf("--");
+  null == value || "boolean" === typeof value || "" === value
+    ? isCustomProperty
+      ? style.setProperty(styleName, "")
+      : "float" === styleName
+      ? (style.cssFloat = "")
+      : (style[styleName] = "")
+    : isCustomProperty
+    ? style.setProperty(styleName, value)
+    : "number" !== typeof value || 0 === value || unitlessNumbers.has(styleName)
+    ? "float" === styleName
+      ? (style.cssFloat = value)
+      : (style[styleName] = ("" + value).trim())
+    : (style[styleName] = value + "px");
+}
+function setValueForStyles(node, styles, prevStyles) {
   if (null != styles && "object" !== typeof styles)
     throw Error(formatProdErrorMessage(62));
   node = node.style;
-  for (var styleName in styles)
-    if (styles.hasOwnProperty(styleName)) {
-      var value = styles[styleName],
-        isCustomProperty = 0 === styleName.indexOf("--");
-      null == value || "boolean" === typeof value || "" === value
-        ? isCustomProperty
+  if (diffInCommitPhase && null != prevStyles) {
+    for (var styleName in prevStyles)
+      !prevStyles.hasOwnProperty(styleName) ||
+        (null != styles && styles.hasOwnProperty(styleName)) ||
+        (0 === styleName.indexOf("--")
           ? node.setProperty(styleName, "")
           : "float" === styleName
           ? (node.cssFloat = "")
-          : (node[styleName] = "")
-        : isCustomProperty
-        ? node.setProperty(styleName, value)
-        : "number" !== typeof value ||
-          0 === value ||
-          unitlessNumbers.has(styleName)
-        ? "float" === styleName
-          ? (node.cssFloat = value)
-          : (node[styleName] = ("" + value).trim())
-        : (node[styleName] = value + "px");
-    }
+          : (node[styleName] = ""));
+    for (var styleName$16 in styles)
+      (styleName = styles[styleName$16]),
+        styles.hasOwnProperty(styleName$16) &&
+          prevStyles[styleName$16] !== styleName &&
+          setValueForStyle(node, styleName$16, styleName);
+  } else
+    for (var styleName$17 in styles)
+      styles.hasOwnProperty(styleName$17) &&
+        setValueForStyle(node, styleName$17, styles[styleName$17]);
 }
 function isCustomElement(tagName) {
   if (-1 === tagName.indexOf("-")) return !1;
@@ -1640,8 +1670,8 @@ function prepareToHydrateHostInstance(fiber) {
       break;
     case "video":
     case "audio":
-      for (type = 0; type < mediaEventTypes.length; type++)
-        listenToNonDelegatedEvent(mediaEventTypes[type], instance);
+      for (var i = 0; i < mediaEventTypes.length; i++)
+        listenToNonDelegatedEvent(mediaEventTypes[i], instance);
       break;
     case "source":
       listenToNonDelegatedEvent("error", instance);
@@ -1668,20 +1698,28 @@ function prepareToHydrateHostInstance(fiber) {
         track(instance),
         initTextarea(instance, props);
   }
-  var updatePayload = null;
-  type = props.children;
-  ("string" !== typeof type && "number" !== typeof type) ||
-    instance.textContent === "" + type ||
-    (!0 !== props.suppressHydrationWarning &&
-      ((updatePayload = instance.textContent),
-      normalizeMarkupForTextOrAttribute(type),
-      normalizeMarkupForTextOrAttribute(updatePayload)),
-    (updatePayload = ["children", type]));
+  i = null;
+  var children = props.children;
+  if (
+    ("string" === typeof children || "number" === typeof children) &&
+    instance.textContent !== "" + children
+  ) {
+    if (!0 !== props.suppressHydrationWarning) {
+      var serverText = instance.textContent;
+      normalizeMarkupForTextOrAttribute(children);
+      normalizeMarkupForTextOrAttribute(serverText);
+    }
+    diffInCommitPhase
+      ? "body" !== type && (instance.textContent = children)
+      : (i = ["children", children]);
+  }
   null != props.onScroll && listenToNonDelegatedEvent("scroll", instance);
   null != props.onClick && (instance.onclick = noop$1);
-  instance = updatePayload;
-  fiber.updateQueue = instance;
-  return null !== instance ? !0 : !1;
+  instance = i;
+  return diffInCommitPhase ||
+    ((fiber.updateQueue = instance), null === instance)
+    ? !1
+    : !0;
 }
 function popToNextHostParent(fiber) {
   for (hydrationParentFiber = fiber.return; hydrationParentFiber; )
@@ -3156,10 +3194,10 @@ createFunctionComponentUpdateQueue = function () {
 function use(usable) {
   if (null !== usable && "object" === typeof usable) {
     if ("function" === typeof usable.then) {
-      var index$41 = thenableIndexCounter;
+      var index$44 = thenableIndexCounter;
       thenableIndexCounter += 1;
       null === thenableState && (thenableState = []);
-      usable = trackUsedThenable(thenableState, usable, index$41);
+      usable = trackUsedThenable(thenableState, usable, index$44);
       null === currentlyRenderingFiber$1.alternate &&
         (null === workInProgressHook
           ? null === currentlyRenderingFiber$1.memoizedState
@@ -3647,16 +3685,16 @@ function refreshCache(fiber, seedKey, seedValue) {
       case 3:
         var lane = requestUpdateLane(provider);
         fiber = createUpdate(lane);
-        var root$47 = enqueueUpdate(provider, fiber, lane);
-        if (null !== root$47) {
+        var root$50 = enqueueUpdate(provider, fiber, lane);
+        if (null !== root$50) {
           var eventTime = requestEventTime();
-          scheduleUpdateOnFiber(root$47, provider, lane, eventTime);
-          entangleTransitions(root$47, provider, lane);
+          scheduleUpdateOnFiber(root$50, provider, lane, eventTime);
+          entangleTransitions(root$50, provider, lane);
         }
         provider = createCache();
         null !== seedKey &&
           void 0 !== seedKey &&
-          null !== root$47 &&
+          null !== root$50 &&
           provider.data.set(seedKey, seedValue);
         fiber.payload = { cache: provider };
         return;
@@ -3863,15 +3901,15 @@ var HooksDispatcherOnMount = {
       getServerSnapshot = getServerSnapshot();
     } else {
       getServerSnapshot = getSnapshot();
-      var root$43 = workInProgressRoot;
-      if (null === root$43) throw Error(formatProdErrorMessage(349));
-      includesBlockingLane(root$43, renderLanes$1) ||
+      var root$46 = workInProgressRoot;
+      if (null === root$46) throw Error(formatProdErrorMessage(349));
+      includesBlockingLane(root$46, renderLanes$1) ||
         pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot);
     }
     hook.memoizedState = getServerSnapshot;
-    root$43 = { value: getServerSnapshot, getSnapshot: getSnapshot };
-    hook.queue = root$43;
-    mountEffect(subscribeToStore.bind(null, fiber, root$43, subscribe), [
+    root$46 = { value: getServerSnapshot, getSnapshot: getSnapshot };
+    hook.queue = root$46;
+    mountEffect(subscribeToStore.bind(null, fiber, root$46, subscribe), [
       subscribe
     ]);
     fiber.flags |= 2048;
@@ -3880,7 +3918,7 @@ var HooksDispatcherOnMount = {
       updateStoreInstance.bind(
         null,
         fiber,
-        root$43,
+        root$46,
         getServerSnapshot,
         getSnapshot
       ),
@@ -4379,10 +4417,10 @@ var markerInstanceStack = createCursor(null);
 function pushRootMarkerInstance(workInProgress) {
   if (enableTransitionTracing) {
     var transitions = workInProgressTransitions,
-      root$58 = workInProgress.stateNode;
+      root$61 = workInProgress.stateNode;
     null !== transitions &&
       transitions.forEach(function (transition) {
-        if (!root$58.incompleteTransitions.has(transition)) {
+        if (!root$61.incompleteTransitions.has(transition)) {
           var markerInstance = {
             tag: 0,
             transitions: new Set([transition]),
@@ -4390,11 +4428,11 @@ function pushRootMarkerInstance(workInProgress) {
             aborts: null,
             name: null
           };
-          root$58.incompleteTransitions.set(transition, markerInstance);
+          root$61.incompleteTransitions.set(transition, markerInstance);
         }
       });
     var markerInstances = [];
-    root$58.incompleteTransitions.forEach(function (markerInstance) {
+    root$61.incompleteTransitions.forEach(function (markerInstance) {
       markerInstances.push(markerInstance);
     });
     push(markerInstanceStack, markerInstances);
@@ -5091,14 +5129,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   }
   JSCompiler_temp = current.memoizedState;
   if (null !== JSCompiler_temp) {
-    var dehydrated$65 = JSCompiler_temp.dehydrated;
-    if (null !== dehydrated$65)
+    var dehydrated$68 = JSCompiler_temp.dehydrated;
+    if (null !== dehydrated$68)
       return updateDehydratedSuspenseComponent(
         current,
         workInProgress,
         didSuspend,
         nextProps,
-        dehydrated$65,
+        dehydrated$68,
         JSCompiler_temp,
         renderLanes
       );
@@ -5108,7 +5146,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
     showFallback = nextProps.fallback;
     didSuspend = workInProgress.mode;
     JSCompiler_temp = current.child;
-    dehydrated$65 = JSCompiler_temp.sibling;
+    dehydrated$68 = JSCompiler_temp.sibling;
     var primaryChildProps = { mode: "hidden", children: nextProps.children };
     0 === (didSuspend & 1) && workInProgress.child !== JSCompiler_temp
       ? ((nextProps = workInProgress.child),
@@ -5117,8 +5155,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         (workInProgress.deletions = null))
       : ((nextProps = createWorkInProgress(JSCompiler_temp, primaryChildProps)),
         (nextProps.subtreeFlags = JSCompiler_temp.subtreeFlags & 31457280));
-    null !== dehydrated$65
-      ? (showFallback = createWorkInProgress(dehydrated$65, showFallback))
+    null !== dehydrated$68
+      ? (showFallback = createWorkInProgress(dehydrated$68, showFallback))
       : ((showFallback = createFiberFromFragment(
           showFallback,
           didSuspend,
@@ -5137,10 +5175,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       ? (didSuspend = mountSuspenseOffscreenState(renderLanes))
       : ((JSCompiler_temp = didSuspend.cachePool),
         null !== JSCompiler_temp
-          ? ((dehydrated$65 = CacheContext._currentValue),
+          ? ((dehydrated$68 = CacheContext._currentValue),
             (JSCompiler_temp =
-              JSCompiler_temp.parent !== dehydrated$65
-                ? { parent: dehydrated$65, pool: dehydrated$65 }
+              JSCompiler_temp.parent !== dehydrated$68
+                ? { parent: dehydrated$68, pool: dehydrated$68 }
                 : JSCompiler_temp))
           : (JSCompiler_temp = getSuspendedCache()),
         (didSuspend = {
@@ -5154,23 +5192,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         ((JSCompiler_temp = enableTransitionTracing
           ? markerInstanceStack.current
           : null),
-        (dehydrated$65 = showFallback.updateQueue),
+        (dehydrated$68 = showFallback.updateQueue),
         (primaryChildProps = current.updateQueue),
-        null === dehydrated$65
+        null === dehydrated$68
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue: null
             })
-          : dehydrated$65 === primaryChildProps
+          : dehydrated$68 === primaryChildProps
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue:
                 null !== primaryChildProps ? primaryChildProps.retryQueue : null
             })
-          : ((dehydrated$65.transitions = didSuspend),
-            (dehydrated$65.markerInstances = JSCompiler_temp))));
+          : ((dehydrated$68.transitions = didSuspend),
+            (dehydrated$68.markerInstances = JSCompiler_temp))));
     showFallback.childLanes = current.childLanes & ~renderLanes;
     workInProgress.memoizedState = SUSPENDED_MARKER;
     return nextProps;
@@ -6133,62 +6171,67 @@ function markRef(workInProgress) {
 }
 function updateHostComponent(current, workInProgress, type, newProps) {
   current = current.memoizedProps;
-  if (current !== newProps) {
-    type = null;
-    var propKey,
-      styleName,
-      styleUpdates = null;
-    for (propKey in current)
-      if (
-        !newProps.hasOwnProperty(propKey) &&
-        current.hasOwnProperty(propKey) &&
-        null != current[propKey]
-      )
-        switch (propKey) {
-          case "style":
-            var lastStyle = current[propKey];
-            for (styleName in lastStyle)
-              lastStyle.hasOwnProperty(styleName) &&
-                (styleUpdates || (styleUpdates = {}),
-                (styleUpdates[styleName] = ""));
-            break;
-          default:
-            (type = type || []).push(propKey, null);
-        }
-    for (propKey in newProps) {
-      lastStyle = newProps[propKey];
-      var lastProp = null != current ? current[propKey] : void 0;
-      if (
-        newProps.hasOwnProperty(propKey) &&
-        lastStyle !== lastProp &&
-        (null != lastStyle || null != lastProp)
-      )
-        switch (propKey) {
-          case "style":
-            if (lastProp) {
-              for (styleName in lastProp)
-                !lastProp.hasOwnProperty(styleName) ||
-                  (lastStyle && lastStyle.hasOwnProperty(styleName)) ||
-                  (styleUpdates || (styleUpdates = {}),
-                  (styleUpdates[styleName] = ""));
-              for (styleName in lastStyle)
-                lastStyle.hasOwnProperty(styleName) &&
-                  lastProp[styleName] !== lastStyle[styleName] &&
-                  (styleUpdates || (styleUpdates = {}),
-                  (styleUpdates[styleName] = lastStyle[styleName]));
-            } else
-              styleUpdates ||
-                (type || (type = []), type.push(propKey, styleUpdates)),
-                (styleUpdates = lastStyle);
-            break;
-          default:
-            (type = type || []).push(propKey, lastStyle);
+  if (current !== newProps)
+    if (diffInCommitPhase) markUpdate(workInProgress);
+    else {
+      if (diffInCommitPhase) newProps = null;
+      else {
+        type = null;
+        var propKey,
+          styleName,
+          styleUpdates = null;
+        for (propKey in current)
+          if (
+            !newProps.hasOwnProperty(propKey) &&
+            current.hasOwnProperty(propKey) &&
+            null != current[propKey]
+          )
+            switch (propKey) {
+              case "style":
+                var lastStyle = current[propKey];
+                for (styleName in lastStyle)
+                  lastStyle.hasOwnProperty(styleName) &&
+                    (styleUpdates || (styleUpdates = {}),
+                    (styleUpdates[styleName] = ""));
+                break;
+              default:
+                (type = type || []).push(propKey, null);
+            }
+        for (propKey in newProps) {
+          lastStyle = newProps[propKey];
+          var lastProp = null != current ? current[propKey] : void 0;
+          if (
+            newProps.hasOwnProperty(propKey) &&
+            lastStyle !== lastProp &&
+            (null != lastStyle || null != lastProp)
+          )
+            switch (propKey) {
+              case "style":
+                if (lastProp) {
+                  for (styleName in lastProp)
+                    !lastProp.hasOwnProperty(styleName) ||
+                      (lastStyle && lastStyle.hasOwnProperty(styleName)) ||
+                      (styleUpdates || (styleUpdates = {}),
+                      (styleUpdates[styleName] = ""));
+                  for (styleName in lastStyle)
+                    lastStyle.hasOwnProperty(styleName) &&
+                      lastProp[styleName] !== lastStyle[styleName] &&
+                      (styleUpdates || (styleUpdates = {}),
+                      (styleUpdates[styleName] = lastStyle[styleName]));
+                } else
+                  styleUpdates ||
+                    (type || (type = []), type.push(propKey, styleUpdates)),
+                    (styleUpdates = lastStyle);
+                break;
+              default:
+                (type = type || []).push(propKey, lastStyle);
+            }
         }
+        styleUpdates && (type = type || []).push("style", styleUpdates);
+        newProps = type;
+      }
+      (workInProgress.updateQueue = newProps) && markUpdate(workInProgress);
     }
-    styleUpdates && (type = type || []).push("style", styleUpdates);
-    newProps = type;
-    (workInProgress.updateQueue = newProps) && markUpdate(workInProgress);
-  }
 }
 function preloadResourceAndSuspendIfNeeded(workInProgress, resource) {
   if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4))
@@ -6232,14 +6275,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) {
         break;
       case "collapsed":
         lastTailNode = renderState.tail;
-        for (var lastTailNode$96 = null; null !== lastTailNode; )
-          null !== lastTailNode.alternate && (lastTailNode$96 = lastTailNode),
+        for (var lastTailNode$99 = null; null !== lastTailNode; )
+          null !== lastTailNode.alternate && (lastTailNode$99 = lastTailNode),
             (lastTailNode = lastTailNode.sibling);
-        null === lastTailNode$96
+        null === lastTailNode$99
           ? hasRenderedATailFallback || null === renderState.tail
             ? (renderState.tail = null)
             : (renderState.tail.sibling = null)
-          : (lastTailNode$96.sibling = null);
+          : (lastTailNode$99.sibling = null);
     }
 }
 function bubbleProperties(completedWork) {
@@ -6249,19 +6292,19 @@ function bubbleProperties(completedWork) {
     newChildLanes = 0,
     subtreeFlags = 0;
   if (didBailout)
-    for (var child$97 = completedWork.child; null !== child$97; )
-      (newChildLanes |= child$97.lanes | child$97.childLanes),
-        (subtreeFlags |= child$97.subtreeFlags & 31457280),
-        (subtreeFlags |= child$97.flags & 31457280),
-        (child$97.return = completedWork),
-        (child$97 = child$97.sibling);
+    for (var child$100 = completedWork.child; null !== child$100; )
+      (newChildLanes |= child$100.lanes | child$100.childLanes),
+        (subtreeFlags |= child$100.subtreeFlags & 31457280),
+        (subtreeFlags |= child$100.flags & 31457280),
+        (child$100.return = completedWork),
+        (child$100 = child$100.sibling);
   else
-    for (child$97 = completedWork.child; null !== child$97; )
-      (newChildLanes |= child$97.lanes | child$97.childLanes),
-        (subtreeFlags |= child$97.subtreeFlags),
-        (subtreeFlags |= child$97.flags),
-        (child$97.return = completedWork),
-        (child$97 = child$97.sibling);
+    for (child$100 = completedWork.child; null !== child$100; )
+      (newChildLanes |= child$100.lanes | child$100.childLanes),
+        (subtreeFlags |= child$100.subtreeFlags),
+        (subtreeFlags |= child$100.flags),
+        (child$100.return = completedWork),
+        (child$100 = child$100.sibling);
   completedWork.subtreeFlags |= subtreeFlags;
   completedWork.childLanes = newChildLanes;
   return didBailout;
@@ -6999,8 +7042,8 @@ function safelyDetachRef(current, nearestMountedAncestor) {
     else if ("function" === typeof ref)
       try {
         ref(null);
-      } catch (error$127) {
-        captureCommitPhaseError(current, nearestMountedAncestor, error$127);
+      } catch (error$130) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error$130);
       }
     else ref.current = null;
 }
@@ -7037,7 +7080,7 @@ function commitBeforeMutationEffects(root, firstChild) {
           selection = selection.focusOffset;
           try {
             JSCompiler_temp.nodeType, focusNode.nodeType;
-          } catch (e$186) {
+          } catch (e$189) {
             JSCompiler_temp = null;
             break a;
           }
@@ -7303,11 +7346,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
               current,
               finishedRoot.__reactInternalSnapshotBeforeUpdate
             );
-          } catch (error$129) {
+          } catch (error$132) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$129
+              error$132
             );
           }
         }
@@ -7987,8 +8030,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         }
         try {
           commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-        } catch (error$142) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$142);
+        } catch (error$145) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$145);
         }
       }
       break;
@@ -8157,20 +8200,24 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         )
           try {
             var domElement = finishedWork.stateNode,
+              type = finishedWork.type,
+              oldProps = current.memoizedProps,
               newProps = finishedWork.memoizedProps;
-            updateProperties(
-              domElement,
-              flags,
-              finishedWork.type,
-              current.memoizedProps,
-              newProps
-            );
+            diffInCommitPhase
+              ? updateProperties(domElement, type, oldProps, newProps)
+              : updatePropertiesWithDiff(
+                  domElement,
+                  flags,
+                  type,
+                  oldProps,
+                  newProps
+                );
             domElement[internalPropsKey] = newProps;
-          } catch (error$143) {
+          } catch (error$146) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$143
+              error$146
             );
           }
       break;
@@ -8206,8 +8253,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         root = finishedWork.stateNode;
         try {
           setTextContent(root, "");
-        } catch (error$144) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$144);
+        } catch (error$147) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$147);
         }
       }
       if (
@@ -8219,13 +8266,21 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
           (hoistableRoot = finishedWork.type),
           (maybeNodes = finishedWork.updateQueue),
           (finishedWork.updateQueue = null),
-          null !== maybeNodes))
+          null !== maybeNodes || diffInCommitPhase))
       )
         try {
-          updateProperties(flags, maybeNodes, hoistableRoot, current, root),
+          diffInCommitPhase
+            ? updateProperties(flags, hoistableRoot, current, root)
+            : updatePropertiesWithDiff(
+                flags,
+                maybeNodes,
+                hoistableRoot,
+                current,
+                root
+              ),
             (flags[internalPropsKey] = root);
-        } catch (error$147) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$147);
+        } catch (error$150) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$150);
         }
       break;
     case 6:
@@ -8238,8 +8293,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         flags = finishedWork.memoizedProps;
         try {
           current.nodeValue = flags;
-        } catch (error$148) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$148);
+        } catch (error$151) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$151);
         }
       }
       break;
@@ -8253,8 +8308,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
       if (flags & 4 && null !== current && current.memoizedState.isDehydrated)
         try {
           retryIfBlockedOn(root.containerInfo);
-        } catch (error$149) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$149);
+        } catch (error$152) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$152);
         }
       break;
     case 4:
@@ -8284,8 +8339,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               null !== retryQueue && suspenseCallback(new Set(retryQueue));
             }
           }
-        } catch (error$151) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$151);
+        } catch (error$154) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$154);
         }
         current = finishedWork.updateQueue;
         null !== current &&
@@ -8298,15 +8353,15 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         null !== current &&
         safelyDetachRef(current, current.return);
       domElement = null !== finishedWork.memoizedState;
-      newProps = null !== current && null !== current.memoizedState;
+      type = null !== current && null !== current.memoizedState;
       finishedWork.mode & 1
-        ? ((suspenseCallback = offscreenSubtreeIsHidden),
-          (retryQueue = offscreenSubtreeWasHidden),
-          (offscreenSubtreeIsHidden = suspenseCallback || domElement),
-          (offscreenSubtreeWasHidden = retryQueue || newProps),
+        ? ((oldProps = offscreenSubtreeIsHidden),
+          (newProps = offscreenSubtreeWasHidden),
+          (offscreenSubtreeIsHidden = oldProps || domElement),
+          (offscreenSubtreeWasHidden = newProps || type),
           recursivelyTraverseMutationEffects(root, finishedWork),
-          (offscreenSubtreeWasHidden = retryQueue),
-          (offscreenSubtreeIsHidden = suspenseCallback))
+          (offscreenSubtreeWasHidden = newProps),
+          (offscreenSubtreeIsHidden = oldProps))
         : recursivelyTraverseMutationEffects(root, finishedWork);
       commitReconciliationEffects(finishedWork);
       root = finishedWork.stateNode;
@@ -8321,7 +8376,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         domElement &&
           ((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden),
           null === current ||
-            newProps ||
+            type ||
             root ||
             (0 !== (finishedWork.mode & 1) &&
               recursivelyTraverseDisappearLayoutEffects(finishedWork))),
@@ -8363,11 +8418,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
             if (null === current)
               try {
                 root.stateNode.nodeValue = domElement ? "" : root.memoizedProps;
-              } catch (error$132) {
+              } catch (error$135) {
                 captureCommitPhaseError(
                   finishedWork,
                   finishedWork.return,
-                  error$132
+                  error$135
                 );
               }
           } else if (
@@ -8442,21 +8497,21 @@ function commitReconciliationEffects(finishedWork) {
             insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0);
             break;
           case 5:
-            var parent$133 = JSCompiler_inline_result.stateNode;
+            var parent$136 = JSCompiler_inline_result.stateNode;
             JSCompiler_inline_result.flags & 32 &&
-              (setTextContent(parent$133, ""),
+              (setTextContent(parent$136, ""),
               (JSCompiler_inline_result.flags &= -33));
-            var before$134 = getHostSibling(finishedWork);
-            insertOrAppendPlacementNode(finishedWork, before$134, parent$133);
+            var before$137 = getHostSibling(finishedWork);
+            insertOrAppendPlacementNode(finishedWork, before$137, parent$136);
             break;
           case 3:
           case 4:
-            var parent$135 = JSCompiler_inline_result.stateNode.containerInfo,
-              before$136 = getHostSibling(finishedWork);
+            var parent$138 = JSCompiler_inline_result.stateNode.containerInfo,
+              before$139 = getHostSibling(finishedWork);
             insertOrAppendPlacementNodeIntoContainer(
               finishedWork,
-              before$136,
-              parent$135
+              before$139,
+              parent$138
             );
             break;
           default:
@@ -8926,9 +8981,9 @@ function recursivelyTraverseReconnectPassiveEffects(
           );
         break;
       case 22:
-        var instance$161 = finishedWork.stateNode;
+        var instance$164 = finishedWork.stateNode;
         null !== finishedWork.memoizedState
-          ? instance$161._visibility & 4
+          ? instance$164._visibility & 4
             ? recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -8941,7 +8996,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork
               )
-            : ((instance$161._visibility |= 4),
+            : ((instance$164._visibility |= 4),
               recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -8949,7 +9004,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 committedTransitions,
                 includeWorkInProgressEffects
               ))
-          : ((instance$161._visibility |= 4),
+          : ((instance$164._visibility |= 4),
             recursivelyTraverseReconnectPassiveEffects(
               finishedRoot,
               finishedWork,
@@ -8962,7 +9017,7 @@ function recursivelyTraverseReconnectPassiveEffects(
           commitOffscreenPassiveMountEffects(
             finishedWork.alternate,
             finishedWork,
-            instance$161
+            instance$164
           );
         break;
       case 24:
@@ -9317,13 +9372,13 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
     isFlushingWork = !0;
     do {
       var didPerformSomeWork = !1;
-      for (var root$169 = firstScheduledRoot; null !== root$169; ) {
+      for (var root$172 = firstScheduledRoot; null !== root$172; ) {
         if (
-          (!onlyLegacy || 0 === root$169.tag) &&
+          (!onlyLegacy || 0 === root$172.tag) &&
           0 !==
             (getNextLanes(
-              root$169,
-              root$169 === workInProgressRoot$jscomp$0
+              root$172,
+              root$172 === workInProgressRoot$jscomp$0
                 ? workInProgressRootRenderLanes$jscomp$0
                 : 0
             ) &
@@ -9331,7 +9386,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
         )
           try {
             didPerformSomeWork = !0;
-            var root = root$169;
+            var root = root$172;
             if (0 !== (executionContext & 6))
               throw Error(formatProdErrorMessage(327));
             flushPassiveEffects();
@@ -9374,7 +9429,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
           } catch (error) {
             null === errors ? (errors = [error]) : errors.push(error);
           }
-        root$169 = root$169.next;
+        root$172 = root$172.next;
       }
     } while (didPerformSomeWork);
     isFlushingWork = !1;
@@ -9700,16 +9755,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         exitStatus = renderRootSync(root, lanes);
         if (2 === exitStatus) {
           errorRetryLanes = lanes;
-          var errorRetryLanes$172 = getLanesToRetrySynchronouslyOnError(
+          var errorRetryLanes$175 = getLanesToRetrySynchronouslyOnError(
             root,
             errorRetryLanes
           );
-          0 !== errorRetryLanes$172 &&
-            ((lanes = errorRetryLanes$172),
+          0 !== errorRetryLanes$175 &&
+            ((lanes = errorRetryLanes$175),
             (exitStatus = recoverFromConcurrentError(
               root,
               errorRetryLanes,
-              errorRetryLanes$172
+              errorRetryLanes$175
             )));
         }
         if (1 === exitStatus)
@@ -9770,14 +9825,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
           if ((lanes & 8388480) === lanes) break;
           exitStatus = lanes;
           errorRetryLanes = root.eventTimes;
-          for (errorRetryLanes$172 = -1; 0 < exitStatus; ) {
+          for (errorRetryLanes$175 = -1; 0 < exitStatus; ) {
             var index$2 = 31 - clz32(exitStatus),
               lane = 1 << index$2;
             index$2 = errorRetryLanes[index$2];
-            index$2 > errorRetryLanes$172 && (errorRetryLanes$172 = index$2);
+            index$2 > errorRetryLanes$175 && (errorRetryLanes$175 = index$2);
             exitStatus &= ~lane;
           }
-          exitStatus = errorRetryLanes$172;
+          exitStatus = errorRetryLanes$175;
           exitStatus = now() - exitStatus;
           exitStatus =
             (120 > exitStatus
@@ -10109,8 +10164,8 @@ function renderRootSync(root, lanes) {
       }
       workLoopSync();
       break;
-    } catch (thrownValue$175) {
-      handleThrow(root, thrownValue$175);
+    } catch (thrownValue$178) {
+      handleThrow(root, thrownValue$178);
     }
   while (1);
   resetContextDependencies();
@@ -10216,8 +10271,8 @@ function renderRootConcurrent(root, lanes) {
       }
       workLoopConcurrent();
       break;
-    } catch (thrownValue$177) {
-      handleThrow(root, thrownValue$177);
+    } catch (thrownValue$180) {
+      handleThrow(root, thrownValue$180);
     }
   while (1);
   resetContextDependencies();
@@ -10384,10 +10439,10 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) {
                       };
                       suspenseBoundary.updateQueue = newOffscreenQueue;
                     } else {
-                      var retryQueue$53 = offscreenQueue.retryQueue;
-                      null === retryQueue$53
+                      var retryQueue$56 = offscreenQueue.retryQueue;
+                      null === retryQueue$56
                         ? (offscreenQueue.retryQueue = new Set([wakeable]))
-                        : retryQueue$53.add(wakeable);
+                        : retryQueue$56.add(wakeable);
                     }
                   }
                   break;
@@ -10584,12 +10639,12 @@ function commitRootImpl(
     var prevExecutionContext = executionContext;
     executionContext |= 4;
     ReactCurrentOwner.current = null;
-    var shouldFireAfterActiveInstanceBlur$181 = commitBeforeMutationEffects(
+    var shouldFireAfterActiveInstanceBlur$184 = commitBeforeMutationEffects(
       root,
       finishedWork
     );
     commitMutationEffectsOnFiber(finishedWork, root);
-    shouldFireAfterActiveInstanceBlur$181 &&
+    shouldFireAfterActiveInstanceBlur$184 &&
       ((_enabled = !0),
       dispatchAfterDetachedBlur(selectionInformation.focusedElem),
       (_enabled = !1));
@@ -10668,7 +10723,7 @@ function releaseRootPooledCache(root, remainingLanes) {
 }
 function flushPassiveEffects() {
   if (null !== rootWithPendingPassiveEffects) {
-    var root$182 = rootWithPendingPassiveEffects,
+    var root$185 = rootWithPendingPassiveEffects,
       remainingLanes = pendingPassiveEffectsRemainingLanes;
     pendingPassiveEffectsRemainingLanes = 0;
     var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
@@ -10684,7 +10739,7 @@ function flushPassiveEffects() {
     } finally {
       (currentUpdatePriority = previousPriority),
         (ReactCurrentBatchConfig$1.transition = prevTransition),
-        releaseRootPooledCache(root$182, remainingLanes);
+        releaseRootPooledCache(root$185, remainingLanes);
     }
   }
   return !1;
@@ -11987,12 +12042,12 @@ function getPublicRootInstance(container) {
 function attemptSynchronousHydration(fiber) {
   switch (fiber.tag) {
     case 3:
-      var root$184 = fiber.stateNode;
-      if (root$184.current.memoizedState.isDehydrated) {
-        var lanes = getHighestPriorityLanes(root$184.pendingLanes);
+      var root$187 = fiber.stateNode;
+      if (root$187.current.memoizedState.isDehydrated) {
+        var lanes = getHighestPriorityLanes(root$187.pendingLanes);
         0 !== lanes &&
-          (markRootEntangled(root$184, lanes | 2),
-          ensureRootIsScheduled(root$184),
+          (markRootEntangled(root$187, lanes | 2),
+          ensureRootIsScheduled(root$187),
           0 === (executionContext & 6) &&
             ((workInProgressRootRenderTargetTime = now() + 500),
             flushSyncWorkAcrossRoots_impl(!1)));
@@ -12564,19 +12619,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$332;
+  var JSCompiler_inline_result$jscomp$369;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1557 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1557) {
-      var element$jscomp$inline_1558 = document.createElement("div");
-      element$jscomp$inline_1558.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1557 =
-        "function" === typeof element$jscomp$inline_1558.oninput;
+    var isSupported$jscomp$inline_1601 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1601) {
+      var element$jscomp$inline_1602 = document.createElement("div");
+      element$jscomp$inline_1602.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1601 =
+        "function" === typeof element$jscomp$inline_1602.oninput;
     }
-    JSCompiler_inline_result$jscomp$332 = isSupported$jscomp$inline_1557;
-  } else JSCompiler_inline_result$jscomp$332 = !1;
+    JSCompiler_inline_result$jscomp$369 = isSupported$jscomp$inline_1601;
+  } else JSCompiler_inline_result$jscomp$369 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$332 &&
+    JSCompiler_inline_result$jscomp$369 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -12885,20 +12940,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1598 = 0;
-  i$jscomp$inline_1598 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1598++
+  var i$jscomp$inline_1642 = 0;
+  i$jscomp$inline_1642 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1642++
 ) {
-  var eventName$jscomp$inline_1599 =
-      simpleEventPluginEvents[i$jscomp$inline_1598],
-    domEventName$jscomp$inline_1600 =
-      eventName$jscomp$inline_1599.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1601 =
-      eventName$jscomp$inline_1599[0].toUpperCase() +
-      eventName$jscomp$inline_1599.slice(1);
+  var eventName$jscomp$inline_1643 =
+      simpleEventPluginEvents[i$jscomp$inline_1642],
+    domEventName$jscomp$inline_1644 =
+      eventName$jscomp$inline_1643.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1645 =
+      eventName$jscomp$inline_1643[0].toUpperCase() +
+      eventName$jscomp$inline_1643.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1600,
-    "on" + capitalizedEvent$jscomp$inline_1601
+    domEventName$jscomp$inline_1644,
+    "on" + capitalizedEvent$jscomp$inline_1645
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -13730,7 +13785,7 @@ function normalizeMarkupForTextOrAttribute(markup) {
     .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, "");
 }
 function noop$1() {}
-function setProp(domElement, tag, key, value, props) {
+function setProp(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "children":
       "string" === typeof value
@@ -13755,7 +13810,7 @@ function setProp(domElement, tag, key, value, props) {
       setValueForKnownAttribute(domElement, key, value);
       break;
     case "style":
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     case "src":
     case "href":
@@ -13971,6 +14026,9 @@ function setProp(domElement, tag, key, value, props) {
         value
       );
       break;
+    case "is":
+      setValueForAttribute(domElement, "is", value);
+      break;
     case "innerText":
     case "textContent":
       if (enableCustomElementPropertySupport) break;
@@ -13984,10 +14042,10 @@ function setProp(domElement, tag, key, value, props) {
           setValueForAttribute(domElement, key, value);
   }
 }
-function setPropOnCustomElement(domElement, tag, key, value, props) {
+function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "style":
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     case "dangerouslySetInnerHTML":
       if (null != value) {
@@ -14025,23 +14083,25 @@ function setPropOnCustomElement(domElement, tag, key, value, props) {
         if (enableCustomElementPropertySupport)
           a: {
             props = value;
-            if ("o" === key[0] && "n" === key[1]) {
-              tag = key.endsWith("Capture");
-              value = key.substr(2, tag ? key.length - 9 : void 0);
-              var prevProps = getFiberCurrentPropsFromNode(domElement);
-              prevProps = null != prevProps ? prevProps[key] : null;
-              "function" === typeof prevProps &&
-                domElement.removeEventListener(value, prevProps, tag);
-              if ("function" === typeof props) {
-                "function" !== typeof prevProps &&
-                  null !== prevProps &&
-                  (key in domElement
-                    ? (domElement[key] = null)
-                    : domElement.hasAttribute(key) &&
-                      domElement.removeAttribute(key));
-                domElement.addEventListener(value, props, tag);
-                break a;
-              }
+            if (
+              "o" === key[0] &&
+              "n" === key[1] &&
+              ((tag = key.endsWith("Capture")),
+              (value = key.substr(2, tag ? key.length - 9 : void 0)),
+              (prevValue = getFiberCurrentPropsFromNode(domElement)),
+              (prevValue = null != prevValue ? prevValue[key] : null),
+              "function" === typeof prevValue &&
+                domElement.removeEventListener(value, prevValue, tag),
+              "function" === typeof props)
+            ) {
+              "function" !== typeof prevValue &&
+                null !== prevValue &&
+                (key in domElement
+                  ? (domElement[key] = null)
+                  : domElement.hasAttribute(key) &&
+                    domElement.removeAttribute(key));
+              domElement.addEventListener(value, props, tag);
+              break a;
             }
             key in domElement
               ? (domElement[key] = props)
@@ -14095,7 +14155,7 @@ function setInitialProperties(domElement, tag, props) {
                   throw Error(formatProdErrorMessage(137, tag));
                 break;
               default:
-                setProp(domElement, tag, propKey, propValue, props);
+                setProp(domElement, tag, propKey, propValue, props, null);
             }
         }
       track(domElement);
@@ -14103,16 +14163,16 @@ function setInitialProperties(domElement, tag, props) {
       return;
     case "select":
       listenToNonDelegatedEvent("invalid", domElement);
-      for (var propKey$196 in props)
+      for (var propKey$199 in props)
         if (
-          props.hasOwnProperty(propKey$196) &&
-          ((propKey = props[propKey$196]), null != propKey)
+          props.hasOwnProperty(propKey$199) &&
+          ((propKey = props[propKey$199]), null != propKey)
         )
-          switch (propKey$196) {
+          switch (propKey$199) {
             case "value":
               break;
             default:
-              setProp(domElement, tag, propKey$196, propKey, props);
+              setProp(domElement, tag, propKey$199, propKey, props, null);
           }
       domElement.multiple = !!props.multiple;
       tag = props.value;
@@ -14123,12 +14183,12 @@ function setInitialProperties(domElement, tag, props) {
       return;
     case "textarea":
       listenToNonDelegatedEvent("invalid", domElement);
-      for (var propKey$198 in props)
+      for (var propKey$201 in props)
         if (
-          props.hasOwnProperty(propKey$198) &&
-          ((propKey = props[propKey$198]), null != propKey)
+          props.hasOwnProperty(propKey$201) &&
+          ((propKey = props[propKey$201]), null != propKey)
         )
-          switch (propKey$198) {
+          switch (propKey$201) {
             case "value":
               break;
             case "children":
@@ -14137,18 +14197,18 @@ function setInitialProperties(domElement, tag, props) {
               if (null != propKey) throw Error(formatProdErrorMessage(91));
               break;
             default:
-              setProp(domElement, tag, propKey$198, propKey, props);
+              setProp(domElement, tag, propKey$201, propKey, props);
           }
       track(domElement);
       initTextarea(domElement, props);
       return;
     case "option":
-      for (var propKey$200 in props)
+      for (var propKey$203 in props)
         if (
-          props.hasOwnProperty(propKey$200) &&
-          ((propKey = props[propKey$200]), null != propKey)
+          props.hasOwnProperty(propKey$203) &&
+          ((propKey = props[propKey$203]), null != propKey)
         )
-          switch (propKey$200) {
+          switch (propKey$203) {
             case "selected":
               domElement.selected =
                 propKey &&
@@ -14156,7 +14216,7 @@ function setInitialProperties(domElement, tag, props) {
                 "symbol" !== typeof propKey;
               break;
             default:
-              setProp(domElement, tag, propKey$200, propKey, props);
+              setProp(domElement, tag, propKey$203, propKey, props);
           }
       null != props.value &&
         domElement.setAttribute("value", "" + getToStringValue(props.value));
@@ -14198,31 +14258,32 @@ function setInitialProperties(domElement, tag, props) {
     case "track":
     case "wbr":
     case "menuitem":
-      for (var propKey$202 in props)
+      for (var propKey$205 in props)
         if (
-          props.hasOwnProperty(propKey$202) &&
-          ((propKey = props[propKey$202]), null != propKey)
+          props.hasOwnProperty(propKey$205) &&
+          ((propKey = props[propKey$205]), null != propKey)
         )
-          switch (propKey$202) {
+          switch (propKey$205) {
             case "children":
             case "dangerouslySetInnerHTML":
               throw Error(formatProdErrorMessage(137, tag));
             default:
-              setProp(domElement, tag, propKey$202, propKey, props);
+              setProp(domElement, tag, propKey$205, propKey, props, null);
           }
       return;
     default:
       if (isCustomElement(tag)) {
-        for (var propKey$204 in props)
-          props.hasOwnProperty(propKey$204) &&
-            ((propKey = props[propKey$204]),
+        for (var propKey$207 in props)
+          props.hasOwnProperty(propKey$207) &&
+            ((propKey = props[propKey$207]),
             null != propKey &&
               setPropOnCustomElement(
                 domElement,
                 tag,
-                propKey$204,
+                propKey$207,
                 propKey,
-                props
+                props,
+                null
               ));
         return;
       }
@@ -14230,9 +14291,317 @@ function setInitialProperties(domElement, tag, props) {
   for (propValue in props)
     props.hasOwnProperty(propValue) &&
       ((propKey = props[propValue]),
-      null != propKey && setProp(domElement, tag, propValue, propKey, props));
+      null != propKey &&
+        setProp(domElement, tag, propValue, propKey, props, null));
 }
-function updateProperties(
+function updateProperties(domElement, tag, lastProps, nextProps) {
+  switch (tag) {
+    case "div":
+    case "span":
+    case "svg":
+    case "path":
+    case "a":
+    case "g":
+    case "p":
+    case "li":
+      break;
+    case "input":
+      "radio" === nextProps.type &&
+        null != nextProps.name &&
+        updateInputChecked(domElement, nextProps);
+      for (var propKey in lastProps) {
+        var lastProp = lastProps[propKey];
+        if (
+          lastProps.hasOwnProperty(propKey) &&
+          null != lastProp &&
+          !nextProps.hasOwnProperty(propKey)
+        )
+          switch (propKey) {
+            case "checked":
+              lastProp = nextProps.defaultChecked;
+              domElement.checked =
+                !!lastProp &&
+                "function" !== typeof lastProp &&
+                "symbol" !== lastProp;
+              break;
+            case "value":
+              break;
+            default:
+              setProp(domElement, tag, propKey, null, nextProps, lastProp);
+          }
+      }
+      for (var propKey$211 in nextProps) {
+        lastProp = nextProps[propKey$211];
+        var lastProp$212 = lastProps[propKey$211];
+        if (
+          nextProps.hasOwnProperty(propKey$211) &&
+          lastProp !== lastProp$212 &&
+          (null != lastProp || null != lastProp$212)
+        )
+          switch (propKey$211) {
+            case "checked":
+              lastProp = null != lastProp ? lastProp : nextProps.defaultChecked;
+              domElement.checked =
+                !!lastProp &&
+                "function" !== typeof lastProp &&
+                "symbol" !== lastProp;
+              break;
+            case "value":
+              break;
+            case "children":
+            case "dangerouslySetInnerHTML":
+              if (null != lastProp)
+                throw Error(formatProdErrorMessage(137, tag));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$211,
+                lastProp,
+                nextProps,
+                lastProp$212
+              );
+          }
+      }
+      updateInput(domElement, nextProps);
+      return;
+    case "select":
+      for (var propKey$215 in lastProps)
+        if (
+          ((propKey$211 = lastProps[propKey$215]),
+          lastProps.hasOwnProperty(propKey$215) &&
+            null != propKey$211 &&
+            !nextProps.hasOwnProperty(propKey$215))
+        )
+          switch (propKey$215) {
+            case "value":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$215,
+                null,
+                nextProps,
+                propKey$211
+              );
+          }
+      for (lastProp in nextProps)
+        if (
+          ((propKey$211 = nextProps[lastProp]),
+          (lastProp$212 = lastProps[lastProp]),
+          nextProps.hasOwnProperty(lastProp) &&
+            propKey$211 !== lastProp$212 &&
+            (null != propKey$211 || null != lastProp$212))
+        )
+          switch (lastProp) {
+            case "value":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                lastProp,
+                propKey$211,
+                nextProps,
+                lastProp$212
+              );
+          }
+      updateSelect(domElement, lastProps, nextProps);
+      return;
+    case "textarea":
+      for (var propKey$220 in lastProps)
+        if (
+          ((propKey$211 = lastProps[propKey$220]),
+          lastProps.hasOwnProperty(propKey$220) &&
+            null != propKey$211 &&
+            !nextProps.hasOwnProperty(propKey$220))
+        )
+          switch (propKey$220) {
+            case "value":
+              break;
+            case "children":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$220,
+                null,
+                nextProps,
+                propKey$211
+              );
+          }
+      for (lastProp$212 in nextProps)
+        if (
+          ((propKey$211 = nextProps[lastProp$212]),
+          (lastProp = lastProps[lastProp$212]),
+          nextProps.hasOwnProperty(lastProp$212) &&
+            propKey$211 !== lastProp &&
+            (null != propKey$211 || null != lastProp))
+        )
+          switch (lastProp$212) {
+            case "value":
+              break;
+            case "children":
+              break;
+            case "dangerouslySetInnerHTML":
+              if (null != propKey$211) throw Error(formatProdErrorMessage(91));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                lastProp$212,
+                propKey$211,
+                nextProps,
+                lastProp
+              );
+          }
+      updateTextarea(domElement, nextProps);
+      return;
+    case "option":
+      for (var propKey$225 in lastProps)
+        if (
+          ((propKey$211 = lastProps[propKey$225]),
+          lastProps.hasOwnProperty(propKey$225) &&
+            null != propKey$211 &&
+            !nextProps.hasOwnProperty(propKey$225))
+        )
+          switch (propKey$225) {
+            case "selected":
+              domElement.selected = !1;
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$225,
+                null,
+                nextProps,
+                propKey$211
+              );
+          }
+      for (var propKey$227 in nextProps)
+        if (
+          ((propKey$211 = nextProps[propKey$227]),
+          (lastProp = lastProps[propKey$227]),
+          nextProps.hasOwnProperty(propKey$227) &&
+            propKey$211 !== lastProp &&
+            (null != propKey$211 || null != lastProp))
+        )
+          switch (propKey$227) {
+            case "selected":
+              domElement.selected =
+                propKey$211 &&
+                "function" !== typeof propKey$211 &&
+                "symbol" !== typeof propKey$211;
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$227,
+                propKey$211,
+                nextProps,
+                lastProp
+              );
+          }
+      return;
+    case "img":
+    case "link":
+    case "area":
+    case "base":
+    case "br":
+    case "col":
+    case "embed":
+    case "hr":
+    case "keygen":
+    case "meta":
+    case "param":
+    case "source":
+    case "track":
+    case "wbr":
+    case "menuitem":
+      for (var propKey$230 in lastProps)
+        (propKey$211 = lastProps[propKey$230]),
+          lastProps.hasOwnProperty(propKey$230) &&
+            null != propKey$211 &&
+            !nextProps.hasOwnProperty(propKey$230) &&
+            setProp(domElement, tag, propKey$230, null, nextProps, propKey$211);
+      for (var propKey$232 in nextProps)
+        if (
+          ((propKey$211 = nextProps[propKey$232]),
+          (lastProp = lastProps[propKey$232]),
+          nextProps.hasOwnProperty(propKey$232) &&
+            propKey$211 !== lastProp &&
+            (null != propKey$211 || null != lastProp))
+        )
+          switch (propKey$232) {
+            case "children":
+            case "dangerouslySetInnerHTML":
+              if (null != propKey$211)
+                throw Error(formatProdErrorMessage(137, tag));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$232,
+                propKey$211,
+                nextProps,
+                lastProp
+              );
+          }
+      return;
+    default:
+      if (isCustomElement(tag)) {
+        for (var propKey$235 in lastProps)
+          (propKey$211 = lastProps[propKey$235]),
+            lastProps.hasOwnProperty(propKey$235) &&
+              null != propKey$211 &&
+              !nextProps.hasOwnProperty(propKey$235) &&
+              setPropOnCustomElement(
+                domElement,
+                tag,
+                propKey$235,
+                null,
+                nextProps,
+                propKey$211
+              );
+        for (var propKey$237 in nextProps)
+          (propKey$211 = nextProps[propKey$237]),
+            (lastProp = lastProps[propKey$237]),
+            !nextProps.hasOwnProperty(propKey$237) ||
+              propKey$211 === lastProp ||
+              (null == propKey$211 && null == lastProp) ||
+              setPropOnCustomElement(
+                domElement,
+                tag,
+                propKey$237,
+                propKey$211,
+                nextProps,
+                lastProp
+              );
+        return;
+      }
+  }
+  for (var propKey$240 in lastProps)
+    (propKey$211 = lastProps[propKey$240]),
+      lastProps.hasOwnProperty(propKey$240) &&
+        null != propKey$211 &&
+        !nextProps.hasOwnProperty(propKey$240) &&
+        setProp(domElement, tag, propKey$240, null, nextProps, propKey$211);
+  for (var propKey$242 in nextProps)
+    (propKey$211 = nextProps[propKey$242]),
+      (lastProp = lastProps[propKey$242]),
+      !nextProps.hasOwnProperty(propKey$242) ||
+        propKey$211 === lastProp ||
+        (null == propKey$211 && null == lastProp) ||
+        setProp(domElement, tag, propKey$242, propKey$211, nextProps, lastProp);
+}
+function updatePropertiesWithDiff(
   domElement,
   updatePayload,
   tag,
@@ -14272,7 +14641,7 @@ function updateProperties(
               throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       }
       updateInput(domElement, nextProps);
@@ -14280,32 +14649,15 @@ function updateProperties(
     case "select":
       for (propKey = 0; propKey < updatePayload.length; propKey += 2) {
         propValue = updatePayload[propKey];
-        var propValue$210 = updatePayload[propKey + 1];
+        var propValue$247 = updatePayload[propKey + 1];
         switch (propValue) {
           case "value":
             break;
           default:
-            setProp(domElement, tag, propValue, propValue$210, nextProps);
+            setProp(domElement, tag, propValue, propValue$247, nextProps, null);
         }
       }
-      updatePayload = !!lastProps.multiple;
-      tag = nextProps.value;
-      null != tag
-        ? updateOptions(domElement, !!nextProps.multiple, tag, !1)
-        : updatePayload !== !!nextProps.multiple &&
-          (null != nextProps.defaultValue
-            ? updateOptions(
-                domElement,
-                !!nextProps.multiple,
-                nextProps.defaultValue,
-                !0
-              )
-            : updateOptions(
-                domElement,
-                !!nextProps.multiple,
-                nextProps.multiple ? [] : "",
-                !1
-              ));
+      updateSelect(domElement, lastProps, nextProps);
       return;
     case "textarea":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
@@ -14322,7 +14674,7 @@ function updateProperties(
             if (null != propValue) throw Error(formatProdErrorMessage(91));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       updateTextarea(domElement, nextProps);
       return;
@@ -14340,7 +14692,7 @@ function updateProperties(
               "symbol" !== typeof propValue;
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       return;
     case "img":
@@ -14370,7 +14722,7 @@ function updateProperties(
               throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       return;
     default:
@@ -14381,7 +14733,8 @@ function updateProperties(
             tag,
             updatePayload[lastProps],
             updatePayload[lastProps + 1],
-            nextProps
+            nextProps,
+            null
           );
         return;
       }
@@ -14392,7 +14745,8 @@ function updateProperties(
       tag,
       updatePayload[lastProps],
       updatePayload[lastProps + 1],
-      nextProps
+      nextProps,
+      null
     );
 }
 var Dispatcher$1 = Internals.Dispatcher,
@@ -14723,14 +15077,14 @@ function preinit$1(href, options) {
       switch (as) {
         case "style":
           as = getResourcesFromRoot(resourceRoot).hoistableStyles;
-          var key$227 = getStyleKey(href),
+          var key$264 = getStyleKey(href),
             precedence = options.precedence || "default",
-            resource = as.get(key$227);
+            resource = as.get(key$264);
           if (resource) break;
           var state = { loading: 0, preload: null };
           if (
             (resource = resourceRoot.querySelector(
-              getStylesheetSelectorFromKey(key$227)
+              getStylesheetSelectorFromKey(key$264)
             ))
           )
             state.loading = 1;
@@ -14741,7 +15095,7 @@ function preinit$1(href, options) {
               "data-precedence": precedence,
               crossOrigin: options.crossOrigin
             };
-            (options = preloadPropsMap.get(key$227)) &&
+            (options = preloadPropsMap.get(key$264)) &&
               adoptPreloadPropsForStylesheet(href, options);
             var link = (resource = (
               resourceRoot.ownerDocument || resourceRoot
@@ -14767,15 +15121,15 @@ function preinit$1(href, options) {
             count: 1,
             state: state
           };
-          as.set(key$227, resource);
+          as.set(key$264, resource);
           break;
         case "script":
           (as = getResourcesFromRoot(resourceRoot).hoistableScripts),
-            (key$227 = getScriptKey(href)),
-            (precedence = as.get(key$227)),
+            (key$264 = getScriptKey(href)),
+            (precedence = as.get(key$264)),
             precedence ||
               ((precedence = resourceRoot.querySelector(
-                "script[async]" + key$227
+                "script[async]" + key$264
               )),
               precedence ||
                 ((href = {
@@ -14784,7 +15138,7 @@ function preinit$1(href, options) {
                   crossOrigin: options.crossOrigin,
                   integrity: options.integrity
                 }),
-                (options = preloadPropsMap.get(key$227)) &&
+                (options = preloadPropsMap.get(key$264)) &&
                   adoptPreloadPropsForScript(href, options),
                 (options = resourceRoot.ownerDocument || resourceRoot),
                 (precedence = options.createElement("script")),
@@ -14797,13 +15151,13 @@ function preinit$1(href, options) {
                 count: 1,
                 state: null
               }),
-              as.set(key$227, precedence));
+              as.set(key$264, precedence));
       }
     else if ("style" === as || "script" === as)
       if ((resourceRoot = getDocumentForPreloads())) {
-        key$227 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
-        precedence = key$227 =
-          'link[rel="preload"][as="' + as + '"][href="' + key$227 + '"]';
+        key$264 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
+        precedence = key$264 =
+          'link[rel="preload"][as="' + as + '"][href="' + key$264 + '"]';
         switch (as) {
           case "style":
             precedence = getStyleKey(href);
@@ -14820,7 +15174,7 @@ function preinit$1(href, options) {
             integrity: options.integrity
           }),
           preloadPropsMap.set(precedence, href),
-          null === resourceRoot.querySelector(key$227) &&
+          null === resourceRoot.querySelector(key$264) &&
             ((options = resourceRoot.createElement("link")),
             setInitialProperties(options, "link", href),
             markNodeAsHoistable(options),
@@ -14853,17 +15207,17 @@ function getResource(type, currentProps, pendingProps) {
         "string" === typeof pendingProps.precedence
       ) {
         type = getStyleKey(pendingProps.href);
-        var styles$236 = getResourcesFromRoot(currentProps).hoistableStyles,
-          resource$237 = styles$236.get(type);
-        resource$237 ||
+        var styles$273 = getResourcesFromRoot(currentProps).hoistableStyles,
+          resource$274 = styles$273.get(type);
+        resource$274 ||
           ((currentProps = currentProps.ownerDocument || currentProps),
-          (resource$237 = {
+          (resource$274 = {
             type: "stylesheet",
             instance: null,
             count: 0,
             state: { loading: 0, preload: null }
           }),
-          styles$236.set(type, resource$237),
+          styles$273.set(type, resource$274),
           preloadPropsMap.has(type) ||
             preloadStylesheet(
               currentProps,
@@ -14878,9 +15232,9 @@ function getResource(type, currentProps, pendingProps) {
                 hrefLang: pendingProps.hrefLang,
                 referrerPolicy: pendingProps.referrerPolicy
               },
-              resource$237.state
+              resource$274.state
             ));
-        return resource$237;
+        return resource$274;
       }
       return null;
     case "script":
@@ -14952,36 +15306,36 @@ function acquireResource(hoistableRoot, resource, props) {
         return (resource.instance = key);
       case "stylesheet":
         styleProps = getStyleKey(props.href);
-        var instance$242 = hoistableRoot.querySelector(
+        var instance$279 = hoistableRoot.querySelector(
           getStylesheetSelectorFromKey(styleProps)
         );
-        if (instance$242)
+        if (instance$279)
           return (
-            (resource.instance = instance$242),
-            markNodeAsHoistable(instance$242),
-            instance$242
+            (resource.instance = instance$279),
+            markNodeAsHoistable(instance$279),
+            instance$279
           );
         key = stylesheetPropsFromRawProps(props);
         (styleProps = preloadPropsMap.get(styleProps)) &&
           adoptPreloadPropsForStylesheet(key, styleProps);
-        instance$242 = (
+        instance$279 = (
           hoistableRoot.ownerDocument || hoistableRoot
         ).createElement("link");
-        markNodeAsHoistable(instance$242);
-        var linkInstance = instance$242;
+        markNodeAsHoistable(instance$279);
+        var linkInstance = instance$279;
         linkInstance._p = new Promise(function (resolve, reject) {
           linkInstance.onload = resolve;
           linkInstance.onerror = reject;
         });
-        setInitialProperties(instance$242, "link", key);
+        setInitialProperties(instance$279, "link", key);
         resource.state.loading |= 4;
-        insertStylesheet(instance$242, props.precedence, hoistableRoot);
-        return (resource.instance = instance$242);
+        insertStylesheet(instance$279, props.precedence, hoistableRoot);
+        return (resource.instance = instance$279);
       case "script":
-        instance$242 = getScriptKey(props.src);
+        instance$279 = getScriptKey(props.src);
         if (
           (styleProps = hoistableRoot.querySelector(
-            "script[async]" + instance$242
+            "script[async]" + instance$279
           ))
         )
           return (
@@ -14990,7 +15344,7 @@ function acquireResource(hoistableRoot, resource, props) {
             styleProps
           );
         key = props;
-        if ((styleProps = preloadPropsMap.get(instance$242)))
+        if ((styleProps = preloadPropsMap.get(instance$279)))
           (key = assign({}, props)),
             adoptPreloadPropsForScript(key, styleProps);
         hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot;
@@ -15941,11 +16295,11 @@ function legacyCreateRootFromDOMContainer(
     if ("function" === typeof callback) {
       var originalCallback = callback;
       callback = function () {
-        var instance = getPublicRootInstance(root$262);
+        var instance = getPublicRootInstance(root$299);
         originalCallback.call(instance);
       };
     }
-    var root$262 = createHydrationContainer(
+    var root$299 = createHydrationContainer(
       initialChildren,
       callback,
       container,
@@ -15957,23 +16311,23 @@ function legacyCreateRootFromDOMContainer(
       noopOnRecoverableError,
       null
     );
-    container._reactRootContainer = root$262;
-    container[internalContainerInstanceKey] = root$262.current;
+    container._reactRootContainer = root$299;
+    container[internalContainerInstanceKey] = root$299.current;
     listenToAllSupportedEvents(
       8 === container.nodeType ? container.parentNode : container
     );
     flushSync$1();
-    return root$262;
+    return root$299;
   }
   clearContainer(container);
   if ("function" === typeof callback) {
-    var originalCallback$263 = callback;
+    var originalCallback$300 = callback;
     callback = function () {
-      var instance = getPublicRootInstance(root$264);
-      originalCallback$263.call(instance);
+      var instance = getPublicRootInstance(root$301);
+      originalCallback$300.call(instance);
     };
   }
-  var root$264 = createFiberRoot(
+  var root$301 = createFiberRoot(
     container,
     0,
     !1,
@@ -15985,15 +16339,15 @@ function legacyCreateRootFromDOMContainer(
     noopOnRecoverableError,
     null
   );
-  container._reactRootContainer = root$264;
-  container[internalContainerInstanceKey] = root$264.current;
+  container._reactRootContainer = root$301;
+  container[internalContainerInstanceKey] = root$301.current;
   listenToAllSupportedEvents(
     8 === container.nodeType ? container.parentNode : container
   );
   flushSync$1(function () {
-    updateContainer(initialChildren, root$264, parentComponent, callback);
+    updateContainer(initialChildren, root$301, parentComponent, callback);
   });
-  return root$264;
+  return root$301;
 }
 function legacyRenderSubtreeIntoContainer(
   parentComponent,
@@ -16052,17 +16406,17 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1812 = {
+var devToolsConfig$jscomp$inline_1849 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-2bdbd8ab",
+  version: "18.3.0-www-classic-c15fa109",
   rendererPackageName: "react-dom"
 };
-var internals$jscomp$inline_2181 = {
-  bundleType: devToolsConfig$jscomp$inline_1812.bundleType,
-  version: devToolsConfig$jscomp$inline_1812.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1812.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1812.rendererConfig,
+var internals$jscomp$inline_2218 = {
+  bundleType: devToolsConfig$jscomp$inline_1849.bundleType,
+  version: devToolsConfig$jscomp$inline_1849.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1849.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1849.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -16078,26 +16432,26 @@ var internals$jscomp$inline_2181 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1812.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1849.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-2bdbd8ab"
+  reconcilerVersion: "18.3.0-www-classic-c15fa109"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2182 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2219 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2182.isDisabled &&
-    hook$jscomp$inline_2182.supportsFiber
+    !hook$jscomp$inline_2219.isDisabled &&
+    hook$jscomp$inline_2219.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2182.inject(
-        internals$jscomp$inline_2181
+      (rendererID = hook$jscomp$inline_2219.inject(
+        internals$jscomp$inline_2218
       )),
-        (injectedHook = hook$jscomp$inline_2182);
+        (injectedHook = hook$jscomp$inline_2219);
     } catch (err) {}
 }
 assign(Internals, {
@@ -16325,4 +16679,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-2bdbd8ab";
+exports.version = "18.3.0-www-classic-c15fa109";
diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js
index ee9b1232bc08f..465495aed57ef 100644
--- a/compiled/facebook-www/ReactDOM-prod.modern.js
+++ b/compiled/facebook-www/ReactDOM-prod.modern.js
@@ -112,6 +112,7 @@ var dynamicFeatureFlags = require("ReactFeatureFlags"),
     dynamicFeatureFlags.enableCustomElementPropertySupport,
   enableDeferRootSchedulingToMicrotask =
     dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask,
+  diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase,
   scheduleCallback$3 = Scheduler.unstable_scheduleCallback,
   cancelCallback$1 = Scheduler.unstable_cancelCallback,
   shouldYield = Scheduler.unstable_shouldYield,
@@ -928,6 +929,21 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
     null !== multiple && (multiple.selected = !0);
   }
 }
+function updateSelect(element, prevProps, props) {
+  prevProps = !!prevProps.multiple;
+  var value = props.value;
+  null != value
+    ? updateOptions(element, !!props.multiple, value, !1)
+    : prevProps !== !!props.multiple &&
+      (null != props.defaultValue
+        ? updateOptions(element, !!props.multiple, props.defaultValue, !0)
+        : updateOptions(
+            element,
+            !!props.multiple,
+            props.multiple ? [] : "",
+            !1
+          ));
+}
 function updateTextarea(element, props) {
   var value = getToStringValue(props.value);
   if (
@@ -1020,30 +1036,44 @@ var unitlessNumbers = new Set(
     " "
   )
 );
-function setValueForStyles(node, styles) {
+function setValueForStyle(style, styleName, value) {
+  var isCustomProperty = 0 === styleName.indexOf("--");
+  null == value || "boolean" === typeof value || "" === value
+    ? isCustomProperty
+      ? style.setProperty(styleName, "")
+      : "float" === styleName
+      ? (style.cssFloat = "")
+      : (style[styleName] = "")
+    : isCustomProperty
+    ? style.setProperty(styleName, value)
+    : "number" !== typeof value || 0 === value || unitlessNumbers.has(styleName)
+    ? "float" === styleName
+      ? (style.cssFloat = value)
+      : (style[styleName] = ("" + value).trim())
+    : (style[styleName] = value + "px");
+}
+function setValueForStyles(node, styles, prevStyles) {
   if (null != styles && "object" !== typeof styles)
     throw Error(formatProdErrorMessage(62));
   node = node.style;
-  for (var styleName in styles)
-    if (styles.hasOwnProperty(styleName)) {
-      var value = styles[styleName],
-        isCustomProperty = 0 === styleName.indexOf("--");
-      null == value || "boolean" === typeof value || "" === value
-        ? isCustomProperty
+  if (diffInCommitPhase && null != prevStyles) {
+    for (var styleName in prevStyles)
+      !prevStyles.hasOwnProperty(styleName) ||
+        (null != styles && styles.hasOwnProperty(styleName)) ||
+        (0 === styleName.indexOf("--")
           ? node.setProperty(styleName, "")
           : "float" === styleName
           ? (node.cssFloat = "")
-          : (node[styleName] = "")
-        : isCustomProperty
-        ? node.setProperty(styleName, value)
-        : "number" !== typeof value ||
-          0 === value ||
-          unitlessNumbers.has(styleName)
-        ? "float" === styleName
-          ? (node.cssFloat = value)
-          : (node[styleName] = ("" + value).trim())
-        : (node[styleName] = value + "px");
-    }
+          : (node[styleName] = ""));
+    for (var styleName$15 in styles)
+      (styleName = styles[styleName$15]),
+        styles.hasOwnProperty(styleName$15) &&
+          prevStyles[styleName$15] !== styleName &&
+          setValueForStyle(node, styleName$15, styleName);
+  } else
+    for (var styleName$16 in styles)
+      styles.hasOwnProperty(styleName$16) &&
+        setValueForStyle(node, styleName$16, styles[styleName$16]);
 }
 function isCustomElement(tagName) {
   if (-1 === tagName.indexOf("-")) return !1;
@@ -1272,36 +1302,36 @@ function findCurrentFiberUsingSlowPath(fiber) {
     }
     if (a.return !== b.return) (a = parentA), (b = parentB);
     else {
-      for (var didFindChild = !1, child$15 = parentA.child; child$15; ) {
-        if (child$15 === a) {
+      for (var didFindChild = !1, child$18 = parentA.child; child$18; ) {
+        if (child$18 === a) {
           didFindChild = !0;
           a = parentA;
           b = parentB;
           break;
         }
-        if (child$15 === b) {
+        if (child$18 === b) {
           didFindChild = !0;
           b = parentA;
           a = parentB;
           break;
         }
-        child$15 = child$15.sibling;
+        child$18 = child$18.sibling;
       }
       if (!didFindChild) {
-        for (child$15 = parentB.child; child$15; ) {
-          if (child$15 === a) {
+        for (child$18 = parentB.child; child$18; ) {
+          if (child$18 === a) {
             didFindChild = !0;
             a = parentB;
             b = parentA;
             break;
           }
-          if (child$15 === b) {
+          if (child$18 === b) {
             didFindChild = !0;
             b = parentB;
             a = parentA;
             break;
           }
-          child$15 = child$15.sibling;
+          child$18 = child$18.sibling;
         }
         if (!didFindChild) throw Error(formatProdErrorMessage(189));
       }
@@ -1528,8 +1558,8 @@ function prepareToHydrateHostInstance(fiber) {
       break;
     case "video":
     case "audio":
-      for (type = 0; type < mediaEventTypes.length; type++)
-        listenToNonDelegatedEvent(mediaEventTypes[type], instance);
+      for (var i = 0; i < mediaEventTypes.length; i++)
+        listenToNonDelegatedEvent(mediaEventTypes[i], instance);
       break;
     case "source":
       listenToNonDelegatedEvent("error", instance);
@@ -1556,20 +1586,28 @@ function prepareToHydrateHostInstance(fiber) {
         track(instance),
         initTextarea(instance, props);
   }
-  var updatePayload = null;
-  type = props.children;
-  ("string" !== typeof type && "number" !== typeof type) ||
-    instance.textContent === "" + type ||
-    (!0 !== props.suppressHydrationWarning &&
-      ((updatePayload = instance.textContent),
-      normalizeMarkupForTextOrAttribute(type),
-      normalizeMarkupForTextOrAttribute(updatePayload)),
-    (updatePayload = ["children", type]));
+  i = null;
+  var children = props.children;
+  if (
+    ("string" === typeof children || "number" === typeof children) &&
+    instance.textContent !== "" + children
+  ) {
+    if (!0 !== props.suppressHydrationWarning) {
+      var serverText = instance.textContent;
+      normalizeMarkupForTextOrAttribute(children);
+      normalizeMarkupForTextOrAttribute(serverText);
+    }
+    diffInCommitPhase
+      ? "body" !== type && (instance.textContent = children)
+      : (i = ["children", children]);
+  }
   null != props.onScroll && listenToNonDelegatedEvent("scroll", instance);
   null != props.onClick && (instance.onclick = noop$1);
-  instance = updatePayload;
-  fiber.updateQueue = instance;
-  return null !== instance ? !0 : !1;
+  instance = i;
+  return diffInCommitPhase ||
+    ((fiber.updateQueue = instance), null === instance)
+    ? !1
+    : !0;
 }
 function popToNextHostParent(fiber) {
   for (hydrationParentFiber = fiber.return; hydrationParentFiber; )
@@ -3044,10 +3082,10 @@ createFunctionComponentUpdateQueue = function () {
 function use(usable) {
   if (null !== usable && "object" === typeof usable) {
     if ("function" === typeof usable.then) {
-      var index$41 = thenableIndexCounter;
+      var index$44 = thenableIndexCounter;
       thenableIndexCounter += 1;
       null === thenableState && (thenableState = []);
-      usable = trackUsedThenable(thenableState, usable, index$41);
+      usable = trackUsedThenable(thenableState, usable, index$44);
       null === currentlyRenderingFiber$1.alternate &&
         (null === workInProgressHook
           ? null === currentlyRenderingFiber$1.memoizedState
@@ -3535,16 +3573,16 @@ function refreshCache(fiber, seedKey, seedValue) {
       case 3:
         var lane = requestUpdateLane(provider);
         fiber = createUpdate(lane);
-        var root$47 = enqueueUpdate(provider, fiber, lane);
-        if (null !== root$47) {
+        var root$50 = enqueueUpdate(provider, fiber, lane);
+        if (null !== root$50) {
           var eventTime = requestEventTime();
-          scheduleUpdateOnFiber(root$47, provider, lane, eventTime);
-          entangleTransitions(root$47, provider, lane);
+          scheduleUpdateOnFiber(root$50, provider, lane, eventTime);
+          entangleTransitions(root$50, provider, lane);
         }
         provider = createCache();
         null !== seedKey &&
           void 0 !== seedKey &&
-          null !== root$47 &&
+          null !== root$50 &&
           provider.data.set(seedKey, seedValue);
         fiber.payload = { cache: provider };
         return;
@@ -3751,15 +3789,15 @@ var HooksDispatcherOnMount = {
       getServerSnapshot = getServerSnapshot();
     } else {
       getServerSnapshot = getSnapshot();
-      var root$43 = workInProgressRoot;
-      if (null === root$43) throw Error(formatProdErrorMessage(349));
-      includesBlockingLane(root$43, renderLanes$1) ||
+      var root$46 = workInProgressRoot;
+      if (null === root$46) throw Error(formatProdErrorMessage(349));
+      includesBlockingLane(root$46, renderLanes$1) ||
         pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot);
     }
     hook.memoizedState = getServerSnapshot;
-    root$43 = { value: getServerSnapshot, getSnapshot: getSnapshot };
-    hook.queue = root$43;
-    mountEffect(subscribeToStore.bind(null, fiber, root$43, subscribe), [
+    root$46 = { value: getServerSnapshot, getSnapshot: getSnapshot };
+    hook.queue = root$46;
+    mountEffect(subscribeToStore.bind(null, fiber, root$46, subscribe), [
       subscribe
     ]);
     fiber.flags |= 2048;
@@ -3768,7 +3806,7 @@ var HooksDispatcherOnMount = {
       updateStoreInstance.bind(
         null,
         fiber,
-        root$43,
+        root$46,
         getServerSnapshot,
         getSnapshot
       ),
@@ -4252,10 +4290,10 @@ var markerInstanceStack = createCursor(null);
 function pushRootMarkerInstance(workInProgress) {
   if (enableTransitionTracing) {
     var transitions = workInProgressTransitions,
-      root$58 = workInProgress.stateNode;
+      root$61 = workInProgress.stateNode;
     null !== transitions &&
       transitions.forEach(function (transition) {
-        if (!root$58.incompleteTransitions.has(transition)) {
+        if (!root$61.incompleteTransitions.has(transition)) {
           var markerInstance = {
             tag: 0,
             transitions: new Set([transition]),
@@ -4263,11 +4301,11 @@ function pushRootMarkerInstance(workInProgress) {
             aborts: null,
             name: null
           };
-          root$58.incompleteTransitions.set(transition, markerInstance);
+          root$61.incompleteTransitions.set(transition, markerInstance);
         }
       });
     var markerInstances = [];
-    root$58.incompleteTransitions.forEach(function (markerInstance) {
+    root$61.incompleteTransitions.forEach(function (markerInstance) {
       markerInstances.push(markerInstance);
     });
     push(markerInstanceStack, markerInstances);
@@ -4932,14 +4970,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   }
   JSCompiler_temp = current.memoizedState;
   if (null !== JSCompiler_temp) {
-    var dehydrated$65 = JSCompiler_temp.dehydrated;
-    if (null !== dehydrated$65)
+    var dehydrated$68 = JSCompiler_temp.dehydrated;
+    if (null !== dehydrated$68)
       return updateDehydratedSuspenseComponent(
         current,
         workInProgress,
         didSuspend,
         nextProps,
-        dehydrated$65,
+        dehydrated$68,
         JSCompiler_temp,
         renderLanes
       );
@@ -4949,7 +4987,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
     showFallback = nextProps.fallback;
     didSuspend = workInProgress.mode;
     JSCompiler_temp = current.child;
-    dehydrated$65 = JSCompiler_temp.sibling;
+    dehydrated$68 = JSCompiler_temp.sibling;
     var primaryChildProps = { mode: "hidden", children: nextProps.children };
     0 === (didSuspend & 1) && workInProgress.child !== JSCompiler_temp
       ? ((nextProps = workInProgress.child),
@@ -4958,8 +4996,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         (workInProgress.deletions = null))
       : ((nextProps = createWorkInProgress(JSCompiler_temp, primaryChildProps)),
         (nextProps.subtreeFlags = JSCompiler_temp.subtreeFlags & 31457280));
-    null !== dehydrated$65
-      ? (showFallback = createWorkInProgress(dehydrated$65, showFallback))
+    null !== dehydrated$68
+      ? (showFallback = createWorkInProgress(dehydrated$68, showFallback))
       : ((showFallback = createFiberFromFragment(
           showFallback,
           didSuspend,
@@ -4978,10 +5016,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       ? (didSuspend = mountSuspenseOffscreenState(renderLanes))
       : ((JSCompiler_temp = didSuspend.cachePool),
         null !== JSCompiler_temp
-          ? ((dehydrated$65 = CacheContext._currentValue),
+          ? ((dehydrated$68 = CacheContext._currentValue),
             (JSCompiler_temp =
-              JSCompiler_temp.parent !== dehydrated$65
-                ? { parent: dehydrated$65, pool: dehydrated$65 }
+              JSCompiler_temp.parent !== dehydrated$68
+                ? { parent: dehydrated$68, pool: dehydrated$68 }
                 : JSCompiler_temp))
           : (JSCompiler_temp = getSuspendedCache()),
         (didSuspend = {
@@ -4995,23 +5033,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         ((JSCompiler_temp = enableTransitionTracing
           ? markerInstanceStack.current
           : null),
-        (dehydrated$65 = showFallback.updateQueue),
+        (dehydrated$68 = showFallback.updateQueue),
         (primaryChildProps = current.updateQueue),
-        null === dehydrated$65
+        null === dehydrated$68
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue: null
             })
-          : dehydrated$65 === primaryChildProps
+          : dehydrated$68 === primaryChildProps
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue:
                 null !== primaryChildProps ? primaryChildProps.retryQueue : null
             })
-          : ((dehydrated$65.transitions = didSuspend),
-            (dehydrated$65.markerInstances = JSCompiler_temp))));
+          : ((dehydrated$68.transitions = didSuspend),
+            (dehydrated$68.markerInstances = JSCompiler_temp))));
     showFallback.childLanes = current.childLanes & ~renderLanes;
     workInProgress.memoizedState = SUSPENDED_MARKER;
     return nextProps;
@@ -5970,62 +6008,67 @@ function markRef(workInProgress) {
 }
 function updateHostComponent(current, workInProgress, type, newProps) {
   current = current.memoizedProps;
-  if (current !== newProps) {
-    type = null;
-    var propKey,
-      styleName,
-      styleUpdates = null;
-    for (propKey in current)
-      if (
-        !newProps.hasOwnProperty(propKey) &&
-        current.hasOwnProperty(propKey) &&
-        null != current[propKey]
-      )
-        switch (propKey) {
-          case "style":
-            var lastStyle = current[propKey];
-            for (styleName in lastStyle)
-              lastStyle.hasOwnProperty(styleName) &&
-                (styleUpdates || (styleUpdates = {}),
-                (styleUpdates[styleName] = ""));
-            break;
-          default:
-            (type = type || []).push(propKey, null);
-        }
-    for (propKey in newProps) {
-      lastStyle = newProps[propKey];
-      var lastProp = null != current ? current[propKey] : void 0;
-      if (
-        newProps.hasOwnProperty(propKey) &&
-        lastStyle !== lastProp &&
-        (null != lastStyle || null != lastProp)
-      )
-        switch (propKey) {
-          case "style":
-            if (lastProp) {
-              for (styleName in lastProp)
-                !lastProp.hasOwnProperty(styleName) ||
-                  (lastStyle && lastStyle.hasOwnProperty(styleName)) ||
-                  (styleUpdates || (styleUpdates = {}),
-                  (styleUpdates[styleName] = ""));
-              for (styleName in lastStyle)
-                lastStyle.hasOwnProperty(styleName) &&
-                  lastProp[styleName] !== lastStyle[styleName] &&
-                  (styleUpdates || (styleUpdates = {}),
-                  (styleUpdates[styleName] = lastStyle[styleName]));
-            } else
-              styleUpdates ||
-                (type || (type = []), type.push(propKey, styleUpdates)),
-                (styleUpdates = lastStyle);
-            break;
-          default:
-            (type = type || []).push(propKey, lastStyle);
+  if (current !== newProps)
+    if (diffInCommitPhase) markUpdate(workInProgress);
+    else {
+      if (diffInCommitPhase) newProps = null;
+      else {
+        type = null;
+        var propKey,
+          styleName,
+          styleUpdates = null;
+        for (propKey in current)
+          if (
+            !newProps.hasOwnProperty(propKey) &&
+            current.hasOwnProperty(propKey) &&
+            null != current[propKey]
+          )
+            switch (propKey) {
+              case "style":
+                var lastStyle = current[propKey];
+                for (styleName in lastStyle)
+                  lastStyle.hasOwnProperty(styleName) &&
+                    (styleUpdates || (styleUpdates = {}),
+                    (styleUpdates[styleName] = ""));
+                break;
+              default:
+                (type = type || []).push(propKey, null);
+            }
+        for (propKey in newProps) {
+          lastStyle = newProps[propKey];
+          var lastProp = null != current ? current[propKey] : void 0;
+          if (
+            newProps.hasOwnProperty(propKey) &&
+            lastStyle !== lastProp &&
+            (null != lastStyle || null != lastProp)
+          )
+            switch (propKey) {
+              case "style":
+                if (lastProp) {
+                  for (styleName in lastProp)
+                    !lastProp.hasOwnProperty(styleName) ||
+                      (lastStyle && lastStyle.hasOwnProperty(styleName)) ||
+                      (styleUpdates || (styleUpdates = {}),
+                      (styleUpdates[styleName] = ""));
+                  for (styleName in lastStyle)
+                    lastStyle.hasOwnProperty(styleName) &&
+                      lastProp[styleName] !== lastStyle[styleName] &&
+                      (styleUpdates || (styleUpdates = {}),
+                      (styleUpdates[styleName] = lastStyle[styleName]));
+                } else
+                  styleUpdates ||
+                    (type || (type = []), type.push(propKey, styleUpdates)),
+                    (styleUpdates = lastStyle);
+                break;
+              default:
+                (type = type || []).push(propKey, lastStyle);
+            }
         }
+        styleUpdates && (type = type || []).push("style", styleUpdates);
+        newProps = type;
+      }
+      (workInProgress.updateQueue = newProps) && markUpdate(workInProgress);
     }
-    styleUpdates && (type = type || []).push("style", styleUpdates);
-    newProps = type;
-    (workInProgress.updateQueue = newProps) && markUpdate(workInProgress);
-  }
 }
 function preloadResourceAndSuspendIfNeeded(workInProgress, resource) {
   if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4))
@@ -6069,14 +6112,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) {
         break;
       case "collapsed":
         lastTailNode = renderState.tail;
-        for (var lastTailNode$96 = null; null !== lastTailNode; )
-          null !== lastTailNode.alternate && (lastTailNode$96 = lastTailNode),
+        for (var lastTailNode$99 = null; null !== lastTailNode; )
+          null !== lastTailNode.alternate && (lastTailNode$99 = lastTailNode),
             (lastTailNode = lastTailNode.sibling);
-        null === lastTailNode$96
+        null === lastTailNode$99
           ? hasRenderedATailFallback || null === renderState.tail
             ? (renderState.tail = null)
             : (renderState.tail.sibling = null)
-          : (lastTailNode$96.sibling = null);
+          : (lastTailNode$99.sibling = null);
     }
 }
 function bubbleProperties(completedWork) {
@@ -6086,19 +6129,19 @@ function bubbleProperties(completedWork) {
     newChildLanes = 0,
     subtreeFlags = 0;
   if (didBailout)
-    for (var child$97 = completedWork.child; null !== child$97; )
-      (newChildLanes |= child$97.lanes | child$97.childLanes),
-        (subtreeFlags |= child$97.subtreeFlags & 31457280),
-        (subtreeFlags |= child$97.flags & 31457280),
-        (child$97.return = completedWork),
-        (child$97 = child$97.sibling);
+    for (var child$100 = completedWork.child; null !== child$100; )
+      (newChildLanes |= child$100.lanes | child$100.childLanes),
+        (subtreeFlags |= child$100.subtreeFlags & 31457280),
+        (subtreeFlags |= child$100.flags & 31457280),
+        (child$100.return = completedWork),
+        (child$100 = child$100.sibling);
   else
-    for (child$97 = completedWork.child; null !== child$97; )
-      (newChildLanes |= child$97.lanes | child$97.childLanes),
-        (subtreeFlags |= child$97.subtreeFlags),
-        (subtreeFlags |= child$97.flags),
-        (child$97.return = completedWork),
-        (child$97 = child$97.sibling);
+    for (child$100 = completedWork.child; null !== child$100; )
+      (newChildLanes |= child$100.lanes | child$100.childLanes),
+        (subtreeFlags |= child$100.subtreeFlags),
+        (subtreeFlags |= child$100.flags),
+        (child$100.return = completedWork),
+        (child$100 = child$100.sibling);
   completedWork.subtreeFlags |= subtreeFlags;
   completedWork.childLanes = newChildLanes;
   return didBailout;
@@ -6817,8 +6860,8 @@ function safelyDetachRef(current, nearestMountedAncestor) {
     else if ("function" === typeof ref)
       try {
         ref(null);
-      } catch (error$126) {
-        captureCommitPhaseError(current, nearestMountedAncestor, error$126);
+      } catch (error$129) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error$129);
       }
     else ref.current = null;
 }
@@ -6855,7 +6898,7 @@ function commitBeforeMutationEffects(root, firstChild) {
           selection = selection.focusOffset;
           try {
             JSCompiler_temp.nodeType, focusNode.nodeType;
-          } catch (e$190) {
+          } catch (e$193) {
             JSCompiler_temp = null;
             break a;
           }
@@ -7134,11 +7177,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
               current,
               finishedRoot.__reactInternalSnapshotBeforeUpdate
             );
-          } catch (error$128) {
+          } catch (error$131) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$128
+              error$131
             );
           }
         }
@@ -7818,8 +7861,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         }
         try {
           commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-        } catch (error$141) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$141);
+        } catch (error$144) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$144);
         }
       }
       break;
@@ -7988,20 +8031,24 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         )
           try {
             var domElement = finishedWork.stateNode,
+              type = finishedWork.type,
+              oldProps = current.memoizedProps,
               newProps = finishedWork.memoizedProps;
-            updateProperties(
-              domElement,
-              flags,
-              finishedWork.type,
-              current.memoizedProps,
-              newProps
-            );
+            diffInCommitPhase
+              ? updateProperties(domElement, type, oldProps, newProps)
+              : updatePropertiesWithDiff(
+                  domElement,
+                  flags,
+                  type,
+                  oldProps,
+                  newProps
+                );
             domElement[internalPropsKey] = newProps;
-          } catch (error$142) {
+          } catch (error$145) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$142
+              error$145
             );
           }
       break;
@@ -8037,8 +8084,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         root = finishedWork.stateNode;
         try {
           setTextContent(root, "");
-        } catch (error$143) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$143);
+        } catch (error$146) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$146);
         }
       }
       if (
@@ -8050,13 +8097,21 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
           (hoistableRoot = finishedWork.type),
           (maybeNodes = finishedWork.updateQueue),
           (finishedWork.updateQueue = null),
-          null !== maybeNodes))
+          null !== maybeNodes || diffInCommitPhase))
       )
         try {
-          updateProperties(flags, maybeNodes, hoistableRoot, current, root),
+          diffInCommitPhase
+            ? updateProperties(flags, hoistableRoot, current, root)
+            : updatePropertiesWithDiff(
+                flags,
+                maybeNodes,
+                hoistableRoot,
+                current,
+                root
+              ),
             (flags[internalPropsKey] = root);
-        } catch (error$146) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$146);
+        } catch (error$149) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$149);
         }
       break;
     case 6:
@@ -8069,8 +8124,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         flags = finishedWork.memoizedProps;
         try {
           current.nodeValue = flags;
-        } catch (error$147) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$147);
+        } catch (error$150) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$150);
         }
       }
       break;
@@ -8084,8 +8139,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
       if (flags & 4 && null !== current && current.memoizedState.isDehydrated)
         try {
           retryIfBlockedOn(root.containerInfo);
-        } catch (error$148) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$148);
+        } catch (error$151) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$151);
         }
       break;
     case 4:
@@ -8115,8 +8170,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               null !== retryQueue && suspenseCallback(new Set(retryQueue));
             }
           }
-        } catch (error$150) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$150);
+        } catch (error$153) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$153);
         }
         current = finishedWork.updateQueue;
         null !== current &&
@@ -8129,15 +8184,15 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         null !== current &&
         safelyDetachRef(current, current.return);
       domElement = null !== finishedWork.memoizedState;
-      newProps = null !== current && null !== current.memoizedState;
+      type = null !== current && null !== current.memoizedState;
       finishedWork.mode & 1
-        ? ((suspenseCallback = offscreenSubtreeIsHidden),
-          (retryQueue = offscreenSubtreeWasHidden),
-          (offscreenSubtreeIsHidden = suspenseCallback || domElement),
-          (offscreenSubtreeWasHidden = retryQueue || newProps),
+        ? ((oldProps = offscreenSubtreeIsHidden),
+          (newProps = offscreenSubtreeWasHidden),
+          (offscreenSubtreeIsHidden = oldProps || domElement),
+          (offscreenSubtreeWasHidden = newProps || type),
           recursivelyTraverseMutationEffects(root, finishedWork),
-          (offscreenSubtreeWasHidden = retryQueue),
-          (offscreenSubtreeIsHidden = suspenseCallback))
+          (offscreenSubtreeWasHidden = newProps),
+          (offscreenSubtreeIsHidden = oldProps))
         : recursivelyTraverseMutationEffects(root, finishedWork);
       commitReconciliationEffects(finishedWork);
       root = finishedWork.stateNode;
@@ -8152,7 +8207,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         domElement &&
           ((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden),
           null === current ||
-            newProps ||
+            type ||
             root ||
             (0 !== (finishedWork.mode & 1) &&
               recursivelyTraverseDisappearLayoutEffects(finishedWork))),
@@ -8194,11 +8249,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
             if (null === current)
               try {
                 root.stateNode.nodeValue = domElement ? "" : root.memoizedProps;
-              } catch (error$131) {
+              } catch (error$134) {
                 captureCommitPhaseError(
                   finishedWork,
                   finishedWork.return,
-                  error$131
+                  error$134
                 );
               }
           } else if (
@@ -8273,21 +8328,21 @@ function commitReconciliationEffects(finishedWork) {
             insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0);
             break;
           case 5:
-            var parent$132 = JSCompiler_inline_result.stateNode;
+            var parent$135 = JSCompiler_inline_result.stateNode;
             JSCompiler_inline_result.flags & 32 &&
-              (setTextContent(parent$132, ""),
+              (setTextContent(parent$135, ""),
               (JSCompiler_inline_result.flags &= -33));
-            var before$133 = getHostSibling(finishedWork);
-            insertOrAppendPlacementNode(finishedWork, before$133, parent$132);
+            var before$136 = getHostSibling(finishedWork);
+            insertOrAppendPlacementNode(finishedWork, before$136, parent$135);
             break;
           case 3:
           case 4:
-            var parent$134 = JSCompiler_inline_result.stateNode.containerInfo,
-              before$135 = getHostSibling(finishedWork);
+            var parent$137 = JSCompiler_inline_result.stateNode.containerInfo,
+              before$138 = getHostSibling(finishedWork);
             insertOrAppendPlacementNodeIntoContainer(
               finishedWork,
-              before$135,
-              parent$134
+              before$138,
+              parent$137
             );
             break;
           default:
@@ -8757,9 +8812,9 @@ function recursivelyTraverseReconnectPassiveEffects(
           );
         break;
       case 22:
-        var instance$160 = finishedWork.stateNode;
+        var instance$163 = finishedWork.stateNode;
         null !== finishedWork.memoizedState
-          ? instance$160._visibility & 4
+          ? instance$163._visibility & 4
             ? recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -8772,7 +8827,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork
               )
-            : ((instance$160._visibility |= 4),
+            : ((instance$163._visibility |= 4),
               recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -8780,7 +8835,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 committedTransitions,
                 includeWorkInProgressEffects
               ))
-          : ((instance$160._visibility |= 4),
+          : ((instance$163._visibility |= 4),
             recursivelyTraverseReconnectPassiveEffects(
               finishedRoot,
               finishedWork,
@@ -8793,7 +8848,7 @@ function recursivelyTraverseReconnectPassiveEffects(
           commitOffscreenPassiveMountEffects(
             finishedWork.alternate,
             finishedWork,
-            instance$160
+            instance$163
           );
         break;
       case 24:
@@ -9148,13 +9203,13 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
     isFlushingWork = !0;
     do {
       var didPerformSomeWork = !1;
-      for (var root$168 = firstScheduledRoot; null !== root$168; ) {
+      for (var root$171 = firstScheduledRoot; null !== root$171; ) {
         if (
-          (!onlyLegacy || 0 === root$168.tag) &&
+          (!onlyLegacy || 0 === root$171.tag) &&
           0 !==
             (getNextLanes(
-              root$168,
-              root$168 === workInProgressRoot$jscomp$0
+              root$171,
+              root$171 === workInProgressRoot$jscomp$0
                 ? workInProgressRootRenderLanes$jscomp$0
                 : 0
             ) &
@@ -9162,7 +9217,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
         )
           try {
             didPerformSomeWork = !0;
-            var root = root$168;
+            var root = root$171;
             if (0 !== (executionContext & 6))
               throw Error(formatProdErrorMessage(327));
             flushPassiveEffects();
@@ -9205,7 +9260,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
           } catch (error) {
             null === errors ? (errors = [error]) : errors.push(error);
           }
-        root$168 = root$168.next;
+        root$171 = root$171.next;
       }
     } while (didPerformSomeWork);
     isFlushingWork = !1;
@@ -9531,16 +9586,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         exitStatus = renderRootSync(root, lanes);
         if (2 === exitStatus) {
           errorRetryLanes = lanes;
-          var errorRetryLanes$171 = getLanesToRetrySynchronouslyOnError(
+          var errorRetryLanes$174 = getLanesToRetrySynchronouslyOnError(
             root,
             errorRetryLanes
           );
-          0 !== errorRetryLanes$171 &&
-            ((lanes = errorRetryLanes$171),
+          0 !== errorRetryLanes$174 &&
+            ((lanes = errorRetryLanes$174),
             (exitStatus = recoverFromConcurrentError(
               root,
               errorRetryLanes,
-              errorRetryLanes$171
+              errorRetryLanes$174
             )));
         }
         if (1 === exitStatus)
@@ -9601,14 +9656,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
           if ((lanes & 8388480) === lanes) break;
           exitStatus = lanes;
           errorRetryLanes = root.eventTimes;
-          for (errorRetryLanes$171 = -1; 0 < exitStatus; ) {
+          for (errorRetryLanes$174 = -1; 0 < exitStatus; ) {
             var index$1 = 31 - clz32(exitStatus),
               lane = 1 << index$1;
             index$1 = errorRetryLanes[index$1];
-            index$1 > errorRetryLanes$171 && (errorRetryLanes$171 = index$1);
+            index$1 > errorRetryLanes$174 && (errorRetryLanes$174 = index$1);
             exitStatus &= ~lane;
           }
-          exitStatus = errorRetryLanes$171;
+          exitStatus = errorRetryLanes$174;
           exitStatus = now() - exitStatus;
           exitStatus =
             (120 > exitStatus
@@ -9940,8 +9995,8 @@ function renderRootSync(root, lanes) {
       }
       workLoopSync();
       break;
-    } catch (thrownValue$174) {
-      handleThrow(root, thrownValue$174);
+    } catch (thrownValue$177) {
+      handleThrow(root, thrownValue$177);
     }
   while (1);
   resetContextDependencies();
@@ -10047,8 +10102,8 @@ function renderRootConcurrent(root, lanes) {
       }
       workLoopConcurrent();
       break;
-    } catch (thrownValue$176) {
-      handleThrow(root, thrownValue$176);
+    } catch (thrownValue$179) {
+      handleThrow(root, thrownValue$179);
     }
   while (1);
   resetContextDependencies();
@@ -10211,10 +10266,10 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) {
                       };
                       suspenseBoundary.updateQueue = newOffscreenQueue;
                     } else {
-                      var retryQueue$53 = offscreenQueue.retryQueue;
-                      null === retryQueue$53
+                      var retryQueue$56 = offscreenQueue.retryQueue;
+                      null === retryQueue$56
                         ? (offscreenQueue.retryQueue = new Set([wakeable]))
-                        : retryQueue$53.add(wakeable);
+                        : retryQueue$56.add(wakeable);
                     }
                   }
                   break;
@@ -10411,12 +10466,12 @@ function commitRootImpl(
     var prevExecutionContext = executionContext;
     executionContext |= 4;
     ReactCurrentOwner.current = null;
-    var shouldFireAfterActiveInstanceBlur$180 = commitBeforeMutationEffects(
+    var shouldFireAfterActiveInstanceBlur$183 = commitBeforeMutationEffects(
       root,
       finishedWork
     );
     commitMutationEffectsOnFiber(finishedWork, root);
-    shouldFireAfterActiveInstanceBlur$180 &&
+    shouldFireAfterActiveInstanceBlur$183 &&
       ((_enabled = !0),
       dispatchAfterDetachedBlur(selectionInformation.focusedElem),
       (_enabled = !1));
@@ -10495,7 +10550,7 @@ function releaseRootPooledCache(root, remainingLanes) {
 }
 function flushPassiveEffects() {
   if (null !== rootWithPendingPassiveEffects) {
-    var root$181 = rootWithPendingPassiveEffects,
+    var root$184 = rootWithPendingPassiveEffects,
       remainingLanes = pendingPassiveEffectsRemainingLanes;
     pendingPassiveEffectsRemainingLanes = 0;
     var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
@@ -10511,7 +10566,7 @@ function flushPassiveEffects() {
     } finally {
       (currentUpdatePriority = previousPriority),
         (ReactCurrentBatchConfig$1.transition = prevTransition),
-        releaseRootPooledCache(root$181, remainingLanes);
+        releaseRootPooledCache(root$184, remainingLanes);
     }
   }
   return !1;
@@ -11700,12 +11755,12 @@ function updateContainer(element, container, parentComponent, callback) {
 function attemptSynchronousHydration(fiber) {
   switch (fiber.tag) {
     case 3:
-      var root$183 = fiber.stateNode;
-      if (root$183.current.memoizedState.isDehydrated) {
-        var lanes = getHighestPriorityLanes(root$183.pendingLanes);
+      var root$186 = fiber.stateNode;
+      if (root$186.current.memoizedState.isDehydrated) {
+        var lanes = getHighestPriorityLanes(root$186.pendingLanes);
         0 !== lanes &&
-          (markRootEntangled(root$183, lanes | 2),
-          ensureRootIsScheduled(root$183),
+          (markRootEntangled(root$186, lanes | 2),
+          ensureRootIsScheduled(root$186),
           0 === (executionContext & 6) &&
             ((workInProgressRootRenderTargetTime = now() + 500),
             flushSyncWorkAcrossRoots_impl(!1)));
@@ -12797,19 +12852,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$329;
+  var JSCompiler_inline_result$jscomp$366;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1549 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1549) {
-      var element$jscomp$inline_1550 = document.createElement("div");
-      element$jscomp$inline_1550.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1549 =
-        "function" === typeof element$jscomp$inline_1550.oninput;
+    var isSupported$jscomp$inline_1593 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1593) {
+      var element$jscomp$inline_1594 = document.createElement("div");
+      element$jscomp$inline_1594.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1593 =
+        "function" === typeof element$jscomp$inline_1594.oninput;
     }
-    JSCompiler_inline_result$jscomp$329 = isSupported$jscomp$inline_1549;
-  } else JSCompiler_inline_result$jscomp$329 = !1;
+    JSCompiler_inline_result$jscomp$366 = isSupported$jscomp$inline_1593;
+  } else JSCompiler_inline_result$jscomp$366 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$329 &&
+    JSCompiler_inline_result$jscomp$366 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -13118,20 +13173,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1590 = 0;
-  i$jscomp$inline_1590 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1590++
+  var i$jscomp$inline_1634 = 0;
+  i$jscomp$inline_1634 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1634++
 ) {
-  var eventName$jscomp$inline_1591 =
-      simpleEventPluginEvents[i$jscomp$inline_1590],
-    domEventName$jscomp$inline_1592 =
-      eventName$jscomp$inline_1591.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1593 =
-      eventName$jscomp$inline_1591[0].toUpperCase() +
-      eventName$jscomp$inline_1591.slice(1);
+  var eventName$jscomp$inline_1635 =
+      simpleEventPluginEvents[i$jscomp$inline_1634],
+    domEventName$jscomp$inline_1636 =
+      eventName$jscomp$inline_1635.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1637 =
+      eventName$jscomp$inline_1635[0].toUpperCase() +
+      eventName$jscomp$inline_1635.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1592,
-    "on" + capitalizedEvent$jscomp$inline_1593
+    domEventName$jscomp$inline_1636,
+    "on" + capitalizedEvent$jscomp$inline_1637
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -13963,7 +14018,7 @@ function normalizeMarkupForTextOrAttribute(markup) {
     .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, "");
 }
 function noop$1() {}
-function setProp(domElement, tag, key, value, props) {
+function setProp(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "children":
       "string" === typeof value
@@ -13988,7 +14043,7 @@ function setProp(domElement, tag, key, value, props) {
       setValueForKnownAttribute(domElement, key, value);
       break;
     case "style":
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     case "src":
     case "href":
@@ -14204,6 +14259,9 @@ function setProp(domElement, tag, key, value, props) {
         value
       );
       break;
+    case "is":
+      setValueForAttribute(domElement, "is", value);
+      break;
     case "innerText":
     case "textContent":
       if (enableCustomElementPropertySupport) break;
@@ -14217,10 +14275,10 @@ function setProp(domElement, tag, key, value, props) {
           setValueForAttribute(domElement, key, value);
   }
 }
-function setPropOnCustomElement(domElement, tag, key, value, props) {
+function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "style":
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     case "dangerouslySetInnerHTML":
       if (null != value) {
@@ -14258,23 +14316,25 @@ function setPropOnCustomElement(domElement, tag, key, value, props) {
         if (enableCustomElementPropertySupport)
           a: {
             props = value;
-            if ("o" === key[0] && "n" === key[1]) {
-              tag = key.endsWith("Capture");
-              value = key.substr(2, tag ? key.length - 9 : void 0);
-              var prevProps = getFiberCurrentPropsFromNode(domElement);
-              prevProps = null != prevProps ? prevProps[key] : null;
-              "function" === typeof prevProps &&
-                domElement.removeEventListener(value, prevProps, tag);
-              if ("function" === typeof props) {
-                "function" !== typeof prevProps &&
-                  null !== prevProps &&
-                  (key in domElement
-                    ? (domElement[key] = null)
-                    : domElement.hasAttribute(key) &&
-                      domElement.removeAttribute(key));
-                domElement.addEventListener(value, props, tag);
-                break a;
-              }
+            if (
+              "o" === key[0] &&
+              "n" === key[1] &&
+              ((tag = key.endsWith("Capture")),
+              (value = key.substr(2, tag ? key.length - 9 : void 0)),
+              (prevValue = getFiberCurrentPropsFromNode(domElement)),
+              (prevValue = null != prevValue ? prevValue[key] : null),
+              "function" === typeof prevValue &&
+                domElement.removeEventListener(value, prevValue, tag),
+              "function" === typeof props)
+            ) {
+              "function" !== typeof prevValue &&
+                null !== prevValue &&
+                (key in domElement
+                  ? (domElement[key] = null)
+                  : domElement.hasAttribute(key) &&
+                    domElement.removeAttribute(key));
+              domElement.addEventListener(value, props, tag);
+              break a;
             }
             key in domElement
               ? (domElement[key] = props)
@@ -14328,7 +14388,7 @@ function setInitialProperties(domElement, tag, props) {
                   throw Error(formatProdErrorMessage(137, tag));
                 break;
               default:
-                setProp(domElement, tag, propKey, propValue, props);
+                setProp(domElement, tag, propKey, propValue, props, null);
             }
         }
       track(domElement);
@@ -14336,16 +14396,16 @@ function setInitialProperties(domElement, tag, props) {
       return;
     case "select":
       listenToNonDelegatedEvent("invalid", domElement);
-      for (var propKey$200 in props)
+      for (var propKey$203 in props)
         if (
-          props.hasOwnProperty(propKey$200) &&
-          ((propKey = props[propKey$200]), null != propKey)
+          props.hasOwnProperty(propKey$203) &&
+          ((propKey = props[propKey$203]), null != propKey)
         )
-          switch (propKey$200) {
+          switch (propKey$203) {
             case "value":
               break;
             default:
-              setProp(domElement, tag, propKey$200, propKey, props);
+              setProp(domElement, tag, propKey$203, propKey, props, null);
           }
       domElement.multiple = !!props.multiple;
       tag = props.value;
@@ -14356,12 +14416,12 @@ function setInitialProperties(domElement, tag, props) {
       return;
     case "textarea":
       listenToNonDelegatedEvent("invalid", domElement);
-      for (var propKey$202 in props)
+      for (var propKey$205 in props)
         if (
-          props.hasOwnProperty(propKey$202) &&
-          ((propKey = props[propKey$202]), null != propKey)
+          props.hasOwnProperty(propKey$205) &&
+          ((propKey = props[propKey$205]), null != propKey)
         )
-          switch (propKey$202) {
+          switch (propKey$205) {
             case "value":
               break;
             case "children":
@@ -14370,18 +14430,18 @@ function setInitialProperties(domElement, tag, props) {
               if (null != propKey) throw Error(formatProdErrorMessage(91));
               break;
             default:
-              setProp(domElement, tag, propKey$202, propKey, props);
+              setProp(domElement, tag, propKey$205, propKey, props);
           }
       track(domElement);
       initTextarea(domElement, props);
       return;
     case "option":
-      for (var propKey$204 in props)
+      for (var propKey$207 in props)
         if (
-          props.hasOwnProperty(propKey$204) &&
-          ((propKey = props[propKey$204]), null != propKey)
+          props.hasOwnProperty(propKey$207) &&
+          ((propKey = props[propKey$207]), null != propKey)
         )
-          switch (propKey$204) {
+          switch (propKey$207) {
             case "selected":
               domElement.selected =
                 propKey &&
@@ -14389,7 +14449,7 @@ function setInitialProperties(domElement, tag, props) {
                 "symbol" !== typeof propKey;
               break;
             default:
-              setProp(domElement, tag, propKey$204, propKey, props);
+              setProp(domElement, tag, propKey$207, propKey, props);
           }
       null != props.value &&
         domElement.setAttribute("value", "" + getToStringValue(props.value));
@@ -14431,31 +14491,32 @@ function setInitialProperties(domElement, tag, props) {
     case "track":
     case "wbr":
     case "menuitem":
-      for (var propKey$206 in props)
+      for (var propKey$209 in props)
         if (
-          props.hasOwnProperty(propKey$206) &&
-          ((propKey = props[propKey$206]), null != propKey)
+          props.hasOwnProperty(propKey$209) &&
+          ((propKey = props[propKey$209]), null != propKey)
         )
-          switch (propKey$206) {
+          switch (propKey$209) {
             case "children":
             case "dangerouslySetInnerHTML":
               throw Error(formatProdErrorMessage(137, tag));
             default:
-              setProp(domElement, tag, propKey$206, propKey, props);
+              setProp(domElement, tag, propKey$209, propKey, props, null);
           }
       return;
     default:
       if (isCustomElement(tag)) {
-        for (var propKey$208 in props)
-          props.hasOwnProperty(propKey$208) &&
-            ((propKey = props[propKey$208]),
+        for (var propKey$211 in props)
+          props.hasOwnProperty(propKey$211) &&
+            ((propKey = props[propKey$211]),
             null != propKey &&
               setPropOnCustomElement(
                 domElement,
                 tag,
-                propKey$208,
+                propKey$211,
                 propKey,
-                props
+                props,
+                null
               ));
         return;
       }
@@ -14463,9 +14524,317 @@ function setInitialProperties(domElement, tag, props) {
   for (propValue in props)
     props.hasOwnProperty(propValue) &&
       ((propKey = props[propValue]),
-      null != propKey && setProp(domElement, tag, propValue, propKey, props));
+      null != propKey &&
+        setProp(domElement, tag, propValue, propKey, props, null));
 }
-function updateProperties(
+function updateProperties(domElement, tag, lastProps, nextProps) {
+  switch (tag) {
+    case "div":
+    case "span":
+    case "svg":
+    case "path":
+    case "a":
+    case "g":
+    case "p":
+    case "li":
+      break;
+    case "input":
+      "radio" === nextProps.type &&
+        null != nextProps.name &&
+        updateInputChecked(domElement, nextProps);
+      for (var propKey in lastProps) {
+        var lastProp = lastProps[propKey];
+        if (
+          lastProps.hasOwnProperty(propKey) &&
+          null != lastProp &&
+          !nextProps.hasOwnProperty(propKey)
+        )
+          switch (propKey) {
+            case "checked":
+              lastProp = nextProps.defaultChecked;
+              domElement.checked =
+                !!lastProp &&
+                "function" !== typeof lastProp &&
+                "symbol" !== lastProp;
+              break;
+            case "value":
+              break;
+            default:
+              setProp(domElement, tag, propKey, null, nextProps, lastProp);
+          }
+      }
+      for (var propKey$215 in nextProps) {
+        lastProp = nextProps[propKey$215];
+        var lastProp$216 = lastProps[propKey$215];
+        if (
+          nextProps.hasOwnProperty(propKey$215) &&
+          lastProp !== lastProp$216 &&
+          (null != lastProp || null != lastProp$216)
+        )
+          switch (propKey$215) {
+            case "checked":
+              lastProp = null != lastProp ? lastProp : nextProps.defaultChecked;
+              domElement.checked =
+                !!lastProp &&
+                "function" !== typeof lastProp &&
+                "symbol" !== lastProp;
+              break;
+            case "value":
+              break;
+            case "children":
+            case "dangerouslySetInnerHTML":
+              if (null != lastProp)
+                throw Error(formatProdErrorMessage(137, tag));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$215,
+                lastProp,
+                nextProps,
+                lastProp$216
+              );
+          }
+      }
+      updateInput(domElement, nextProps);
+      return;
+    case "select":
+      for (var propKey$219 in lastProps)
+        if (
+          ((propKey$215 = lastProps[propKey$219]),
+          lastProps.hasOwnProperty(propKey$219) &&
+            null != propKey$215 &&
+            !nextProps.hasOwnProperty(propKey$219))
+        )
+          switch (propKey$219) {
+            case "value":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$219,
+                null,
+                nextProps,
+                propKey$215
+              );
+          }
+      for (lastProp in nextProps)
+        if (
+          ((propKey$215 = nextProps[lastProp]),
+          (lastProp$216 = lastProps[lastProp]),
+          nextProps.hasOwnProperty(lastProp) &&
+            propKey$215 !== lastProp$216 &&
+            (null != propKey$215 || null != lastProp$216))
+        )
+          switch (lastProp) {
+            case "value":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                lastProp,
+                propKey$215,
+                nextProps,
+                lastProp$216
+              );
+          }
+      updateSelect(domElement, lastProps, nextProps);
+      return;
+    case "textarea":
+      for (var propKey$224 in lastProps)
+        if (
+          ((propKey$215 = lastProps[propKey$224]),
+          lastProps.hasOwnProperty(propKey$224) &&
+            null != propKey$215 &&
+            !nextProps.hasOwnProperty(propKey$224))
+        )
+          switch (propKey$224) {
+            case "value":
+              break;
+            case "children":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$224,
+                null,
+                nextProps,
+                propKey$215
+              );
+          }
+      for (lastProp$216 in nextProps)
+        if (
+          ((propKey$215 = nextProps[lastProp$216]),
+          (lastProp = lastProps[lastProp$216]),
+          nextProps.hasOwnProperty(lastProp$216) &&
+            propKey$215 !== lastProp &&
+            (null != propKey$215 || null != lastProp))
+        )
+          switch (lastProp$216) {
+            case "value":
+              break;
+            case "children":
+              break;
+            case "dangerouslySetInnerHTML":
+              if (null != propKey$215) throw Error(formatProdErrorMessage(91));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                lastProp$216,
+                propKey$215,
+                nextProps,
+                lastProp
+              );
+          }
+      updateTextarea(domElement, nextProps);
+      return;
+    case "option":
+      for (var propKey$229 in lastProps)
+        if (
+          ((propKey$215 = lastProps[propKey$229]),
+          lastProps.hasOwnProperty(propKey$229) &&
+            null != propKey$215 &&
+            !nextProps.hasOwnProperty(propKey$229))
+        )
+          switch (propKey$229) {
+            case "selected":
+              domElement.selected = !1;
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$229,
+                null,
+                nextProps,
+                propKey$215
+              );
+          }
+      for (var propKey$231 in nextProps)
+        if (
+          ((propKey$215 = nextProps[propKey$231]),
+          (lastProp = lastProps[propKey$231]),
+          nextProps.hasOwnProperty(propKey$231) &&
+            propKey$215 !== lastProp &&
+            (null != propKey$215 || null != lastProp))
+        )
+          switch (propKey$231) {
+            case "selected":
+              domElement.selected =
+                propKey$215 &&
+                "function" !== typeof propKey$215 &&
+                "symbol" !== typeof propKey$215;
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$231,
+                propKey$215,
+                nextProps,
+                lastProp
+              );
+          }
+      return;
+    case "img":
+    case "link":
+    case "area":
+    case "base":
+    case "br":
+    case "col":
+    case "embed":
+    case "hr":
+    case "keygen":
+    case "meta":
+    case "param":
+    case "source":
+    case "track":
+    case "wbr":
+    case "menuitem":
+      for (var propKey$234 in lastProps)
+        (propKey$215 = lastProps[propKey$234]),
+          lastProps.hasOwnProperty(propKey$234) &&
+            null != propKey$215 &&
+            !nextProps.hasOwnProperty(propKey$234) &&
+            setProp(domElement, tag, propKey$234, null, nextProps, propKey$215);
+      for (var propKey$236 in nextProps)
+        if (
+          ((propKey$215 = nextProps[propKey$236]),
+          (lastProp = lastProps[propKey$236]),
+          nextProps.hasOwnProperty(propKey$236) &&
+            propKey$215 !== lastProp &&
+            (null != propKey$215 || null != lastProp))
+        )
+          switch (propKey$236) {
+            case "children":
+            case "dangerouslySetInnerHTML":
+              if (null != propKey$215)
+                throw Error(formatProdErrorMessage(137, tag));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$236,
+                propKey$215,
+                nextProps,
+                lastProp
+              );
+          }
+      return;
+    default:
+      if (isCustomElement(tag)) {
+        for (var propKey$239 in lastProps)
+          (propKey$215 = lastProps[propKey$239]),
+            lastProps.hasOwnProperty(propKey$239) &&
+              null != propKey$215 &&
+              !nextProps.hasOwnProperty(propKey$239) &&
+              setPropOnCustomElement(
+                domElement,
+                tag,
+                propKey$239,
+                null,
+                nextProps,
+                propKey$215
+              );
+        for (var propKey$241 in nextProps)
+          (propKey$215 = nextProps[propKey$241]),
+            (lastProp = lastProps[propKey$241]),
+            !nextProps.hasOwnProperty(propKey$241) ||
+              propKey$215 === lastProp ||
+              (null == propKey$215 && null == lastProp) ||
+              setPropOnCustomElement(
+                domElement,
+                tag,
+                propKey$241,
+                propKey$215,
+                nextProps,
+                lastProp
+              );
+        return;
+      }
+  }
+  for (var propKey$244 in lastProps)
+    (propKey$215 = lastProps[propKey$244]),
+      lastProps.hasOwnProperty(propKey$244) &&
+        null != propKey$215 &&
+        !nextProps.hasOwnProperty(propKey$244) &&
+        setProp(domElement, tag, propKey$244, null, nextProps, propKey$215);
+  for (var propKey$246 in nextProps)
+    (propKey$215 = nextProps[propKey$246]),
+      (lastProp = lastProps[propKey$246]),
+      !nextProps.hasOwnProperty(propKey$246) ||
+        propKey$215 === lastProp ||
+        (null == propKey$215 && null == lastProp) ||
+        setProp(domElement, tag, propKey$246, propKey$215, nextProps, lastProp);
+}
+function updatePropertiesWithDiff(
   domElement,
   updatePayload,
   tag,
@@ -14505,7 +14874,7 @@ function updateProperties(
               throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       }
       updateInput(domElement, nextProps);
@@ -14513,32 +14882,15 @@ function updateProperties(
     case "select":
       for (propKey = 0; propKey < updatePayload.length; propKey += 2) {
         propValue = updatePayload[propKey];
-        var propValue$214 = updatePayload[propKey + 1];
+        var propValue$251 = updatePayload[propKey + 1];
         switch (propValue) {
           case "value":
             break;
           default:
-            setProp(domElement, tag, propValue, propValue$214, nextProps);
+            setProp(domElement, tag, propValue, propValue$251, nextProps, null);
         }
       }
-      updatePayload = !!lastProps.multiple;
-      tag = nextProps.value;
-      null != tag
-        ? updateOptions(domElement, !!nextProps.multiple, tag, !1)
-        : updatePayload !== !!nextProps.multiple &&
-          (null != nextProps.defaultValue
-            ? updateOptions(
-                domElement,
-                !!nextProps.multiple,
-                nextProps.defaultValue,
-                !0
-              )
-            : updateOptions(
-                domElement,
-                !!nextProps.multiple,
-                nextProps.multiple ? [] : "",
-                !1
-              ));
+      updateSelect(domElement, lastProps, nextProps);
       return;
     case "textarea":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
@@ -14555,7 +14907,7 @@ function updateProperties(
             if (null != propValue) throw Error(formatProdErrorMessage(91));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       updateTextarea(domElement, nextProps);
       return;
@@ -14573,7 +14925,7 @@ function updateProperties(
               "symbol" !== typeof propValue;
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       return;
     case "img":
@@ -14603,7 +14955,7 @@ function updateProperties(
               throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       return;
     default:
@@ -14614,7 +14966,8 @@ function updateProperties(
             tag,
             updatePayload[lastProps],
             updatePayload[lastProps + 1],
-            nextProps
+            nextProps,
+            null
           );
         return;
       }
@@ -14625,7 +14978,8 @@ function updateProperties(
       tag,
       updatePayload[lastProps],
       updatePayload[lastProps + 1],
-      nextProps
+      nextProps,
+      null
     );
 }
 var Dispatcher$1 = Internals.Dispatcher,
@@ -14942,14 +15296,14 @@ function preinit$1(href, options) {
       switch (as) {
         case "style":
           as = getResourcesFromRoot(resourceRoot).hoistableStyles;
-          var key$231 = getStyleKey(href),
+          var key$268 = getStyleKey(href),
             precedence = options.precedence || "default",
-            resource = as.get(key$231);
+            resource = as.get(key$268);
           if (resource) break;
           var state = { loading: 0, preload: null };
           if (
             (resource = resourceRoot.querySelector(
-              getStylesheetSelectorFromKey(key$231)
+              getStylesheetSelectorFromKey(key$268)
             ))
           )
             state.loading = 1;
@@ -14960,7 +15314,7 @@ function preinit$1(href, options) {
               "data-precedence": precedence,
               crossOrigin: options.crossOrigin
             };
-            (options = preloadPropsMap.get(key$231)) &&
+            (options = preloadPropsMap.get(key$268)) &&
               adoptPreloadPropsForStylesheet(href, options);
             var link = (resource = (
               resourceRoot.ownerDocument || resourceRoot
@@ -14986,15 +15340,15 @@ function preinit$1(href, options) {
             count: 1,
             state: state
           };
-          as.set(key$231, resource);
+          as.set(key$268, resource);
           break;
         case "script":
           (as = getResourcesFromRoot(resourceRoot).hoistableScripts),
-            (key$231 = getScriptKey(href)),
-            (precedence = as.get(key$231)),
+            (key$268 = getScriptKey(href)),
+            (precedence = as.get(key$268)),
             precedence ||
               ((precedence = resourceRoot.querySelector(
-                "script[async]" + key$231
+                "script[async]" + key$268
               )),
               precedence ||
                 ((href = {
@@ -15003,7 +15357,7 @@ function preinit$1(href, options) {
                   crossOrigin: options.crossOrigin,
                   integrity: options.integrity
                 }),
-                (options = preloadPropsMap.get(key$231)) &&
+                (options = preloadPropsMap.get(key$268)) &&
                   adoptPreloadPropsForScript(href, options),
                 (options = resourceRoot.ownerDocument || resourceRoot),
                 (precedence = options.createElement("script")),
@@ -15016,13 +15370,13 @@ function preinit$1(href, options) {
                 count: 1,
                 state: null
               }),
-              as.set(key$231, precedence));
+              as.set(key$268, precedence));
       }
     else if ("style" === as || "script" === as)
       if ((resourceRoot = getDocumentForPreloads())) {
-        key$231 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
-        precedence = key$231 =
-          'link[rel="preload"][as="' + as + '"][href="' + key$231 + '"]';
+        key$268 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
+        precedence = key$268 =
+          'link[rel="preload"][as="' + as + '"][href="' + key$268 + '"]';
         switch (as) {
           case "style":
             precedence = getStyleKey(href);
@@ -15039,7 +15393,7 @@ function preinit$1(href, options) {
             integrity: options.integrity
           }),
           preloadPropsMap.set(precedence, href),
-          null === resourceRoot.querySelector(key$231) &&
+          null === resourceRoot.querySelector(key$268) &&
             ((options = resourceRoot.createElement("link")),
             setInitialProperties(options, "link", href),
             markNodeAsHoistable(options),
@@ -15072,17 +15426,17 @@ function getResource(type, currentProps, pendingProps) {
         "string" === typeof pendingProps.precedence
       ) {
         type = getStyleKey(pendingProps.href);
-        var styles$240 = getResourcesFromRoot(currentProps).hoistableStyles,
-          resource$241 = styles$240.get(type);
-        resource$241 ||
+        var styles$277 = getResourcesFromRoot(currentProps).hoistableStyles,
+          resource$278 = styles$277.get(type);
+        resource$278 ||
           ((currentProps = currentProps.ownerDocument || currentProps),
-          (resource$241 = {
+          (resource$278 = {
             type: "stylesheet",
             instance: null,
             count: 0,
             state: { loading: 0, preload: null }
           }),
-          styles$240.set(type, resource$241),
+          styles$277.set(type, resource$278),
           preloadPropsMap.has(type) ||
             preloadStylesheet(
               currentProps,
@@ -15097,9 +15451,9 @@ function getResource(type, currentProps, pendingProps) {
                 hrefLang: pendingProps.hrefLang,
                 referrerPolicy: pendingProps.referrerPolicy
               },
-              resource$241.state
+              resource$278.state
             ));
-        return resource$241;
+        return resource$278;
       }
       return null;
     case "script":
@@ -15171,36 +15525,36 @@ function acquireResource(hoistableRoot, resource, props) {
         return (resource.instance = key);
       case "stylesheet":
         styleProps = getStyleKey(props.href);
-        var instance$246 = hoistableRoot.querySelector(
+        var instance$283 = hoistableRoot.querySelector(
           getStylesheetSelectorFromKey(styleProps)
         );
-        if (instance$246)
+        if (instance$283)
           return (
-            (resource.instance = instance$246),
-            markNodeAsHoistable(instance$246),
-            instance$246
+            (resource.instance = instance$283),
+            markNodeAsHoistable(instance$283),
+            instance$283
           );
         key = stylesheetPropsFromRawProps(props);
         (styleProps = preloadPropsMap.get(styleProps)) &&
           adoptPreloadPropsForStylesheet(key, styleProps);
-        instance$246 = (
+        instance$283 = (
           hoistableRoot.ownerDocument || hoistableRoot
         ).createElement("link");
-        markNodeAsHoistable(instance$246);
-        var linkInstance = instance$246;
+        markNodeAsHoistable(instance$283);
+        var linkInstance = instance$283;
         linkInstance._p = new Promise(function (resolve, reject) {
           linkInstance.onload = resolve;
           linkInstance.onerror = reject;
         });
-        setInitialProperties(instance$246, "link", key);
+        setInitialProperties(instance$283, "link", key);
         resource.state.loading |= 4;
-        insertStylesheet(instance$246, props.precedence, hoistableRoot);
-        return (resource.instance = instance$246);
+        insertStylesheet(instance$283, props.precedence, hoistableRoot);
+        return (resource.instance = instance$283);
       case "script":
-        instance$246 = getScriptKey(props.src);
+        instance$283 = getScriptKey(props.src);
         if (
           (styleProps = hoistableRoot.querySelector(
-            "script[async]" + instance$246
+            "script[async]" + instance$283
           ))
         )
           return (
@@ -15209,7 +15563,7 @@ function acquireResource(hoistableRoot, resource, props) {
             styleProps
           );
         key = props;
-        if ((styleProps = preloadPropsMap.get(instance$246)))
+        if ((styleProps = preloadPropsMap.get(instance$283)))
           (key = assign({}, props)),
             adoptPreloadPropsForScript(key, styleProps);
         hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot;
@@ -15579,17 +15933,17 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1770 = {
+var devToolsConfig$jscomp$inline_1807 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-5d5ce6c4",
+  version: "18.3.0-www-modern-16735c9e",
   rendererPackageName: "react-dom"
 };
-var internals$jscomp$inline_2144 = {
-  bundleType: devToolsConfig$jscomp$inline_1770.bundleType,
-  version: devToolsConfig$jscomp$inline_1770.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1770.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1770.rendererConfig,
+var internals$jscomp$inline_2181 = {
+  bundleType: devToolsConfig$jscomp$inline_1807.bundleType,
+  version: devToolsConfig$jscomp$inline_1807.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1807.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1807.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -15606,26 +15960,26 @@ var internals$jscomp$inline_2144 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1770.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1807.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-5d5ce6c4"
+  reconcilerVersion: "18.3.0-www-modern-16735c9e"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2145 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2182 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2145.isDisabled &&
-    hook$jscomp$inline_2145.supportsFiber
+    !hook$jscomp$inline_2182.isDisabled &&
+    hook$jscomp$inline_2182.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2145.inject(
-        internals$jscomp$inline_2144
+      (rendererID = hook$jscomp$inline_2182.inject(
+        internals$jscomp$inline_2181
       )),
-        (injectedHook = hook$jscomp$inline_2145);
+        (injectedHook = hook$jscomp$inline_2182);
     } catch (err) {}
 }
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
@@ -15782,4 +16136,4 @@ exports.unstable_createEventHandle = function (type, options) {
   return eventHandle;
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-modern-5d5ce6c4";
+exports.version = "18.3.0-www-modern-16735c9e";
diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js
index 9acc4627f4c06..b65100e507131 100644
--- a/compiled/facebook-www/ReactDOM-profiling.classic.js
+++ b/compiled/facebook-www/ReactDOM-profiling.classic.js
@@ -66,6 +66,7 @@ var ReactSharedInternals =
     dynamicFeatureFlags.enableCustomElementPropertySupport,
   enableDeferRootSchedulingToMicrotask =
     dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask,
+  diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase,
   enableProfilerNestedUpdateScheduledHook =
     dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook,
   enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler,
@@ -1223,6 +1224,21 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
     null !== multiple && (multiple.selected = !0);
   }
 }
+function updateSelect(element, prevProps, props) {
+  prevProps = !!prevProps.multiple;
+  var value = props.value;
+  null != value
+    ? updateOptions(element, !!props.multiple, value, !1)
+    : prevProps !== !!props.multiple &&
+      (null != props.defaultValue
+        ? updateOptions(element, !!props.multiple, props.defaultValue, !0)
+        : updateOptions(
+            element,
+            !!props.multiple,
+            props.multiple ? [] : "",
+            !1
+          ));
+}
 function updateTextarea(element, props) {
   var value = getToStringValue(props.value);
   if (
@@ -1325,30 +1341,44 @@ var unitlessNumbers = new Set(
     " "
   )
 );
-function setValueForStyles(node, styles) {
+function setValueForStyle(style, styleName, value) {
+  var isCustomProperty = 0 === styleName.indexOf("--");
+  null == value || "boolean" === typeof value || "" === value
+    ? isCustomProperty
+      ? style.setProperty(styleName, "")
+      : "float" === styleName
+      ? (style.cssFloat = "")
+      : (style[styleName] = "")
+    : isCustomProperty
+    ? style.setProperty(styleName, value)
+    : "number" !== typeof value || 0 === value || unitlessNumbers.has(styleName)
+    ? "float" === styleName
+      ? (style.cssFloat = value)
+      : (style[styleName] = ("" + value).trim())
+    : (style[styleName] = value + "px");
+}
+function setValueForStyles(node, styles, prevStyles) {
   if (null != styles && "object" !== typeof styles)
     throw Error(formatProdErrorMessage(62));
   node = node.style;
-  for (var styleName in styles)
-    if (styles.hasOwnProperty(styleName)) {
-      var value = styles[styleName],
-        isCustomProperty = 0 === styleName.indexOf("--");
-      null == value || "boolean" === typeof value || "" === value
-        ? isCustomProperty
+  if (diffInCommitPhase && null != prevStyles) {
+    for (var styleName in prevStyles)
+      !prevStyles.hasOwnProperty(styleName) ||
+        (null != styles && styles.hasOwnProperty(styleName)) ||
+        (0 === styleName.indexOf("--")
           ? node.setProperty(styleName, "")
           : "float" === styleName
           ? (node.cssFloat = "")
-          : (node[styleName] = "")
-        : isCustomProperty
-        ? node.setProperty(styleName, value)
-        : "number" !== typeof value ||
-          0 === value ||
-          unitlessNumbers.has(styleName)
-        ? "float" === styleName
-          ? (node.cssFloat = value)
-          : (node[styleName] = ("" + value).trim())
-        : (node[styleName] = value + "px");
-    }
+          : (node[styleName] = ""));
+    for (var styleName$19 in styles)
+      (styleName = styles[styleName$19]),
+        styles.hasOwnProperty(styleName$19) &&
+          prevStyles[styleName$19] !== styleName &&
+          setValueForStyle(node, styleName$19, styleName);
+  } else
+    for (var styleName$20 in styles)
+      styles.hasOwnProperty(styleName$20) &&
+        setValueForStyle(node, styleName$20, styles[styleName$20]);
 }
 function isCustomElement(tagName) {
   if (-1 === tagName.indexOf("-")) return !1;
@@ -1784,8 +1814,8 @@ function prepareToHydrateHostInstance(fiber) {
       break;
     case "video":
     case "audio":
-      for (type = 0; type < mediaEventTypes.length; type++)
-        listenToNonDelegatedEvent(mediaEventTypes[type], instance);
+      for (var i = 0; i < mediaEventTypes.length; i++)
+        listenToNonDelegatedEvent(mediaEventTypes[i], instance);
       break;
     case "source":
       listenToNonDelegatedEvent("error", instance);
@@ -1812,20 +1842,28 @@ function prepareToHydrateHostInstance(fiber) {
         track(instance),
         initTextarea(instance, props);
   }
-  var updatePayload = null;
-  type = props.children;
-  ("string" !== typeof type && "number" !== typeof type) ||
-    instance.textContent === "" + type ||
-    (!0 !== props.suppressHydrationWarning &&
-      ((updatePayload = instance.textContent),
-      normalizeMarkupForTextOrAttribute(type),
-      normalizeMarkupForTextOrAttribute(updatePayload)),
-    (updatePayload = ["children", type]));
+  i = null;
+  var children = props.children;
+  if (
+    ("string" === typeof children || "number" === typeof children) &&
+    instance.textContent !== "" + children
+  ) {
+    if (!0 !== props.suppressHydrationWarning) {
+      var serverText = instance.textContent;
+      normalizeMarkupForTextOrAttribute(children);
+      normalizeMarkupForTextOrAttribute(serverText);
+    }
+    diffInCommitPhase
+      ? "body" !== type && (instance.textContent = children)
+      : (i = ["children", children]);
+  }
   null != props.onScroll && listenToNonDelegatedEvent("scroll", instance);
   null != props.onClick && (instance.onclick = noop$1);
-  instance = updatePayload;
-  fiber.updateQueue = instance;
-  return null !== instance ? !0 : !1;
+  instance = i;
+  return diffInCommitPhase ||
+    ((fiber.updateQueue = instance), null === instance)
+    ? !1
+    : !0;
 }
 function popToNextHostParent(fiber) {
   for (hydrationParentFiber = fiber.return; hydrationParentFiber; )
@@ -3300,10 +3338,10 @@ createFunctionComponentUpdateQueue = function () {
 function use(usable) {
   if (null !== usable && "object" === typeof usable) {
     if ("function" === typeof usable.then) {
-      var index$44 = thenableIndexCounter;
+      var index$47 = thenableIndexCounter;
       thenableIndexCounter += 1;
       null === thenableState && (thenableState = []);
-      usable = trackUsedThenable(thenableState, usable, index$44);
+      usable = trackUsedThenable(thenableState, usable, index$47);
       null === currentlyRenderingFiber$1.alternate &&
         (null === workInProgressHook
           ? null === currentlyRenderingFiber$1.memoizedState
@@ -3791,16 +3829,16 @@ function refreshCache(fiber, seedKey, seedValue) {
       case 3:
         var lane = requestUpdateLane(provider);
         fiber = createUpdate(lane);
-        var root$50 = enqueueUpdate(provider, fiber, lane);
-        if (null !== root$50) {
+        var root$53 = enqueueUpdate(provider, fiber, lane);
+        if (null !== root$53) {
           var eventTime = requestEventTime();
-          scheduleUpdateOnFiber(root$50, provider, lane, eventTime);
-          entangleTransitions(root$50, provider, lane);
+          scheduleUpdateOnFiber(root$53, provider, lane, eventTime);
+          entangleTransitions(root$53, provider, lane);
         }
         provider = createCache();
         null !== seedKey &&
           void 0 !== seedKey &&
-          null !== root$50 &&
+          null !== root$53 &&
           provider.data.set(seedKey, seedValue);
         fiber.payload = { cache: provider };
         return;
@@ -4009,15 +4047,15 @@ var HooksDispatcherOnMount = {
       getServerSnapshot = getServerSnapshot();
     } else {
       getServerSnapshot = getSnapshot();
-      var root$46 = workInProgressRoot;
-      if (null === root$46) throw Error(formatProdErrorMessage(349));
-      includesBlockingLane(root$46, renderLanes$1) ||
+      var root$49 = workInProgressRoot;
+      if (null === root$49) throw Error(formatProdErrorMessage(349));
+      includesBlockingLane(root$49, renderLanes$1) ||
         pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot);
     }
     hook.memoizedState = getServerSnapshot;
-    root$46 = { value: getServerSnapshot, getSnapshot: getSnapshot };
-    hook.queue = root$46;
-    mountEffect(subscribeToStore.bind(null, fiber, root$46, subscribe), [
+    root$49 = { value: getServerSnapshot, getSnapshot: getSnapshot };
+    hook.queue = root$49;
+    mountEffect(subscribeToStore.bind(null, fiber, root$49, subscribe), [
       subscribe
     ]);
     fiber.flags |= 2048;
@@ -4026,7 +4064,7 @@ var HooksDispatcherOnMount = {
       updateStoreInstance.bind(
         null,
         fiber,
-        root$46,
+        root$49,
         getServerSnapshot,
         getSnapshot
       ),
@@ -4594,10 +4632,10 @@ var markerInstanceStack = createCursor(null);
 function pushRootMarkerInstance(workInProgress) {
   if (enableTransitionTracing) {
     var transitions = workInProgressTransitions,
-      root$63 = workInProgress.stateNode;
+      root$66 = workInProgress.stateNode;
     null !== transitions &&
       transitions.forEach(function (transition) {
-        if (!root$63.incompleteTransitions.has(transition)) {
+        if (!root$66.incompleteTransitions.has(transition)) {
           var markerInstance = {
             tag: 0,
             transitions: new Set([transition]),
@@ -4605,11 +4643,11 @@ function pushRootMarkerInstance(workInProgress) {
             aborts: null,
             name: null
           };
-          root$63.incompleteTransitions.set(transition, markerInstance);
+          root$66.incompleteTransitions.set(transition, markerInstance);
         }
       });
     var markerInstances = [];
-    root$63.incompleteTransitions.forEach(function (markerInstance) {
+    root$66.incompleteTransitions.forEach(function (markerInstance) {
       markerInstances.push(markerInstance);
     });
     push(markerInstanceStack, markerInstances);
@@ -5319,14 +5357,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   }
   JSCompiler_temp = current.memoizedState;
   if (null !== JSCompiler_temp) {
-    var dehydrated$70 = JSCompiler_temp.dehydrated;
-    if (null !== dehydrated$70)
+    var dehydrated$73 = JSCompiler_temp.dehydrated;
+    if (null !== dehydrated$73)
       return updateDehydratedSuspenseComponent(
         current,
         workInProgress,
         didSuspend,
         nextProps,
-        dehydrated$70,
+        dehydrated$73,
         JSCompiler_temp,
         renderLanes
       );
@@ -5336,7 +5374,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
     showFallback = nextProps.fallback;
     didSuspend = workInProgress.mode;
     JSCompiler_temp = current.child;
-    dehydrated$70 = JSCompiler_temp.sibling;
+    dehydrated$73 = JSCompiler_temp.sibling;
     var primaryChildProps = { mode: "hidden", children: nextProps.children };
     0 === (didSuspend & 1) && workInProgress.child !== JSCompiler_temp
       ? ((nextProps = workInProgress.child),
@@ -5350,8 +5388,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         (workInProgress.deletions = null))
       : ((nextProps = createWorkInProgress(JSCompiler_temp, primaryChildProps)),
         (nextProps.subtreeFlags = JSCompiler_temp.subtreeFlags & 31457280));
-    null !== dehydrated$70
-      ? (showFallback = createWorkInProgress(dehydrated$70, showFallback))
+    null !== dehydrated$73
+      ? (showFallback = createWorkInProgress(dehydrated$73, showFallback))
       : ((showFallback = createFiberFromFragment(
           showFallback,
           didSuspend,
@@ -5370,10 +5408,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       ? (didSuspend = mountSuspenseOffscreenState(renderLanes))
       : ((JSCompiler_temp = didSuspend.cachePool),
         null !== JSCompiler_temp
-          ? ((dehydrated$70 = CacheContext._currentValue),
+          ? ((dehydrated$73 = CacheContext._currentValue),
             (JSCompiler_temp =
-              JSCompiler_temp.parent !== dehydrated$70
-                ? { parent: dehydrated$70, pool: dehydrated$70 }
+              JSCompiler_temp.parent !== dehydrated$73
+                ? { parent: dehydrated$73, pool: dehydrated$73 }
                 : JSCompiler_temp))
           : (JSCompiler_temp = getSuspendedCache()),
         (didSuspend = {
@@ -5387,23 +5425,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         ((JSCompiler_temp = enableTransitionTracing
           ? markerInstanceStack.current
           : null),
-        (dehydrated$70 = showFallback.updateQueue),
+        (dehydrated$73 = showFallback.updateQueue),
         (primaryChildProps = current.updateQueue),
-        null === dehydrated$70
+        null === dehydrated$73
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue: null
             })
-          : dehydrated$70 === primaryChildProps
+          : dehydrated$73 === primaryChildProps
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue:
                 null !== primaryChildProps ? primaryChildProps.retryQueue : null
             })
-          : ((dehydrated$70.transitions = didSuspend),
-            (dehydrated$70.markerInstances = JSCompiler_temp))));
+          : ((dehydrated$73.transitions = didSuspend),
+            (dehydrated$73.markerInstances = JSCompiler_temp))));
     showFallback.childLanes = current.childLanes & ~renderLanes;
     workInProgress.memoizedState = SUSPENDED_MARKER;
     return nextProps;
@@ -6379,62 +6417,67 @@ function markRef(workInProgress) {
 }
 function updateHostComponent(current, workInProgress, type, newProps) {
   current = current.memoizedProps;
-  if (current !== newProps) {
-    type = null;
-    var propKey,
-      styleName,
-      styleUpdates = null;
-    for (propKey in current)
-      if (
-        !newProps.hasOwnProperty(propKey) &&
-        current.hasOwnProperty(propKey) &&
-        null != current[propKey]
-      )
-        switch (propKey) {
-          case "style":
-            var lastStyle = current[propKey];
-            for (styleName in lastStyle)
-              lastStyle.hasOwnProperty(styleName) &&
-                (styleUpdates || (styleUpdates = {}),
-                (styleUpdates[styleName] = ""));
-            break;
-          default:
-            (type = type || []).push(propKey, null);
-        }
-    for (propKey in newProps) {
-      lastStyle = newProps[propKey];
-      var lastProp = null != current ? current[propKey] : void 0;
-      if (
-        newProps.hasOwnProperty(propKey) &&
-        lastStyle !== lastProp &&
-        (null != lastStyle || null != lastProp)
-      )
-        switch (propKey) {
-          case "style":
-            if (lastProp) {
-              for (styleName in lastProp)
-                !lastProp.hasOwnProperty(styleName) ||
-                  (lastStyle && lastStyle.hasOwnProperty(styleName)) ||
-                  (styleUpdates || (styleUpdates = {}),
-                  (styleUpdates[styleName] = ""));
-              for (styleName in lastStyle)
-                lastStyle.hasOwnProperty(styleName) &&
-                  lastProp[styleName] !== lastStyle[styleName] &&
-                  (styleUpdates || (styleUpdates = {}),
-                  (styleUpdates[styleName] = lastStyle[styleName]));
-            } else
-              styleUpdates ||
-                (type || (type = []), type.push(propKey, styleUpdates)),
-                (styleUpdates = lastStyle);
-            break;
-          default:
-            (type = type || []).push(propKey, lastStyle);
+  if (current !== newProps)
+    if (diffInCommitPhase) markUpdate(workInProgress);
+    else {
+      if (diffInCommitPhase) newProps = null;
+      else {
+        type = null;
+        var propKey,
+          styleName,
+          styleUpdates = null;
+        for (propKey in current)
+          if (
+            !newProps.hasOwnProperty(propKey) &&
+            current.hasOwnProperty(propKey) &&
+            null != current[propKey]
+          )
+            switch (propKey) {
+              case "style":
+                var lastStyle = current[propKey];
+                for (styleName in lastStyle)
+                  lastStyle.hasOwnProperty(styleName) &&
+                    (styleUpdates || (styleUpdates = {}),
+                    (styleUpdates[styleName] = ""));
+                break;
+              default:
+                (type = type || []).push(propKey, null);
+            }
+        for (propKey in newProps) {
+          lastStyle = newProps[propKey];
+          var lastProp = null != current ? current[propKey] : void 0;
+          if (
+            newProps.hasOwnProperty(propKey) &&
+            lastStyle !== lastProp &&
+            (null != lastStyle || null != lastProp)
+          )
+            switch (propKey) {
+              case "style":
+                if (lastProp) {
+                  for (styleName in lastProp)
+                    !lastProp.hasOwnProperty(styleName) ||
+                      (lastStyle && lastStyle.hasOwnProperty(styleName)) ||
+                      (styleUpdates || (styleUpdates = {}),
+                      (styleUpdates[styleName] = ""));
+                  for (styleName in lastStyle)
+                    lastStyle.hasOwnProperty(styleName) &&
+                      lastProp[styleName] !== lastStyle[styleName] &&
+                      (styleUpdates || (styleUpdates = {}),
+                      (styleUpdates[styleName] = lastStyle[styleName]));
+                } else
+                  styleUpdates ||
+                    (type || (type = []), type.push(propKey, styleUpdates)),
+                    (styleUpdates = lastStyle);
+                break;
+              default:
+                (type = type || []).push(propKey, lastStyle);
+            }
         }
+        styleUpdates && (type = type || []).push("style", styleUpdates);
+        newProps = type;
+      }
+      (workInProgress.updateQueue = newProps) && markUpdate(workInProgress);
     }
-    styleUpdates && (type = type || []).push("style", styleUpdates);
-    newProps = type;
-    (workInProgress.updateQueue = newProps) && markUpdate(workInProgress);
-  }
 }
 function preloadResourceAndSuspendIfNeeded(workInProgress, resource) {
   if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4))
@@ -6478,14 +6521,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) {
         break;
       case "collapsed":
         lastTailNode = renderState.tail;
-        for (var lastTailNode$102 = null; null !== lastTailNode; )
-          null !== lastTailNode.alternate && (lastTailNode$102 = lastTailNode),
+        for (var lastTailNode$105 = null; null !== lastTailNode; )
+          null !== lastTailNode.alternate && (lastTailNode$105 = lastTailNode),
             (lastTailNode = lastTailNode.sibling);
-        null === lastTailNode$102
+        null === lastTailNode$105
           ? hasRenderedATailFallback || null === renderState.tail
             ? (renderState.tail = null)
             : (renderState.tail.sibling = null)
-          : (lastTailNode$102.sibling = null);
+          : (lastTailNode$105.sibling = null);
     }
 }
 function bubbleProperties(completedWork) {
@@ -6497,53 +6540,53 @@ function bubbleProperties(completedWork) {
   if (didBailout)
     if (0 !== (completedWork.mode & 2)) {
       for (
-        var treeBaseDuration$104 = completedWork.selfBaseDuration,
-          child$105 = completedWork.child;
-        null !== child$105;
+        var treeBaseDuration$107 = completedWork.selfBaseDuration,
+          child$108 = completedWork.child;
+        null !== child$108;
 
       )
-        (newChildLanes |= child$105.lanes | child$105.childLanes),
-          (subtreeFlags |= child$105.subtreeFlags & 31457280),
-          (subtreeFlags |= child$105.flags & 31457280),
-          (treeBaseDuration$104 += child$105.treeBaseDuration),
-          (child$105 = child$105.sibling);
-      completedWork.treeBaseDuration = treeBaseDuration$104;
+        (newChildLanes |= child$108.lanes | child$108.childLanes),
+          (subtreeFlags |= child$108.subtreeFlags & 31457280),
+          (subtreeFlags |= child$108.flags & 31457280),
+          (treeBaseDuration$107 += child$108.treeBaseDuration),
+          (child$108 = child$108.sibling);
+      completedWork.treeBaseDuration = treeBaseDuration$107;
     } else
       for (
-        treeBaseDuration$104 = completedWork.child;
-        null !== treeBaseDuration$104;
+        treeBaseDuration$107 = completedWork.child;
+        null !== treeBaseDuration$107;
 
       )
         (newChildLanes |=
-          treeBaseDuration$104.lanes | treeBaseDuration$104.childLanes),
-          (subtreeFlags |= treeBaseDuration$104.subtreeFlags & 31457280),
-          (subtreeFlags |= treeBaseDuration$104.flags & 31457280),
-          (treeBaseDuration$104.return = completedWork),
-          (treeBaseDuration$104 = treeBaseDuration$104.sibling);
+          treeBaseDuration$107.lanes | treeBaseDuration$107.childLanes),
+          (subtreeFlags |= treeBaseDuration$107.subtreeFlags & 31457280),
+          (subtreeFlags |= treeBaseDuration$107.flags & 31457280),
+          (treeBaseDuration$107.return = completedWork),
+          (treeBaseDuration$107 = treeBaseDuration$107.sibling);
   else if (0 !== (completedWork.mode & 2)) {
-    treeBaseDuration$104 = completedWork.actualDuration;
-    child$105 = completedWork.selfBaseDuration;
+    treeBaseDuration$107 = completedWork.actualDuration;
+    child$108 = completedWork.selfBaseDuration;
     for (var child = completedWork.child; null !== child; )
       (newChildLanes |= child.lanes | child.childLanes),
         (subtreeFlags |= child.subtreeFlags),
         (subtreeFlags |= child.flags),
-        (treeBaseDuration$104 += child.actualDuration),
-        (child$105 += child.treeBaseDuration),
+        (treeBaseDuration$107 += child.actualDuration),
+        (child$108 += child.treeBaseDuration),
         (child = child.sibling);
-    completedWork.actualDuration = treeBaseDuration$104;
-    completedWork.treeBaseDuration = child$105;
+    completedWork.actualDuration = treeBaseDuration$107;
+    completedWork.treeBaseDuration = child$108;
   } else
     for (
-      treeBaseDuration$104 = completedWork.child;
-      null !== treeBaseDuration$104;
+      treeBaseDuration$107 = completedWork.child;
+      null !== treeBaseDuration$107;
 
     )
       (newChildLanes |=
-        treeBaseDuration$104.lanes | treeBaseDuration$104.childLanes),
-        (subtreeFlags |= treeBaseDuration$104.subtreeFlags),
-        (subtreeFlags |= treeBaseDuration$104.flags),
-        (treeBaseDuration$104.return = completedWork),
-        (treeBaseDuration$104 = treeBaseDuration$104.sibling);
+        treeBaseDuration$107.lanes | treeBaseDuration$107.childLanes),
+        (subtreeFlags |= treeBaseDuration$107.subtreeFlags),
+        (subtreeFlags |= treeBaseDuration$107.flags),
+        (treeBaseDuration$107.return = completedWork),
+        (treeBaseDuration$107 = treeBaseDuration$107.sibling);
   completedWork.subtreeFlags |= subtreeFlags;
   completedWork.childLanes = newChildLanes;
   return didBailout;
@@ -7347,8 +7390,8 @@ function safelyDetachRef(current, nearestMountedAncestor) {
             recordLayoutEffectDuration(current);
           }
         else ref(null);
-      } catch (error$138) {
-        captureCommitPhaseError(current, nearestMountedAncestor, error$138);
+      } catch (error$141) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error$141);
       }
     else ref.current = null;
 }
@@ -7385,7 +7428,7 @@ function commitBeforeMutationEffects(root, firstChild) {
           selection = selection.focusOffset;
           try {
             JSCompiler_temp.nodeType, focusNode.nodeType;
-          } catch (e$207) {
+          } catch (e$210) {
             JSCompiler_temp = null;
             break a;
           }
@@ -7642,11 +7685,11 @@ function commitPassiveEffectDurations(finishedRoot, finishedWork) {
         var _finishedWork$memoize = finishedWork.memoizedProps,
           id = _finishedWork$memoize.id;
         _finishedWork$memoize = _finishedWork$memoize.onPostCommit;
-        var commitTime$140 = commitTime,
+        var commitTime$143 = commitTime,
           phase = null === finishedWork.alternate ? "mount" : "update";
         currentUpdateIsNested && (phase = "nested-update");
         "function" === typeof _finishedWork$memoize &&
-          _finishedWork$memoize(id, phase, finishedRoot, commitTime$140);
+          _finishedWork$memoize(id, phase, finishedRoot, commitTime$143);
         finishedWork = finishedWork.return;
         a: for (; null !== finishedWork; ) {
           switch (finishedWork.tag) {
@@ -7673,8 +7716,8 @@ function commitHookLayoutEffects(finishedWork, hookFlags) {
   } else
     try {
       commitHookEffectListMount(hookFlags, finishedWork);
-    } catch (error$142) {
-      captureCommitPhaseError(finishedWork, finishedWork.return, error$142);
+    } catch (error$145) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error$145);
     }
 }
 function commitClassCallbacks(finishedWork) {
@@ -7773,11 +7816,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
           } else
             try {
               finishedRoot.componentDidMount();
-            } catch (error$143) {
+            } catch (error$146) {
               captureCommitPhaseError(
                 finishedWork,
                 finishedWork.return,
-                error$143
+                error$146
               );
             }
         else {
@@ -7794,11 +7837,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
                   current,
                   finishedRoot.__reactInternalSnapshotBeforeUpdate
                 );
-            } catch (error$144) {
+            } catch (error$147) {
               captureCommitPhaseError(
                 finishedWork,
                 finishedWork.return,
-                error$144
+                error$147
               );
             }
             recordLayoutEffectDuration(finishedWork);
@@ -7809,11 +7852,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
                 current,
                 finishedRoot.__reactInternalSnapshotBeforeUpdate
               );
-            } catch (error$145) {
+            } catch (error$148) {
               captureCommitPhaseError(
                 finishedWork,
                 finishedWork.return,
-                error$145
+                error$148
               );
             }
         }
@@ -8519,22 +8562,22 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
           try {
             startLayoutEffectTimer(),
               commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-          } catch (error$160) {
+          } catch (error$163) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$160
+              error$163
             );
           }
           recordLayoutEffectDuration(finishedWork);
         } else
           try {
             commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-          } catch (error$161) {
+          } catch (error$164) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$161
+              error$164
             );
           }
       }
@@ -8704,20 +8747,24 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         )
           try {
             var domElement = finishedWork.stateNode,
+              type = finishedWork.type,
+              oldProps = current.memoizedProps,
               newProps = finishedWork.memoizedProps;
-            updateProperties(
-              domElement,
-              flags,
-              finishedWork.type,
-              current.memoizedProps,
-              newProps
-            );
+            diffInCommitPhase
+              ? updateProperties(domElement, type, oldProps, newProps)
+              : updatePropertiesWithDiff(
+                  domElement,
+                  flags,
+                  type,
+                  oldProps,
+                  newProps
+                );
             domElement[internalPropsKey] = newProps;
-          } catch (error$162) {
+          } catch (error$165) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$162
+              error$165
             );
           }
       break;
@@ -8753,8 +8800,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         root = finishedWork.stateNode;
         try {
           setTextContent(root, "");
-        } catch (error$163) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$163);
+        } catch (error$166) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$166);
         }
       }
       if (
@@ -8766,13 +8813,21 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
           (hoistableRoot = finishedWork.type),
           (maybeNodes = finishedWork.updateQueue),
           (finishedWork.updateQueue = null),
-          null !== maybeNodes))
+          null !== maybeNodes || diffInCommitPhase))
       )
         try {
-          updateProperties(flags, maybeNodes, hoistableRoot, current, root),
+          diffInCommitPhase
+            ? updateProperties(flags, hoistableRoot, current, root)
+            : updatePropertiesWithDiff(
+                flags,
+                maybeNodes,
+                hoistableRoot,
+                current,
+                root
+              ),
             (flags[internalPropsKey] = root);
-        } catch (error$166) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$166);
+        } catch (error$169) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$169);
         }
       break;
     case 6:
@@ -8785,8 +8840,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         flags = finishedWork.memoizedProps;
         try {
           current.nodeValue = flags;
-        } catch (error$167) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$167);
+        } catch (error$170) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$170);
         }
       }
       break;
@@ -8800,8 +8855,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
       if (flags & 4 && null !== current && current.memoizedState.isDehydrated)
         try {
           retryIfBlockedOn(root.containerInfo);
-        } catch (error$168) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$168);
+        } catch (error$171) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$171);
         }
       break;
     case 4:
@@ -8831,8 +8886,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               null !== retryQueue && suspenseCallback(new Set(retryQueue));
             }
           }
-        } catch (error$170) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$170);
+        } catch (error$173) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$173);
         }
         current = finishedWork.updateQueue;
         null !== current &&
@@ -8845,15 +8900,15 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         null !== current &&
         safelyDetachRef(current, current.return);
       domElement = null !== finishedWork.memoizedState;
-      newProps = null !== current && null !== current.memoizedState;
+      type = null !== current && null !== current.memoizedState;
       finishedWork.mode & 1
-        ? ((suspenseCallback = offscreenSubtreeIsHidden),
-          (retryQueue = offscreenSubtreeWasHidden),
-          (offscreenSubtreeIsHidden = suspenseCallback || domElement),
-          (offscreenSubtreeWasHidden = retryQueue || newProps),
+        ? ((oldProps = offscreenSubtreeIsHidden),
+          (newProps = offscreenSubtreeWasHidden),
+          (offscreenSubtreeIsHidden = oldProps || domElement),
+          (offscreenSubtreeWasHidden = newProps || type),
           recursivelyTraverseMutationEffects(root, finishedWork),
-          (offscreenSubtreeWasHidden = retryQueue),
-          (offscreenSubtreeIsHidden = suspenseCallback))
+          (offscreenSubtreeWasHidden = newProps),
+          (offscreenSubtreeIsHidden = oldProps))
         : recursivelyTraverseMutationEffects(root, finishedWork);
       commitReconciliationEffects(finishedWork);
       root = finishedWork.stateNode;
@@ -8868,7 +8923,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         domElement &&
           ((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden),
           null === current ||
-            newProps ||
+            type ||
             root ||
             (0 !== (finishedWork.mode & 1) &&
               recursivelyTraverseDisappearLayoutEffects(finishedWork))),
@@ -8910,11 +8965,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
             if (null === current)
               try {
                 root.stateNode.nodeValue = domElement ? "" : root.memoizedProps;
-              } catch (error$150) {
+              } catch (error$153) {
                 captureCommitPhaseError(
                   finishedWork,
                   finishedWork.return,
-                  error$150
+                  error$153
                 );
               }
           } else if (
@@ -8989,21 +9044,21 @@ function commitReconciliationEffects(finishedWork) {
             insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0);
             break;
           case 5:
-            var parent$151 = JSCompiler_inline_result.stateNode;
+            var parent$154 = JSCompiler_inline_result.stateNode;
             JSCompiler_inline_result.flags & 32 &&
-              (setTextContent(parent$151, ""),
+              (setTextContent(parent$154, ""),
               (JSCompiler_inline_result.flags &= -33));
-            var before$152 = getHostSibling(finishedWork);
-            insertOrAppendPlacementNode(finishedWork, before$152, parent$151);
+            var before$155 = getHostSibling(finishedWork);
+            insertOrAppendPlacementNode(finishedWork, before$155, parent$154);
             break;
           case 3:
           case 4:
-            var parent$153 = JSCompiler_inline_result.stateNode.containerInfo,
-              before$154 = getHostSibling(finishedWork);
+            var parent$156 = JSCompiler_inline_result.stateNode.containerInfo,
+              before$157 = getHostSibling(finishedWork);
             insertOrAppendPlacementNodeIntoContainer(
               finishedWork,
-              before$154,
-              parent$153
+              before$157,
+              parent$156
             );
             break;
           default:
@@ -9195,8 +9250,8 @@ function commitHookPassiveMountEffects(finishedWork, hookFlags) {
   } else
     try {
       commitHookEffectListMount(hookFlags, finishedWork);
-    } catch (error$176) {
-      captureCommitPhaseError(finishedWork, finishedWork.return, error$176);
+    } catch (error$179) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error$179);
     }
 }
 function commitOffscreenPassiveMountEffects(current, finishedWork, instance) {
@@ -9495,9 +9550,9 @@ function recursivelyTraverseReconnectPassiveEffects(
           );
         break;
       case 22:
-        var instance$181 = finishedWork.stateNode;
+        var instance$184 = finishedWork.stateNode;
         null !== finishedWork.memoizedState
-          ? instance$181._visibility & 4
+          ? instance$184._visibility & 4
             ? recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -9510,7 +9565,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork
               )
-            : ((instance$181._visibility |= 4),
+            : ((instance$184._visibility |= 4),
               recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -9518,7 +9573,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 committedTransitions,
                 includeWorkInProgressEffects
               ))
-          : ((instance$181._visibility |= 4),
+          : ((instance$184._visibility |= 4),
             recursivelyTraverseReconnectPassiveEffects(
               finishedRoot,
               finishedWork,
@@ -9531,7 +9586,7 @@ function recursivelyTraverseReconnectPassiveEffects(
           commitOffscreenPassiveMountEffects(
             finishedWork.alternate,
             finishedWork,
-            instance$181
+            instance$184
           );
         break;
       case 24:
@@ -9905,13 +9960,13 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
     isFlushingWork = !0;
     do {
       var didPerformSomeWork = !1;
-      for (var root$189 = firstScheduledRoot; null !== root$189; ) {
+      for (var root$192 = firstScheduledRoot; null !== root$192; ) {
         if (
-          (!onlyLegacy || 0 === root$189.tag) &&
+          (!onlyLegacy || 0 === root$192.tag) &&
           0 !==
             (getNextLanes(
-              root$189,
-              root$189 === workInProgressRoot$jscomp$0
+              root$192,
+              root$192 === workInProgressRoot$jscomp$0
                 ? workInProgressRootRenderLanes$jscomp$0
                 : 0
             ) &
@@ -9919,7 +9974,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
         )
           try {
             didPerformSomeWork = !0;
-            var root = root$189;
+            var root = root$192;
             currentUpdateIsNested = nestedUpdateScheduled;
             nestedUpdateScheduled = !1;
             if (0 !== (executionContext & 6))
@@ -9964,7 +10019,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
           } catch (error) {
             null === errors ? (errors = [error]) : errors.push(error);
           }
-        root$189 = root$189.next;
+        root$192 = root$192.next;
       }
     } while (didPerformSomeWork);
     isFlushingWork = !1;
@@ -10310,16 +10365,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         exitStatus = renderRootSync(root, lanes);
         if (2 === exitStatus) {
           errorRetryLanes = lanes;
-          var errorRetryLanes$192 = getLanesToRetrySynchronouslyOnError(
+          var errorRetryLanes$195 = getLanesToRetrySynchronouslyOnError(
             root,
             errorRetryLanes
           );
-          0 !== errorRetryLanes$192 &&
-            ((lanes = errorRetryLanes$192),
+          0 !== errorRetryLanes$195 &&
+            ((lanes = errorRetryLanes$195),
             (exitStatus = recoverFromConcurrentError(
               root,
               errorRetryLanes,
-              errorRetryLanes$192
+              errorRetryLanes$195
             )));
         }
         if (1 === exitStatus)
@@ -10380,14 +10435,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
           if ((lanes & 8388480) === lanes) break;
           exitStatus = lanes;
           errorRetryLanes = root.eventTimes;
-          for (errorRetryLanes$192 = -1; 0 < exitStatus; ) {
+          for (errorRetryLanes$195 = -1; 0 < exitStatus; ) {
             var index$3 = 31 - clz32(exitStatus),
               lane = 1 << index$3;
             index$3 = errorRetryLanes[index$3];
-            index$3 > errorRetryLanes$192 && (errorRetryLanes$192 = index$3);
+            index$3 > errorRetryLanes$195 && (errorRetryLanes$195 = index$3);
             exitStatus &= ~lane;
           }
-          exitStatus = errorRetryLanes$192;
+          exitStatus = errorRetryLanes$195;
           exitStatus = now$1() - exitStatus;
           exitStatus =
             (120 > exitStatus
@@ -10758,8 +10813,8 @@ function renderRootSync(root, lanes) {
         }
       workLoopSync();
       break;
-    } catch (thrownValue$195) {
-      handleThrow(root, thrownValue$195);
+    } catch (thrownValue$198) {
+      handleThrow(root, thrownValue$198);
     }
   while (1);
   resetContextDependencies();
@@ -10876,8 +10931,8 @@ function renderRootConcurrent(root, lanes) {
         }
       workLoopConcurrent();
       break;
-    } catch (thrownValue$197) {
-      handleThrow(root, thrownValue$197);
+    } catch (thrownValue$200) {
+      handleThrow(root, thrownValue$200);
     }
   while (1);
   resetContextDependencies();
@@ -11064,10 +11119,10 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) {
                       };
                       suspenseBoundary.updateQueue = newOffscreenQueue;
                     } else {
-                      var retryQueue$58 = offscreenQueue.retryQueue;
-                      null === retryQueue$58
+                      var retryQueue$61 = offscreenQueue.retryQueue;
+                      null === retryQueue$61
                         ? (offscreenQueue.retryQueue = new Set([wakeable]))
-                        : retryQueue$58.add(wakeable);
+                        : retryQueue$61.add(wakeable);
                     }
                   }
                   break;
@@ -11278,7 +11333,7 @@ function commitRootImpl(
     var prevExecutionContext = executionContext;
     executionContext |= 4;
     ReactCurrentOwner.current = null;
-    var shouldFireAfterActiveInstanceBlur$201 = commitBeforeMutationEffects(
+    var shouldFireAfterActiveInstanceBlur$204 = commitBeforeMutationEffects(
       root,
       finishedWork
     );
@@ -11286,7 +11341,7 @@ function commitRootImpl(
     enableProfilerNestedUpdateScheduledHook &&
       (rootCommittingMutationOrLayoutEffects = root);
     commitMutationEffects(root, finishedWork, lanes);
-    shouldFireAfterActiveInstanceBlur$201 &&
+    shouldFireAfterActiveInstanceBlur$204 &&
       ((_enabled = !0),
       dispatchAfterDetachedBlur(selectionInformation.focusedElem),
       (_enabled = !1));
@@ -11380,7 +11435,7 @@ function releaseRootPooledCache(root, remainingLanes) {
 }
 function flushPassiveEffects() {
   if (null !== rootWithPendingPassiveEffects) {
-    var root$202 = rootWithPendingPassiveEffects,
+    var root$205 = rootWithPendingPassiveEffects,
       remainingLanes = pendingPassiveEffectsRemainingLanes;
     pendingPassiveEffectsRemainingLanes = 0;
     var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
@@ -11396,7 +11451,7 @@ function flushPassiveEffects() {
     } finally {
       (currentUpdatePriority = previousPriority),
         (ReactCurrentBatchConfig$1.transition = prevTransition),
-        releaseRootPooledCache(root$202, remainingLanes);
+        releaseRootPooledCache(root$205, remainingLanes);
     }
   }
   return !1;
@@ -12762,12 +12817,12 @@ function getPublicRootInstance(container) {
 function attemptSynchronousHydration(fiber) {
   switch (fiber.tag) {
     case 3:
-      var root$205 = fiber.stateNode;
-      if (root$205.current.memoizedState.isDehydrated) {
-        var lanes = getHighestPriorityLanes(root$205.pendingLanes);
+      var root$208 = fiber.stateNode;
+      if (root$208.current.memoizedState.isDehydrated) {
+        var lanes = getHighestPriorityLanes(root$208.pendingLanes);
         0 !== lanes &&
-          (markRootEntangled(root$205, lanes | 2),
-          ensureRootIsScheduled(root$205),
+          (markRootEntangled(root$208, lanes | 2),
+          ensureRootIsScheduled(root$208),
           0 === (executionContext & 6) &&
             ((workInProgressRootRenderTargetTime = now$1() + 500),
             flushSyncWorkAcrossRoots_impl(!1)));
@@ -13339,19 +13394,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$353;
+  var JSCompiler_inline_result$jscomp$390;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1636 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1636) {
-      var element$jscomp$inline_1637 = document.createElement("div");
-      element$jscomp$inline_1637.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1636 =
-        "function" === typeof element$jscomp$inline_1637.oninput;
+    var isSupported$jscomp$inline_1680 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1680) {
+      var element$jscomp$inline_1681 = document.createElement("div");
+      element$jscomp$inline_1681.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1680 =
+        "function" === typeof element$jscomp$inline_1681.oninput;
     }
-    JSCompiler_inline_result$jscomp$353 = isSupported$jscomp$inline_1636;
-  } else JSCompiler_inline_result$jscomp$353 = !1;
+    JSCompiler_inline_result$jscomp$390 = isSupported$jscomp$inline_1680;
+  } else JSCompiler_inline_result$jscomp$390 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$353 &&
+    JSCompiler_inline_result$jscomp$390 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -13660,20 +13715,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1677 = 0;
-  i$jscomp$inline_1677 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1677++
+  var i$jscomp$inline_1721 = 0;
+  i$jscomp$inline_1721 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1721++
 ) {
-  var eventName$jscomp$inline_1678 =
-      simpleEventPluginEvents[i$jscomp$inline_1677],
-    domEventName$jscomp$inline_1679 =
-      eventName$jscomp$inline_1678.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1680 =
-      eventName$jscomp$inline_1678[0].toUpperCase() +
-      eventName$jscomp$inline_1678.slice(1);
+  var eventName$jscomp$inline_1722 =
+      simpleEventPluginEvents[i$jscomp$inline_1721],
+    domEventName$jscomp$inline_1723 =
+      eventName$jscomp$inline_1722.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1724 =
+      eventName$jscomp$inline_1722[0].toUpperCase() +
+      eventName$jscomp$inline_1722.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1679,
-    "on" + capitalizedEvent$jscomp$inline_1680
+    domEventName$jscomp$inline_1723,
+    "on" + capitalizedEvent$jscomp$inline_1724
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -14505,7 +14560,7 @@ function normalizeMarkupForTextOrAttribute(markup) {
     .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, "");
 }
 function noop$1() {}
-function setProp(domElement, tag, key, value, props) {
+function setProp(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "children":
       "string" === typeof value
@@ -14530,7 +14585,7 @@ function setProp(domElement, tag, key, value, props) {
       setValueForKnownAttribute(domElement, key, value);
       break;
     case "style":
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     case "src":
     case "href":
@@ -14746,6 +14801,9 @@ function setProp(domElement, tag, key, value, props) {
         value
       );
       break;
+    case "is":
+      setValueForAttribute(domElement, "is", value);
+      break;
     case "innerText":
     case "textContent":
       if (enableCustomElementPropertySupport) break;
@@ -14759,10 +14817,10 @@ function setProp(domElement, tag, key, value, props) {
           setValueForAttribute(domElement, key, value);
   }
 }
-function setPropOnCustomElement(domElement, tag, key, value, props) {
+function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "style":
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     case "dangerouslySetInnerHTML":
       if (null != value) {
@@ -14800,23 +14858,25 @@ function setPropOnCustomElement(domElement, tag, key, value, props) {
         if (enableCustomElementPropertySupport)
           a: {
             props = value;
-            if ("o" === key[0] && "n" === key[1]) {
-              tag = key.endsWith("Capture");
-              value = key.substr(2, tag ? key.length - 9 : void 0);
-              var prevProps = getFiberCurrentPropsFromNode(domElement);
-              prevProps = null != prevProps ? prevProps[key] : null;
-              "function" === typeof prevProps &&
-                domElement.removeEventListener(value, prevProps, tag);
-              if ("function" === typeof props) {
-                "function" !== typeof prevProps &&
-                  null !== prevProps &&
-                  (key in domElement
-                    ? (domElement[key] = null)
-                    : domElement.hasAttribute(key) &&
-                      domElement.removeAttribute(key));
-                domElement.addEventListener(value, props, tag);
-                break a;
-              }
+            if (
+              "o" === key[0] &&
+              "n" === key[1] &&
+              ((tag = key.endsWith("Capture")),
+              (value = key.substr(2, tag ? key.length - 9 : void 0)),
+              (prevValue = getFiberCurrentPropsFromNode(domElement)),
+              (prevValue = null != prevValue ? prevValue[key] : null),
+              "function" === typeof prevValue &&
+                domElement.removeEventListener(value, prevValue, tag),
+              "function" === typeof props)
+            ) {
+              "function" !== typeof prevValue &&
+                null !== prevValue &&
+                (key in domElement
+                  ? (domElement[key] = null)
+                  : domElement.hasAttribute(key) &&
+                    domElement.removeAttribute(key));
+              domElement.addEventListener(value, props, tag);
+              break a;
             }
             key in domElement
               ? (domElement[key] = props)
@@ -14870,7 +14930,7 @@ function setInitialProperties(domElement, tag, props) {
                   throw Error(formatProdErrorMessage(137, tag));
                 break;
               default:
-                setProp(domElement, tag, propKey, propValue, props);
+                setProp(domElement, tag, propKey, propValue, props, null);
             }
         }
       track(domElement);
@@ -14878,16 +14938,16 @@ function setInitialProperties(domElement, tag, props) {
       return;
     case "select":
       listenToNonDelegatedEvent("invalid", domElement);
-      for (var propKey$217 in props)
+      for (var propKey$220 in props)
         if (
-          props.hasOwnProperty(propKey$217) &&
-          ((propKey = props[propKey$217]), null != propKey)
+          props.hasOwnProperty(propKey$220) &&
+          ((propKey = props[propKey$220]), null != propKey)
         )
-          switch (propKey$217) {
+          switch (propKey$220) {
             case "value":
               break;
             default:
-              setProp(domElement, tag, propKey$217, propKey, props);
+              setProp(domElement, tag, propKey$220, propKey, props, null);
           }
       domElement.multiple = !!props.multiple;
       tag = props.value;
@@ -14898,12 +14958,12 @@ function setInitialProperties(domElement, tag, props) {
       return;
     case "textarea":
       listenToNonDelegatedEvent("invalid", domElement);
-      for (var propKey$219 in props)
+      for (var propKey$222 in props)
         if (
-          props.hasOwnProperty(propKey$219) &&
-          ((propKey = props[propKey$219]), null != propKey)
+          props.hasOwnProperty(propKey$222) &&
+          ((propKey = props[propKey$222]), null != propKey)
         )
-          switch (propKey$219) {
+          switch (propKey$222) {
             case "value":
               break;
             case "children":
@@ -14912,18 +14972,18 @@ function setInitialProperties(domElement, tag, props) {
               if (null != propKey) throw Error(formatProdErrorMessage(91));
               break;
             default:
-              setProp(domElement, tag, propKey$219, propKey, props);
+              setProp(domElement, tag, propKey$222, propKey, props);
           }
       track(domElement);
       initTextarea(domElement, props);
       return;
     case "option":
-      for (var propKey$221 in props)
+      for (var propKey$224 in props)
         if (
-          props.hasOwnProperty(propKey$221) &&
-          ((propKey = props[propKey$221]), null != propKey)
+          props.hasOwnProperty(propKey$224) &&
+          ((propKey = props[propKey$224]), null != propKey)
         )
-          switch (propKey$221) {
+          switch (propKey$224) {
             case "selected":
               domElement.selected =
                 propKey &&
@@ -14931,7 +14991,7 @@ function setInitialProperties(domElement, tag, props) {
                 "symbol" !== typeof propKey;
               break;
             default:
-              setProp(domElement, tag, propKey$221, propKey, props);
+              setProp(domElement, tag, propKey$224, propKey, props);
           }
       null != props.value &&
         domElement.setAttribute("value", "" + getToStringValue(props.value));
@@ -14973,31 +15033,32 @@ function setInitialProperties(domElement, tag, props) {
     case "track":
     case "wbr":
     case "menuitem":
-      for (var propKey$223 in props)
+      for (var propKey$226 in props)
         if (
-          props.hasOwnProperty(propKey$223) &&
-          ((propKey = props[propKey$223]), null != propKey)
+          props.hasOwnProperty(propKey$226) &&
+          ((propKey = props[propKey$226]), null != propKey)
         )
-          switch (propKey$223) {
+          switch (propKey$226) {
             case "children":
             case "dangerouslySetInnerHTML":
               throw Error(formatProdErrorMessage(137, tag));
             default:
-              setProp(domElement, tag, propKey$223, propKey, props);
+              setProp(domElement, tag, propKey$226, propKey, props, null);
           }
       return;
     default:
       if (isCustomElement(tag)) {
-        for (var propKey$225 in props)
-          props.hasOwnProperty(propKey$225) &&
-            ((propKey = props[propKey$225]),
+        for (var propKey$228 in props)
+          props.hasOwnProperty(propKey$228) &&
+            ((propKey = props[propKey$228]),
             null != propKey &&
               setPropOnCustomElement(
                 domElement,
                 tag,
-                propKey$225,
+                propKey$228,
                 propKey,
-                props
+                props,
+                null
               ));
         return;
       }
@@ -15005,9 +15066,317 @@ function setInitialProperties(domElement, tag, props) {
   for (propValue in props)
     props.hasOwnProperty(propValue) &&
       ((propKey = props[propValue]),
-      null != propKey && setProp(domElement, tag, propValue, propKey, props));
+      null != propKey &&
+        setProp(domElement, tag, propValue, propKey, props, null));
 }
-function updateProperties(
+function updateProperties(domElement, tag, lastProps, nextProps) {
+  switch (tag) {
+    case "div":
+    case "span":
+    case "svg":
+    case "path":
+    case "a":
+    case "g":
+    case "p":
+    case "li":
+      break;
+    case "input":
+      "radio" === nextProps.type &&
+        null != nextProps.name &&
+        updateInputChecked(domElement, nextProps);
+      for (var propKey in lastProps) {
+        var lastProp = lastProps[propKey];
+        if (
+          lastProps.hasOwnProperty(propKey) &&
+          null != lastProp &&
+          !nextProps.hasOwnProperty(propKey)
+        )
+          switch (propKey) {
+            case "checked":
+              lastProp = nextProps.defaultChecked;
+              domElement.checked =
+                !!lastProp &&
+                "function" !== typeof lastProp &&
+                "symbol" !== lastProp;
+              break;
+            case "value":
+              break;
+            default:
+              setProp(domElement, tag, propKey, null, nextProps, lastProp);
+          }
+      }
+      for (var propKey$232 in nextProps) {
+        lastProp = nextProps[propKey$232];
+        var lastProp$233 = lastProps[propKey$232];
+        if (
+          nextProps.hasOwnProperty(propKey$232) &&
+          lastProp !== lastProp$233 &&
+          (null != lastProp || null != lastProp$233)
+        )
+          switch (propKey$232) {
+            case "checked":
+              lastProp = null != lastProp ? lastProp : nextProps.defaultChecked;
+              domElement.checked =
+                !!lastProp &&
+                "function" !== typeof lastProp &&
+                "symbol" !== lastProp;
+              break;
+            case "value":
+              break;
+            case "children":
+            case "dangerouslySetInnerHTML":
+              if (null != lastProp)
+                throw Error(formatProdErrorMessage(137, tag));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$232,
+                lastProp,
+                nextProps,
+                lastProp$233
+              );
+          }
+      }
+      updateInput(domElement, nextProps);
+      return;
+    case "select":
+      for (var propKey$236 in lastProps)
+        if (
+          ((propKey$232 = lastProps[propKey$236]),
+          lastProps.hasOwnProperty(propKey$236) &&
+            null != propKey$232 &&
+            !nextProps.hasOwnProperty(propKey$236))
+        )
+          switch (propKey$236) {
+            case "value":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$236,
+                null,
+                nextProps,
+                propKey$232
+              );
+          }
+      for (lastProp in nextProps)
+        if (
+          ((propKey$232 = nextProps[lastProp]),
+          (lastProp$233 = lastProps[lastProp]),
+          nextProps.hasOwnProperty(lastProp) &&
+            propKey$232 !== lastProp$233 &&
+            (null != propKey$232 || null != lastProp$233))
+        )
+          switch (lastProp) {
+            case "value":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                lastProp,
+                propKey$232,
+                nextProps,
+                lastProp$233
+              );
+          }
+      updateSelect(domElement, lastProps, nextProps);
+      return;
+    case "textarea":
+      for (var propKey$241 in lastProps)
+        if (
+          ((propKey$232 = lastProps[propKey$241]),
+          lastProps.hasOwnProperty(propKey$241) &&
+            null != propKey$232 &&
+            !nextProps.hasOwnProperty(propKey$241))
+        )
+          switch (propKey$241) {
+            case "value":
+              break;
+            case "children":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$241,
+                null,
+                nextProps,
+                propKey$232
+              );
+          }
+      for (lastProp$233 in nextProps)
+        if (
+          ((propKey$232 = nextProps[lastProp$233]),
+          (lastProp = lastProps[lastProp$233]),
+          nextProps.hasOwnProperty(lastProp$233) &&
+            propKey$232 !== lastProp &&
+            (null != propKey$232 || null != lastProp))
+        )
+          switch (lastProp$233) {
+            case "value":
+              break;
+            case "children":
+              break;
+            case "dangerouslySetInnerHTML":
+              if (null != propKey$232) throw Error(formatProdErrorMessage(91));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                lastProp$233,
+                propKey$232,
+                nextProps,
+                lastProp
+              );
+          }
+      updateTextarea(domElement, nextProps);
+      return;
+    case "option":
+      for (var propKey$246 in lastProps)
+        if (
+          ((propKey$232 = lastProps[propKey$246]),
+          lastProps.hasOwnProperty(propKey$246) &&
+            null != propKey$232 &&
+            !nextProps.hasOwnProperty(propKey$246))
+        )
+          switch (propKey$246) {
+            case "selected":
+              domElement.selected = !1;
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$246,
+                null,
+                nextProps,
+                propKey$232
+              );
+          }
+      for (var propKey$248 in nextProps)
+        if (
+          ((propKey$232 = nextProps[propKey$248]),
+          (lastProp = lastProps[propKey$248]),
+          nextProps.hasOwnProperty(propKey$248) &&
+            propKey$232 !== lastProp &&
+            (null != propKey$232 || null != lastProp))
+        )
+          switch (propKey$248) {
+            case "selected":
+              domElement.selected =
+                propKey$232 &&
+                "function" !== typeof propKey$232 &&
+                "symbol" !== typeof propKey$232;
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$248,
+                propKey$232,
+                nextProps,
+                lastProp
+              );
+          }
+      return;
+    case "img":
+    case "link":
+    case "area":
+    case "base":
+    case "br":
+    case "col":
+    case "embed":
+    case "hr":
+    case "keygen":
+    case "meta":
+    case "param":
+    case "source":
+    case "track":
+    case "wbr":
+    case "menuitem":
+      for (var propKey$251 in lastProps)
+        (propKey$232 = lastProps[propKey$251]),
+          lastProps.hasOwnProperty(propKey$251) &&
+            null != propKey$232 &&
+            !nextProps.hasOwnProperty(propKey$251) &&
+            setProp(domElement, tag, propKey$251, null, nextProps, propKey$232);
+      for (var propKey$253 in nextProps)
+        if (
+          ((propKey$232 = nextProps[propKey$253]),
+          (lastProp = lastProps[propKey$253]),
+          nextProps.hasOwnProperty(propKey$253) &&
+            propKey$232 !== lastProp &&
+            (null != propKey$232 || null != lastProp))
+        )
+          switch (propKey$253) {
+            case "children":
+            case "dangerouslySetInnerHTML":
+              if (null != propKey$232)
+                throw Error(formatProdErrorMessage(137, tag));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$253,
+                propKey$232,
+                nextProps,
+                lastProp
+              );
+          }
+      return;
+    default:
+      if (isCustomElement(tag)) {
+        for (var propKey$256 in lastProps)
+          (propKey$232 = lastProps[propKey$256]),
+            lastProps.hasOwnProperty(propKey$256) &&
+              null != propKey$232 &&
+              !nextProps.hasOwnProperty(propKey$256) &&
+              setPropOnCustomElement(
+                domElement,
+                tag,
+                propKey$256,
+                null,
+                nextProps,
+                propKey$232
+              );
+        for (var propKey$258 in nextProps)
+          (propKey$232 = nextProps[propKey$258]),
+            (lastProp = lastProps[propKey$258]),
+            !nextProps.hasOwnProperty(propKey$258) ||
+              propKey$232 === lastProp ||
+              (null == propKey$232 && null == lastProp) ||
+              setPropOnCustomElement(
+                domElement,
+                tag,
+                propKey$258,
+                propKey$232,
+                nextProps,
+                lastProp
+              );
+        return;
+      }
+  }
+  for (var propKey$261 in lastProps)
+    (propKey$232 = lastProps[propKey$261]),
+      lastProps.hasOwnProperty(propKey$261) &&
+        null != propKey$232 &&
+        !nextProps.hasOwnProperty(propKey$261) &&
+        setProp(domElement, tag, propKey$261, null, nextProps, propKey$232);
+  for (var propKey$263 in nextProps)
+    (propKey$232 = nextProps[propKey$263]),
+      (lastProp = lastProps[propKey$263]),
+      !nextProps.hasOwnProperty(propKey$263) ||
+        propKey$232 === lastProp ||
+        (null == propKey$232 && null == lastProp) ||
+        setProp(domElement, tag, propKey$263, propKey$232, nextProps, lastProp);
+}
+function updatePropertiesWithDiff(
   domElement,
   updatePayload,
   tag,
@@ -15047,7 +15416,7 @@ function updateProperties(
               throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       }
       updateInput(domElement, nextProps);
@@ -15055,32 +15424,15 @@ function updateProperties(
     case "select":
       for (propKey = 0; propKey < updatePayload.length; propKey += 2) {
         propValue = updatePayload[propKey];
-        var propValue$231 = updatePayload[propKey + 1];
+        var propValue$268 = updatePayload[propKey + 1];
         switch (propValue) {
           case "value":
             break;
           default:
-            setProp(domElement, tag, propValue, propValue$231, nextProps);
+            setProp(domElement, tag, propValue, propValue$268, nextProps, null);
         }
       }
-      updatePayload = !!lastProps.multiple;
-      tag = nextProps.value;
-      null != tag
-        ? updateOptions(domElement, !!nextProps.multiple, tag, !1)
-        : updatePayload !== !!nextProps.multiple &&
-          (null != nextProps.defaultValue
-            ? updateOptions(
-                domElement,
-                !!nextProps.multiple,
-                nextProps.defaultValue,
-                !0
-              )
-            : updateOptions(
-                domElement,
-                !!nextProps.multiple,
-                nextProps.multiple ? [] : "",
-                !1
-              ));
+      updateSelect(domElement, lastProps, nextProps);
       return;
     case "textarea":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
@@ -15097,7 +15449,7 @@ function updateProperties(
             if (null != propValue) throw Error(formatProdErrorMessage(91));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       updateTextarea(domElement, nextProps);
       return;
@@ -15115,7 +15467,7 @@ function updateProperties(
               "symbol" !== typeof propValue;
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       return;
     case "img":
@@ -15145,7 +15497,7 @@ function updateProperties(
               throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       return;
     default:
@@ -15156,7 +15508,8 @@ function updateProperties(
             tag,
             updatePayload[lastProps],
             updatePayload[lastProps + 1],
-            nextProps
+            nextProps,
+            null
           );
         return;
       }
@@ -15167,7 +15520,8 @@ function updateProperties(
       tag,
       updatePayload[lastProps],
       updatePayload[lastProps + 1],
-      nextProps
+      nextProps,
+      null
     );
 }
 var Dispatcher$1 = Internals.Dispatcher,
@@ -15498,14 +15852,14 @@ function preinit$1(href, options) {
       switch (as) {
         case "style":
           as = getResourcesFromRoot(resourceRoot).hoistableStyles;
-          var key$248 = getStyleKey(href),
+          var key$285 = getStyleKey(href),
             precedence = options.precedence || "default",
-            resource = as.get(key$248);
+            resource = as.get(key$285);
           if (resource) break;
           var state = { loading: 0, preload: null };
           if (
             (resource = resourceRoot.querySelector(
-              getStylesheetSelectorFromKey(key$248)
+              getStylesheetSelectorFromKey(key$285)
             ))
           )
             state.loading = 1;
@@ -15516,7 +15870,7 @@ function preinit$1(href, options) {
               "data-precedence": precedence,
               crossOrigin: options.crossOrigin
             };
-            (options = preloadPropsMap.get(key$248)) &&
+            (options = preloadPropsMap.get(key$285)) &&
               adoptPreloadPropsForStylesheet(href, options);
             var link = (resource = (
               resourceRoot.ownerDocument || resourceRoot
@@ -15542,15 +15896,15 @@ function preinit$1(href, options) {
             count: 1,
             state: state
           };
-          as.set(key$248, resource);
+          as.set(key$285, resource);
           break;
         case "script":
           (as = getResourcesFromRoot(resourceRoot).hoistableScripts),
-            (key$248 = getScriptKey(href)),
-            (precedence = as.get(key$248)),
+            (key$285 = getScriptKey(href)),
+            (precedence = as.get(key$285)),
             precedence ||
               ((precedence = resourceRoot.querySelector(
-                "script[async]" + key$248
+                "script[async]" + key$285
               )),
               precedence ||
                 ((href = {
@@ -15559,7 +15913,7 @@ function preinit$1(href, options) {
                   crossOrigin: options.crossOrigin,
                   integrity: options.integrity
                 }),
-                (options = preloadPropsMap.get(key$248)) &&
+                (options = preloadPropsMap.get(key$285)) &&
                   adoptPreloadPropsForScript(href, options),
                 (options = resourceRoot.ownerDocument || resourceRoot),
                 (precedence = options.createElement("script")),
@@ -15572,13 +15926,13 @@ function preinit$1(href, options) {
                 count: 1,
                 state: null
               }),
-              as.set(key$248, precedence));
+              as.set(key$285, precedence));
       }
     else if ("style" === as || "script" === as)
       if ((resourceRoot = getDocumentForPreloads())) {
-        key$248 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
-        precedence = key$248 =
-          'link[rel="preload"][as="' + as + '"][href="' + key$248 + '"]';
+        key$285 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
+        precedence = key$285 =
+          'link[rel="preload"][as="' + as + '"][href="' + key$285 + '"]';
         switch (as) {
           case "style":
             precedence = getStyleKey(href);
@@ -15595,7 +15949,7 @@ function preinit$1(href, options) {
             integrity: options.integrity
           }),
           preloadPropsMap.set(precedence, href),
-          null === resourceRoot.querySelector(key$248) &&
+          null === resourceRoot.querySelector(key$285) &&
             ((options = resourceRoot.createElement("link")),
             setInitialProperties(options, "link", href),
             markNodeAsHoistable(options),
@@ -15628,17 +15982,17 @@ function getResource(type, currentProps, pendingProps) {
         "string" === typeof pendingProps.precedence
       ) {
         type = getStyleKey(pendingProps.href);
-        var styles$257 = getResourcesFromRoot(currentProps).hoistableStyles,
-          resource$258 = styles$257.get(type);
-        resource$258 ||
+        var styles$294 = getResourcesFromRoot(currentProps).hoistableStyles,
+          resource$295 = styles$294.get(type);
+        resource$295 ||
           ((currentProps = currentProps.ownerDocument || currentProps),
-          (resource$258 = {
+          (resource$295 = {
             type: "stylesheet",
             instance: null,
             count: 0,
             state: { loading: 0, preload: null }
           }),
-          styles$257.set(type, resource$258),
+          styles$294.set(type, resource$295),
           preloadPropsMap.has(type) ||
             preloadStylesheet(
               currentProps,
@@ -15653,9 +16007,9 @@ function getResource(type, currentProps, pendingProps) {
                 hrefLang: pendingProps.hrefLang,
                 referrerPolicy: pendingProps.referrerPolicy
               },
-              resource$258.state
+              resource$295.state
             ));
-        return resource$258;
+        return resource$295;
       }
       return null;
     case "script":
@@ -15727,36 +16081,36 @@ function acquireResource(hoistableRoot, resource, props) {
         return (resource.instance = key);
       case "stylesheet":
         styleProps = getStyleKey(props.href);
-        var instance$263 = hoistableRoot.querySelector(
+        var instance$300 = hoistableRoot.querySelector(
           getStylesheetSelectorFromKey(styleProps)
         );
-        if (instance$263)
+        if (instance$300)
           return (
-            (resource.instance = instance$263),
-            markNodeAsHoistable(instance$263),
-            instance$263
+            (resource.instance = instance$300),
+            markNodeAsHoistable(instance$300),
+            instance$300
           );
         key = stylesheetPropsFromRawProps(props);
         (styleProps = preloadPropsMap.get(styleProps)) &&
           adoptPreloadPropsForStylesheet(key, styleProps);
-        instance$263 = (
+        instance$300 = (
           hoistableRoot.ownerDocument || hoistableRoot
         ).createElement("link");
-        markNodeAsHoistable(instance$263);
-        var linkInstance = instance$263;
+        markNodeAsHoistable(instance$300);
+        var linkInstance = instance$300;
         linkInstance._p = new Promise(function (resolve, reject) {
           linkInstance.onload = resolve;
           linkInstance.onerror = reject;
         });
-        setInitialProperties(instance$263, "link", key);
+        setInitialProperties(instance$300, "link", key);
         resource.state.loading |= 4;
-        insertStylesheet(instance$263, props.precedence, hoistableRoot);
-        return (resource.instance = instance$263);
+        insertStylesheet(instance$300, props.precedence, hoistableRoot);
+        return (resource.instance = instance$300);
       case "script":
-        instance$263 = getScriptKey(props.src);
+        instance$300 = getScriptKey(props.src);
         if (
           (styleProps = hoistableRoot.querySelector(
-            "script[async]" + instance$263
+            "script[async]" + instance$300
           ))
         )
           return (
@@ -15765,7 +16119,7 @@ function acquireResource(hoistableRoot, resource, props) {
             styleProps
           );
         key = props;
-        if ((styleProps = preloadPropsMap.get(instance$263)))
+        if ((styleProps = preloadPropsMap.get(instance$300)))
           (key = assign({}, props)),
             adoptPreloadPropsForScript(key, styleProps);
         hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot;
@@ -16716,11 +17070,11 @@ function legacyCreateRootFromDOMContainer(
     if ("function" === typeof callback) {
       var originalCallback = callback;
       callback = function () {
-        var instance = getPublicRootInstance(root$283);
+        var instance = getPublicRootInstance(root$320);
         originalCallback.call(instance);
       };
     }
-    var root$283 = createHydrationContainer(
+    var root$320 = createHydrationContainer(
       initialChildren,
       callback,
       container,
@@ -16732,23 +17086,23 @@ function legacyCreateRootFromDOMContainer(
       noopOnRecoverableError,
       null
     );
-    container._reactRootContainer = root$283;
-    container[internalContainerInstanceKey] = root$283.current;
+    container._reactRootContainer = root$320;
+    container[internalContainerInstanceKey] = root$320.current;
     listenToAllSupportedEvents(
       8 === container.nodeType ? container.parentNode : container
     );
     flushSync$1();
-    return root$283;
+    return root$320;
   }
   clearContainer(container);
   if ("function" === typeof callback) {
-    var originalCallback$284 = callback;
+    var originalCallback$321 = callback;
     callback = function () {
-      var instance = getPublicRootInstance(root$285);
-      originalCallback$284.call(instance);
+      var instance = getPublicRootInstance(root$322);
+      originalCallback$321.call(instance);
     };
   }
-  var root$285 = createFiberRoot(
+  var root$322 = createFiberRoot(
     container,
     0,
     !1,
@@ -16760,15 +17114,15 @@ function legacyCreateRootFromDOMContainer(
     noopOnRecoverableError,
     null
   );
-  container._reactRootContainer = root$285;
-  container[internalContainerInstanceKey] = root$285.current;
+  container._reactRootContainer = root$322;
+  container[internalContainerInstanceKey] = root$322.current;
   listenToAllSupportedEvents(
     8 === container.nodeType ? container.parentNode : container
   );
   flushSync$1(function () {
-    updateContainer(initialChildren, root$285, parentComponent, callback);
+    updateContainer(initialChildren, root$322, parentComponent, callback);
   });
-  return root$285;
+  return root$322;
 }
 function legacyRenderSubtreeIntoContainer(
   parentComponent,
@@ -16827,10 +17181,10 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1891 = {
+var devToolsConfig$jscomp$inline_1928 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-4f2c9290",
+  version: "18.3.0-www-classic-ace69857",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -16848,10 +17202,10 @@ var devToolsConfig$jscomp$inline_1891 = {
   } catch (err) {}
   return hook.checkDCE ? !0 : !1;
 })({
-  bundleType: devToolsConfig$jscomp$inline_1891.bundleType,
-  version: devToolsConfig$jscomp$inline_1891.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1891.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1891.rendererConfig,
+  bundleType: devToolsConfig$jscomp$inline_1928.bundleType,
+  version: devToolsConfig$jscomp$inline_1928.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1928.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1928.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -16867,14 +17221,14 @@ var devToolsConfig$jscomp$inline_1891 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1891.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1928.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-4f2c9290"
+  reconcilerVersion: "18.3.0-www-classic-ace69857"
 });
 assign(Internals, {
   ReactBrowserEventEmitter: {
@@ -17101,7 +17455,7 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-4f2c9290";
+exports.version = "18.3.0-www-classic-ace69857";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js
index 58063c2b0d6a2..9b29e68dd8c4c 100644
--- a/compiled/facebook-www/ReactDOM-profiling.modern.js
+++ b/compiled/facebook-www/ReactDOM-profiling.modern.js
@@ -123,6 +123,7 @@ var dynamicFeatureFlags = require("ReactFeatureFlags"),
     dynamicFeatureFlags.enableCustomElementPropertySupport,
   enableDeferRootSchedulingToMicrotask =
     dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask,
+  diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase,
   enableProfilerNestedUpdateScheduledHook =
     dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook,
   enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler,
@@ -1072,6 +1073,21 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
     null !== multiple && (multiple.selected = !0);
   }
 }
+function updateSelect(element, prevProps, props) {
+  prevProps = !!prevProps.multiple;
+  var value = props.value;
+  null != value
+    ? updateOptions(element, !!props.multiple, value, !1)
+    : prevProps !== !!props.multiple &&
+      (null != props.defaultValue
+        ? updateOptions(element, !!props.multiple, props.defaultValue, !0)
+        : updateOptions(
+            element,
+            !!props.multiple,
+            props.multiple ? [] : "",
+            !1
+          ));
+}
 function updateTextarea(element, props) {
   var value = getToStringValue(props.value);
   if (
@@ -1164,30 +1180,44 @@ var unitlessNumbers = new Set(
     " "
   )
 );
-function setValueForStyles(node, styles) {
+function setValueForStyle(style, styleName, value) {
+  var isCustomProperty = 0 === styleName.indexOf("--");
+  null == value || "boolean" === typeof value || "" === value
+    ? isCustomProperty
+      ? style.setProperty(styleName, "")
+      : "float" === styleName
+      ? (style.cssFloat = "")
+      : (style[styleName] = "")
+    : isCustomProperty
+    ? style.setProperty(styleName, value)
+    : "number" !== typeof value || 0 === value || unitlessNumbers.has(styleName)
+    ? "float" === styleName
+      ? (style.cssFloat = value)
+      : (style[styleName] = ("" + value).trim())
+    : (style[styleName] = value + "px");
+}
+function setValueForStyles(node, styles, prevStyles) {
   if (null != styles && "object" !== typeof styles)
     throw Error(formatProdErrorMessage(62));
   node = node.style;
-  for (var styleName in styles)
-    if (styles.hasOwnProperty(styleName)) {
-      var value = styles[styleName],
-        isCustomProperty = 0 === styleName.indexOf("--");
-      null == value || "boolean" === typeof value || "" === value
-        ? isCustomProperty
+  if (diffInCommitPhase && null != prevStyles) {
+    for (var styleName in prevStyles)
+      !prevStyles.hasOwnProperty(styleName) ||
+        (null != styles && styles.hasOwnProperty(styleName)) ||
+        (0 === styleName.indexOf("--")
           ? node.setProperty(styleName, "")
           : "float" === styleName
           ? (node.cssFloat = "")
-          : (node[styleName] = "")
-        : isCustomProperty
-        ? node.setProperty(styleName, value)
-        : "number" !== typeof value ||
-          0 === value ||
-          unitlessNumbers.has(styleName)
-        ? "float" === styleName
-          ? (node.cssFloat = value)
-          : (node[styleName] = ("" + value).trim())
-        : (node[styleName] = value + "px");
-    }
+          : (node[styleName] = ""));
+    for (var styleName$18 in styles)
+      (styleName = styles[styleName$18]),
+        styles.hasOwnProperty(styleName$18) &&
+          prevStyles[styleName$18] !== styleName &&
+          setValueForStyle(node, styleName$18, styleName);
+  } else
+    for (var styleName$19 in styles)
+      styles.hasOwnProperty(styleName$19) &&
+        setValueForStyle(node, styleName$19, styles[styleName$19]);
 }
 function isCustomElement(tagName) {
   if (-1 === tagName.indexOf("-")) return !1;
@@ -1416,36 +1446,36 @@ function findCurrentFiberUsingSlowPath(fiber) {
     }
     if (a.return !== b.return) (a = parentA), (b = parentB);
     else {
-      for (var didFindChild = !1, child$18 = parentA.child; child$18; ) {
-        if (child$18 === a) {
+      for (var didFindChild = !1, child$21 = parentA.child; child$21; ) {
+        if (child$21 === a) {
           didFindChild = !0;
           a = parentA;
           b = parentB;
           break;
         }
-        if (child$18 === b) {
+        if (child$21 === b) {
           didFindChild = !0;
           b = parentA;
           a = parentB;
           break;
         }
-        child$18 = child$18.sibling;
+        child$21 = child$21.sibling;
       }
       if (!didFindChild) {
-        for (child$18 = parentB.child; child$18; ) {
-          if (child$18 === a) {
+        for (child$21 = parentB.child; child$21; ) {
+          if (child$21 === a) {
             didFindChild = !0;
             a = parentB;
             b = parentA;
             break;
           }
-          if (child$18 === b) {
+          if (child$21 === b) {
             didFindChild = !0;
             b = parentB;
             a = parentA;
             break;
           }
-          child$18 = child$18.sibling;
+          child$21 = child$21.sibling;
         }
         if (!didFindChild) throw Error(formatProdErrorMessage(189));
       }
@@ -1672,8 +1702,8 @@ function prepareToHydrateHostInstance(fiber) {
       break;
     case "video":
     case "audio":
-      for (type = 0; type < mediaEventTypes.length; type++)
-        listenToNonDelegatedEvent(mediaEventTypes[type], instance);
+      for (var i = 0; i < mediaEventTypes.length; i++)
+        listenToNonDelegatedEvent(mediaEventTypes[i], instance);
       break;
     case "source":
       listenToNonDelegatedEvent("error", instance);
@@ -1700,20 +1730,28 @@ function prepareToHydrateHostInstance(fiber) {
         track(instance),
         initTextarea(instance, props);
   }
-  var updatePayload = null;
-  type = props.children;
-  ("string" !== typeof type && "number" !== typeof type) ||
-    instance.textContent === "" + type ||
-    (!0 !== props.suppressHydrationWarning &&
-      ((updatePayload = instance.textContent),
-      normalizeMarkupForTextOrAttribute(type),
-      normalizeMarkupForTextOrAttribute(updatePayload)),
-    (updatePayload = ["children", type]));
+  i = null;
+  var children = props.children;
+  if (
+    ("string" === typeof children || "number" === typeof children) &&
+    instance.textContent !== "" + children
+  ) {
+    if (!0 !== props.suppressHydrationWarning) {
+      var serverText = instance.textContent;
+      normalizeMarkupForTextOrAttribute(children);
+      normalizeMarkupForTextOrAttribute(serverText);
+    }
+    diffInCommitPhase
+      ? "body" !== type && (instance.textContent = children)
+      : (i = ["children", children]);
+  }
   null != props.onScroll && listenToNonDelegatedEvent("scroll", instance);
   null != props.onClick && (instance.onclick = noop$1);
-  instance = updatePayload;
-  fiber.updateQueue = instance;
-  return null !== instance ? !0 : !1;
+  instance = i;
+  return diffInCommitPhase ||
+    ((fiber.updateQueue = instance), null === instance)
+    ? !1
+    : !0;
 }
 function popToNextHostParent(fiber) {
   for (hydrationParentFiber = fiber.return; hydrationParentFiber; )
@@ -3188,10 +3226,10 @@ createFunctionComponentUpdateQueue = function () {
 function use(usable) {
   if (null !== usable && "object" === typeof usable) {
     if ("function" === typeof usable.then) {
-      var index$44 = thenableIndexCounter;
+      var index$47 = thenableIndexCounter;
       thenableIndexCounter += 1;
       null === thenableState && (thenableState = []);
-      usable = trackUsedThenable(thenableState, usable, index$44);
+      usable = trackUsedThenable(thenableState, usable, index$47);
       null === currentlyRenderingFiber$1.alternate &&
         (null === workInProgressHook
           ? null === currentlyRenderingFiber$1.memoizedState
@@ -3679,16 +3717,16 @@ function refreshCache(fiber, seedKey, seedValue) {
       case 3:
         var lane = requestUpdateLane(provider);
         fiber = createUpdate(lane);
-        var root$50 = enqueueUpdate(provider, fiber, lane);
-        if (null !== root$50) {
+        var root$53 = enqueueUpdate(provider, fiber, lane);
+        if (null !== root$53) {
           var eventTime = requestEventTime();
-          scheduleUpdateOnFiber(root$50, provider, lane, eventTime);
-          entangleTransitions(root$50, provider, lane);
+          scheduleUpdateOnFiber(root$53, provider, lane, eventTime);
+          entangleTransitions(root$53, provider, lane);
         }
         provider = createCache();
         null !== seedKey &&
           void 0 !== seedKey &&
-          null !== root$50 &&
+          null !== root$53 &&
           provider.data.set(seedKey, seedValue);
         fiber.payload = { cache: provider };
         return;
@@ -3897,15 +3935,15 @@ var HooksDispatcherOnMount = {
       getServerSnapshot = getServerSnapshot();
     } else {
       getServerSnapshot = getSnapshot();
-      var root$46 = workInProgressRoot;
-      if (null === root$46) throw Error(formatProdErrorMessage(349));
-      includesBlockingLane(root$46, renderLanes$1) ||
+      var root$49 = workInProgressRoot;
+      if (null === root$49) throw Error(formatProdErrorMessage(349));
+      includesBlockingLane(root$49, renderLanes$1) ||
         pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot);
     }
     hook.memoizedState = getServerSnapshot;
-    root$46 = { value: getServerSnapshot, getSnapshot: getSnapshot };
-    hook.queue = root$46;
-    mountEffect(subscribeToStore.bind(null, fiber, root$46, subscribe), [
+    root$49 = { value: getServerSnapshot, getSnapshot: getSnapshot };
+    hook.queue = root$49;
+    mountEffect(subscribeToStore.bind(null, fiber, root$49, subscribe), [
       subscribe
     ]);
     fiber.flags |= 2048;
@@ -3914,7 +3952,7 @@ var HooksDispatcherOnMount = {
       updateStoreInstance.bind(
         null,
         fiber,
-        root$46,
+        root$49,
         getServerSnapshot,
         getSnapshot
       ),
@@ -4467,10 +4505,10 @@ var markerInstanceStack = createCursor(null);
 function pushRootMarkerInstance(workInProgress) {
   if (enableTransitionTracing) {
     var transitions = workInProgressTransitions,
-      root$63 = workInProgress.stateNode;
+      root$66 = workInProgress.stateNode;
     null !== transitions &&
       transitions.forEach(function (transition) {
-        if (!root$63.incompleteTransitions.has(transition)) {
+        if (!root$66.incompleteTransitions.has(transition)) {
           var markerInstance = {
             tag: 0,
             transitions: new Set([transition]),
@@ -4478,11 +4516,11 @@ function pushRootMarkerInstance(workInProgress) {
             aborts: null,
             name: null
           };
-          root$63.incompleteTransitions.set(transition, markerInstance);
+          root$66.incompleteTransitions.set(transition, markerInstance);
         }
       });
     var markerInstances = [];
-    root$63.incompleteTransitions.forEach(function (markerInstance) {
+    root$66.incompleteTransitions.forEach(function (markerInstance) {
       markerInstances.push(markerInstance);
     });
     push(markerInstanceStack, markerInstances);
@@ -5154,14 +5192,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   }
   JSCompiler_temp = current.memoizedState;
   if (null !== JSCompiler_temp) {
-    var dehydrated$70 = JSCompiler_temp.dehydrated;
-    if (null !== dehydrated$70)
+    var dehydrated$73 = JSCompiler_temp.dehydrated;
+    if (null !== dehydrated$73)
       return updateDehydratedSuspenseComponent(
         current,
         workInProgress,
         didSuspend,
         nextProps,
-        dehydrated$70,
+        dehydrated$73,
         JSCompiler_temp,
         renderLanes
       );
@@ -5171,7 +5209,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
     showFallback = nextProps.fallback;
     didSuspend = workInProgress.mode;
     JSCompiler_temp = current.child;
-    dehydrated$70 = JSCompiler_temp.sibling;
+    dehydrated$73 = JSCompiler_temp.sibling;
     var primaryChildProps = { mode: "hidden", children: nextProps.children };
     0 === (didSuspend & 1) && workInProgress.child !== JSCompiler_temp
       ? ((nextProps = workInProgress.child),
@@ -5185,8 +5223,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         (workInProgress.deletions = null))
       : ((nextProps = createWorkInProgress(JSCompiler_temp, primaryChildProps)),
         (nextProps.subtreeFlags = JSCompiler_temp.subtreeFlags & 31457280));
-    null !== dehydrated$70
-      ? (showFallback = createWorkInProgress(dehydrated$70, showFallback))
+    null !== dehydrated$73
+      ? (showFallback = createWorkInProgress(dehydrated$73, showFallback))
       : ((showFallback = createFiberFromFragment(
           showFallback,
           didSuspend,
@@ -5205,10 +5243,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       ? (didSuspend = mountSuspenseOffscreenState(renderLanes))
       : ((JSCompiler_temp = didSuspend.cachePool),
         null !== JSCompiler_temp
-          ? ((dehydrated$70 = CacheContext._currentValue),
+          ? ((dehydrated$73 = CacheContext._currentValue),
             (JSCompiler_temp =
-              JSCompiler_temp.parent !== dehydrated$70
-                ? { parent: dehydrated$70, pool: dehydrated$70 }
+              JSCompiler_temp.parent !== dehydrated$73
+                ? { parent: dehydrated$73, pool: dehydrated$73 }
                 : JSCompiler_temp))
           : (JSCompiler_temp = getSuspendedCache()),
         (didSuspend = {
@@ -5222,23 +5260,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         ((JSCompiler_temp = enableTransitionTracing
           ? markerInstanceStack.current
           : null),
-        (dehydrated$70 = showFallback.updateQueue),
+        (dehydrated$73 = showFallback.updateQueue),
         (primaryChildProps = current.updateQueue),
-        null === dehydrated$70
+        null === dehydrated$73
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue: null
             })
-          : dehydrated$70 === primaryChildProps
+          : dehydrated$73 === primaryChildProps
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue:
                 null !== primaryChildProps ? primaryChildProps.retryQueue : null
             })
-          : ((dehydrated$70.transitions = didSuspend),
-            (dehydrated$70.markerInstances = JSCompiler_temp))));
+          : ((dehydrated$73.transitions = didSuspend),
+            (dehydrated$73.markerInstances = JSCompiler_temp))));
     showFallback.childLanes = current.childLanes & ~renderLanes;
     workInProgress.memoizedState = SUSPENDED_MARKER;
     return nextProps;
@@ -6210,62 +6248,67 @@ function markRef(workInProgress) {
 }
 function updateHostComponent(current, workInProgress, type, newProps) {
   current = current.memoizedProps;
-  if (current !== newProps) {
-    type = null;
-    var propKey,
-      styleName,
-      styleUpdates = null;
-    for (propKey in current)
-      if (
-        !newProps.hasOwnProperty(propKey) &&
-        current.hasOwnProperty(propKey) &&
-        null != current[propKey]
-      )
-        switch (propKey) {
-          case "style":
-            var lastStyle = current[propKey];
-            for (styleName in lastStyle)
-              lastStyle.hasOwnProperty(styleName) &&
-                (styleUpdates || (styleUpdates = {}),
-                (styleUpdates[styleName] = ""));
-            break;
-          default:
-            (type = type || []).push(propKey, null);
-        }
-    for (propKey in newProps) {
-      lastStyle = newProps[propKey];
-      var lastProp = null != current ? current[propKey] : void 0;
-      if (
-        newProps.hasOwnProperty(propKey) &&
-        lastStyle !== lastProp &&
-        (null != lastStyle || null != lastProp)
-      )
-        switch (propKey) {
-          case "style":
-            if (lastProp) {
-              for (styleName in lastProp)
-                !lastProp.hasOwnProperty(styleName) ||
-                  (lastStyle && lastStyle.hasOwnProperty(styleName)) ||
-                  (styleUpdates || (styleUpdates = {}),
-                  (styleUpdates[styleName] = ""));
-              for (styleName in lastStyle)
-                lastStyle.hasOwnProperty(styleName) &&
-                  lastProp[styleName] !== lastStyle[styleName] &&
-                  (styleUpdates || (styleUpdates = {}),
-                  (styleUpdates[styleName] = lastStyle[styleName]));
-            } else
-              styleUpdates ||
-                (type || (type = []), type.push(propKey, styleUpdates)),
-                (styleUpdates = lastStyle);
-            break;
-          default:
-            (type = type || []).push(propKey, lastStyle);
+  if (current !== newProps)
+    if (diffInCommitPhase) markUpdate(workInProgress);
+    else {
+      if (diffInCommitPhase) newProps = null;
+      else {
+        type = null;
+        var propKey,
+          styleName,
+          styleUpdates = null;
+        for (propKey in current)
+          if (
+            !newProps.hasOwnProperty(propKey) &&
+            current.hasOwnProperty(propKey) &&
+            null != current[propKey]
+          )
+            switch (propKey) {
+              case "style":
+                var lastStyle = current[propKey];
+                for (styleName in lastStyle)
+                  lastStyle.hasOwnProperty(styleName) &&
+                    (styleUpdates || (styleUpdates = {}),
+                    (styleUpdates[styleName] = ""));
+                break;
+              default:
+                (type = type || []).push(propKey, null);
+            }
+        for (propKey in newProps) {
+          lastStyle = newProps[propKey];
+          var lastProp = null != current ? current[propKey] : void 0;
+          if (
+            newProps.hasOwnProperty(propKey) &&
+            lastStyle !== lastProp &&
+            (null != lastStyle || null != lastProp)
+          )
+            switch (propKey) {
+              case "style":
+                if (lastProp) {
+                  for (styleName in lastProp)
+                    !lastProp.hasOwnProperty(styleName) ||
+                      (lastStyle && lastStyle.hasOwnProperty(styleName)) ||
+                      (styleUpdates || (styleUpdates = {}),
+                      (styleUpdates[styleName] = ""));
+                  for (styleName in lastStyle)
+                    lastStyle.hasOwnProperty(styleName) &&
+                      lastProp[styleName] !== lastStyle[styleName] &&
+                      (styleUpdates || (styleUpdates = {}),
+                      (styleUpdates[styleName] = lastStyle[styleName]));
+                } else
+                  styleUpdates ||
+                    (type || (type = []), type.push(propKey, styleUpdates)),
+                    (styleUpdates = lastStyle);
+                break;
+              default:
+                (type = type || []).push(propKey, lastStyle);
+            }
         }
+        styleUpdates && (type = type || []).push("style", styleUpdates);
+        newProps = type;
+      }
+      (workInProgress.updateQueue = newProps) && markUpdate(workInProgress);
     }
-    styleUpdates && (type = type || []).push("style", styleUpdates);
-    newProps = type;
-    (workInProgress.updateQueue = newProps) && markUpdate(workInProgress);
-  }
 }
 function preloadResourceAndSuspendIfNeeded(workInProgress, resource) {
   if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4))
@@ -6309,14 +6352,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) {
         break;
       case "collapsed":
         lastTailNode = renderState.tail;
-        for (var lastTailNode$102 = null; null !== lastTailNode; )
-          null !== lastTailNode.alternate && (lastTailNode$102 = lastTailNode),
+        for (var lastTailNode$105 = null; null !== lastTailNode; )
+          null !== lastTailNode.alternate && (lastTailNode$105 = lastTailNode),
             (lastTailNode = lastTailNode.sibling);
-        null === lastTailNode$102
+        null === lastTailNode$105
           ? hasRenderedATailFallback || null === renderState.tail
             ? (renderState.tail = null)
             : (renderState.tail.sibling = null)
-          : (lastTailNode$102.sibling = null);
+          : (lastTailNode$105.sibling = null);
     }
 }
 function bubbleProperties(completedWork) {
@@ -6328,53 +6371,53 @@ function bubbleProperties(completedWork) {
   if (didBailout)
     if (0 !== (completedWork.mode & 2)) {
       for (
-        var treeBaseDuration$104 = completedWork.selfBaseDuration,
-          child$105 = completedWork.child;
-        null !== child$105;
+        var treeBaseDuration$107 = completedWork.selfBaseDuration,
+          child$108 = completedWork.child;
+        null !== child$108;
 
       )
-        (newChildLanes |= child$105.lanes | child$105.childLanes),
-          (subtreeFlags |= child$105.subtreeFlags & 31457280),
-          (subtreeFlags |= child$105.flags & 31457280),
-          (treeBaseDuration$104 += child$105.treeBaseDuration),
-          (child$105 = child$105.sibling);
-      completedWork.treeBaseDuration = treeBaseDuration$104;
+        (newChildLanes |= child$108.lanes | child$108.childLanes),
+          (subtreeFlags |= child$108.subtreeFlags & 31457280),
+          (subtreeFlags |= child$108.flags & 31457280),
+          (treeBaseDuration$107 += child$108.treeBaseDuration),
+          (child$108 = child$108.sibling);
+      completedWork.treeBaseDuration = treeBaseDuration$107;
     } else
       for (
-        treeBaseDuration$104 = completedWork.child;
-        null !== treeBaseDuration$104;
+        treeBaseDuration$107 = completedWork.child;
+        null !== treeBaseDuration$107;
 
       )
         (newChildLanes |=
-          treeBaseDuration$104.lanes | treeBaseDuration$104.childLanes),
-          (subtreeFlags |= treeBaseDuration$104.subtreeFlags & 31457280),
-          (subtreeFlags |= treeBaseDuration$104.flags & 31457280),
-          (treeBaseDuration$104.return = completedWork),
-          (treeBaseDuration$104 = treeBaseDuration$104.sibling);
+          treeBaseDuration$107.lanes | treeBaseDuration$107.childLanes),
+          (subtreeFlags |= treeBaseDuration$107.subtreeFlags & 31457280),
+          (subtreeFlags |= treeBaseDuration$107.flags & 31457280),
+          (treeBaseDuration$107.return = completedWork),
+          (treeBaseDuration$107 = treeBaseDuration$107.sibling);
   else if (0 !== (completedWork.mode & 2)) {
-    treeBaseDuration$104 = completedWork.actualDuration;
-    child$105 = completedWork.selfBaseDuration;
+    treeBaseDuration$107 = completedWork.actualDuration;
+    child$108 = completedWork.selfBaseDuration;
     for (var child = completedWork.child; null !== child; )
       (newChildLanes |= child.lanes | child.childLanes),
         (subtreeFlags |= child.subtreeFlags),
         (subtreeFlags |= child.flags),
-        (treeBaseDuration$104 += child.actualDuration),
-        (child$105 += child.treeBaseDuration),
+        (treeBaseDuration$107 += child.actualDuration),
+        (child$108 += child.treeBaseDuration),
         (child = child.sibling);
-    completedWork.actualDuration = treeBaseDuration$104;
-    completedWork.treeBaseDuration = child$105;
+    completedWork.actualDuration = treeBaseDuration$107;
+    completedWork.treeBaseDuration = child$108;
   } else
     for (
-      treeBaseDuration$104 = completedWork.child;
-      null !== treeBaseDuration$104;
+      treeBaseDuration$107 = completedWork.child;
+      null !== treeBaseDuration$107;
 
     )
       (newChildLanes |=
-        treeBaseDuration$104.lanes | treeBaseDuration$104.childLanes),
-        (subtreeFlags |= treeBaseDuration$104.subtreeFlags),
-        (subtreeFlags |= treeBaseDuration$104.flags),
-        (treeBaseDuration$104.return = completedWork),
-        (treeBaseDuration$104 = treeBaseDuration$104.sibling);
+        treeBaseDuration$107.lanes | treeBaseDuration$107.childLanes),
+        (subtreeFlags |= treeBaseDuration$107.subtreeFlags),
+        (subtreeFlags |= treeBaseDuration$107.flags),
+        (treeBaseDuration$107.return = completedWork),
+        (treeBaseDuration$107 = treeBaseDuration$107.sibling);
   completedWork.subtreeFlags |= subtreeFlags;
   completedWork.childLanes = newChildLanes;
   return didBailout;
@@ -7159,8 +7202,8 @@ function safelyDetachRef(current, nearestMountedAncestor) {
             recordLayoutEffectDuration(current);
           }
         else ref(null);
-      } catch (error$137) {
-        captureCommitPhaseError(current, nearestMountedAncestor, error$137);
+      } catch (error$140) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error$140);
       }
     else ref.current = null;
 }
@@ -7197,7 +7240,7 @@ function commitBeforeMutationEffects(root, firstChild) {
           selection = selection.focusOffset;
           try {
             JSCompiler_temp.nodeType, focusNode.nodeType;
-          } catch (e$211) {
+          } catch (e$214) {
             JSCompiler_temp = null;
             break a;
           }
@@ -7467,11 +7510,11 @@ function commitPassiveEffectDurations(finishedRoot, finishedWork) {
         var _finishedWork$memoize = finishedWork.memoizedProps,
           id = _finishedWork$memoize.id;
         _finishedWork$memoize = _finishedWork$memoize.onPostCommit;
-        var commitTime$139 = commitTime,
+        var commitTime$142 = commitTime,
           phase = null === finishedWork.alternate ? "mount" : "update";
         currentUpdateIsNested && (phase = "nested-update");
         "function" === typeof _finishedWork$memoize &&
-          _finishedWork$memoize(id, phase, finishedRoot, commitTime$139);
+          _finishedWork$memoize(id, phase, finishedRoot, commitTime$142);
         finishedWork = finishedWork.return;
         a: for (; null !== finishedWork; ) {
           switch (finishedWork.tag) {
@@ -7498,8 +7541,8 @@ function commitHookLayoutEffects(finishedWork, hookFlags) {
   } else
     try {
       commitHookEffectListMount(hookFlags, finishedWork);
-    } catch (error$141) {
-      captureCommitPhaseError(finishedWork, finishedWork.return, error$141);
+    } catch (error$144) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error$144);
     }
 }
 function commitClassCallbacks(finishedWork) {
@@ -7598,11 +7641,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
           } else
             try {
               finishedRoot.componentDidMount();
-            } catch (error$142) {
+            } catch (error$145) {
               captureCommitPhaseError(
                 finishedWork,
                 finishedWork.return,
-                error$142
+                error$145
               );
             }
         else {
@@ -7619,11 +7662,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
                   current,
                   finishedRoot.__reactInternalSnapshotBeforeUpdate
                 );
-            } catch (error$143) {
+            } catch (error$146) {
               captureCommitPhaseError(
                 finishedWork,
                 finishedWork.return,
-                error$143
+                error$146
               );
             }
             recordLayoutEffectDuration(finishedWork);
@@ -7634,11 +7677,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
                 current,
                 finishedRoot.__reactInternalSnapshotBeforeUpdate
               );
-            } catch (error$144) {
+            } catch (error$147) {
               captureCommitPhaseError(
                 finishedWork,
                 finishedWork.return,
-                error$144
+                error$147
               );
             }
         }
@@ -8344,22 +8387,22 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
           try {
             startLayoutEffectTimer(),
               commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-          } catch (error$159) {
+          } catch (error$162) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$159
+              error$162
             );
           }
           recordLayoutEffectDuration(finishedWork);
         } else
           try {
             commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-          } catch (error$160) {
+          } catch (error$163) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$160
+              error$163
             );
           }
       }
@@ -8529,20 +8572,24 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         )
           try {
             var domElement = finishedWork.stateNode,
+              type = finishedWork.type,
+              oldProps = current.memoizedProps,
               newProps = finishedWork.memoizedProps;
-            updateProperties(
-              domElement,
-              flags,
-              finishedWork.type,
-              current.memoizedProps,
-              newProps
-            );
+            diffInCommitPhase
+              ? updateProperties(domElement, type, oldProps, newProps)
+              : updatePropertiesWithDiff(
+                  domElement,
+                  flags,
+                  type,
+                  oldProps,
+                  newProps
+                );
             domElement[internalPropsKey] = newProps;
-          } catch (error$161) {
+          } catch (error$164) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$161
+              error$164
             );
           }
       break;
@@ -8578,8 +8625,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         root = finishedWork.stateNode;
         try {
           setTextContent(root, "");
-        } catch (error$162) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$162);
+        } catch (error$165) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$165);
         }
       }
       if (
@@ -8591,13 +8638,21 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
           (hoistableRoot = finishedWork.type),
           (maybeNodes = finishedWork.updateQueue),
           (finishedWork.updateQueue = null),
-          null !== maybeNodes))
+          null !== maybeNodes || diffInCommitPhase))
       )
         try {
-          updateProperties(flags, maybeNodes, hoistableRoot, current, root),
+          diffInCommitPhase
+            ? updateProperties(flags, hoistableRoot, current, root)
+            : updatePropertiesWithDiff(
+                flags,
+                maybeNodes,
+                hoistableRoot,
+                current,
+                root
+              ),
             (flags[internalPropsKey] = root);
-        } catch (error$165) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$165);
+        } catch (error$168) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$168);
         }
       break;
     case 6:
@@ -8610,8 +8665,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         flags = finishedWork.memoizedProps;
         try {
           current.nodeValue = flags;
-        } catch (error$166) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$166);
+        } catch (error$169) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$169);
         }
       }
       break;
@@ -8625,8 +8680,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
       if (flags & 4 && null !== current && current.memoizedState.isDehydrated)
         try {
           retryIfBlockedOn(root.containerInfo);
-        } catch (error$167) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$167);
+        } catch (error$170) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$170);
         }
       break;
     case 4:
@@ -8656,8 +8711,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               null !== retryQueue && suspenseCallback(new Set(retryQueue));
             }
           }
-        } catch (error$169) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$169);
+        } catch (error$172) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$172);
         }
         current = finishedWork.updateQueue;
         null !== current &&
@@ -8670,15 +8725,15 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         null !== current &&
         safelyDetachRef(current, current.return);
       domElement = null !== finishedWork.memoizedState;
-      newProps = null !== current && null !== current.memoizedState;
+      type = null !== current && null !== current.memoizedState;
       finishedWork.mode & 1
-        ? ((suspenseCallback = offscreenSubtreeIsHidden),
-          (retryQueue = offscreenSubtreeWasHidden),
-          (offscreenSubtreeIsHidden = suspenseCallback || domElement),
-          (offscreenSubtreeWasHidden = retryQueue || newProps),
+        ? ((oldProps = offscreenSubtreeIsHidden),
+          (newProps = offscreenSubtreeWasHidden),
+          (offscreenSubtreeIsHidden = oldProps || domElement),
+          (offscreenSubtreeWasHidden = newProps || type),
           recursivelyTraverseMutationEffects(root, finishedWork),
-          (offscreenSubtreeWasHidden = retryQueue),
-          (offscreenSubtreeIsHidden = suspenseCallback))
+          (offscreenSubtreeWasHidden = newProps),
+          (offscreenSubtreeIsHidden = oldProps))
         : recursivelyTraverseMutationEffects(root, finishedWork);
       commitReconciliationEffects(finishedWork);
       root = finishedWork.stateNode;
@@ -8693,7 +8748,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         domElement &&
           ((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden),
           null === current ||
-            newProps ||
+            type ||
             root ||
             (0 !== (finishedWork.mode & 1) &&
               recursivelyTraverseDisappearLayoutEffects(finishedWork))),
@@ -8735,11 +8790,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
             if (null === current)
               try {
                 root.stateNode.nodeValue = domElement ? "" : root.memoizedProps;
-              } catch (error$149) {
+              } catch (error$152) {
                 captureCommitPhaseError(
                   finishedWork,
                   finishedWork.return,
-                  error$149
+                  error$152
                 );
               }
           } else if (
@@ -8814,21 +8869,21 @@ function commitReconciliationEffects(finishedWork) {
             insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0);
             break;
           case 5:
-            var parent$150 = JSCompiler_inline_result.stateNode;
+            var parent$153 = JSCompiler_inline_result.stateNode;
             JSCompiler_inline_result.flags & 32 &&
-              (setTextContent(parent$150, ""),
+              (setTextContent(parent$153, ""),
               (JSCompiler_inline_result.flags &= -33));
-            var before$151 = getHostSibling(finishedWork);
-            insertOrAppendPlacementNode(finishedWork, before$151, parent$150);
+            var before$154 = getHostSibling(finishedWork);
+            insertOrAppendPlacementNode(finishedWork, before$154, parent$153);
             break;
           case 3:
           case 4:
-            var parent$152 = JSCompiler_inline_result.stateNode.containerInfo,
-              before$153 = getHostSibling(finishedWork);
+            var parent$155 = JSCompiler_inline_result.stateNode.containerInfo,
+              before$156 = getHostSibling(finishedWork);
             insertOrAppendPlacementNodeIntoContainer(
               finishedWork,
-              before$153,
-              parent$152
+              before$156,
+              parent$155
             );
             break;
           default:
@@ -9020,8 +9075,8 @@ function commitHookPassiveMountEffects(finishedWork, hookFlags) {
   } else
     try {
       commitHookEffectListMount(hookFlags, finishedWork);
-    } catch (error$175) {
-      captureCommitPhaseError(finishedWork, finishedWork.return, error$175);
+    } catch (error$178) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error$178);
     }
 }
 function commitOffscreenPassiveMountEffects(current, finishedWork, instance) {
@@ -9320,9 +9375,9 @@ function recursivelyTraverseReconnectPassiveEffects(
           );
         break;
       case 22:
-        var instance$180 = finishedWork.stateNode;
+        var instance$183 = finishedWork.stateNode;
         null !== finishedWork.memoizedState
-          ? instance$180._visibility & 4
+          ? instance$183._visibility & 4
             ? recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -9335,7 +9390,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork
               )
-            : ((instance$180._visibility |= 4),
+            : ((instance$183._visibility |= 4),
               recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -9343,7 +9398,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 committedTransitions,
                 includeWorkInProgressEffects
               ))
-          : ((instance$180._visibility |= 4),
+          : ((instance$183._visibility |= 4),
             recursivelyTraverseReconnectPassiveEffects(
               finishedRoot,
               finishedWork,
@@ -9356,7 +9411,7 @@ function recursivelyTraverseReconnectPassiveEffects(
           commitOffscreenPassiveMountEffects(
             finishedWork.alternate,
             finishedWork,
-            instance$180
+            instance$183
           );
         break;
       case 24:
@@ -9730,13 +9785,13 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
     isFlushingWork = !0;
     do {
       var didPerformSomeWork = !1;
-      for (var root$188 = firstScheduledRoot; null !== root$188; ) {
+      for (var root$191 = firstScheduledRoot; null !== root$191; ) {
         if (
-          (!onlyLegacy || 0 === root$188.tag) &&
+          (!onlyLegacy || 0 === root$191.tag) &&
           0 !==
             (getNextLanes(
-              root$188,
-              root$188 === workInProgressRoot$jscomp$0
+              root$191,
+              root$191 === workInProgressRoot$jscomp$0
                 ? workInProgressRootRenderLanes$jscomp$0
                 : 0
             ) &
@@ -9744,7 +9799,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
         )
           try {
             didPerformSomeWork = !0;
-            var root = root$188;
+            var root = root$191;
             currentUpdateIsNested = nestedUpdateScheduled;
             nestedUpdateScheduled = !1;
             if (0 !== (executionContext & 6))
@@ -9789,7 +9844,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
           } catch (error) {
             null === errors ? (errors = [error]) : errors.push(error);
           }
-        root$188 = root$188.next;
+        root$191 = root$191.next;
       }
     } while (didPerformSomeWork);
     isFlushingWork = !1;
@@ -10135,16 +10190,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         exitStatus = renderRootSync(root, lanes);
         if (2 === exitStatus) {
           errorRetryLanes = lanes;
-          var errorRetryLanes$191 = getLanesToRetrySynchronouslyOnError(
+          var errorRetryLanes$194 = getLanesToRetrySynchronouslyOnError(
             root,
             errorRetryLanes
           );
-          0 !== errorRetryLanes$191 &&
-            ((lanes = errorRetryLanes$191),
+          0 !== errorRetryLanes$194 &&
+            ((lanes = errorRetryLanes$194),
             (exitStatus = recoverFromConcurrentError(
               root,
               errorRetryLanes,
-              errorRetryLanes$191
+              errorRetryLanes$194
             )));
         }
         if (1 === exitStatus)
@@ -10205,14 +10260,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
           if ((lanes & 8388480) === lanes) break;
           exitStatus = lanes;
           errorRetryLanes = root.eventTimes;
-          for (errorRetryLanes$191 = -1; 0 < exitStatus; ) {
+          for (errorRetryLanes$194 = -1; 0 < exitStatus; ) {
             var index$2 = 31 - clz32(exitStatus),
               lane = 1 << index$2;
             index$2 = errorRetryLanes[index$2];
-            index$2 > errorRetryLanes$191 && (errorRetryLanes$191 = index$2);
+            index$2 > errorRetryLanes$194 && (errorRetryLanes$194 = index$2);
             exitStatus &= ~lane;
           }
-          exitStatus = errorRetryLanes$191;
+          exitStatus = errorRetryLanes$194;
           exitStatus = now$1() - exitStatus;
           exitStatus =
             (120 > exitStatus
@@ -10583,8 +10638,8 @@ function renderRootSync(root, lanes) {
         }
       workLoopSync();
       break;
-    } catch (thrownValue$194) {
-      handleThrow(root, thrownValue$194);
+    } catch (thrownValue$197) {
+      handleThrow(root, thrownValue$197);
     }
   while (1);
   resetContextDependencies();
@@ -10701,8 +10756,8 @@ function renderRootConcurrent(root, lanes) {
         }
       workLoopConcurrent();
       break;
-    } catch (thrownValue$196) {
-      handleThrow(root, thrownValue$196);
+    } catch (thrownValue$199) {
+      handleThrow(root, thrownValue$199);
     }
   while (1);
   resetContextDependencies();
@@ -10885,10 +10940,10 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) {
                       };
                       suspenseBoundary.updateQueue = newOffscreenQueue;
                     } else {
-                      var retryQueue$58 = offscreenQueue.retryQueue;
-                      null === retryQueue$58
+                      var retryQueue$61 = offscreenQueue.retryQueue;
+                      null === retryQueue$61
                         ? (offscreenQueue.retryQueue = new Set([wakeable]))
-                        : retryQueue$58.add(wakeable);
+                        : retryQueue$61.add(wakeable);
                     }
                   }
                   break;
@@ -11099,7 +11154,7 @@ function commitRootImpl(
     var prevExecutionContext = executionContext;
     executionContext |= 4;
     ReactCurrentOwner.current = null;
-    var shouldFireAfterActiveInstanceBlur$200 = commitBeforeMutationEffects(
+    var shouldFireAfterActiveInstanceBlur$203 = commitBeforeMutationEffects(
       root,
       finishedWork
     );
@@ -11107,7 +11162,7 @@ function commitRootImpl(
     enableProfilerNestedUpdateScheduledHook &&
       (rootCommittingMutationOrLayoutEffects = root);
     commitMutationEffects(root, finishedWork, lanes);
-    shouldFireAfterActiveInstanceBlur$200 &&
+    shouldFireAfterActiveInstanceBlur$203 &&
       ((_enabled = !0),
       dispatchAfterDetachedBlur(selectionInformation.focusedElem),
       (_enabled = !1));
@@ -11201,7 +11256,7 @@ function releaseRootPooledCache(root, remainingLanes) {
 }
 function flushPassiveEffects() {
   if (null !== rootWithPendingPassiveEffects) {
-    var root$201 = rootWithPendingPassiveEffects,
+    var root$204 = rootWithPendingPassiveEffects,
       remainingLanes = pendingPassiveEffectsRemainingLanes;
     pendingPassiveEffectsRemainingLanes = 0;
     var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
@@ -11217,7 +11272,7 @@ function flushPassiveEffects() {
     } finally {
       (currentUpdatePriority = previousPriority),
         (ReactCurrentBatchConfig$1.transition = prevTransition),
-        releaseRootPooledCache(root$201, remainingLanes);
+        releaseRootPooledCache(root$204, remainingLanes);
     }
   }
   return !1;
@@ -12469,12 +12524,12 @@ function updateContainer(element, container, parentComponent, callback) {
 function attemptSynchronousHydration(fiber) {
   switch (fiber.tag) {
     case 3:
-      var root$204 = fiber.stateNode;
-      if (root$204.current.memoizedState.isDehydrated) {
-        var lanes = getHighestPriorityLanes(root$204.pendingLanes);
+      var root$207 = fiber.stateNode;
+      if (root$207.current.memoizedState.isDehydrated) {
+        var lanes = getHighestPriorityLanes(root$207.pendingLanes);
         0 !== lanes &&
-          (markRootEntangled(root$204, lanes | 2),
-          ensureRootIsScheduled(root$204),
+          (markRootEntangled(root$207, lanes | 2),
+          ensureRootIsScheduled(root$207),
           0 === (executionContext & 6) &&
             ((workInProgressRootRenderTargetTime = now$1() + 500),
             flushSyncWorkAcrossRoots_impl(!1)));
@@ -13566,19 +13621,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$350;
+  var JSCompiler_inline_result$jscomp$387;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1628 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1628) {
-      var element$jscomp$inline_1629 = document.createElement("div");
-      element$jscomp$inline_1629.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1628 =
-        "function" === typeof element$jscomp$inline_1629.oninput;
+    var isSupported$jscomp$inline_1672 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1672) {
+      var element$jscomp$inline_1673 = document.createElement("div");
+      element$jscomp$inline_1673.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1672 =
+        "function" === typeof element$jscomp$inline_1673.oninput;
     }
-    JSCompiler_inline_result$jscomp$350 = isSupported$jscomp$inline_1628;
-  } else JSCompiler_inline_result$jscomp$350 = !1;
+    JSCompiler_inline_result$jscomp$387 = isSupported$jscomp$inline_1672;
+  } else JSCompiler_inline_result$jscomp$387 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$350 &&
+    JSCompiler_inline_result$jscomp$387 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -13887,20 +13942,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1669 = 0;
-  i$jscomp$inline_1669 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1669++
+  var i$jscomp$inline_1713 = 0;
+  i$jscomp$inline_1713 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1713++
 ) {
-  var eventName$jscomp$inline_1670 =
-      simpleEventPluginEvents[i$jscomp$inline_1669],
-    domEventName$jscomp$inline_1671 =
-      eventName$jscomp$inline_1670.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1672 =
-      eventName$jscomp$inline_1670[0].toUpperCase() +
-      eventName$jscomp$inline_1670.slice(1);
+  var eventName$jscomp$inline_1714 =
+      simpleEventPluginEvents[i$jscomp$inline_1713],
+    domEventName$jscomp$inline_1715 =
+      eventName$jscomp$inline_1714.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1716 =
+      eventName$jscomp$inline_1714[0].toUpperCase() +
+      eventName$jscomp$inline_1714.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1671,
-    "on" + capitalizedEvent$jscomp$inline_1672
+    domEventName$jscomp$inline_1715,
+    "on" + capitalizedEvent$jscomp$inline_1716
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -14732,7 +14787,7 @@ function normalizeMarkupForTextOrAttribute(markup) {
     .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, "");
 }
 function noop$1() {}
-function setProp(domElement, tag, key, value, props) {
+function setProp(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "children":
       "string" === typeof value
@@ -14757,7 +14812,7 @@ function setProp(domElement, tag, key, value, props) {
       setValueForKnownAttribute(domElement, key, value);
       break;
     case "style":
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     case "src":
     case "href":
@@ -14973,6 +15028,9 @@ function setProp(domElement, tag, key, value, props) {
         value
       );
       break;
+    case "is":
+      setValueForAttribute(domElement, "is", value);
+      break;
     case "innerText":
     case "textContent":
       if (enableCustomElementPropertySupport) break;
@@ -14986,10 +15044,10 @@ function setProp(domElement, tag, key, value, props) {
           setValueForAttribute(domElement, key, value);
   }
 }
-function setPropOnCustomElement(domElement, tag, key, value, props) {
+function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "style":
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     case "dangerouslySetInnerHTML":
       if (null != value) {
@@ -15027,23 +15085,25 @@ function setPropOnCustomElement(domElement, tag, key, value, props) {
         if (enableCustomElementPropertySupport)
           a: {
             props = value;
-            if ("o" === key[0] && "n" === key[1]) {
-              tag = key.endsWith("Capture");
-              value = key.substr(2, tag ? key.length - 9 : void 0);
-              var prevProps = getFiberCurrentPropsFromNode(domElement);
-              prevProps = null != prevProps ? prevProps[key] : null;
-              "function" === typeof prevProps &&
-                domElement.removeEventListener(value, prevProps, tag);
-              if ("function" === typeof props) {
-                "function" !== typeof prevProps &&
-                  null !== prevProps &&
-                  (key in domElement
-                    ? (domElement[key] = null)
-                    : domElement.hasAttribute(key) &&
-                      domElement.removeAttribute(key));
-                domElement.addEventListener(value, props, tag);
-                break a;
-              }
+            if (
+              "o" === key[0] &&
+              "n" === key[1] &&
+              ((tag = key.endsWith("Capture")),
+              (value = key.substr(2, tag ? key.length - 9 : void 0)),
+              (prevValue = getFiberCurrentPropsFromNode(domElement)),
+              (prevValue = null != prevValue ? prevValue[key] : null),
+              "function" === typeof prevValue &&
+                domElement.removeEventListener(value, prevValue, tag),
+              "function" === typeof props)
+            ) {
+              "function" !== typeof prevValue &&
+                null !== prevValue &&
+                (key in domElement
+                  ? (domElement[key] = null)
+                  : domElement.hasAttribute(key) &&
+                    domElement.removeAttribute(key));
+              domElement.addEventListener(value, props, tag);
+              break a;
             }
             key in domElement
               ? (domElement[key] = props)
@@ -15097,7 +15157,7 @@ function setInitialProperties(domElement, tag, props) {
                   throw Error(formatProdErrorMessage(137, tag));
                 break;
               default:
-                setProp(domElement, tag, propKey, propValue, props);
+                setProp(domElement, tag, propKey, propValue, props, null);
             }
         }
       track(domElement);
@@ -15105,16 +15165,16 @@ function setInitialProperties(domElement, tag, props) {
       return;
     case "select":
       listenToNonDelegatedEvent("invalid", domElement);
-      for (var propKey$221 in props)
+      for (var propKey$224 in props)
         if (
-          props.hasOwnProperty(propKey$221) &&
-          ((propKey = props[propKey$221]), null != propKey)
+          props.hasOwnProperty(propKey$224) &&
+          ((propKey = props[propKey$224]), null != propKey)
         )
-          switch (propKey$221) {
+          switch (propKey$224) {
             case "value":
               break;
             default:
-              setProp(domElement, tag, propKey$221, propKey, props);
+              setProp(domElement, tag, propKey$224, propKey, props, null);
           }
       domElement.multiple = !!props.multiple;
       tag = props.value;
@@ -15125,12 +15185,12 @@ function setInitialProperties(domElement, tag, props) {
       return;
     case "textarea":
       listenToNonDelegatedEvent("invalid", domElement);
-      for (var propKey$223 in props)
+      for (var propKey$226 in props)
         if (
-          props.hasOwnProperty(propKey$223) &&
-          ((propKey = props[propKey$223]), null != propKey)
+          props.hasOwnProperty(propKey$226) &&
+          ((propKey = props[propKey$226]), null != propKey)
         )
-          switch (propKey$223) {
+          switch (propKey$226) {
             case "value":
               break;
             case "children":
@@ -15139,18 +15199,18 @@ function setInitialProperties(domElement, tag, props) {
               if (null != propKey) throw Error(formatProdErrorMessage(91));
               break;
             default:
-              setProp(domElement, tag, propKey$223, propKey, props);
+              setProp(domElement, tag, propKey$226, propKey, props);
           }
       track(domElement);
       initTextarea(domElement, props);
       return;
     case "option":
-      for (var propKey$225 in props)
+      for (var propKey$228 in props)
         if (
-          props.hasOwnProperty(propKey$225) &&
-          ((propKey = props[propKey$225]), null != propKey)
+          props.hasOwnProperty(propKey$228) &&
+          ((propKey = props[propKey$228]), null != propKey)
         )
-          switch (propKey$225) {
+          switch (propKey$228) {
             case "selected":
               domElement.selected =
                 propKey &&
@@ -15158,7 +15218,7 @@ function setInitialProperties(domElement, tag, props) {
                 "symbol" !== typeof propKey;
               break;
             default:
-              setProp(domElement, tag, propKey$225, propKey, props);
+              setProp(domElement, tag, propKey$228, propKey, props);
           }
       null != props.value &&
         domElement.setAttribute("value", "" + getToStringValue(props.value));
@@ -15200,31 +15260,32 @@ function setInitialProperties(domElement, tag, props) {
     case "track":
     case "wbr":
     case "menuitem":
-      for (var propKey$227 in props)
+      for (var propKey$230 in props)
         if (
-          props.hasOwnProperty(propKey$227) &&
-          ((propKey = props[propKey$227]), null != propKey)
+          props.hasOwnProperty(propKey$230) &&
+          ((propKey = props[propKey$230]), null != propKey)
         )
-          switch (propKey$227) {
+          switch (propKey$230) {
             case "children":
             case "dangerouslySetInnerHTML":
               throw Error(formatProdErrorMessage(137, tag));
             default:
-              setProp(domElement, tag, propKey$227, propKey, props);
+              setProp(domElement, tag, propKey$230, propKey, props, null);
           }
       return;
     default:
       if (isCustomElement(tag)) {
-        for (var propKey$229 in props)
-          props.hasOwnProperty(propKey$229) &&
-            ((propKey = props[propKey$229]),
+        for (var propKey$232 in props)
+          props.hasOwnProperty(propKey$232) &&
+            ((propKey = props[propKey$232]),
             null != propKey &&
               setPropOnCustomElement(
                 domElement,
                 tag,
-                propKey$229,
+                propKey$232,
                 propKey,
-                props
+                props,
+                null
               ));
         return;
       }
@@ -15232,9 +15293,317 @@ function setInitialProperties(domElement, tag, props) {
   for (propValue in props)
     props.hasOwnProperty(propValue) &&
       ((propKey = props[propValue]),
-      null != propKey && setProp(domElement, tag, propValue, propKey, props));
+      null != propKey &&
+        setProp(domElement, tag, propValue, propKey, props, null));
 }
-function updateProperties(
+function updateProperties(domElement, tag, lastProps, nextProps) {
+  switch (tag) {
+    case "div":
+    case "span":
+    case "svg":
+    case "path":
+    case "a":
+    case "g":
+    case "p":
+    case "li":
+      break;
+    case "input":
+      "radio" === nextProps.type &&
+        null != nextProps.name &&
+        updateInputChecked(domElement, nextProps);
+      for (var propKey in lastProps) {
+        var lastProp = lastProps[propKey];
+        if (
+          lastProps.hasOwnProperty(propKey) &&
+          null != lastProp &&
+          !nextProps.hasOwnProperty(propKey)
+        )
+          switch (propKey) {
+            case "checked":
+              lastProp = nextProps.defaultChecked;
+              domElement.checked =
+                !!lastProp &&
+                "function" !== typeof lastProp &&
+                "symbol" !== lastProp;
+              break;
+            case "value":
+              break;
+            default:
+              setProp(domElement, tag, propKey, null, nextProps, lastProp);
+          }
+      }
+      for (var propKey$236 in nextProps) {
+        lastProp = nextProps[propKey$236];
+        var lastProp$237 = lastProps[propKey$236];
+        if (
+          nextProps.hasOwnProperty(propKey$236) &&
+          lastProp !== lastProp$237 &&
+          (null != lastProp || null != lastProp$237)
+        )
+          switch (propKey$236) {
+            case "checked":
+              lastProp = null != lastProp ? lastProp : nextProps.defaultChecked;
+              domElement.checked =
+                !!lastProp &&
+                "function" !== typeof lastProp &&
+                "symbol" !== lastProp;
+              break;
+            case "value":
+              break;
+            case "children":
+            case "dangerouslySetInnerHTML":
+              if (null != lastProp)
+                throw Error(formatProdErrorMessage(137, tag));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$236,
+                lastProp,
+                nextProps,
+                lastProp$237
+              );
+          }
+      }
+      updateInput(domElement, nextProps);
+      return;
+    case "select":
+      for (var propKey$240 in lastProps)
+        if (
+          ((propKey$236 = lastProps[propKey$240]),
+          lastProps.hasOwnProperty(propKey$240) &&
+            null != propKey$236 &&
+            !nextProps.hasOwnProperty(propKey$240))
+        )
+          switch (propKey$240) {
+            case "value":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$240,
+                null,
+                nextProps,
+                propKey$236
+              );
+          }
+      for (lastProp in nextProps)
+        if (
+          ((propKey$236 = nextProps[lastProp]),
+          (lastProp$237 = lastProps[lastProp]),
+          nextProps.hasOwnProperty(lastProp) &&
+            propKey$236 !== lastProp$237 &&
+            (null != propKey$236 || null != lastProp$237))
+        )
+          switch (lastProp) {
+            case "value":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                lastProp,
+                propKey$236,
+                nextProps,
+                lastProp$237
+              );
+          }
+      updateSelect(domElement, lastProps, nextProps);
+      return;
+    case "textarea":
+      for (var propKey$245 in lastProps)
+        if (
+          ((propKey$236 = lastProps[propKey$245]),
+          lastProps.hasOwnProperty(propKey$245) &&
+            null != propKey$236 &&
+            !nextProps.hasOwnProperty(propKey$245))
+        )
+          switch (propKey$245) {
+            case "value":
+              break;
+            case "children":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$245,
+                null,
+                nextProps,
+                propKey$236
+              );
+          }
+      for (lastProp$237 in nextProps)
+        if (
+          ((propKey$236 = nextProps[lastProp$237]),
+          (lastProp = lastProps[lastProp$237]),
+          nextProps.hasOwnProperty(lastProp$237) &&
+            propKey$236 !== lastProp &&
+            (null != propKey$236 || null != lastProp))
+        )
+          switch (lastProp$237) {
+            case "value":
+              break;
+            case "children":
+              break;
+            case "dangerouslySetInnerHTML":
+              if (null != propKey$236) throw Error(formatProdErrorMessage(91));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                lastProp$237,
+                propKey$236,
+                nextProps,
+                lastProp
+              );
+          }
+      updateTextarea(domElement, nextProps);
+      return;
+    case "option":
+      for (var propKey$250 in lastProps)
+        if (
+          ((propKey$236 = lastProps[propKey$250]),
+          lastProps.hasOwnProperty(propKey$250) &&
+            null != propKey$236 &&
+            !nextProps.hasOwnProperty(propKey$250))
+        )
+          switch (propKey$250) {
+            case "selected":
+              domElement.selected = !1;
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$250,
+                null,
+                nextProps,
+                propKey$236
+              );
+          }
+      for (var propKey$252 in nextProps)
+        if (
+          ((propKey$236 = nextProps[propKey$252]),
+          (lastProp = lastProps[propKey$252]),
+          nextProps.hasOwnProperty(propKey$252) &&
+            propKey$236 !== lastProp &&
+            (null != propKey$236 || null != lastProp))
+        )
+          switch (propKey$252) {
+            case "selected":
+              domElement.selected =
+                propKey$236 &&
+                "function" !== typeof propKey$236 &&
+                "symbol" !== typeof propKey$236;
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$252,
+                propKey$236,
+                nextProps,
+                lastProp
+              );
+          }
+      return;
+    case "img":
+    case "link":
+    case "area":
+    case "base":
+    case "br":
+    case "col":
+    case "embed":
+    case "hr":
+    case "keygen":
+    case "meta":
+    case "param":
+    case "source":
+    case "track":
+    case "wbr":
+    case "menuitem":
+      for (var propKey$255 in lastProps)
+        (propKey$236 = lastProps[propKey$255]),
+          lastProps.hasOwnProperty(propKey$255) &&
+            null != propKey$236 &&
+            !nextProps.hasOwnProperty(propKey$255) &&
+            setProp(domElement, tag, propKey$255, null, nextProps, propKey$236);
+      for (var propKey$257 in nextProps)
+        if (
+          ((propKey$236 = nextProps[propKey$257]),
+          (lastProp = lastProps[propKey$257]),
+          nextProps.hasOwnProperty(propKey$257) &&
+            propKey$236 !== lastProp &&
+            (null != propKey$236 || null != lastProp))
+        )
+          switch (propKey$257) {
+            case "children":
+            case "dangerouslySetInnerHTML":
+              if (null != propKey$236)
+                throw Error(formatProdErrorMessage(137, tag));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$257,
+                propKey$236,
+                nextProps,
+                lastProp
+              );
+          }
+      return;
+    default:
+      if (isCustomElement(tag)) {
+        for (var propKey$260 in lastProps)
+          (propKey$236 = lastProps[propKey$260]),
+            lastProps.hasOwnProperty(propKey$260) &&
+              null != propKey$236 &&
+              !nextProps.hasOwnProperty(propKey$260) &&
+              setPropOnCustomElement(
+                domElement,
+                tag,
+                propKey$260,
+                null,
+                nextProps,
+                propKey$236
+              );
+        for (var propKey$262 in nextProps)
+          (propKey$236 = nextProps[propKey$262]),
+            (lastProp = lastProps[propKey$262]),
+            !nextProps.hasOwnProperty(propKey$262) ||
+              propKey$236 === lastProp ||
+              (null == propKey$236 && null == lastProp) ||
+              setPropOnCustomElement(
+                domElement,
+                tag,
+                propKey$262,
+                propKey$236,
+                nextProps,
+                lastProp
+              );
+        return;
+      }
+  }
+  for (var propKey$265 in lastProps)
+    (propKey$236 = lastProps[propKey$265]),
+      lastProps.hasOwnProperty(propKey$265) &&
+        null != propKey$236 &&
+        !nextProps.hasOwnProperty(propKey$265) &&
+        setProp(domElement, tag, propKey$265, null, nextProps, propKey$236);
+  for (var propKey$267 in nextProps)
+    (propKey$236 = nextProps[propKey$267]),
+      (lastProp = lastProps[propKey$267]),
+      !nextProps.hasOwnProperty(propKey$267) ||
+        propKey$236 === lastProp ||
+        (null == propKey$236 && null == lastProp) ||
+        setProp(domElement, tag, propKey$267, propKey$236, nextProps, lastProp);
+}
+function updatePropertiesWithDiff(
   domElement,
   updatePayload,
   tag,
@@ -15274,7 +15643,7 @@ function updateProperties(
               throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       }
       updateInput(domElement, nextProps);
@@ -15282,32 +15651,15 @@ function updateProperties(
     case "select":
       for (propKey = 0; propKey < updatePayload.length; propKey += 2) {
         propValue = updatePayload[propKey];
-        var propValue$235 = updatePayload[propKey + 1];
+        var propValue$272 = updatePayload[propKey + 1];
         switch (propValue) {
           case "value":
             break;
           default:
-            setProp(domElement, tag, propValue, propValue$235, nextProps);
+            setProp(domElement, tag, propValue, propValue$272, nextProps, null);
         }
       }
-      updatePayload = !!lastProps.multiple;
-      tag = nextProps.value;
-      null != tag
-        ? updateOptions(domElement, !!nextProps.multiple, tag, !1)
-        : updatePayload !== !!nextProps.multiple &&
-          (null != nextProps.defaultValue
-            ? updateOptions(
-                domElement,
-                !!nextProps.multiple,
-                nextProps.defaultValue,
-                !0
-              )
-            : updateOptions(
-                domElement,
-                !!nextProps.multiple,
-                nextProps.multiple ? [] : "",
-                !1
-              ));
+      updateSelect(domElement, lastProps, nextProps);
       return;
     case "textarea":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
@@ -15324,7 +15676,7 @@ function updateProperties(
             if (null != propValue) throw Error(formatProdErrorMessage(91));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       updateTextarea(domElement, nextProps);
       return;
@@ -15342,7 +15694,7 @@ function updateProperties(
               "symbol" !== typeof propValue;
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       return;
     case "img":
@@ -15372,7 +15724,7 @@ function updateProperties(
               throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       return;
     default:
@@ -15383,7 +15735,8 @@ function updateProperties(
             tag,
             updatePayload[lastProps],
             updatePayload[lastProps + 1],
-            nextProps
+            nextProps,
+            null
           );
         return;
       }
@@ -15394,7 +15747,8 @@ function updateProperties(
       tag,
       updatePayload[lastProps],
       updatePayload[lastProps + 1],
-      nextProps
+      nextProps,
+      null
     );
 }
 var Dispatcher$1 = Internals.Dispatcher,
@@ -15711,14 +16065,14 @@ function preinit$1(href, options) {
       switch (as) {
         case "style":
           as = getResourcesFromRoot(resourceRoot).hoistableStyles;
-          var key$252 = getStyleKey(href),
+          var key$289 = getStyleKey(href),
             precedence = options.precedence || "default",
-            resource = as.get(key$252);
+            resource = as.get(key$289);
           if (resource) break;
           var state = { loading: 0, preload: null };
           if (
             (resource = resourceRoot.querySelector(
-              getStylesheetSelectorFromKey(key$252)
+              getStylesheetSelectorFromKey(key$289)
             ))
           )
             state.loading = 1;
@@ -15729,7 +16083,7 @@ function preinit$1(href, options) {
               "data-precedence": precedence,
               crossOrigin: options.crossOrigin
             };
-            (options = preloadPropsMap.get(key$252)) &&
+            (options = preloadPropsMap.get(key$289)) &&
               adoptPreloadPropsForStylesheet(href, options);
             var link = (resource = (
               resourceRoot.ownerDocument || resourceRoot
@@ -15755,15 +16109,15 @@ function preinit$1(href, options) {
             count: 1,
             state: state
           };
-          as.set(key$252, resource);
+          as.set(key$289, resource);
           break;
         case "script":
           (as = getResourcesFromRoot(resourceRoot).hoistableScripts),
-            (key$252 = getScriptKey(href)),
-            (precedence = as.get(key$252)),
+            (key$289 = getScriptKey(href)),
+            (precedence = as.get(key$289)),
             precedence ||
               ((precedence = resourceRoot.querySelector(
-                "script[async]" + key$252
+                "script[async]" + key$289
               )),
               precedence ||
                 ((href = {
@@ -15772,7 +16126,7 @@ function preinit$1(href, options) {
                   crossOrigin: options.crossOrigin,
                   integrity: options.integrity
                 }),
-                (options = preloadPropsMap.get(key$252)) &&
+                (options = preloadPropsMap.get(key$289)) &&
                   adoptPreloadPropsForScript(href, options),
                 (options = resourceRoot.ownerDocument || resourceRoot),
                 (precedence = options.createElement("script")),
@@ -15785,13 +16139,13 @@ function preinit$1(href, options) {
                 count: 1,
                 state: null
               }),
-              as.set(key$252, precedence));
+              as.set(key$289, precedence));
       }
     else if ("style" === as || "script" === as)
       if ((resourceRoot = getDocumentForPreloads())) {
-        key$252 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
-        precedence = key$252 =
-          'link[rel="preload"][as="' + as + '"][href="' + key$252 + '"]';
+        key$289 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
+        precedence = key$289 =
+          'link[rel="preload"][as="' + as + '"][href="' + key$289 + '"]';
         switch (as) {
           case "style":
             precedence = getStyleKey(href);
@@ -15808,7 +16162,7 @@ function preinit$1(href, options) {
             integrity: options.integrity
           }),
           preloadPropsMap.set(precedence, href),
-          null === resourceRoot.querySelector(key$252) &&
+          null === resourceRoot.querySelector(key$289) &&
             ((options = resourceRoot.createElement("link")),
             setInitialProperties(options, "link", href),
             markNodeAsHoistable(options),
@@ -15841,17 +16195,17 @@ function getResource(type, currentProps, pendingProps) {
         "string" === typeof pendingProps.precedence
       ) {
         type = getStyleKey(pendingProps.href);
-        var styles$261 = getResourcesFromRoot(currentProps).hoistableStyles,
-          resource$262 = styles$261.get(type);
-        resource$262 ||
+        var styles$298 = getResourcesFromRoot(currentProps).hoistableStyles,
+          resource$299 = styles$298.get(type);
+        resource$299 ||
           ((currentProps = currentProps.ownerDocument || currentProps),
-          (resource$262 = {
+          (resource$299 = {
             type: "stylesheet",
             instance: null,
             count: 0,
             state: { loading: 0, preload: null }
           }),
-          styles$261.set(type, resource$262),
+          styles$298.set(type, resource$299),
           preloadPropsMap.has(type) ||
             preloadStylesheet(
               currentProps,
@@ -15866,9 +16220,9 @@ function getResource(type, currentProps, pendingProps) {
                 hrefLang: pendingProps.hrefLang,
                 referrerPolicy: pendingProps.referrerPolicy
               },
-              resource$262.state
+              resource$299.state
             ));
-        return resource$262;
+        return resource$299;
       }
       return null;
     case "script":
@@ -15940,36 +16294,36 @@ function acquireResource(hoistableRoot, resource, props) {
         return (resource.instance = key);
       case "stylesheet":
         styleProps = getStyleKey(props.href);
-        var instance$267 = hoistableRoot.querySelector(
+        var instance$304 = hoistableRoot.querySelector(
           getStylesheetSelectorFromKey(styleProps)
         );
-        if (instance$267)
+        if (instance$304)
           return (
-            (resource.instance = instance$267),
-            markNodeAsHoistable(instance$267),
-            instance$267
+            (resource.instance = instance$304),
+            markNodeAsHoistable(instance$304),
+            instance$304
           );
         key = stylesheetPropsFromRawProps(props);
         (styleProps = preloadPropsMap.get(styleProps)) &&
           adoptPreloadPropsForStylesheet(key, styleProps);
-        instance$267 = (
+        instance$304 = (
           hoistableRoot.ownerDocument || hoistableRoot
         ).createElement("link");
-        markNodeAsHoistable(instance$267);
-        var linkInstance = instance$267;
+        markNodeAsHoistable(instance$304);
+        var linkInstance = instance$304;
         linkInstance._p = new Promise(function (resolve, reject) {
           linkInstance.onload = resolve;
           linkInstance.onerror = reject;
         });
-        setInitialProperties(instance$267, "link", key);
+        setInitialProperties(instance$304, "link", key);
         resource.state.loading |= 4;
-        insertStylesheet(instance$267, props.precedence, hoistableRoot);
-        return (resource.instance = instance$267);
+        insertStylesheet(instance$304, props.precedence, hoistableRoot);
+        return (resource.instance = instance$304);
       case "script":
-        instance$267 = getScriptKey(props.src);
+        instance$304 = getScriptKey(props.src);
         if (
           (styleProps = hoistableRoot.querySelector(
-            "script[async]" + instance$267
+            "script[async]" + instance$304
           ))
         )
           return (
@@ -15978,7 +16332,7 @@ function acquireResource(hoistableRoot, resource, props) {
             styleProps
           );
         key = props;
-        if ((styleProps = preloadPropsMap.get(instance$267)))
+        if ((styleProps = preloadPropsMap.get(instance$304)))
           (key = assign({}, props)),
             adoptPreloadPropsForScript(key, styleProps);
         hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot;
@@ -16348,10 +16702,10 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1849 = {
+var devToolsConfig$jscomp$inline_1886 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-6a8c019f",
+  version: "18.3.0-www-modern-431ec1d4",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -16369,10 +16723,10 @@ var devToolsConfig$jscomp$inline_1849 = {
   } catch (err) {}
   return hook.checkDCE ? !0 : !1;
 })({
-  bundleType: devToolsConfig$jscomp$inline_1849.bundleType,
-  version: devToolsConfig$jscomp$inline_1849.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1849.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1849.rendererConfig,
+  bundleType: devToolsConfig$jscomp$inline_1886.bundleType,
+  version: devToolsConfig$jscomp$inline_1886.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1886.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1886.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -16389,14 +16743,14 @@ var devToolsConfig$jscomp$inline_1849 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1849.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1886.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-6a8c019f"
+  reconcilerVersion: "18.3.0-www-modern-431ec1d4"
 });
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
 exports.createPortal = function (children, container) {
@@ -16552,7 +16906,7 @@ exports.unstable_createEventHandle = function (type, options) {
   return eventHandle;
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-modern-6a8c019f";
+exports.version = "18.3.0-www-modern-431ec1d4";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
index a9623c1fa73d6..14d8e1ce6e84e 100644
--- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js
+++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
@@ -133,7 +133,8 @@ var disableInputAttributeSyncing =
   enableCustomElementPropertySupport =
     dynamicFeatureFlags.enableCustomElementPropertySupport,
   enableDeferRootSchedulingToMicrotask =
-    dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask; // On WWW, false is used for a new modern build.
+    dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask,
+  diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase; // On WWW, false is used for a new modern build.
 var enableProfilerTimer = true;
 var enableProfilerCommitHooks = true;
 var enableProfilerNestedUpdatePhase = true;
@@ -5061,6 +5062,44 @@ function createDangerousStringForStyles(styles) {
     return serialized || null;
   }
 }
+
+function setValueForStyle(style, styleName, value) {
+  var isCustomProperty = styleName.indexOf("--") === 0;
+
+  {
+    if (!isCustomProperty) {
+      warnValidStyle(styleName, value);
+    }
+  }
+
+  if (value == null || typeof value === "boolean" || value === "") {
+    if (isCustomProperty) {
+      style.setProperty(styleName, "");
+    } else if (styleName === "float") {
+      style.cssFloat = "";
+    } else {
+      style[styleName] = "";
+    }
+  } else if (isCustomProperty) {
+    style.setProperty(styleName, value);
+  } else if (
+    typeof value === "number" &&
+    value !== 0 &&
+    !isUnitlessNumber(styleName)
+  ) {
+    style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers
+  } else {
+    if (styleName === "float") {
+      style.cssFloat = value;
+    } else {
+      {
+        checkCSSPropertyStringCoercion(value, styleName);
+      }
+
+      style[styleName] = ("" + value).trim();
+    }
+  }
+}
 /**
  * Sets the value for multiple styles on a node.  If a value is specified as
  * '' (empty string), the corresponding style property will be unset.
@@ -5069,7 +5108,7 @@ function createDangerousStringForStyles(styles) {
  * @param {object} styles
  */
 
-function setValueForStyles(node, styles) {
+function setValueForStyles(node, styles, prevStyles) {
   if (styles != null && typeof styles !== "object") {
     throw new Error(
       "The `style` prop expects a mapping from style properties to values, " +
@@ -5088,45 +5127,44 @@ function setValueForStyles(node, styles) {
 
   var style = node.style;
 
-  for (var styleName in styles) {
-    if (!styles.hasOwnProperty(styleName)) {
-      continue;
+  if (diffInCommitPhase && prevStyles != null) {
+    {
+      validateShorthandPropertyCollisionInDev(prevStyles, styles);
     }
 
-    var value = styles[styleName];
-    var isCustomProperty = styleName.indexOf("--") === 0;
+    for (var styleName in prevStyles) {
+      if (
+        prevStyles.hasOwnProperty(styleName) &&
+        (styles == null || !styles.hasOwnProperty(styleName))
+      ) {
+        // Clear style
+        var isCustomProperty = styleName.indexOf("--") === 0;
 
-    {
-      if (!isCustomProperty) {
-        warnValidStyle(styleName, value);
+        if (isCustomProperty) {
+          style.setProperty(styleName, "");
+        } else if (styleName === "float") {
+          style.cssFloat = "";
+        } else {
+          style[styleName] = "";
+        }
       }
     }
 
-    if (value == null || typeof value === "boolean" || value === "") {
-      if (isCustomProperty) {
-        style.setProperty(styleName, "");
-      } else if (styleName === "float") {
-        style.cssFloat = "";
-      } else {
-        style[styleName] = "";
-      }
-    } else if (isCustomProperty) {
-      style.setProperty(styleName, value);
-    } else if (
-      typeof value === "number" &&
-      value !== 0 &&
-      !isUnitlessNumber(styleName)
-    ) {
-      style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers
-    } else {
-      if (styleName === "float") {
-        style.cssFloat = value;
-      } else {
-        {
-          checkCSSPropertyStringCoercion(value, styleName);
-        }
+    for (var _styleName in styles) {
+      var value = styles[_styleName];
 
-        style[styleName] = ("" + value).trim();
+      if (
+        styles.hasOwnProperty(_styleName) &&
+        prevStyles[_styleName] !== value
+      ) {
+        setValueForStyle(style, _styleName, value);
+      }
+    }
+  } else {
+    for (var _styleName2 in styles) {
+      if (styles.hasOwnProperty(_styleName2)) {
+        var _value = styles[_styleName2];
+        setValueForStyle(style, _styleName2, _value);
       }
     }
   }
@@ -5172,19 +5210,45 @@ function expandShorthandMap(styles) {
  *   becomes .style.fontVariant = ''
  */
 
-function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) {
+function validateShorthandPropertyCollisionInDev(prevStyles, nextStyles) {
   {
     if (!nextStyles) {
       return;
+    } // Compute the diff as it would happen elsewhere.
+
+    var expandedUpdates = {};
+
+    if (prevStyles) {
+      for (var key in prevStyles) {
+        if (prevStyles.hasOwnProperty(key) && !nextStyles.hasOwnProperty(key)) {
+          var longhands = shorthandToLonghand[key] || [key];
+
+          for (var i = 0; i < longhands.length; i++) {
+            expandedUpdates[longhands[i]] = key;
+          }
+        }
+      }
+    }
+
+    for (var _key in nextStyles) {
+      if (
+        nextStyles.hasOwnProperty(_key) &&
+        (!prevStyles || prevStyles[_key] !== nextStyles[_key])
+      ) {
+        var _longhands = shorthandToLonghand[_key] || [_key];
+
+        for (var _i = 0; _i < _longhands.length; _i++) {
+          expandedUpdates[_longhands[_i]] = _key;
+        }
+      }
     }
 
-    var expandedUpdates = expandShorthandMap(styleUpdates);
     var expandedStyles = expandShorthandMap(nextStyles);
     var warnedAbout = {};
 
-    for (var key in expandedUpdates) {
-      var originalKey = expandedUpdates[key];
-      var correctOriginalKey = expandedStyles[key];
+    for (var _key2 in expandedUpdates) {
+      var originalKey = expandedUpdates[_key2];
+      var correctOriginalKey = expandedStyles[_key2];
 
       if (correctOriginalKey && originalKey !== correctOriginalKey) {
         var warningKey = originalKey + "," + correctOriginalKey;
@@ -5201,7 +5265,7 @@ function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) {
             "avoid this, don't mix shorthand and non-shorthand properties " +
             "for the same value; instead, replace the shorthand with " +
             "separate values.",
-          isValueEmpty(styleUpdates[originalKey]) ? "Removing" : "Updating",
+          isValueEmpty(nextStyles[originalKey]) ? "Removing" : "Updating",
           originalKey,
           correctOriginalKey
         );
@@ -6611,7 +6675,7 @@ function trapClickOnNonInteractiveElement(node) {
 var xlinkNamespace = "http://www.w3.org/1999/xlink";
 var xmlNamespace = "http://www.w3.org/XML/1998/namespace";
 
-function setProp(domElement, tag, key, value, props) {
+function setProp(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "children": {
       if (typeof value === "string") {
@@ -6658,7 +6722,7 @@ function setProp(domElement, tag, key, value, props) {
     }
 
     case "style": {
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     }
     // These attributes accept URLs. These must not allow javascript: URLS.
@@ -7046,6 +7110,20 @@ function setProp(domElement, tag, key, value, props) {
       break;
     // Properties that should not be allowed on custom elements.
 
+    case "is": {
+      {
+        if (prevValue != null) {
+          error('Cannot update the "is" prop after it has been initialized.');
+        }
+      } // TODO: We shouldn't actually set this attribute, because we've already
+      // passed it to createElement. We don't also need the attribute.
+      // However, our tests currently query for it so it's plausible someone
+      // else does too so it's break.
+
+      setValueForAttribute(domElement, "is", value);
+      break;
+    }
+
     case "innerText":
     case "textContent":
       if (enableCustomElementPropertySupport) {
@@ -7075,10 +7153,10 @@ function setProp(domElement, tag, key, value, props) {
   }
 }
 
-function setPropOnCustomElement(domElement, tag, key, value, props) {
+function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "style": {
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     }
 
@@ -7270,7 +7348,7 @@ function setInitialProperties(domElement, tag, props) {
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, propKey, propValue, props);
+            setProp(domElement, tag, propKey, propValue, props, null);
           }
         }
       } // TODO: Make sure we check if this is still unmounted or do any clean
@@ -7309,7 +7387,7 @@ function setInitialProperties(domElement, tag, props) {
           // defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey, _propValue, props);
+            setProp(domElement, tag, _propKey, _propValue, props, null);
           }
         }
       }
@@ -7493,7 +7571,7 @@ function setInitialProperties(domElement, tag, props) {
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey4, _propValue4, props);
+            setProp(domElement, tag, _propKey4, _propValue4, props, null);
           }
         }
       }
@@ -7519,7 +7597,8 @@ function setInitialProperties(domElement, tag, props) {
             tag,
             _propKey5,
             _propValue5,
-            props
+            props,
+            null
           );
         }
 
@@ -7539,7 +7618,7 @@ function setInitialProperties(domElement, tag, props) {
       continue;
     }
 
-    setProp(domElement, tag, _propKey6, _propValue6, props);
+    setProp(domElement, tag, _propKey6, _propValue6, props, null);
   }
 } // Calculate the diff between the two objects.
 
@@ -7656,16 +7735,514 @@ function diffProperties(domElement, tag, lastProps, nextProps) {
 
   if (styleUpdates) {
     {
-      validateShorthandPropertyCollisionInDev(styleUpdates, nextProps.style);
+      validateShorthandPropertyCollisionInDev(lastProps.style, nextProps.style);
     }
 
     (updatePayload = updatePayload || []).push("style", styleUpdates);
   }
 
   return updatePayload;
+}
+function updateProperties(domElement, tag, lastProps, nextProps) {
+  {
+    validatePropertiesInDevelopment(tag, nextProps);
+  }
+
+  switch (tag) {
+    case "div":
+    case "span":
+    case "svg":
+    case "path":
+    case "a":
+    case "g":
+    case "p":
+    case "li": {
+      // Fast track the most common tag types
+      break;
+    }
+
+    case "input": {
+      // 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 (nextProps.type === "radio" && nextProps.name != null) {
+        updateInputChecked(domElement, nextProps);
+      }
+
+      for (var propKey in lastProps) {
+        var lastProp = lastProps[propKey];
+
+        if (
+          lastProps.hasOwnProperty(propKey) &&
+          lastProp != null &&
+          !nextProps.hasOwnProperty(propKey)
+        ) {
+          switch (propKey) {
+            case "checked": {
+              var checked = nextProps.defaultChecked;
+              var inputElement = domElement;
+              inputElement.checked =
+                !!checked &&
+                typeof checked !== "function" &&
+                checked !== "symbol";
+              break;
+            }
+
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+            // defaultChecked and defaultValue are ignored by setProp
+
+            default: {
+              setProp(domElement, tag, propKey, null, nextProps, lastProp);
+            }
+          }
+        }
+      }
+
+      for (var _propKey7 in nextProps) {
+        var nextProp = nextProps[_propKey7];
+        var _lastProp = lastProps[_propKey7];
+
+        if (
+          nextProps.hasOwnProperty(_propKey7) &&
+          nextProp !== _lastProp &&
+          (nextProp != null || _lastProp != null)
+        ) {
+          switch (_propKey7) {
+            case "checked": {
+              var _checked =
+                nextProp != null ? nextProp : nextProps.defaultChecked;
+
+              var _inputElement = domElement;
+              _inputElement.checked =
+                !!_checked &&
+                typeof _checked !== "function" &&
+                _checked !== "symbol";
+              break;
+            }
+
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+
+            case "children":
+            case "dangerouslySetInnerHTML": {
+              if (nextProp != null) {
+                throw new Error(
+                  tag +
+                    " is a void element tag and must neither have `children` nor " +
+                    "use `dangerouslySetInnerHTML`."
+                );
+              }
+
+              break;
+            }
+            // defaultChecked and defaultValue are ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey7,
+                nextProp,
+                nextProps,
+                _lastProp
+              );
+            }
+          }
+        }
+      }
+
+      {
+        var wasControlled =
+          lastProps.type === "checkbox" || lastProps.type === "radio"
+            ? lastProps.checked != null
+            : lastProps.value != null;
+        var isControlled =
+          nextProps.type === "checkbox" || nextProps.type === "radio"
+            ? nextProps.checked != null
+            : nextProps.value != null;
+
+        if (
+          !wasControlled &&
+          isControlled &&
+          !didWarnUncontrolledToControlled
+        ) {
+          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 (
+          wasControlled &&
+          !isControlled &&
+          !didWarnControlledToUncontrolled
+        ) {
+          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;
+        }
+      } // Update the wrapper around inputs *after* updating props. This has to
+      // happen after updating the rest of props. Otherwise HTML5 input validations
+      // raise warnings and prevent the new value from being assigned.
+
+      updateInput(domElement, nextProps);
+      return;
+    }
+
+    case "select": {
+      for (var _propKey8 in lastProps) {
+        var _lastProp2 = lastProps[_propKey8];
+
+        if (
+          lastProps.hasOwnProperty(_propKey8) &&
+          _lastProp2 != null &&
+          !nextProps.hasOwnProperty(_propKey8)
+        ) {
+          switch (_propKey8) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+            // defaultValue are ignored by setProp
+
+            default: {
+              setProp(domElement, tag, _propKey8, null, nextProps, _lastProp2);
+            }
+          }
+        }
+      }
+
+      for (var _propKey9 in nextProps) {
+        var _nextProp = nextProps[_propKey9];
+        var _lastProp3 = lastProps[_propKey9];
+
+        if (
+          nextProps.hasOwnProperty(_propKey9) &&
+          _nextProp !== _lastProp3 &&
+          (_nextProp != null || _lastProp3 != null)
+        ) {
+          switch (_propKey9) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+            // defaultValue are ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey9,
+                _nextProp,
+                nextProps,
+                _lastProp3
+              );
+            }
+          }
+        }
+      } // <select> value update needs to occur after <option> children
+      // reconciliation
+
+      updateSelect(domElement, lastProps, nextProps);
+      return;
+    }
+
+    case "textarea": {
+      for (var _propKey10 in lastProps) {
+        var _lastProp4 = lastProps[_propKey10];
+
+        if (
+          lastProps.hasOwnProperty(_propKey10) &&
+          _lastProp4 != null &&
+          !nextProps.hasOwnProperty(_propKey10)
+        ) {
+          switch (_propKey10) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+
+            case "children": {
+              // TODO: This doesn't actually do anything if it updates.
+              break;
+            }
+            // defaultValue is ignored by setProp
+
+            default: {
+              setProp(domElement, tag, _propKey10, null, nextProps, _lastProp4);
+            }
+          }
+        }
+      }
+
+      for (var _propKey11 in nextProps) {
+        var _nextProp2 = nextProps[_propKey11];
+        var _lastProp5 = lastProps[_propKey11];
+
+        if (
+          nextProps.hasOwnProperty(_propKey11) &&
+          _nextProp2 !== _lastProp5 &&
+          (_nextProp2 != null || _lastProp5 != null)
+        ) {
+          switch (_propKey11) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+
+            case "children": {
+              // TODO: This doesn't actually do anything if it updates.
+              break;
+            }
+
+            case "dangerouslySetInnerHTML": {
+              if (_nextProp2 != null) {
+                // TODO: Do we really need a special error message for this. It's also pretty blunt.
+                throw new Error(
+                  "`dangerouslySetInnerHTML` does not make sense on <textarea>."
+                );
+              }
+
+              break;
+            }
+            // defaultValue is ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey11,
+                _nextProp2,
+                nextProps,
+                _lastProp5
+              );
+            }
+          }
+        }
+      }
+
+      updateTextarea(domElement, nextProps);
+      return;
+    }
+
+    case "option": {
+      for (var _propKey12 in lastProps) {
+        var _lastProp6 = lastProps[_propKey12];
+
+        if (
+          lastProps.hasOwnProperty(_propKey12) &&
+          _lastProp6 != null &&
+          !nextProps.hasOwnProperty(_propKey12)
+        ) {
+          switch (_propKey12) {
+            case "selected": {
+              // TODO: Remove support for selected on option.
+              domElement.selected = false;
+              break;
+            }
+
+            default: {
+              setProp(domElement, tag, _propKey12, null, nextProps, _lastProp6);
+            }
+          }
+        }
+      }
+
+      for (var _propKey13 in nextProps) {
+        var _nextProp3 = nextProps[_propKey13];
+        var _lastProp7 = lastProps[_propKey13];
+
+        if (
+          nextProps.hasOwnProperty(_propKey13) &&
+          _nextProp3 !== _lastProp7 &&
+          (_nextProp3 != null || _lastProp7 != null)
+        ) {
+          switch (_propKey13) {
+            case "selected": {
+              // TODO: Remove support for selected on option.
+              domElement.selected =
+                _nextProp3 &&
+                typeof _nextProp3 !== "function" &&
+                typeof _nextProp3 !== "symbol";
+              break;
+            }
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey13,
+                _nextProp3,
+                nextProps,
+                _lastProp7
+              );
+            }
+          }
+        }
+      }
+
+      return;
+    }
+
+    case "img":
+    case "link":
+    case "area":
+    case "base":
+    case "br":
+    case "col":
+    case "embed":
+    case "hr":
+    case "keygen":
+    case "meta":
+    case "param":
+    case "source":
+    case "track":
+    case "wbr":
+    case "menuitem": {
+      // Void elements
+      for (var _propKey14 in lastProps) {
+        var _lastProp8 = lastProps[_propKey14];
+
+        if (
+          lastProps.hasOwnProperty(_propKey14) &&
+          _lastProp8 != null &&
+          !nextProps.hasOwnProperty(_propKey14)
+        ) {
+          setProp(domElement, tag, _propKey14, null, nextProps, _lastProp8);
+        }
+      }
+
+      for (var _propKey15 in nextProps) {
+        var _nextProp4 = nextProps[_propKey15];
+        var _lastProp9 = lastProps[_propKey15];
+
+        if (
+          nextProps.hasOwnProperty(_propKey15) &&
+          _nextProp4 !== _lastProp9 &&
+          (_nextProp4 != null || _lastProp9 != null)
+        ) {
+          switch (_propKey15) {
+            case "children":
+            case "dangerouslySetInnerHTML": {
+              if (_nextProp4 != null) {
+                // TODO: Can we make this a DEV warning to avoid this deny list?
+                throw new Error(
+                  tag +
+                    " is a void element tag and must neither have `children` nor " +
+                    "use `dangerouslySetInnerHTML`."
+                );
+              }
+
+              break;
+            }
+            // defaultChecked and defaultValue are ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey15,
+                _nextProp4,
+                nextProps,
+                _lastProp9
+              );
+            }
+          }
+        }
+      }
+
+      return;
+    }
+
+    default: {
+      if (isCustomElement(tag)) {
+        for (var _propKey16 in lastProps) {
+          var _lastProp10 = lastProps[_propKey16];
+
+          if (
+            lastProps.hasOwnProperty(_propKey16) &&
+            _lastProp10 != null &&
+            !nextProps.hasOwnProperty(_propKey16)
+          ) {
+            setPropOnCustomElement(
+              domElement,
+              tag,
+              _propKey16,
+              null,
+              nextProps,
+              _lastProp10
+            );
+          }
+        }
+
+        for (var _propKey17 in nextProps) {
+          var _nextProp5 = nextProps[_propKey17];
+          var _lastProp11 = lastProps[_propKey17];
+
+          if (
+            nextProps.hasOwnProperty(_propKey17) &&
+            _nextProp5 !== _lastProp11 &&
+            (_nextProp5 != null || _lastProp11 != null)
+          ) {
+            setPropOnCustomElement(
+              domElement,
+              tag,
+              _propKey17,
+              _nextProp5,
+              nextProps,
+              _lastProp11
+            );
+          }
+        }
+
+        return;
+      }
+    }
+  }
+
+  for (var _propKey18 in lastProps) {
+    var _lastProp12 = lastProps[_propKey18];
+
+    if (
+      lastProps.hasOwnProperty(_propKey18) &&
+      _lastProp12 != null &&
+      !nextProps.hasOwnProperty(_propKey18)
+    ) {
+      setProp(domElement, tag, _propKey18, null, nextProps, _lastProp12);
+    }
+  }
+
+  for (var _propKey19 in nextProps) {
+    var _nextProp6 = nextProps[_propKey19];
+    var _lastProp13 = lastProps[_propKey19];
+
+    if (
+      nextProps.hasOwnProperty(_propKey19) &&
+      _nextProp6 !== _lastProp13 &&
+      (_nextProp6 != null || _lastProp13 != null)
+    ) {
+      setProp(domElement, tag, _propKey19, _nextProp6, nextProps, _lastProp13);
+    }
+  }
 } // Apply the diff.
 
-function updateProperties(
+function updatePropertiesWithDiff(
   domElement,
   updatePayload,
   tag,
@@ -7729,7 +8306,7 @@ function updateProperties(
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
           }
         }
       }
@@ -7785,10 +8362,10 @@ function updateProperties(
 
     case "select": {
       for (var _i = 0; _i < updatePayload.length; _i += 2) {
-        var _propKey7 = updatePayload[_i];
+        var _propKey20 = updatePayload[_i];
         var _propValue7 = updatePayload[_i + 1];
 
-        switch (_propKey7) {
+        switch (_propKey20) {
           case "value": {
             // This is handled by updateWrapper below.
             break;
@@ -7796,7 +8373,7 @@ function updateProperties(
           // defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey7, _propValue7, nextProps);
+            setProp(domElement, tag, _propKey20, _propValue7, nextProps, null);
           }
         }
       } // <select> value update needs to occur after <option> children
@@ -7808,10 +8385,10 @@ function updateProperties(
 
     case "textarea": {
       for (var _i2 = 0; _i2 < updatePayload.length; _i2 += 2) {
-        var _propKey8 = updatePayload[_i2];
+        var _propKey21 = updatePayload[_i2];
         var _propValue8 = updatePayload[_i2 + 1];
 
-        switch (_propKey8) {
+        switch (_propKey21) {
           case "value": {
             // This is handled by updateWrapper below.
             break;
@@ -7835,7 +8412,7 @@ function updateProperties(
           // defaultValue is ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey8, _propValue8, nextProps);
+            setProp(domElement, tag, _propKey21, _propValue8, nextProps, null);
           }
         }
       }
@@ -7846,10 +8423,10 @@ function updateProperties(
 
     case "option": {
       for (var _i3 = 0; _i3 < updatePayload.length; _i3 += 2) {
-        var _propKey9 = updatePayload[_i3];
+        var _propKey22 = updatePayload[_i3];
         var _propValue9 = updatePayload[_i3 + 1];
 
-        switch (_propKey9) {
+        switch (_propKey22) {
           case "selected": {
             // TODO: Remove support for selected on option.
             domElement.selected =
@@ -7860,7 +8437,7 @@ function updateProperties(
           }
 
           default: {
-            setProp(domElement, tag, _propKey9, _propValue9, nextProps);
+            setProp(domElement, tag, _propKey22, _propValue9, nextProps, null);
           }
         }
       }
@@ -7885,10 +8462,10 @@ function updateProperties(
     case "menuitem": {
       // Void elements
       for (var _i4 = 0; _i4 < updatePayload.length; _i4 += 2) {
-        var _propKey10 = updatePayload[_i4];
+        var _propKey23 = updatePayload[_i4];
         var _propValue10 = updatePayload[_i4 + 1];
 
-        switch (_propKey10) {
+        switch (_propKey23) {
           case "children":
           case "dangerouslySetInnerHTML": {
             if (_propValue10 != null) {
@@ -7905,7 +8482,7 @@ function updateProperties(
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey10, _propValue10, nextProps);
+            setProp(domElement, tag, _propKey23, _propValue10, nextProps, null);
           }
         }
       }
@@ -7916,14 +8493,15 @@ function updateProperties(
     default: {
       if (isCustomElement(tag)) {
         for (var _i5 = 0; _i5 < updatePayload.length; _i5 += 2) {
-          var _propKey11 = updatePayload[_i5];
+          var _propKey24 = updatePayload[_i5];
           var _propValue11 = updatePayload[_i5 + 1];
           setPropOnCustomElement(
             domElement,
             tag,
-            _propKey11,
+            _propKey24,
             _propValue11,
-            nextProps
+            nextProps,
+            null
           );
         }
 
@@ -7933,9 +8511,9 @@ function updateProperties(
   } // Apply the diff.
 
   for (var _i6 = 0; _i6 < updatePayload.length; _i6 += 2) {
-    var _propKey12 = updatePayload[_i6];
+    var _propKey25 = updatePayload[_i6];
     var _propValue12 = updatePayload[_i6 + 1];
-    setProp(domElement, tag, _propKey12, _propValue12, nextProps);
+    setProp(domElement, tag, _propKey25, _propValue12, nextProps, null);
   }
 }
 
@@ -8982,7 +9560,18 @@ function diffHydratedProperties(
       }
 
       if (!isConcurrentMode || !enableClientRenderFallbackOnTextMismatch) {
-        updatePayload = ["children", children];
+        if (diffInCommitPhase) {
+          // We really should be patching this in the commit phase but since
+          // this only affects legacy mode hydration which is deprecated anyway
+          // we can get away with it.
+          // Host singletons get their children appended and don't use the text
+          // content mechanism.
+          if (tag !== "body") {
+            domElement.textContent = children;
+          }
+        } else {
+          updatePayload = ["children", children];
+        }
       }
     }
   }
@@ -10585,11 +11174,13 @@ function prepareToHydrateHostInstance(fiber, hostContext) {
     shouldWarnIfMismatchDev
   ); // TODO: Type this specific to this type of component.
 
-  fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
-  // is a new ref we mark this as an update.
+  if (!diffInCommitPhase) {
+    fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
+    // is a new ref we mark this as an update.
 
-  if (updatePayload !== null) {
-    return true;
+    if (updatePayload !== null) {
+      return true;
+    }
   }
 
   return false;
@@ -24640,29 +25231,34 @@ function updateHostComponent(
       // In mutation mode, this is sufficient for a bailout because
       // we won't touch this node even if children changed.
       return;
-    } // If we get updated because one of our children updated, we don't
-    // have newProps so we'll have to reuse them.
-    // TODO: Split the update API as separate for the props vs. children.
-    // Even better would be if children weren't special cased at all tho.
-
-    var instance = workInProgress.stateNode;
-    var currentHostContext = getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host
-    // component is hitting the resume path. Figure out why. Possibly
-    // related to `hidden`.
+    }
 
-    var updatePayload = prepareUpdate(
-      instance,
-      type,
-      oldProps,
-      newProps,
-      currentHostContext
-    ); // TODO: Type this specific to this type of component.
+    if (diffInCommitPhase) {
+      markUpdate(workInProgress);
+    } else {
+      // If we get updated because one of our children updated, we don't
+      // have newProps so we'll have to reuse them.
+      // TODO: Split the update API as separate for the props vs. children.
+      // Even better would be if children weren't special cased at all tho.
+      var instance = workInProgress.stateNode; // TODO: Experiencing an error where oldProps is null. Suggests a host
+      // component is hitting the resume path. Figure out why. Possibly
+      // related to `hidden`.
+
+      var currentHostContext = getHostContext();
+      var updatePayload = prepareUpdate(
+        instance,
+        type,
+        oldProps,
+        newProps,
+        currentHostContext
+      ); // TODO: Type this specific to this type of component.
 
-    workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
-    // is a new ref we mark this as an update. All the work is done in commitWork.
+      workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
+      // is a new ref we mark this as an update. All the work is done in commitWork.
 
-    if (updatePayload) {
-      markUpdate(workInProgress);
+      if (updatePayload) {
+        markUpdate(workInProgress);
+      }
     }
   }
 } // This function must be called at the very end of the complete phase, because
@@ -28822,7 +29418,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) {
             var _updatePayload = finishedWork.updateQueue;
             finishedWork.updateQueue = null;
 
-            if (_updatePayload !== null) {
+            if (_updatePayload !== null || diffInCommitPhase) {
               try {
                 commitUpdate(
                   _instance2,
@@ -36542,7 +37138,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-ca64d104";
+var ReactVersion = "18.3.0-www-classic-7ad36f09";
 
 function createPortal$1(
   children,
@@ -42899,6 +43495,11 @@ function finalizeInitialChildren(domElement, type, props, hostContext) {
   }
 }
 function prepareUpdate(domElement, type, oldProps, newProps, hostContext) {
+  if (diffInCommitPhase) {
+    // TODO: Figure out how to validateDOMNesting when children turn into a string.
+    return null;
+  }
+
   {
     var hostContextDev = hostContext;
 
@@ -43035,8 +43636,19 @@ function commitUpdate(
   newProps,
   internalInstanceHandle
 ) {
-  // Apply the diff to the DOM node.
-  updateProperties(domElement, updatePayload, type, oldProps, newProps); // Update the props handle so that we know which props are the ones with
+  if (diffInCommitPhase) {
+    // Diff and update the properties.
+    updateProperties(domElement, type, oldProps, newProps);
+  } else {
+    // Apply the diff to the DOM node.
+    updatePropertiesWithDiff(
+      domElement,
+      updatePayload,
+      type,
+      oldProps,
+      newProps
+    );
+  } // Update the props handle so that we know which props are the ones with
   // with current event handlers.
 
   updateFiberProps(domElement, newProps);
diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
index a04198d9791f6..82a2b7b2ff2e4 100644
--- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js
+++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
@@ -250,7 +250,8 @@ var disableInputAttributeSyncing =
   enableCustomElementPropertySupport =
     dynamicFeatureFlags.enableCustomElementPropertySupport,
   enableDeferRootSchedulingToMicrotask =
-    dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask; // On WWW, true is used for a new modern build.
+    dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask,
+  diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase; // On WWW, true is used for a new modern build.
 var enableProfilerTimer = true;
 var enableProfilerCommitHooks = true;
 var enableProfilerNestedUpdatePhase = true;
@@ -4986,6 +4987,44 @@ function createDangerousStringForStyles(styles) {
     return serialized || null;
   }
 }
+
+function setValueForStyle(style, styleName, value) {
+  var isCustomProperty = styleName.indexOf("--") === 0;
+
+  {
+    if (!isCustomProperty) {
+      warnValidStyle(styleName, value);
+    }
+  }
+
+  if (value == null || typeof value === "boolean" || value === "") {
+    if (isCustomProperty) {
+      style.setProperty(styleName, "");
+    } else if (styleName === "float") {
+      style.cssFloat = "";
+    } else {
+      style[styleName] = "";
+    }
+  } else if (isCustomProperty) {
+    style.setProperty(styleName, value);
+  } else if (
+    typeof value === "number" &&
+    value !== 0 &&
+    !isUnitlessNumber(styleName)
+  ) {
+    style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers
+  } else {
+    if (styleName === "float") {
+      style.cssFloat = value;
+    } else {
+      {
+        checkCSSPropertyStringCoercion(value, styleName);
+      }
+
+      style[styleName] = ("" + value).trim();
+    }
+  }
+}
 /**
  * Sets the value for multiple styles on a node.  If a value is specified as
  * '' (empty string), the corresponding style property will be unset.
@@ -4994,7 +5033,7 @@ function createDangerousStringForStyles(styles) {
  * @param {object} styles
  */
 
-function setValueForStyles(node, styles) {
+function setValueForStyles(node, styles, prevStyles) {
   if (styles != null && typeof styles !== "object") {
     throw new Error(
       "The `style` prop expects a mapping from style properties to values, " +
@@ -5013,45 +5052,44 @@ function setValueForStyles(node, styles) {
 
   var style = node.style;
 
-  for (var styleName in styles) {
-    if (!styles.hasOwnProperty(styleName)) {
-      continue;
+  if (diffInCommitPhase && prevStyles != null) {
+    {
+      validateShorthandPropertyCollisionInDev(prevStyles, styles);
     }
 
-    var value = styles[styleName];
-    var isCustomProperty = styleName.indexOf("--") === 0;
+    for (var styleName in prevStyles) {
+      if (
+        prevStyles.hasOwnProperty(styleName) &&
+        (styles == null || !styles.hasOwnProperty(styleName))
+      ) {
+        // Clear style
+        var isCustomProperty = styleName.indexOf("--") === 0;
 
-    {
-      if (!isCustomProperty) {
-        warnValidStyle(styleName, value);
+        if (isCustomProperty) {
+          style.setProperty(styleName, "");
+        } else if (styleName === "float") {
+          style.cssFloat = "";
+        } else {
+          style[styleName] = "";
+        }
       }
     }
 
-    if (value == null || typeof value === "boolean" || value === "") {
-      if (isCustomProperty) {
-        style.setProperty(styleName, "");
-      } else if (styleName === "float") {
-        style.cssFloat = "";
-      } else {
-        style[styleName] = "";
-      }
-    } else if (isCustomProperty) {
-      style.setProperty(styleName, value);
-    } else if (
-      typeof value === "number" &&
-      value !== 0 &&
-      !isUnitlessNumber(styleName)
-    ) {
-      style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers
-    } else {
-      if (styleName === "float") {
-        style.cssFloat = value;
-      } else {
-        {
-          checkCSSPropertyStringCoercion(value, styleName);
-        }
+    for (var _styleName in styles) {
+      var value = styles[_styleName];
 
-        style[styleName] = ("" + value).trim();
+      if (
+        styles.hasOwnProperty(_styleName) &&
+        prevStyles[_styleName] !== value
+      ) {
+        setValueForStyle(style, _styleName, value);
+      }
+    }
+  } else {
+    for (var _styleName2 in styles) {
+      if (styles.hasOwnProperty(_styleName2)) {
+        var _value = styles[_styleName2];
+        setValueForStyle(style, _styleName2, _value);
       }
     }
   }
@@ -5097,19 +5135,45 @@ function expandShorthandMap(styles) {
  *   becomes .style.fontVariant = ''
  */
 
-function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) {
+function validateShorthandPropertyCollisionInDev(prevStyles, nextStyles) {
   {
     if (!nextStyles) {
       return;
+    } // Compute the diff as it would happen elsewhere.
+
+    var expandedUpdates = {};
+
+    if (prevStyles) {
+      for (var key in prevStyles) {
+        if (prevStyles.hasOwnProperty(key) && !nextStyles.hasOwnProperty(key)) {
+          var longhands = shorthandToLonghand[key] || [key];
+
+          for (var i = 0; i < longhands.length; i++) {
+            expandedUpdates[longhands[i]] = key;
+          }
+        }
+      }
+    }
+
+    for (var _key in nextStyles) {
+      if (
+        nextStyles.hasOwnProperty(_key) &&
+        (!prevStyles || prevStyles[_key] !== nextStyles[_key])
+      ) {
+        var _longhands = shorthandToLonghand[_key] || [_key];
+
+        for (var _i = 0; _i < _longhands.length; _i++) {
+          expandedUpdates[_longhands[_i]] = _key;
+        }
+      }
     }
 
-    var expandedUpdates = expandShorthandMap(styleUpdates);
     var expandedStyles = expandShorthandMap(nextStyles);
     var warnedAbout = {};
 
-    for (var key in expandedUpdates) {
-      var originalKey = expandedUpdates[key];
-      var correctOriginalKey = expandedStyles[key];
+    for (var _key2 in expandedUpdates) {
+      var originalKey = expandedUpdates[_key2];
+      var correctOriginalKey = expandedStyles[_key2];
 
       if (correctOriginalKey && originalKey !== correctOriginalKey) {
         var warningKey = originalKey + "," + correctOriginalKey;
@@ -5126,7 +5190,7 @@ function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) {
             "avoid this, don't mix shorthand and non-shorthand properties " +
             "for the same value; instead, replace the shorthand with " +
             "separate values.",
-          isValueEmpty(styleUpdates[originalKey]) ? "Removing" : "Updating",
+          isValueEmpty(nextStyles[originalKey]) ? "Removing" : "Updating",
           originalKey,
           correctOriginalKey
         );
@@ -7945,11 +8009,13 @@ function prepareToHydrateHostInstance(fiber, hostContext) {
     shouldWarnIfMismatchDev
   ); // TODO: Type this specific to this type of component.
 
-  fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
-  // is a new ref we mark this as an update.
+  if (!diffInCommitPhase) {
+    fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
+    // is a new ref we mark this as an update.
 
-  if (updatePayload !== null) {
-    return true;
+    if (updatePayload !== null) {
+      return true;
+    }
   }
 
   return false;
@@ -21938,29 +22004,34 @@ function updateHostComponent(
       // In mutation mode, this is sufficient for a bailout because
       // we won't touch this node even if children changed.
       return;
-    } // If we get updated because one of our children updated, we don't
-    // have newProps so we'll have to reuse them.
-    // TODO: Split the update API as separate for the props vs. children.
-    // Even better would be if children weren't special cased at all tho.
-
-    var instance = workInProgress.stateNode;
-    var currentHostContext = getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host
-    // component is hitting the resume path. Figure out why. Possibly
-    // related to `hidden`.
-
-    var updatePayload = prepareUpdate(
-      instance,
-      type,
-      oldProps,
-      newProps,
-      currentHostContext
-    ); // TODO: Type this specific to this type of component.
-
-    workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
-    // is a new ref we mark this as an update. All the work is done in commitWork.
+    }
 
-    if (updatePayload) {
+    if (diffInCommitPhase) {
       markUpdate(workInProgress);
+    } else {
+      // If we get updated because one of our children updated, we don't
+      // have newProps so we'll have to reuse them.
+      // TODO: Split the update API as separate for the props vs. children.
+      // Even better would be if children weren't special cased at all tho.
+      var instance = workInProgress.stateNode; // TODO: Experiencing an error where oldProps is null. Suggests a host
+      // component is hitting the resume path. Figure out why. Possibly
+      // related to `hidden`.
+
+      var currentHostContext = getHostContext();
+      var updatePayload = prepareUpdate(
+        instance,
+        type,
+        oldProps,
+        newProps,
+        currentHostContext
+      ); // TODO: Type this specific to this type of component.
+
+      workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
+      // is a new ref we mark this as an update. All the work is done in commitWork.
+
+      if (updatePayload) {
+        markUpdate(workInProgress);
+      }
     }
   }
 } // This function must be called at the very end of the complete phase, because
@@ -26091,7 +26162,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) {
             var _updatePayload = finishedWork.updateQueue;
             finishedWork.updateQueue = null;
 
-            if (_updatePayload !== null) {
+            if (_updatePayload !== null || diffInCommitPhase) {
               try {
                 commitUpdate(
                   _instance2,
@@ -33806,7 +33877,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-835f126b";
+var ReactVersion = "18.3.0-www-modern-16c00150";
 
 function createPortal$1(
   children,
@@ -38947,7 +39018,7 @@ function trapClickOnNonInteractiveElement(node) {
 var xlinkNamespace = "http://www.w3.org/1999/xlink";
 var xmlNamespace = "http://www.w3.org/XML/1998/namespace";
 
-function setProp(domElement, tag, key, value, props) {
+function setProp(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "children": {
       if (typeof value === "string") {
@@ -38994,7 +39065,7 @@ function setProp(domElement, tag, key, value, props) {
     }
 
     case "style": {
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     }
     // These attributes accept URLs. These must not allow javascript: URLS.
@@ -39382,6 +39453,20 @@ function setProp(domElement, tag, key, value, props) {
       break;
     // Properties that should not be allowed on custom elements.
 
+    case "is": {
+      {
+        if (prevValue != null) {
+          error('Cannot update the "is" prop after it has been initialized.');
+        }
+      } // TODO: We shouldn't actually set this attribute, because we've already
+      // passed it to createElement. We don't also need the attribute.
+      // However, our tests currently query for it so it's plausible someone
+      // else does too so it's break.
+
+      setValueForAttribute(domElement, "is", value);
+      break;
+    }
+
     case "innerText":
     case "textContent":
       if (enableCustomElementPropertySupport) {
@@ -39411,10 +39496,10 @@ function setProp(domElement, tag, key, value, props) {
   }
 }
 
-function setPropOnCustomElement(domElement, tag, key, value, props) {
+function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "style": {
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     }
 
@@ -39606,7 +39691,7 @@ function setInitialProperties(domElement, tag, props) {
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, propKey, propValue, props);
+            setProp(domElement, tag, propKey, propValue, props, null);
           }
         }
       } // TODO: Make sure we check if this is still unmounted or do any clean
@@ -39645,7 +39730,7 @@ function setInitialProperties(domElement, tag, props) {
           // defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey, _propValue, props);
+            setProp(domElement, tag, _propKey, _propValue, props, null);
           }
         }
       }
@@ -39829,7 +39914,7 @@ function setInitialProperties(domElement, tag, props) {
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey4, _propValue4, props);
+            setProp(domElement, tag, _propKey4, _propValue4, props, null);
           }
         }
       }
@@ -39855,7 +39940,8 @@ function setInitialProperties(domElement, tag, props) {
             tag,
             _propKey5,
             _propValue5,
-            props
+            props,
+            null
           );
         }
 
@@ -39875,7 +39961,7 @@ function setInitialProperties(domElement, tag, props) {
       continue;
     }
 
-    setProp(domElement, tag, _propKey6, _propValue6, props);
+    setProp(domElement, tag, _propKey6, _propValue6, props, null);
   }
 } // Calculate the diff between the two objects.
 
@@ -39992,16 +40078,514 @@ function diffProperties(domElement, tag, lastProps, nextProps) {
 
   if (styleUpdates) {
     {
-      validateShorthandPropertyCollisionInDev(styleUpdates, nextProps.style);
+      validateShorthandPropertyCollisionInDev(lastProps.style, nextProps.style);
     }
 
     (updatePayload = updatePayload || []).push("style", styleUpdates);
   }
 
   return updatePayload;
+}
+function updateProperties(domElement, tag, lastProps, nextProps) {
+  {
+    validatePropertiesInDevelopment(tag, nextProps);
+  }
+
+  switch (tag) {
+    case "div":
+    case "span":
+    case "svg":
+    case "path":
+    case "a":
+    case "g":
+    case "p":
+    case "li": {
+      // Fast track the most common tag types
+      break;
+    }
+
+    case "input": {
+      // 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 (nextProps.type === "radio" && nextProps.name != null) {
+        updateInputChecked(domElement, nextProps);
+      }
+
+      for (var propKey in lastProps) {
+        var lastProp = lastProps[propKey];
+
+        if (
+          lastProps.hasOwnProperty(propKey) &&
+          lastProp != null &&
+          !nextProps.hasOwnProperty(propKey)
+        ) {
+          switch (propKey) {
+            case "checked": {
+              var checked = nextProps.defaultChecked;
+              var inputElement = domElement;
+              inputElement.checked =
+                !!checked &&
+                typeof checked !== "function" &&
+                checked !== "symbol";
+              break;
+            }
+
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+            // defaultChecked and defaultValue are ignored by setProp
+
+            default: {
+              setProp(domElement, tag, propKey, null, nextProps, lastProp);
+            }
+          }
+        }
+      }
+
+      for (var _propKey7 in nextProps) {
+        var nextProp = nextProps[_propKey7];
+        var _lastProp = lastProps[_propKey7];
+
+        if (
+          nextProps.hasOwnProperty(_propKey7) &&
+          nextProp !== _lastProp &&
+          (nextProp != null || _lastProp != null)
+        ) {
+          switch (_propKey7) {
+            case "checked": {
+              var _checked =
+                nextProp != null ? nextProp : nextProps.defaultChecked;
+
+              var _inputElement = domElement;
+              _inputElement.checked =
+                !!_checked &&
+                typeof _checked !== "function" &&
+                _checked !== "symbol";
+              break;
+            }
+
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+
+            case "children":
+            case "dangerouslySetInnerHTML": {
+              if (nextProp != null) {
+                throw new Error(
+                  tag +
+                    " is a void element tag and must neither have `children` nor " +
+                    "use `dangerouslySetInnerHTML`."
+                );
+              }
+
+              break;
+            }
+            // defaultChecked and defaultValue are ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey7,
+                nextProp,
+                nextProps,
+                _lastProp
+              );
+            }
+          }
+        }
+      }
+
+      {
+        var wasControlled =
+          lastProps.type === "checkbox" || lastProps.type === "radio"
+            ? lastProps.checked != null
+            : lastProps.value != null;
+        var isControlled =
+          nextProps.type === "checkbox" || nextProps.type === "radio"
+            ? nextProps.checked != null
+            : nextProps.value != null;
+
+        if (
+          !wasControlled &&
+          isControlled &&
+          !didWarnUncontrolledToControlled
+        ) {
+          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 (
+          wasControlled &&
+          !isControlled &&
+          !didWarnControlledToUncontrolled
+        ) {
+          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;
+        }
+      } // Update the wrapper around inputs *after* updating props. This has to
+      // happen after updating the rest of props. Otherwise HTML5 input validations
+      // raise warnings and prevent the new value from being assigned.
+
+      updateInput(domElement, nextProps);
+      return;
+    }
+
+    case "select": {
+      for (var _propKey8 in lastProps) {
+        var _lastProp2 = lastProps[_propKey8];
+
+        if (
+          lastProps.hasOwnProperty(_propKey8) &&
+          _lastProp2 != null &&
+          !nextProps.hasOwnProperty(_propKey8)
+        ) {
+          switch (_propKey8) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+            // defaultValue are ignored by setProp
+
+            default: {
+              setProp(domElement, tag, _propKey8, null, nextProps, _lastProp2);
+            }
+          }
+        }
+      }
+
+      for (var _propKey9 in nextProps) {
+        var _nextProp = nextProps[_propKey9];
+        var _lastProp3 = lastProps[_propKey9];
+
+        if (
+          nextProps.hasOwnProperty(_propKey9) &&
+          _nextProp !== _lastProp3 &&
+          (_nextProp != null || _lastProp3 != null)
+        ) {
+          switch (_propKey9) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+            // defaultValue are ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey9,
+                _nextProp,
+                nextProps,
+                _lastProp3
+              );
+            }
+          }
+        }
+      } // <select> value update needs to occur after <option> children
+      // reconciliation
+
+      updateSelect(domElement, lastProps, nextProps);
+      return;
+    }
+
+    case "textarea": {
+      for (var _propKey10 in lastProps) {
+        var _lastProp4 = lastProps[_propKey10];
+
+        if (
+          lastProps.hasOwnProperty(_propKey10) &&
+          _lastProp4 != null &&
+          !nextProps.hasOwnProperty(_propKey10)
+        ) {
+          switch (_propKey10) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+
+            case "children": {
+              // TODO: This doesn't actually do anything if it updates.
+              break;
+            }
+            // defaultValue is ignored by setProp
+
+            default: {
+              setProp(domElement, tag, _propKey10, null, nextProps, _lastProp4);
+            }
+          }
+        }
+      }
+
+      for (var _propKey11 in nextProps) {
+        var _nextProp2 = nextProps[_propKey11];
+        var _lastProp5 = lastProps[_propKey11];
+
+        if (
+          nextProps.hasOwnProperty(_propKey11) &&
+          _nextProp2 !== _lastProp5 &&
+          (_nextProp2 != null || _lastProp5 != null)
+        ) {
+          switch (_propKey11) {
+            case "value": {
+              // This is handled by updateWrapper below.
+              break;
+            }
+
+            case "children": {
+              // TODO: This doesn't actually do anything if it updates.
+              break;
+            }
+
+            case "dangerouslySetInnerHTML": {
+              if (_nextProp2 != null) {
+                // TODO: Do we really need a special error message for this. It's also pretty blunt.
+                throw new Error(
+                  "`dangerouslySetInnerHTML` does not make sense on <textarea>."
+                );
+              }
+
+              break;
+            }
+            // defaultValue is ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey11,
+                _nextProp2,
+                nextProps,
+                _lastProp5
+              );
+            }
+          }
+        }
+      }
+
+      updateTextarea(domElement, nextProps);
+      return;
+    }
+
+    case "option": {
+      for (var _propKey12 in lastProps) {
+        var _lastProp6 = lastProps[_propKey12];
+
+        if (
+          lastProps.hasOwnProperty(_propKey12) &&
+          _lastProp6 != null &&
+          !nextProps.hasOwnProperty(_propKey12)
+        ) {
+          switch (_propKey12) {
+            case "selected": {
+              // TODO: Remove support for selected on option.
+              domElement.selected = false;
+              break;
+            }
+
+            default: {
+              setProp(domElement, tag, _propKey12, null, nextProps, _lastProp6);
+            }
+          }
+        }
+      }
+
+      for (var _propKey13 in nextProps) {
+        var _nextProp3 = nextProps[_propKey13];
+        var _lastProp7 = lastProps[_propKey13];
+
+        if (
+          nextProps.hasOwnProperty(_propKey13) &&
+          _nextProp3 !== _lastProp7 &&
+          (_nextProp3 != null || _lastProp7 != null)
+        ) {
+          switch (_propKey13) {
+            case "selected": {
+              // TODO: Remove support for selected on option.
+              domElement.selected =
+                _nextProp3 &&
+                typeof _nextProp3 !== "function" &&
+                typeof _nextProp3 !== "symbol";
+              break;
+            }
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey13,
+                _nextProp3,
+                nextProps,
+                _lastProp7
+              );
+            }
+          }
+        }
+      }
+
+      return;
+    }
+
+    case "img":
+    case "link":
+    case "area":
+    case "base":
+    case "br":
+    case "col":
+    case "embed":
+    case "hr":
+    case "keygen":
+    case "meta":
+    case "param":
+    case "source":
+    case "track":
+    case "wbr":
+    case "menuitem": {
+      // Void elements
+      for (var _propKey14 in lastProps) {
+        var _lastProp8 = lastProps[_propKey14];
+
+        if (
+          lastProps.hasOwnProperty(_propKey14) &&
+          _lastProp8 != null &&
+          !nextProps.hasOwnProperty(_propKey14)
+        ) {
+          setProp(domElement, tag, _propKey14, null, nextProps, _lastProp8);
+        }
+      }
+
+      for (var _propKey15 in nextProps) {
+        var _nextProp4 = nextProps[_propKey15];
+        var _lastProp9 = lastProps[_propKey15];
+
+        if (
+          nextProps.hasOwnProperty(_propKey15) &&
+          _nextProp4 !== _lastProp9 &&
+          (_nextProp4 != null || _lastProp9 != null)
+        ) {
+          switch (_propKey15) {
+            case "children":
+            case "dangerouslySetInnerHTML": {
+              if (_nextProp4 != null) {
+                // TODO: Can we make this a DEV warning to avoid this deny list?
+                throw new Error(
+                  tag +
+                    " is a void element tag and must neither have `children` nor " +
+                    "use `dangerouslySetInnerHTML`."
+                );
+              }
+
+              break;
+            }
+            // defaultChecked and defaultValue are ignored by setProp
+
+            default: {
+              setProp(
+                domElement,
+                tag,
+                _propKey15,
+                _nextProp4,
+                nextProps,
+                _lastProp9
+              );
+            }
+          }
+        }
+      }
+
+      return;
+    }
+
+    default: {
+      if (isCustomElement(tag)) {
+        for (var _propKey16 in lastProps) {
+          var _lastProp10 = lastProps[_propKey16];
+
+          if (
+            lastProps.hasOwnProperty(_propKey16) &&
+            _lastProp10 != null &&
+            !nextProps.hasOwnProperty(_propKey16)
+          ) {
+            setPropOnCustomElement(
+              domElement,
+              tag,
+              _propKey16,
+              null,
+              nextProps,
+              _lastProp10
+            );
+          }
+        }
+
+        for (var _propKey17 in nextProps) {
+          var _nextProp5 = nextProps[_propKey17];
+          var _lastProp11 = lastProps[_propKey17];
+
+          if (
+            nextProps.hasOwnProperty(_propKey17) &&
+            _nextProp5 !== _lastProp11 &&
+            (_nextProp5 != null || _lastProp11 != null)
+          ) {
+            setPropOnCustomElement(
+              domElement,
+              tag,
+              _propKey17,
+              _nextProp5,
+              nextProps,
+              _lastProp11
+            );
+          }
+        }
+
+        return;
+      }
+    }
+  }
+
+  for (var _propKey18 in lastProps) {
+    var _lastProp12 = lastProps[_propKey18];
+
+    if (
+      lastProps.hasOwnProperty(_propKey18) &&
+      _lastProp12 != null &&
+      !nextProps.hasOwnProperty(_propKey18)
+    ) {
+      setProp(domElement, tag, _propKey18, null, nextProps, _lastProp12);
+    }
+  }
+
+  for (var _propKey19 in nextProps) {
+    var _nextProp6 = nextProps[_propKey19];
+    var _lastProp13 = lastProps[_propKey19];
+
+    if (
+      nextProps.hasOwnProperty(_propKey19) &&
+      _nextProp6 !== _lastProp13 &&
+      (_nextProp6 != null || _lastProp13 != null)
+    ) {
+      setProp(domElement, tag, _propKey19, _nextProp6, nextProps, _lastProp13);
+    }
+  }
 } // Apply the diff.
 
-function updateProperties(
+function updatePropertiesWithDiff(
   domElement,
   updatePayload,
   tag,
@@ -40065,7 +40649,7 @@ function updateProperties(
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
           }
         }
       }
@@ -40121,10 +40705,10 @@ function updateProperties(
 
     case "select": {
       for (var _i = 0; _i < updatePayload.length; _i += 2) {
-        var _propKey7 = updatePayload[_i];
+        var _propKey20 = updatePayload[_i];
         var _propValue7 = updatePayload[_i + 1];
 
-        switch (_propKey7) {
+        switch (_propKey20) {
           case "value": {
             // This is handled by updateWrapper below.
             break;
@@ -40132,7 +40716,7 @@ function updateProperties(
           // defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey7, _propValue7, nextProps);
+            setProp(domElement, tag, _propKey20, _propValue7, nextProps, null);
           }
         }
       } // <select> value update needs to occur after <option> children
@@ -40144,10 +40728,10 @@ function updateProperties(
 
     case "textarea": {
       for (var _i2 = 0; _i2 < updatePayload.length; _i2 += 2) {
-        var _propKey8 = updatePayload[_i2];
+        var _propKey21 = updatePayload[_i2];
         var _propValue8 = updatePayload[_i2 + 1];
 
-        switch (_propKey8) {
+        switch (_propKey21) {
           case "value": {
             // This is handled by updateWrapper below.
             break;
@@ -40171,7 +40755,7 @@ function updateProperties(
           // defaultValue is ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey8, _propValue8, nextProps);
+            setProp(domElement, tag, _propKey21, _propValue8, nextProps, null);
           }
         }
       }
@@ -40182,10 +40766,10 @@ function updateProperties(
 
     case "option": {
       for (var _i3 = 0; _i3 < updatePayload.length; _i3 += 2) {
-        var _propKey9 = updatePayload[_i3];
+        var _propKey22 = updatePayload[_i3];
         var _propValue9 = updatePayload[_i3 + 1];
 
-        switch (_propKey9) {
+        switch (_propKey22) {
           case "selected": {
             // TODO: Remove support for selected on option.
             domElement.selected =
@@ -40196,7 +40780,7 @@ function updateProperties(
           }
 
           default: {
-            setProp(domElement, tag, _propKey9, _propValue9, nextProps);
+            setProp(domElement, tag, _propKey22, _propValue9, nextProps, null);
           }
         }
       }
@@ -40221,10 +40805,10 @@ function updateProperties(
     case "menuitem": {
       // Void elements
       for (var _i4 = 0; _i4 < updatePayload.length; _i4 += 2) {
-        var _propKey10 = updatePayload[_i4];
+        var _propKey23 = updatePayload[_i4];
         var _propValue10 = updatePayload[_i4 + 1];
 
-        switch (_propKey10) {
+        switch (_propKey23) {
           case "children":
           case "dangerouslySetInnerHTML": {
             if (_propValue10 != null) {
@@ -40241,7 +40825,7 @@ function updateProperties(
           // defaultChecked and defaultValue are ignored by setProp
 
           default: {
-            setProp(domElement, tag, _propKey10, _propValue10, nextProps);
+            setProp(domElement, tag, _propKey23, _propValue10, nextProps, null);
           }
         }
       }
@@ -40252,14 +40836,15 @@ function updateProperties(
     default: {
       if (isCustomElement(tag)) {
         for (var _i5 = 0; _i5 < updatePayload.length; _i5 += 2) {
-          var _propKey11 = updatePayload[_i5];
+          var _propKey24 = updatePayload[_i5];
           var _propValue11 = updatePayload[_i5 + 1];
           setPropOnCustomElement(
             domElement,
             tag,
-            _propKey11,
+            _propKey24,
             _propValue11,
-            nextProps
+            nextProps,
+            null
           );
         }
 
@@ -40269,9 +40854,9 @@ function updateProperties(
   } // Apply the diff.
 
   for (var _i6 = 0; _i6 < updatePayload.length; _i6 += 2) {
-    var _propKey12 = updatePayload[_i6];
+    var _propKey25 = updatePayload[_i6];
     var _propValue12 = updatePayload[_i6 + 1];
-    setProp(domElement, tag, _propKey12, _propValue12, nextProps);
+    setProp(domElement, tag, _propKey25, _propValue12, nextProps, null);
   }
 }
 
@@ -41318,7 +41903,18 @@ function diffHydratedProperties(
       }
 
       if (!isConcurrentMode || !enableClientRenderFallbackOnTextMismatch) {
-        updatePayload = ["children", children];
+        if (diffInCommitPhase) {
+          // We really should be patching this in the commit phase but since
+          // this only affects legacy mode hydration which is deprecated anyway
+          // we can get away with it.
+          // Host singletons get their children appended and don't use the text
+          // content mechanism.
+          if (tag !== "body") {
+            domElement.textContent = children;
+          }
+        } else {
+          updatePayload = ["children", children];
+        }
       }
     }
   }
@@ -42441,6 +43037,11 @@ function finalizeInitialChildren(domElement, type, props, hostContext) {
   }
 }
 function prepareUpdate(domElement, type, oldProps, newProps, hostContext) {
+  if (diffInCommitPhase) {
+    // TODO: Figure out how to validateDOMNesting when children turn into a string.
+    return null;
+  }
+
   {
     var hostContextDev = hostContext;
 
@@ -42577,8 +43178,19 @@ function commitUpdate(
   newProps,
   internalInstanceHandle
 ) {
-  // Apply the diff to the DOM node.
-  updateProperties(domElement, updatePayload, type, oldProps, newProps); // Update the props handle so that we know which props are the ones with
+  if (diffInCommitPhase) {
+    // Diff and update the properties.
+    updateProperties(domElement, type, oldProps, newProps);
+  } else {
+    // Apply the diff to the DOM node.
+    updatePropertiesWithDiff(
+      domElement,
+      updatePayload,
+      type,
+      oldProps,
+      newProps
+    );
+  } // Update the props handle so that we know which props are the ones with
   // with current event handlers.
 
   updateFiberProps(domElement, newProps);
diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js
index d996784bcec7b..9752a19a78ee2 100644
--- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js
+++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js
@@ -55,6 +55,7 @@ var ReactSharedInternals =
     dynamicFeatureFlags.enableCustomElementPropertySupport,
   enableDeferRootSchedulingToMicrotask =
     dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask,
+  diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase,
   REACT_ELEMENT_TYPE = Symbol.for("react.element"),
   REACT_PORTAL_TYPE = Symbol.for("react.portal"),
   REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
@@ -1085,6 +1086,21 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
     null !== multiple && (multiple.selected = !0);
   }
 }
+function updateSelect(element, prevProps, props) {
+  prevProps = !!prevProps.multiple;
+  var value = props.value;
+  null != value
+    ? updateOptions(element, !!props.multiple, value, !1)
+    : prevProps !== !!props.multiple &&
+      (null != props.defaultValue
+        ? updateOptions(element, !!props.multiple, props.defaultValue, !0)
+        : updateOptions(
+            element,
+            !!props.multiple,
+            props.multiple ? [] : "",
+            !1
+          ));
+}
 function updateTextarea(element, props) {
   var value = getToStringValue(props.value);
   if (
@@ -1187,30 +1203,44 @@ var unitlessNumbers = new Set(
     " "
   )
 );
-function setValueForStyles(node, styles) {
+function setValueForStyle(style, styleName, value) {
+  var isCustomProperty = 0 === styleName.indexOf("--");
+  null == value || "boolean" === typeof value || "" === value
+    ? isCustomProperty
+      ? style.setProperty(styleName, "")
+      : "float" === styleName
+      ? (style.cssFloat = "")
+      : (style[styleName] = "")
+    : isCustomProperty
+    ? style.setProperty(styleName, value)
+    : "number" !== typeof value || 0 === value || unitlessNumbers.has(styleName)
+    ? "float" === styleName
+      ? (style.cssFloat = value)
+      : (style[styleName] = ("" + value).trim())
+    : (style[styleName] = value + "px");
+}
+function setValueForStyles(node, styles, prevStyles) {
   if (null != styles && "object" !== typeof styles)
     throw Error(formatProdErrorMessage(62));
   node = node.style;
-  for (var styleName in styles)
-    if (styles.hasOwnProperty(styleName)) {
-      var value = styles[styleName],
-        isCustomProperty = 0 === styleName.indexOf("--");
-      null == value || "boolean" === typeof value || "" === value
-        ? isCustomProperty
+  if (diffInCommitPhase && null != prevStyles) {
+    for (var styleName in prevStyles)
+      !prevStyles.hasOwnProperty(styleName) ||
+        (null != styles && styles.hasOwnProperty(styleName)) ||
+        (0 === styleName.indexOf("--")
           ? node.setProperty(styleName, "")
           : "float" === styleName
           ? (node.cssFloat = "")
-          : (node[styleName] = "")
-        : isCustomProperty
-        ? node.setProperty(styleName, value)
-        : "number" !== typeof value ||
-          0 === value ||
-          unitlessNumbers.has(styleName)
-        ? "float" === styleName
-          ? (node.cssFloat = value)
-          : (node[styleName] = ("" + value).trim())
-        : (node[styleName] = value + "px");
-    }
+          : (node[styleName] = ""));
+    for (var styleName$16 in styles)
+      (styleName = styles[styleName$16]),
+        styles.hasOwnProperty(styleName$16) &&
+          prevStyles[styleName$16] !== styleName &&
+          setValueForStyle(node, styleName$16, styleName);
+  } else
+    for (var styleName$17 in styles)
+      styles.hasOwnProperty(styleName$17) &&
+        setValueForStyle(node, styleName$17, styles[styleName$17]);
 }
 function isCustomElement(tagName) {
   if (-1 === tagName.indexOf("-")) return !1;
@@ -1323,7 +1353,7 @@ function normalizeMarkupForTextOrAttribute(markup) {
     .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, "");
 }
 function noop$2() {}
-function setProp(domElement, tag, key, value, props) {
+function setProp(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "children":
       "string" === typeof value
@@ -1348,7 +1378,7 @@ function setProp(domElement, tag, key, value, props) {
       setValueForKnownAttribute(domElement, key, value);
       break;
     case "style":
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     case "src":
     case "href":
@@ -1564,6 +1594,9 @@ function setProp(domElement, tag, key, value, props) {
         value
       );
       break;
+    case "is":
+      setValueForAttribute(domElement, "is", value);
+      break;
     case "innerText":
     case "textContent":
       if (enableCustomElementPropertySupport) break;
@@ -1577,10 +1610,10 @@ function setProp(domElement, tag, key, value, props) {
           setValueForAttribute(domElement, key, value);
   }
 }
-function setPropOnCustomElement(domElement, tag, key, value, props) {
+function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "style":
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     case "dangerouslySetInnerHTML":
       if (null != value) {
@@ -1618,23 +1651,25 @@ function setPropOnCustomElement(domElement, tag, key, value, props) {
         if (enableCustomElementPropertySupport)
           a: {
             props = value;
-            if ("o" === key[0] && "n" === key[1]) {
-              tag = key.endsWith("Capture");
-              value = key.substr(2, tag ? key.length - 9 : void 0);
-              var prevProps = getFiberCurrentPropsFromNode(domElement);
-              prevProps = null != prevProps ? prevProps[key] : null;
-              "function" === typeof prevProps &&
-                domElement.removeEventListener(value, prevProps, tag);
-              if ("function" === typeof props) {
-                "function" !== typeof prevProps &&
-                  null !== prevProps &&
-                  (key in domElement
-                    ? (domElement[key] = null)
-                    : domElement.hasAttribute(key) &&
-                      domElement.removeAttribute(key));
-                domElement.addEventListener(value, props, tag);
-                break a;
-              }
+            if (
+              "o" === key[0] &&
+              "n" === key[1] &&
+              ((tag = key.endsWith("Capture")),
+              (value = key.substr(2, tag ? key.length - 9 : void 0)),
+              (prevValue = getFiberCurrentPropsFromNode(domElement)),
+              (prevValue = null != prevValue ? prevValue[key] : null),
+              "function" === typeof prevValue &&
+                domElement.removeEventListener(value, prevValue, tag),
+              "function" === typeof props)
+            ) {
+              "function" !== typeof prevValue &&
+                null !== prevValue &&
+                (key in domElement
+                  ? (domElement[key] = null)
+                  : domElement.hasAttribute(key) &&
+                    domElement.removeAttribute(key));
+              domElement.addEventListener(value, props, tag);
+              break a;
             }
             key in domElement
               ? (domElement[key] = props)
@@ -1688,7 +1723,7 @@ function setInitialProperties(domElement, tag, props) {
                   throw Error(formatProdErrorMessage(137, tag));
                 break;
               default:
-                setProp(domElement, tag, propKey, propValue, props);
+                setProp(domElement, tag, propKey, propValue, props, null);
             }
         }
       track(domElement);
@@ -1696,16 +1731,16 @@ function setInitialProperties(domElement, tag, props) {
       return;
     case "select":
       listenToNonDelegatedEvent("invalid", domElement);
-      for (var propKey$18 in props)
+      for (var propKey$21 in props)
         if (
-          props.hasOwnProperty(propKey$18) &&
-          ((propKey = props[propKey$18]), null != propKey)
+          props.hasOwnProperty(propKey$21) &&
+          ((propKey = props[propKey$21]), null != propKey)
         )
-          switch (propKey$18) {
+          switch (propKey$21) {
             case "value":
               break;
             default:
-              setProp(domElement, tag, propKey$18, propKey, props);
+              setProp(domElement, tag, propKey$21, propKey, props, null);
           }
       domElement.multiple = !!props.multiple;
       tag = props.value;
@@ -1716,12 +1751,12 @@ function setInitialProperties(domElement, tag, props) {
       return;
     case "textarea":
       listenToNonDelegatedEvent("invalid", domElement);
-      for (var propKey$20 in props)
+      for (var propKey$23 in props)
         if (
-          props.hasOwnProperty(propKey$20) &&
-          ((propKey = props[propKey$20]), null != propKey)
+          props.hasOwnProperty(propKey$23) &&
+          ((propKey = props[propKey$23]), null != propKey)
         )
-          switch (propKey$20) {
+          switch (propKey$23) {
             case "value":
               break;
             case "children":
@@ -1730,18 +1765,18 @@ function setInitialProperties(domElement, tag, props) {
               if (null != propKey) throw Error(formatProdErrorMessage(91));
               break;
             default:
-              setProp(domElement, tag, propKey$20, propKey, props);
+              setProp(domElement, tag, propKey$23, propKey, props);
           }
       track(domElement);
       initTextarea(domElement, props);
       return;
     case "option":
-      for (var propKey$22 in props)
+      for (var propKey$25 in props)
         if (
-          props.hasOwnProperty(propKey$22) &&
-          ((propKey = props[propKey$22]), null != propKey)
+          props.hasOwnProperty(propKey$25) &&
+          ((propKey = props[propKey$25]), null != propKey)
         )
-          switch (propKey$22) {
+          switch (propKey$25) {
             case "selected":
               domElement.selected =
                 propKey &&
@@ -1749,7 +1784,7 @@ function setInitialProperties(domElement, tag, props) {
                 "symbol" !== typeof propKey;
               break;
             default:
-              setProp(domElement, tag, propKey$22, propKey, props);
+              setProp(domElement, tag, propKey$25, propKey, props);
           }
       null != props.value &&
         domElement.setAttribute("value", "" + getToStringValue(props.value));
@@ -1791,31 +1826,32 @@ function setInitialProperties(domElement, tag, props) {
     case "track":
     case "wbr":
     case "menuitem":
-      for (var propKey$24 in props)
+      for (var propKey$27 in props)
         if (
-          props.hasOwnProperty(propKey$24) &&
-          ((propKey = props[propKey$24]), null != propKey)
+          props.hasOwnProperty(propKey$27) &&
+          ((propKey = props[propKey$27]), null != propKey)
         )
-          switch (propKey$24) {
+          switch (propKey$27) {
             case "children":
             case "dangerouslySetInnerHTML":
               throw Error(formatProdErrorMessage(137, tag));
             default:
-              setProp(domElement, tag, propKey$24, propKey, props);
+              setProp(domElement, tag, propKey$27, propKey, props, null);
           }
       return;
     default:
       if (isCustomElement(tag)) {
-        for (var propKey$26 in props)
-          props.hasOwnProperty(propKey$26) &&
-            ((propKey = props[propKey$26]),
+        for (var propKey$29 in props)
+          props.hasOwnProperty(propKey$29) &&
+            ((propKey = props[propKey$29]),
             null != propKey &&
               setPropOnCustomElement(
                 domElement,
                 tag,
-                propKey$26,
+                propKey$29,
                 propKey,
-                props
+                props,
+                null
               ));
         return;
       }
@@ -1823,9 +1859,296 @@ function setInitialProperties(domElement, tag, props) {
   for (propValue in props)
     props.hasOwnProperty(propValue) &&
       ((propKey = props[propValue]),
-      null != propKey && setProp(domElement, tag, propValue, propKey, props));
+      null != propKey &&
+        setProp(domElement, tag, propValue, propKey, props, null));
 }
-function updateProperties(
+function updateProperties(domElement, tag, lastProps, nextProps) {
+  switch (tag) {
+    case "div":
+    case "span":
+    case "svg":
+    case "path":
+    case "a":
+    case "g":
+    case "p":
+    case "li":
+      break;
+    case "input":
+      "radio" === nextProps.type &&
+        null != nextProps.name &&
+        updateInputChecked(domElement, nextProps);
+      for (var propKey in lastProps) {
+        var lastProp = lastProps[propKey];
+        if (
+          lastProps.hasOwnProperty(propKey) &&
+          null != lastProp &&
+          !nextProps.hasOwnProperty(propKey)
+        )
+          switch (propKey) {
+            case "checked":
+              lastProp = nextProps.defaultChecked;
+              domElement.checked =
+                !!lastProp &&
+                "function" !== typeof lastProp &&
+                "symbol" !== lastProp;
+              break;
+            case "value":
+              break;
+            default:
+              setProp(domElement, tag, propKey, null, nextProps, lastProp);
+          }
+      }
+      for (var propKey$33 in nextProps) {
+        lastProp = nextProps[propKey$33];
+        var lastProp$34 = lastProps[propKey$33];
+        if (
+          nextProps.hasOwnProperty(propKey$33) &&
+          lastProp !== lastProp$34 &&
+          (null != lastProp || null != lastProp$34)
+        )
+          switch (propKey$33) {
+            case "checked":
+              lastProp = null != lastProp ? lastProp : nextProps.defaultChecked;
+              domElement.checked =
+                !!lastProp &&
+                "function" !== typeof lastProp &&
+                "symbol" !== lastProp;
+              break;
+            case "value":
+              break;
+            case "children":
+            case "dangerouslySetInnerHTML":
+              if (null != lastProp)
+                throw Error(formatProdErrorMessage(137, tag));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$33,
+                lastProp,
+                nextProps,
+                lastProp$34
+              );
+          }
+      }
+      updateInput(domElement, nextProps);
+      return;
+    case "select":
+      for (var propKey$37 in lastProps)
+        if (
+          ((propKey$33 = lastProps[propKey$37]),
+          lastProps.hasOwnProperty(propKey$37) &&
+            null != propKey$33 &&
+            !nextProps.hasOwnProperty(propKey$37))
+        )
+          switch (propKey$37) {
+            case "value":
+              break;
+            default:
+              setProp(domElement, tag, propKey$37, null, nextProps, propKey$33);
+          }
+      for (lastProp in nextProps)
+        if (
+          ((propKey$33 = nextProps[lastProp]),
+          (lastProp$34 = lastProps[lastProp]),
+          nextProps.hasOwnProperty(lastProp) &&
+            propKey$33 !== lastProp$34 &&
+            (null != propKey$33 || null != lastProp$34))
+        )
+          switch (lastProp) {
+            case "value":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                lastProp,
+                propKey$33,
+                nextProps,
+                lastProp$34
+              );
+          }
+      updateSelect(domElement, lastProps, nextProps);
+      return;
+    case "textarea":
+      for (var propKey$42 in lastProps)
+        if (
+          ((propKey$33 = lastProps[propKey$42]),
+          lastProps.hasOwnProperty(propKey$42) &&
+            null != propKey$33 &&
+            !nextProps.hasOwnProperty(propKey$42))
+        )
+          switch (propKey$42) {
+            case "value":
+              break;
+            case "children":
+              break;
+            default:
+              setProp(domElement, tag, propKey$42, null, nextProps, propKey$33);
+          }
+      for (lastProp$34 in nextProps)
+        if (
+          ((propKey$33 = nextProps[lastProp$34]),
+          (lastProp = lastProps[lastProp$34]),
+          nextProps.hasOwnProperty(lastProp$34) &&
+            propKey$33 !== lastProp &&
+            (null != propKey$33 || null != lastProp))
+        )
+          switch (lastProp$34) {
+            case "value":
+              break;
+            case "children":
+              break;
+            case "dangerouslySetInnerHTML":
+              if (null != propKey$33) throw Error(formatProdErrorMessage(91));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                lastProp$34,
+                propKey$33,
+                nextProps,
+                lastProp
+              );
+          }
+      updateTextarea(domElement, nextProps);
+      return;
+    case "option":
+      for (var propKey$47 in lastProps)
+        if (
+          ((propKey$33 = lastProps[propKey$47]),
+          lastProps.hasOwnProperty(propKey$47) &&
+            null != propKey$33 &&
+            !nextProps.hasOwnProperty(propKey$47))
+        )
+          switch (propKey$47) {
+            case "selected":
+              domElement.selected = !1;
+              break;
+            default:
+              setProp(domElement, tag, propKey$47, null, nextProps, propKey$33);
+          }
+      for (var propKey$49 in nextProps)
+        if (
+          ((propKey$33 = nextProps[propKey$49]),
+          (lastProp = lastProps[propKey$49]),
+          nextProps.hasOwnProperty(propKey$49) &&
+            propKey$33 !== lastProp &&
+            (null != propKey$33 || null != lastProp))
+        )
+          switch (propKey$49) {
+            case "selected":
+              domElement.selected =
+                propKey$33 &&
+                "function" !== typeof propKey$33 &&
+                "symbol" !== typeof propKey$33;
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$49,
+                propKey$33,
+                nextProps,
+                lastProp
+              );
+          }
+      return;
+    case "img":
+    case "link":
+    case "area":
+    case "base":
+    case "br":
+    case "col":
+    case "embed":
+    case "hr":
+    case "keygen":
+    case "meta":
+    case "param":
+    case "source":
+    case "track":
+    case "wbr":
+    case "menuitem":
+      for (var propKey$52 in lastProps)
+        (propKey$33 = lastProps[propKey$52]),
+          lastProps.hasOwnProperty(propKey$52) &&
+            null != propKey$33 &&
+            !nextProps.hasOwnProperty(propKey$52) &&
+            setProp(domElement, tag, propKey$52, null, nextProps, propKey$33);
+      for (var propKey$54 in nextProps)
+        if (
+          ((propKey$33 = nextProps[propKey$54]),
+          (lastProp = lastProps[propKey$54]),
+          nextProps.hasOwnProperty(propKey$54) &&
+            propKey$33 !== lastProp &&
+            (null != propKey$33 || null != lastProp))
+        )
+          switch (propKey$54) {
+            case "children":
+            case "dangerouslySetInnerHTML":
+              if (null != propKey$33)
+                throw Error(formatProdErrorMessage(137, tag));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$54,
+                propKey$33,
+                nextProps,
+                lastProp
+              );
+          }
+      return;
+    default:
+      if (isCustomElement(tag)) {
+        for (var propKey$57 in lastProps)
+          (propKey$33 = lastProps[propKey$57]),
+            lastProps.hasOwnProperty(propKey$57) &&
+              null != propKey$33 &&
+              !nextProps.hasOwnProperty(propKey$57) &&
+              setPropOnCustomElement(
+                domElement,
+                tag,
+                propKey$57,
+                null,
+                nextProps,
+                propKey$33
+              );
+        for (var propKey$59 in nextProps)
+          (propKey$33 = nextProps[propKey$59]),
+            (lastProp = lastProps[propKey$59]),
+            !nextProps.hasOwnProperty(propKey$59) ||
+              propKey$33 === lastProp ||
+              (null == propKey$33 && null == lastProp) ||
+              setPropOnCustomElement(
+                domElement,
+                tag,
+                propKey$59,
+                propKey$33,
+                nextProps,
+                lastProp
+              );
+        return;
+      }
+  }
+  for (var propKey$62 in lastProps)
+    (propKey$33 = lastProps[propKey$62]),
+      lastProps.hasOwnProperty(propKey$62) &&
+        null != propKey$33 &&
+        !nextProps.hasOwnProperty(propKey$62) &&
+        setProp(domElement, tag, propKey$62, null, nextProps, propKey$33);
+  for (var propKey$64 in nextProps)
+    (propKey$33 = nextProps[propKey$64]),
+      (lastProp = lastProps[propKey$64]),
+      !nextProps.hasOwnProperty(propKey$64) ||
+        propKey$33 === lastProp ||
+        (null == propKey$33 && null == lastProp) ||
+        setProp(domElement, tag, propKey$64, propKey$33, nextProps, lastProp);
+}
+function updatePropertiesWithDiff(
   domElement,
   updatePayload,
   tag,
@@ -1865,7 +2188,7 @@ function updateProperties(
               throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       }
       updateInput(domElement, nextProps);
@@ -1873,32 +2196,15 @@ function updateProperties(
     case "select":
       for (propKey = 0; propKey < updatePayload.length; propKey += 2) {
         propValue = updatePayload[propKey];
-        var propValue$32 = updatePayload[propKey + 1];
+        var propValue$69 = updatePayload[propKey + 1];
         switch (propValue) {
           case "value":
             break;
           default:
-            setProp(domElement, tag, propValue, propValue$32, nextProps);
+            setProp(domElement, tag, propValue, propValue$69, nextProps, null);
         }
       }
-      updatePayload = !!lastProps.multiple;
-      tag = nextProps.value;
-      null != tag
-        ? updateOptions(domElement, !!nextProps.multiple, tag, !1)
-        : updatePayload !== !!nextProps.multiple &&
-          (null != nextProps.defaultValue
-            ? updateOptions(
-                domElement,
-                !!nextProps.multiple,
-                nextProps.defaultValue,
-                !0
-              )
-            : updateOptions(
-                domElement,
-                !!nextProps.multiple,
-                nextProps.multiple ? [] : "",
-                !1
-              ));
+      updateSelect(domElement, lastProps, nextProps);
       return;
     case "textarea":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
@@ -1915,7 +2221,7 @@ function updateProperties(
             if (null != propValue) throw Error(formatProdErrorMessage(91));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       updateTextarea(domElement, nextProps);
       return;
@@ -1933,7 +2239,7 @@ function updateProperties(
               "symbol" !== typeof propValue;
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       return;
     case "img":
@@ -1963,7 +2269,7 @@ function updateProperties(
               throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       return;
     default:
@@ -1974,7 +2280,8 @@ function updateProperties(
             tag,
             updatePayload[lastProps],
             updatePayload[lastProps + 1],
-            nextProps
+            nextProps,
+            null
           );
         return;
       }
@@ -1985,7 +2292,8 @@ function updateProperties(
       tag,
       updatePayload[lastProps],
       updatePayload[lastProps + 1],
-      nextProps
+      nextProps,
+      null
     );
 }
 var restoreTarget = null,
@@ -2313,8 +2621,8 @@ function prepareToHydrateHostInstance(fiber) {
       break;
     case "video":
     case "audio":
-      for (type = 0; type < mediaEventTypes.length; type++)
-        listenToNonDelegatedEvent(mediaEventTypes[type], instance);
+      for (var i = 0; i < mediaEventTypes.length; i++)
+        listenToNonDelegatedEvent(mediaEventTypes[i], instance);
       break;
     case "source":
       listenToNonDelegatedEvent("error", instance);
@@ -2341,20 +2649,28 @@ function prepareToHydrateHostInstance(fiber) {
         track(instance),
         initTextarea(instance, props);
   }
-  var updatePayload = null;
-  type = props.children;
-  ("string" !== typeof type && "number" !== typeof type) ||
-    instance.textContent === "" + type ||
-    (!0 !== props.suppressHydrationWarning &&
-      ((updatePayload = instance.textContent),
-      normalizeMarkupForTextOrAttribute(type),
-      normalizeMarkupForTextOrAttribute(updatePayload)),
-    (updatePayload = ["children", type]));
+  i = null;
+  var children = props.children;
+  if (
+    ("string" === typeof children || "number" === typeof children) &&
+    instance.textContent !== "" + children
+  ) {
+    if (!0 !== props.suppressHydrationWarning) {
+      var serverText = instance.textContent;
+      normalizeMarkupForTextOrAttribute(children);
+      normalizeMarkupForTextOrAttribute(serverText);
+    }
+    diffInCommitPhase
+      ? "body" !== type && (instance.textContent = children)
+      : (i = ["children", children]);
+  }
   null != props.onScroll && listenToNonDelegatedEvent("scroll", instance);
   null != props.onClick && (instance.onclick = noop$2);
-  instance = updatePayload;
-  fiber.updateQueue = instance;
-  return null !== instance ? !0 : !1;
+  instance = i;
+  return diffInCommitPhase ||
+    ((fiber.updateQueue = instance), null === instance)
+    ? !1
+    : !0;
 }
 function popToNextHostParent(fiber) {
   for (hydrationParentFiber = fiber.return; hydrationParentFiber; )
@@ -3829,10 +4145,10 @@ createFunctionComponentUpdateQueue = function () {
 function use(usable) {
   if (null !== usable && "object" === typeof usable) {
     if ("function" === typeof usable.then) {
-      var index$73 = thenableIndexCounter;
+      var index$110 = thenableIndexCounter;
       thenableIndexCounter += 1;
       null === thenableState && (thenableState = []);
-      usable = trackUsedThenable(thenableState, usable, index$73);
+      usable = trackUsedThenable(thenableState, usable, index$110);
       null === currentlyRenderingFiber$1.alternate &&
         (null === workInProgressHook
           ? null === currentlyRenderingFiber$1.memoizedState
@@ -4320,16 +4636,16 @@ function refreshCache(fiber, seedKey, seedValue) {
       case 3:
         var lane = requestUpdateLane(provider);
         fiber = createUpdate(lane);
-        var root$79 = enqueueUpdate(provider, fiber, lane);
-        if (null !== root$79) {
+        var root$116 = enqueueUpdate(provider, fiber, lane);
+        if (null !== root$116) {
           var eventTime = requestEventTime();
-          scheduleUpdateOnFiber(root$79, provider, lane, eventTime);
-          entangleTransitions(root$79, provider, lane);
+          scheduleUpdateOnFiber(root$116, provider, lane, eventTime);
+          entangleTransitions(root$116, provider, lane);
         }
         provider = createCache();
         null !== seedKey &&
           void 0 !== seedKey &&
-          null !== root$79 &&
+          null !== root$116 &&
           provider.data.set(seedKey, seedValue);
         fiber.payload = { cache: provider };
         return;
@@ -4536,15 +4852,15 @@ var HooksDispatcherOnMount = {
       getServerSnapshot = getServerSnapshot();
     } else {
       getServerSnapshot = getSnapshot();
-      var root$75 = workInProgressRoot;
-      if (null === root$75) throw Error(formatProdErrorMessage(349));
-      includesBlockingLane(root$75, renderLanes$1) ||
+      var root$112 = workInProgressRoot;
+      if (null === root$112) throw Error(formatProdErrorMessage(349));
+      includesBlockingLane(root$112, renderLanes$1) ||
         pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot);
     }
     hook.memoizedState = getServerSnapshot;
-    root$75 = { value: getServerSnapshot, getSnapshot: getSnapshot };
-    hook.queue = root$75;
-    mountEffect(subscribeToStore.bind(null, fiber, root$75, subscribe), [
+    root$112 = { value: getServerSnapshot, getSnapshot: getSnapshot };
+    hook.queue = root$112;
+    mountEffect(subscribeToStore.bind(null, fiber, root$112, subscribe), [
       subscribe
     ]);
     fiber.flags |= 2048;
@@ -4553,7 +4869,7 @@ var HooksDispatcherOnMount = {
       updateStoreInstance.bind(
         null,
         fiber,
-        root$75,
+        root$112,
         getServerSnapshot,
         getSnapshot
       ),
@@ -5052,10 +5368,10 @@ var markerInstanceStack = createCursor(null);
 function pushRootMarkerInstance(workInProgress) {
   if (enableTransitionTracing) {
     var transitions = workInProgressTransitions,
-      root$90 = workInProgress.stateNode;
+      root$127 = workInProgress.stateNode;
     null !== transitions &&
       transitions.forEach(function (transition) {
-        if (!root$90.incompleteTransitions.has(transition)) {
+        if (!root$127.incompleteTransitions.has(transition)) {
           var markerInstance = {
             tag: 0,
             transitions: new Set([transition]),
@@ -5063,11 +5379,11 @@ function pushRootMarkerInstance(workInProgress) {
             aborts: null,
             name: null
           };
-          root$90.incompleteTransitions.set(transition, markerInstance);
+          root$127.incompleteTransitions.set(transition, markerInstance);
         }
       });
     var markerInstances = [];
-    root$90.incompleteTransitions.forEach(function (markerInstance) {
+    root$127.incompleteTransitions.forEach(function (markerInstance) {
       markerInstances.push(markerInstance);
     });
     push(markerInstanceStack, markerInstances);
@@ -5764,14 +6080,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   }
   JSCompiler_temp = current.memoizedState;
   if (null !== JSCompiler_temp) {
-    var dehydrated$97 = JSCompiler_temp.dehydrated;
-    if (null !== dehydrated$97)
+    var dehydrated$134 = JSCompiler_temp.dehydrated;
+    if (null !== dehydrated$134)
       return updateDehydratedSuspenseComponent(
         current,
         workInProgress,
         didSuspend,
         nextProps,
-        dehydrated$97,
+        dehydrated$134,
         JSCompiler_temp,
         renderLanes
       );
@@ -5781,7 +6097,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
     showFallback = nextProps.fallback;
     didSuspend = workInProgress.mode;
     JSCompiler_temp = current.child;
-    dehydrated$97 = JSCompiler_temp.sibling;
+    dehydrated$134 = JSCompiler_temp.sibling;
     var primaryChildProps = { mode: "hidden", children: nextProps.children };
     0 === (didSuspend & 1) && workInProgress.child !== JSCompiler_temp
       ? ((nextProps = workInProgress.child),
@@ -5790,8 +6106,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         (workInProgress.deletions = null))
       : ((nextProps = createWorkInProgress(JSCompiler_temp, primaryChildProps)),
         (nextProps.subtreeFlags = JSCompiler_temp.subtreeFlags & 31457280));
-    null !== dehydrated$97
-      ? (showFallback = createWorkInProgress(dehydrated$97, showFallback))
+    null !== dehydrated$134
+      ? (showFallback = createWorkInProgress(dehydrated$134, showFallback))
       : ((showFallback = createFiberFromFragment(
           showFallback,
           didSuspend,
@@ -5810,10 +6126,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       ? (didSuspend = mountSuspenseOffscreenState(renderLanes))
       : ((JSCompiler_temp = didSuspend.cachePool),
         null !== JSCompiler_temp
-          ? ((dehydrated$97 = CacheContext._currentValue),
+          ? ((dehydrated$134 = CacheContext._currentValue),
             (JSCompiler_temp =
-              JSCompiler_temp.parent !== dehydrated$97
-                ? { parent: dehydrated$97, pool: dehydrated$97 }
+              JSCompiler_temp.parent !== dehydrated$134
+                ? { parent: dehydrated$134, pool: dehydrated$134 }
                 : JSCompiler_temp))
           : (JSCompiler_temp = getSuspendedCache()),
         (didSuspend = {
@@ -5827,23 +6143,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         ((JSCompiler_temp = enableTransitionTracing
           ? markerInstanceStack.current
           : null),
-        (dehydrated$97 = showFallback.updateQueue),
+        (dehydrated$134 = showFallback.updateQueue),
         (primaryChildProps = current.updateQueue),
-        null === dehydrated$97
+        null === dehydrated$134
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue: null
             })
-          : dehydrated$97 === primaryChildProps
+          : dehydrated$134 === primaryChildProps
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue:
                 null !== primaryChildProps ? primaryChildProps.retryQueue : null
             })
-          : ((dehydrated$97.transitions = didSuspend),
-            (dehydrated$97.markerInstances = JSCompiler_temp))));
+          : ((dehydrated$134.transitions = didSuspend),
+            (dehydrated$134.markerInstances = JSCompiler_temp))));
     showFallback.childLanes = current.childLanes & ~renderLanes;
     workInProgress.memoizedState = SUSPENDED_MARKER;
     return nextProps;
@@ -6806,62 +7122,67 @@ function markRef(workInProgress) {
 }
 function updateHostComponent(current, workInProgress, type, newProps) {
   current = current.memoizedProps;
-  if (current !== newProps) {
-    type = null;
-    var propKey,
-      styleName,
-      styleUpdates = null;
-    for (propKey in current)
-      if (
-        !newProps.hasOwnProperty(propKey) &&
-        current.hasOwnProperty(propKey) &&
-        null != current[propKey]
-      )
-        switch (propKey) {
-          case "style":
-            var lastStyle = current[propKey];
-            for (styleName in lastStyle)
-              lastStyle.hasOwnProperty(styleName) &&
-                (styleUpdates || (styleUpdates = {}),
-                (styleUpdates[styleName] = ""));
-            break;
-          default:
-            (type = type || []).push(propKey, null);
-        }
-    for (propKey in newProps) {
-      lastStyle = newProps[propKey];
-      var lastProp = null != current ? current[propKey] : void 0;
-      if (
-        newProps.hasOwnProperty(propKey) &&
-        lastStyle !== lastProp &&
-        (null != lastStyle || null != lastProp)
-      )
-        switch (propKey) {
-          case "style":
-            if (lastProp) {
-              for (styleName in lastProp)
-                !lastProp.hasOwnProperty(styleName) ||
-                  (lastStyle && lastStyle.hasOwnProperty(styleName)) ||
-                  (styleUpdates || (styleUpdates = {}),
-                  (styleUpdates[styleName] = ""));
-              for (styleName in lastStyle)
-                lastStyle.hasOwnProperty(styleName) &&
-                  lastProp[styleName] !== lastStyle[styleName] &&
-                  (styleUpdates || (styleUpdates = {}),
-                  (styleUpdates[styleName] = lastStyle[styleName]));
-            } else
-              styleUpdates ||
-                (type || (type = []), type.push(propKey, styleUpdates)),
-                (styleUpdates = lastStyle);
-            break;
-          default:
-            (type = type || []).push(propKey, lastStyle);
+  if (current !== newProps)
+    if (diffInCommitPhase) markUpdate(workInProgress);
+    else {
+      if (diffInCommitPhase) newProps = null;
+      else {
+        type = null;
+        var propKey,
+          styleName,
+          styleUpdates = null;
+        for (propKey in current)
+          if (
+            !newProps.hasOwnProperty(propKey) &&
+            current.hasOwnProperty(propKey) &&
+            null != current[propKey]
+          )
+            switch (propKey) {
+              case "style":
+                var lastStyle = current[propKey];
+                for (styleName in lastStyle)
+                  lastStyle.hasOwnProperty(styleName) &&
+                    (styleUpdates || (styleUpdates = {}),
+                    (styleUpdates[styleName] = ""));
+                break;
+              default:
+                (type = type || []).push(propKey, null);
+            }
+        for (propKey in newProps) {
+          lastStyle = newProps[propKey];
+          var lastProp = null != current ? current[propKey] : void 0;
+          if (
+            newProps.hasOwnProperty(propKey) &&
+            lastStyle !== lastProp &&
+            (null != lastStyle || null != lastProp)
+          )
+            switch (propKey) {
+              case "style":
+                if (lastProp) {
+                  for (styleName in lastProp)
+                    !lastProp.hasOwnProperty(styleName) ||
+                      (lastStyle && lastStyle.hasOwnProperty(styleName)) ||
+                      (styleUpdates || (styleUpdates = {}),
+                      (styleUpdates[styleName] = ""));
+                  for (styleName in lastStyle)
+                    lastStyle.hasOwnProperty(styleName) &&
+                      lastProp[styleName] !== lastStyle[styleName] &&
+                      (styleUpdates || (styleUpdates = {}),
+                      (styleUpdates[styleName] = lastStyle[styleName]));
+                } else
+                  styleUpdates ||
+                    (type || (type = []), type.push(propKey, styleUpdates)),
+                    (styleUpdates = lastStyle);
+                break;
+              default:
+                (type = type || []).push(propKey, lastStyle);
+            }
         }
+        styleUpdates && (type = type || []).push("style", styleUpdates);
+        newProps = type;
+      }
+      (workInProgress.updateQueue = newProps) && markUpdate(workInProgress);
     }
-    styleUpdates && (type = type || []).push("style", styleUpdates);
-    newProps = type;
-    (workInProgress.updateQueue = newProps) && markUpdate(workInProgress);
-  }
 }
 function preloadResourceAndSuspendIfNeeded(workInProgress, resource) {
   if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4))
@@ -6905,14 +7226,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) {
         break;
       case "collapsed":
         lastTailNode = renderState.tail;
-        for (var lastTailNode$128 = null; null !== lastTailNode; )
-          null !== lastTailNode.alternate && (lastTailNode$128 = lastTailNode),
+        for (var lastTailNode$165 = null; null !== lastTailNode; )
+          null !== lastTailNode.alternate && (lastTailNode$165 = lastTailNode),
             (lastTailNode = lastTailNode.sibling);
-        null === lastTailNode$128
+        null === lastTailNode$165
           ? hasRenderedATailFallback || null === renderState.tail
             ? (renderState.tail = null)
             : (renderState.tail.sibling = null)
-          : (lastTailNode$128.sibling = null);
+          : (lastTailNode$165.sibling = null);
     }
 }
 function bubbleProperties(completedWork) {
@@ -6922,19 +7243,19 @@ function bubbleProperties(completedWork) {
     newChildLanes = 0,
     subtreeFlags = 0;
   if (didBailout)
-    for (var child$129 = completedWork.child; null !== child$129; )
-      (newChildLanes |= child$129.lanes | child$129.childLanes),
-        (subtreeFlags |= child$129.subtreeFlags & 31457280),
-        (subtreeFlags |= child$129.flags & 31457280),
-        (child$129.return = completedWork),
-        (child$129 = child$129.sibling);
+    for (var child$166 = completedWork.child; null !== child$166; )
+      (newChildLanes |= child$166.lanes | child$166.childLanes),
+        (subtreeFlags |= child$166.subtreeFlags & 31457280),
+        (subtreeFlags |= child$166.flags & 31457280),
+        (child$166.return = completedWork),
+        (child$166 = child$166.sibling);
   else
-    for (child$129 = completedWork.child; null !== child$129; )
-      (newChildLanes |= child$129.lanes | child$129.childLanes),
-        (subtreeFlags |= child$129.subtreeFlags),
-        (subtreeFlags |= child$129.flags),
-        (child$129.return = completedWork),
-        (child$129 = child$129.sibling);
+    for (child$166 = completedWork.child; null !== child$166; )
+      (newChildLanes |= child$166.lanes | child$166.childLanes),
+        (subtreeFlags |= child$166.subtreeFlags),
+        (subtreeFlags |= child$166.flags),
+        (child$166.return = completedWork),
+        (child$166 = child$166.sibling);
   completedWork.subtreeFlags |= subtreeFlags;
   completedWork.childLanes = newChildLanes;
   return didBailout;
@@ -7672,8 +7993,8 @@ function safelyDetachRef(current, nearestMountedAncestor) {
     else if ("function" === typeof ref)
       try {
         ref(null);
-      } catch (error$159) {
-        captureCommitPhaseError(current, nearestMountedAncestor, error$159);
+      } catch (error$196) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error$196);
       }
     else ref.current = null;
 }
@@ -7710,7 +8031,7 @@ function commitBeforeMutationEffects(root, firstChild) {
           selection = selection.focusOffset;
           try {
             JSCompiler_temp.nodeType, focusNode.nodeType;
-          } catch (e$219) {
+          } catch (e$256) {
             JSCompiler_temp = null;
             break a;
           }
@@ -7976,11 +8297,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
               current,
               finishedRoot.__reactInternalSnapshotBeforeUpdate
             );
-          } catch (error$161) {
+          } catch (error$198) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$161
+              error$198
             );
           }
         }
@@ -8660,8 +8981,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         }
         try {
           commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-        } catch (error$174) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$174);
+        } catch (error$211) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$211);
         }
       }
       break;
@@ -8830,20 +9151,24 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         )
           try {
             var domElement = finishedWork.stateNode,
+              type = finishedWork.type,
+              oldProps = current.memoizedProps,
               newProps = finishedWork.memoizedProps;
-            updateProperties(
-              domElement,
-              flags,
-              finishedWork.type,
-              current.memoizedProps,
-              newProps
-            );
+            diffInCommitPhase
+              ? updateProperties(domElement, type, oldProps, newProps)
+              : updatePropertiesWithDiff(
+                  domElement,
+                  flags,
+                  type,
+                  oldProps,
+                  newProps
+                );
             domElement[internalPropsKey] = newProps;
-          } catch (error$175) {
+          } catch (error$212) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$175
+              error$212
             );
           }
       break;
@@ -8879,8 +9204,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         root = finishedWork.stateNode;
         try {
           setTextContent(root, "");
-        } catch (error$176) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$176);
+        } catch (error$213) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$213);
         }
       }
       if (
@@ -8892,13 +9217,21 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
           (hoistableRoot = finishedWork.type),
           (maybeNodes = finishedWork.updateQueue),
           (finishedWork.updateQueue = null),
-          null !== maybeNodes))
+          null !== maybeNodes || diffInCommitPhase))
       )
         try {
-          updateProperties(flags, maybeNodes, hoistableRoot, current, root),
+          diffInCommitPhase
+            ? updateProperties(flags, hoistableRoot, current, root)
+            : updatePropertiesWithDiff(
+                flags,
+                maybeNodes,
+                hoistableRoot,
+                current,
+                root
+              ),
             (flags[internalPropsKey] = root);
-        } catch (error$179) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$179);
+        } catch (error$216) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$216);
         }
       break;
     case 6:
@@ -8911,8 +9244,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         flags = finishedWork.memoizedProps;
         try {
           current.nodeValue = flags;
-        } catch (error$180) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$180);
+        } catch (error$217) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$217);
         }
       }
       break;
@@ -8926,8 +9259,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
       if (flags & 4 && null !== current && current.memoizedState.isDehydrated)
         try {
           retryIfBlockedOn(root.containerInfo);
-        } catch (error$181) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$181);
+        } catch (error$218) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$218);
         }
       break;
     case 4:
@@ -8957,8 +9290,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               null !== retryQueue && suspenseCallback(new Set(retryQueue));
             }
           }
-        } catch (error$183) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$183);
+        } catch (error$220) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$220);
         }
         current = finishedWork.updateQueue;
         null !== current &&
@@ -8971,15 +9304,15 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         null !== current &&
         safelyDetachRef(current, current.return);
       domElement = null !== finishedWork.memoizedState;
-      newProps = null !== current && null !== current.memoizedState;
+      type = null !== current && null !== current.memoizedState;
       finishedWork.mode & 1
-        ? ((suspenseCallback = offscreenSubtreeIsHidden),
-          (retryQueue = offscreenSubtreeWasHidden),
-          (offscreenSubtreeIsHidden = suspenseCallback || domElement),
-          (offscreenSubtreeWasHidden = retryQueue || newProps),
+        ? ((oldProps = offscreenSubtreeIsHidden),
+          (newProps = offscreenSubtreeWasHidden),
+          (offscreenSubtreeIsHidden = oldProps || domElement),
+          (offscreenSubtreeWasHidden = newProps || type),
           recursivelyTraverseMutationEffects(root, finishedWork),
-          (offscreenSubtreeWasHidden = retryQueue),
-          (offscreenSubtreeIsHidden = suspenseCallback))
+          (offscreenSubtreeWasHidden = newProps),
+          (offscreenSubtreeIsHidden = oldProps))
         : recursivelyTraverseMutationEffects(root, finishedWork);
       commitReconciliationEffects(finishedWork);
       root = finishedWork.stateNode;
@@ -8994,7 +9327,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         domElement &&
           ((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden),
           null === current ||
-            newProps ||
+            type ||
             root ||
             (0 !== (finishedWork.mode & 1) &&
               recursivelyTraverseDisappearLayoutEffects(finishedWork))),
@@ -9036,11 +9369,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
             if (null === current)
               try {
                 root.stateNode.nodeValue = domElement ? "" : root.memoizedProps;
-              } catch (error$164) {
+              } catch (error$201) {
                 captureCommitPhaseError(
                   finishedWork,
                   finishedWork.return,
-                  error$164
+                  error$201
                 );
               }
           } else if (
@@ -9115,21 +9448,21 @@ function commitReconciliationEffects(finishedWork) {
             insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0);
             break;
           case 5:
-            var parent$165 = JSCompiler_inline_result.stateNode;
+            var parent$202 = JSCompiler_inline_result.stateNode;
             JSCompiler_inline_result.flags & 32 &&
-              (setTextContent(parent$165, ""),
+              (setTextContent(parent$202, ""),
               (JSCompiler_inline_result.flags &= -33));
-            var before$166 = getHostSibling(finishedWork);
-            insertOrAppendPlacementNode(finishedWork, before$166, parent$165);
+            var before$203 = getHostSibling(finishedWork);
+            insertOrAppendPlacementNode(finishedWork, before$203, parent$202);
             break;
           case 3:
           case 4:
-            var parent$167 = JSCompiler_inline_result.stateNode.containerInfo,
-              before$168 = getHostSibling(finishedWork);
+            var parent$204 = JSCompiler_inline_result.stateNode.containerInfo,
+              before$205 = getHostSibling(finishedWork);
             insertOrAppendPlacementNodeIntoContainer(
               finishedWork,
-              before$168,
-              parent$167
+              before$205,
+              parent$204
             );
             break;
           default:
@@ -9599,9 +9932,9 @@ function recursivelyTraverseReconnectPassiveEffects(
           );
         break;
       case 22:
-        var instance$193 = finishedWork.stateNode;
+        var instance$230 = finishedWork.stateNode;
         null !== finishedWork.memoizedState
-          ? instance$193._visibility & 4
+          ? instance$230._visibility & 4
             ? recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -9614,7 +9947,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork
               )
-            : ((instance$193._visibility |= 4),
+            : ((instance$230._visibility |= 4),
               recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -9622,7 +9955,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 committedTransitions,
                 includeWorkInProgressEffects
               ))
-          : ((instance$193._visibility |= 4),
+          : ((instance$230._visibility |= 4),
             recursivelyTraverseReconnectPassiveEffects(
               finishedRoot,
               finishedWork,
@@ -9635,7 +9968,7 @@ function recursivelyTraverseReconnectPassiveEffects(
           commitOffscreenPassiveMountEffects(
             finishedWork.alternate,
             finishedWork,
-            instance$193
+            instance$230
           );
         break;
       case 24:
@@ -10176,13 +10509,13 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
     isFlushingWork = !0;
     do {
       var didPerformSomeWork = !1;
-      for (var root$202 = firstScheduledRoot; null !== root$202; ) {
+      for (var root$239 = firstScheduledRoot; null !== root$239; ) {
         if (
-          (!onlyLegacy || 0 === root$202.tag) &&
+          (!onlyLegacy || 0 === root$239.tag) &&
           0 !==
             (getNextLanes(
-              root$202,
-              root$202 === workInProgressRoot$jscomp$0
+              root$239,
+              root$239 === workInProgressRoot$jscomp$0
                 ? workInProgressRootRenderLanes$jscomp$0
                 : 0
             ) &
@@ -10190,7 +10523,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
         )
           try {
             didPerformSomeWork = !0;
-            var root = root$202;
+            var root = root$239;
             if (0 !== (executionContext & 6))
               throw Error(formatProdErrorMessage(327));
             flushPassiveEffects();
@@ -10233,7 +10566,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
           } catch (error) {
             null === errors ? (errors = [error]) : errors.push(error);
           }
-        root$202 = root$202.next;
+        root$239 = root$239.next;
       }
     } while (didPerformSomeWork);
     isFlushingWork = !1;
@@ -10559,16 +10892,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         exitStatus = renderRootSync(root, lanes);
         if (2 === exitStatus) {
           errorRetryLanes = lanes;
-          var errorRetryLanes$205 = getLanesToRetrySynchronouslyOnError(
+          var errorRetryLanes$242 = getLanesToRetrySynchronouslyOnError(
             root,
             errorRetryLanes
           );
-          0 !== errorRetryLanes$205 &&
-            ((lanes = errorRetryLanes$205),
+          0 !== errorRetryLanes$242 &&
+            ((lanes = errorRetryLanes$242),
             (exitStatus = recoverFromConcurrentError(
               root,
               errorRetryLanes,
-              errorRetryLanes$205
+              errorRetryLanes$242
             )));
         }
         if (1 === exitStatus)
@@ -10629,14 +10962,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
           if ((lanes & 8388480) === lanes) break;
           exitStatus = lanes;
           errorRetryLanes = root.eventTimes;
-          for (errorRetryLanes$205 = -1; 0 < exitStatus; ) {
+          for (errorRetryLanes$242 = -1; 0 < exitStatus; ) {
             var index$2 = 31 - clz32(exitStatus),
               lane = 1 << index$2;
             index$2 = errorRetryLanes[index$2];
-            index$2 > errorRetryLanes$205 && (errorRetryLanes$205 = index$2);
+            index$2 > errorRetryLanes$242 && (errorRetryLanes$242 = index$2);
             exitStatus &= ~lane;
           }
-          exitStatus = errorRetryLanes$205;
+          exitStatus = errorRetryLanes$242;
           exitStatus = now() - exitStatus;
           exitStatus =
             (120 > exitStatus
@@ -10968,8 +11301,8 @@ function renderRootSync(root, lanes) {
       }
       workLoopSync();
       break;
-    } catch (thrownValue$208) {
-      handleThrow(root, thrownValue$208);
+    } catch (thrownValue$245) {
+      handleThrow(root, thrownValue$245);
     }
   while (1);
   resetContextDependencies();
@@ -11075,8 +11408,8 @@ function renderRootConcurrent(root, lanes) {
       }
       workLoopConcurrent();
       break;
-    } catch (thrownValue$210) {
-      handleThrow(root, thrownValue$210);
+    } catch (thrownValue$247) {
+      handleThrow(root, thrownValue$247);
     }
   while (1);
   resetContextDependencies();
@@ -11243,10 +11576,10 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) {
                       };
                       suspenseBoundary.updateQueue = newOffscreenQueue;
                     } else {
-                      var retryQueue$85 = offscreenQueue.retryQueue;
-                      null === retryQueue$85
+                      var retryQueue$122 = offscreenQueue.retryQueue;
+                      null === retryQueue$122
                         ? (offscreenQueue.retryQueue = new Set([wakeable]))
-                        : retryQueue$85.add(wakeable);
+                        : retryQueue$122.add(wakeable);
                     }
                   }
                   break;
@@ -11443,12 +11776,12 @@ function commitRootImpl(
     var prevExecutionContext = executionContext;
     executionContext |= 4;
     ReactCurrentOwner.current = null;
-    var shouldFireAfterActiveInstanceBlur$214 = commitBeforeMutationEffects(
+    var shouldFireAfterActiveInstanceBlur$251 = commitBeforeMutationEffects(
       root,
       finishedWork
     );
     commitMutationEffectsOnFiber(finishedWork, root);
-    shouldFireAfterActiveInstanceBlur$214 &&
+    shouldFireAfterActiveInstanceBlur$251 &&
       ((_enabled = !0),
       dispatchAfterDetachedBlur(selectionInformation.focusedElem),
       (_enabled = !1));
@@ -11527,7 +11860,7 @@ function releaseRootPooledCache(root, remainingLanes) {
 }
 function flushPassiveEffects() {
   if (null !== rootWithPendingPassiveEffects) {
-    var root$215 = rootWithPendingPassiveEffects,
+    var root$252 = rootWithPendingPassiveEffects,
       remainingLanes = pendingPassiveEffectsRemainingLanes;
     pendingPassiveEffectsRemainingLanes = 0;
     var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
@@ -11543,7 +11876,7 @@ function flushPassiveEffects() {
     } finally {
       (currentUpdatePriority = previousPriority),
         (ReactCurrentBatchConfig$1.transition = prevTransition),
-        releaseRootPooledCache(root$215, remainingLanes);
+        releaseRootPooledCache(root$252, remainingLanes);
     }
   }
   return !1;
@@ -12846,12 +13179,12 @@ function getPublicRootInstance(container) {
 function attemptSynchronousHydration(fiber) {
   switch (fiber.tag) {
     case 3:
-      var root$217 = fiber.stateNode;
-      if (root$217.current.memoizedState.isDehydrated) {
-        var lanes = getHighestPriorityLanes(root$217.pendingLanes);
+      var root$254 = fiber.stateNode;
+      if (root$254.current.memoizedState.isDehydrated) {
+        var lanes = getHighestPriorityLanes(root$254.pendingLanes);
         0 !== lanes &&
-          (markRootEntangled(root$217, lanes | 2),
-          ensureRootIsScheduled(root$217),
+          (markRootEntangled(root$254, lanes | 2),
+          ensureRootIsScheduled(root$254),
           0 === (executionContext & 6) &&
             ((workInProgressRootRenderTargetTime = now() + 500),
             flushSyncWorkAcrossRoots_impl(!1)));
@@ -13423,19 +13756,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$335;
+  var JSCompiler_inline_result$jscomp$372;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1614 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1614) {
-      var element$jscomp$inline_1615 = document.createElement("div");
-      element$jscomp$inline_1615.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1614 =
-        "function" === typeof element$jscomp$inline_1615.oninput;
+    var isSupported$jscomp$inline_1651 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1651) {
+      var element$jscomp$inline_1652 = document.createElement("div");
+      element$jscomp$inline_1652.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1651 =
+        "function" === typeof element$jscomp$inline_1652.oninput;
     }
-    JSCompiler_inline_result$jscomp$335 = isSupported$jscomp$inline_1614;
-  } else JSCompiler_inline_result$jscomp$335 = !1;
+    JSCompiler_inline_result$jscomp$372 = isSupported$jscomp$inline_1651;
+  } else JSCompiler_inline_result$jscomp$372 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$335 &&
+    JSCompiler_inline_result$jscomp$372 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -13744,20 +14077,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1655 = 0;
-  i$jscomp$inline_1655 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1655++
+  var i$jscomp$inline_1692 = 0;
+  i$jscomp$inline_1692 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1692++
 ) {
-  var eventName$jscomp$inline_1656 =
-      simpleEventPluginEvents[i$jscomp$inline_1655],
-    domEventName$jscomp$inline_1657 =
-      eventName$jscomp$inline_1656.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1658 =
-      eventName$jscomp$inline_1656[0].toUpperCase() +
-      eventName$jscomp$inline_1656.slice(1);
+  var eventName$jscomp$inline_1693 =
+      simpleEventPluginEvents[i$jscomp$inline_1692],
+    domEventName$jscomp$inline_1694 =
+      eventName$jscomp$inline_1693.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1695 =
+      eventName$jscomp$inline_1693[0].toUpperCase() +
+      eventName$jscomp$inline_1693.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1657,
-    "on" + capitalizedEvent$jscomp$inline_1658
+    domEventName$jscomp$inline_1694,
+    "on" + capitalizedEvent$jscomp$inline_1695
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -14659,11 +14992,11 @@ function legacyCreateRootFromDOMContainer(
     if ("function" === typeof callback) {
       var originalCallback = callback;
       callback = function () {
-        var instance = getPublicRootInstance(root$227);
+        var instance = getPublicRootInstance(root$264);
         originalCallback.call(instance);
       };
     }
-    var root$227 = createHydrationContainer(
+    var root$264 = createHydrationContainer(
       initialChildren,
       callback,
       container,
@@ -14675,23 +15008,23 @@ function legacyCreateRootFromDOMContainer(
       noopOnRecoverableError,
       null
     );
-    container._reactRootContainer = root$227;
-    container[internalContainerInstanceKey] = root$227.current;
+    container._reactRootContainer = root$264;
+    container[internalContainerInstanceKey] = root$264.current;
     listenToAllSupportedEvents(
       8 === container.nodeType ? container.parentNode : container
     );
     flushSync$1();
-    return root$227;
+    return root$264;
   }
   clearContainer(container);
   if ("function" === typeof callback) {
-    var originalCallback$228 = callback;
+    var originalCallback$265 = callback;
     callback = function () {
-      var instance = getPublicRootInstance(root$229);
-      originalCallback$228.call(instance);
+      var instance = getPublicRootInstance(root$266);
+      originalCallback$265.call(instance);
     };
   }
-  var root$229 = createFiberRoot(
+  var root$266 = createFiberRoot(
     container,
     0,
     !1,
@@ -14703,15 +15036,15 @@ function legacyCreateRootFromDOMContainer(
     noopOnRecoverableError,
     null
   );
-  container._reactRootContainer = root$229;
-  container[internalContainerInstanceKey] = root$229.current;
+  container._reactRootContainer = root$266;
+  container[internalContainerInstanceKey] = root$266.current;
   listenToAllSupportedEvents(
     8 === container.nodeType ? container.parentNode : container
   );
   flushSync$1(function () {
-    updateContainer(initialChildren, root$229, parentComponent, callback);
+    updateContainer(initialChildren, root$266, parentComponent, callback);
   });
-  return root$229;
+  return root$266;
 }
 function legacyRenderSubtreeIntoContainer(
   parentComponent,
@@ -14770,17 +15103,17 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1769 = {
+var devToolsConfig$jscomp$inline_1806 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-b7529c47",
+  version: "18.3.0-www-classic-26b068f9",
   rendererPackageName: "react-dom"
 };
-var internals$jscomp$inline_2211 = {
-  bundleType: devToolsConfig$jscomp$inline_1769.bundleType,
-  version: devToolsConfig$jscomp$inline_1769.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1769.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1769.rendererConfig,
+var internals$jscomp$inline_2248 = {
+  bundleType: devToolsConfig$jscomp$inline_1806.bundleType,
+  version: devToolsConfig$jscomp$inline_1806.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1806.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1806.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -14796,26 +15129,26 @@ var internals$jscomp$inline_2211 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1769.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1806.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-b7529c47"
+  reconcilerVersion: "18.3.0-www-classic-26b068f9"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2212 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2249 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2212.isDisabled &&
-    hook$jscomp$inline_2212.supportsFiber
+    !hook$jscomp$inline_2249.isDisabled &&
+    hook$jscomp$inline_2249.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2212.inject(
-        internals$jscomp$inline_2211
+      (rendererID = hook$jscomp$inline_2249.inject(
+        internals$jscomp$inline_2248
       )),
-        (injectedHook = hook$jscomp$inline_2212);
+        (injectedHook = hook$jscomp$inline_2249);
     } catch (err) {}
 }
 var tagToRoleMappings = {
@@ -15289,14 +15622,14 @@ function preinit(href, options) {
       switch (as) {
         case "style":
           as = getResourcesFromRoot(resourceRoot).hoistableStyles;
-          var key$232 = getStyleKey(href),
+          var key$269 = getStyleKey(href),
             precedence = options.precedence || "default",
-            resource = as.get(key$232);
+            resource = as.get(key$269);
           if (resource) break;
           var state = { loading: 0, preload: null };
           if (
             (resource = resourceRoot.querySelector(
-              getStylesheetSelectorFromKey(key$232)
+              getStylesheetSelectorFromKey(key$269)
             ))
           )
             state.loading = 1;
@@ -15307,7 +15640,7 @@ function preinit(href, options) {
               "data-precedence": precedence,
               crossOrigin: options.crossOrigin
             };
-            (options = preloadPropsMap.get(key$232)) &&
+            (options = preloadPropsMap.get(key$269)) &&
               adoptPreloadPropsForStylesheet(href, options);
             var link = (resource = (
               resourceRoot.ownerDocument || resourceRoot
@@ -15333,15 +15666,15 @@ function preinit(href, options) {
             count: 1,
             state: state
           };
-          as.set(key$232, resource);
+          as.set(key$269, resource);
           break;
         case "script":
           (as = getResourcesFromRoot(resourceRoot).hoistableScripts),
-            (key$232 = getScriptKey(href)),
-            (precedence = as.get(key$232)),
+            (key$269 = getScriptKey(href)),
+            (precedence = as.get(key$269)),
             precedence ||
               ((precedence = resourceRoot.querySelector(
-                "script[async]" + key$232
+                "script[async]" + key$269
               )),
               precedence ||
                 ((href = {
@@ -15350,7 +15683,7 @@ function preinit(href, options) {
                   crossOrigin: options.crossOrigin,
                   integrity: options.integrity
                 }),
-                (options = preloadPropsMap.get(key$232)) &&
+                (options = preloadPropsMap.get(key$269)) &&
                   adoptPreloadPropsForScript(href, options),
                 (options = resourceRoot.ownerDocument || resourceRoot),
                 (precedence = options.createElement("script")),
@@ -15363,13 +15696,13 @@ function preinit(href, options) {
                 count: 1,
                 state: null
               }),
-              as.set(key$232, precedence));
+              as.set(key$269, precedence));
       }
     else if ("style" === as || "script" === as)
       if ((resourceRoot = getDocumentForPreloads())) {
-        key$232 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
-        precedence = key$232 =
-          'link[rel="preload"][as="' + as + '"][href="' + key$232 + '"]';
+        key$269 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
+        precedence = key$269 =
+          'link[rel="preload"][as="' + as + '"][href="' + key$269 + '"]';
         switch (as) {
           case "style":
             precedence = getStyleKey(href);
@@ -15386,7 +15719,7 @@ function preinit(href, options) {
             integrity: options.integrity
           }),
           preloadPropsMap.set(precedence, href),
-          null === resourceRoot.querySelector(key$232) &&
+          null === resourceRoot.querySelector(key$269) &&
             ((options = resourceRoot.createElement("link")),
             setInitialProperties(options, "link", href),
             markNodeAsHoistable(options),
@@ -15419,17 +15752,17 @@ function getResource(type, currentProps, pendingProps) {
         "string" === typeof pendingProps.precedence
       ) {
         type = getStyleKey(pendingProps.href);
-        var styles$241 = getResourcesFromRoot(currentProps).hoistableStyles,
-          resource$242 = styles$241.get(type);
-        resource$242 ||
+        var styles$278 = getResourcesFromRoot(currentProps).hoistableStyles,
+          resource$279 = styles$278.get(type);
+        resource$279 ||
           ((currentProps = currentProps.ownerDocument || currentProps),
-          (resource$242 = {
+          (resource$279 = {
             type: "stylesheet",
             instance: null,
             count: 0,
             state: { loading: 0, preload: null }
           }),
-          styles$241.set(type, resource$242),
+          styles$278.set(type, resource$279),
           preloadPropsMap.has(type) ||
             preloadStylesheet(
               currentProps,
@@ -15444,9 +15777,9 @@ function getResource(type, currentProps, pendingProps) {
                 hrefLang: pendingProps.hrefLang,
                 referrerPolicy: pendingProps.referrerPolicy
               },
-              resource$242.state
+              resource$279.state
             ));
-        return resource$242;
+        return resource$279;
       }
       return null;
     case "script":
@@ -15518,36 +15851,36 @@ function acquireResource(hoistableRoot, resource, props) {
         return (resource.instance = key);
       case "stylesheet":
         styleProps = getStyleKey(props.href);
-        var instance$247 = hoistableRoot.querySelector(
+        var instance$284 = hoistableRoot.querySelector(
           getStylesheetSelectorFromKey(styleProps)
         );
-        if (instance$247)
+        if (instance$284)
           return (
-            (resource.instance = instance$247),
-            markNodeAsHoistable(instance$247),
-            instance$247
+            (resource.instance = instance$284),
+            markNodeAsHoistable(instance$284),
+            instance$284
           );
         key = stylesheetPropsFromRawProps(props);
         (styleProps = preloadPropsMap.get(styleProps)) &&
           adoptPreloadPropsForStylesheet(key, styleProps);
-        instance$247 = (
+        instance$284 = (
           hoistableRoot.ownerDocument || hoistableRoot
         ).createElement("link");
-        markNodeAsHoistable(instance$247);
-        var linkInstance = instance$247;
+        markNodeAsHoistable(instance$284);
+        var linkInstance = instance$284;
         linkInstance._p = new Promise(function (resolve, reject) {
           linkInstance.onload = resolve;
           linkInstance.onerror = reject;
         });
-        setInitialProperties(instance$247, "link", key);
+        setInitialProperties(instance$284, "link", key);
         resource.state.loading |= 4;
-        insertStylesheet(instance$247, props.precedence, hoistableRoot);
-        return (resource.instance = instance$247);
+        insertStylesheet(instance$284, props.precedence, hoistableRoot);
+        return (resource.instance = instance$284);
       case "script":
-        instance$247 = getScriptKey(props.src);
+        instance$284 = getScriptKey(props.src);
         if (
           (styleProps = hoistableRoot.querySelector(
-            "script[async]" + instance$247
+            "script[async]" + instance$284
           ))
         )
           return (
@@ -15556,7 +15889,7 @@ function acquireResource(hoistableRoot, resource, props) {
             styleProps
           );
         key = props;
-        if ((styleProps = preloadPropsMap.get(instance$247)))
+        if ((styleProps = preloadPropsMap.get(instance$284)))
           (key = assign({}, props)),
             adoptPreloadPropsForScript(key, styleProps);
         hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot;
@@ -16805,4 +17138,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-b7529c47";
+exports.version = "18.3.0-www-classic-26b068f9";
diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js
index 41943a910db72..df3fc83a466a3 100644
--- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js
+++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js
@@ -112,6 +112,7 @@ var dynamicFeatureFlags = require("ReactFeatureFlags"),
     dynamicFeatureFlags.enableCustomElementPropertySupport,
   enableDeferRootSchedulingToMicrotask =
     dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask,
+  diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase,
   scheduleCallback$3 = Scheduler.unstable_scheduleCallback,
   cancelCallback$1 = Scheduler.unstable_cancelCallback,
   shouldYield = Scheduler.unstable_shouldYield,
@@ -1069,6 +1070,21 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
     null !== multiple && (multiple.selected = !0);
   }
 }
+function updateSelect(element, prevProps, props) {
+  prevProps = !!prevProps.multiple;
+  var value = props.value;
+  null != value
+    ? updateOptions(element, !!props.multiple, value, !1)
+    : prevProps !== !!props.multiple &&
+      (null != props.defaultValue
+        ? updateOptions(element, !!props.multiple, props.defaultValue, !0)
+        : updateOptions(
+            element,
+            !!props.multiple,
+            props.multiple ? [] : "",
+            !1
+          ));
+}
 function updateTextarea(element, props) {
   var value = getToStringValue(props.value);
   if (
@@ -1161,30 +1177,44 @@ var unitlessNumbers = new Set(
     " "
   )
 );
-function setValueForStyles(node, styles) {
+function setValueForStyle(style, styleName, value) {
+  var isCustomProperty = 0 === styleName.indexOf("--");
+  null == value || "boolean" === typeof value || "" === value
+    ? isCustomProperty
+      ? style.setProperty(styleName, "")
+      : "float" === styleName
+      ? (style.cssFloat = "")
+      : (style[styleName] = "")
+    : isCustomProperty
+    ? style.setProperty(styleName, value)
+    : "number" !== typeof value || 0 === value || unitlessNumbers.has(styleName)
+    ? "float" === styleName
+      ? (style.cssFloat = value)
+      : (style[styleName] = ("" + value).trim())
+    : (style[styleName] = value + "px");
+}
+function setValueForStyles(node, styles, prevStyles) {
   if (null != styles && "object" !== typeof styles)
     throw Error(formatProdErrorMessage(62));
   node = node.style;
-  for (var styleName in styles)
-    if (styles.hasOwnProperty(styleName)) {
-      var value = styles[styleName],
-        isCustomProperty = 0 === styleName.indexOf("--");
-      null == value || "boolean" === typeof value || "" === value
-        ? isCustomProperty
+  if (diffInCommitPhase && null != prevStyles) {
+    for (var styleName in prevStyles)
+      !prevStyles.hasOwnProperty(styleName) ||
+        (null != styles && styles.hasOwnProperty(styleName)) ||
+        (0 === styleName.indexOf("--")
           ? node.setProperty(styleName, "")
           : "float" === styleName
           ? (node.cssFloat = "")
-          : (node[styleName] = "")
-        : isCustomProperty
-        ? node.setProperty(styleName, value)
-        : "number" !== typeof value ||
-          0 === value ||
-          unitlessNumbers.has(styleName)
-        ? "float" === styleName
-          ? (node.cssFloat = value)
-          : (node[styleName] = ("" + value).trim())
-        : (node[styleName] = value + "px");
-    }
+          : (node[styleName] = ""));
+    for (var styleName$15 in styles)
+      (styleName = styles[styleName$15]),
+        styles.hasOwnProperty(styleName$15) &&
+          prevStyles[styleName$15] !== styleName &&
+          setValueForStyle(node, styleName$15, styleName);
+  } else
+    for (var styleName$16 in styles)
+      styles.hasOwnProperty(styleName$16) &&
+        setValueForStyle(node, styleName$16, styles[styleName$16]);
 }
 function isCustomElement(tagName) {
   if (-1 === tagName.indexOf("-")) return !1;
@@ -1413,36 +1443,36 @@ function findCurrentFiberUsingSlowPath(fiber) {
     }
     if (a.return !== b.return) (a = parentA), (b = parentB);
     else {
-      for (var didFindChild = !1, child$15 = parentA.child; child$15; ) {
-        if (child$15 === a) {
+      for (var didFindChild = !1, child$18 = parentA.child; child$18; ) {
+        if (child$18 === a) {
           didFindChild = !0;
           a = parentA;
           b = parentB;
           break;
         }
-        if (child$15 === b) {
+        if (child$18 === b) {
           didFindChild = !0;
           b = parentA;
           a = parentB;
           break;
         }
-        child$15 = child$15.sibling;
+        child$18 = child$18.sibling;
       }
       if (!didFindChild) {
-        for (child$15 = parentB.child; child$15; ) {
-          if (child$15 === a) {
+        for (child$18 = parentB.child; child$18; ) {
+          if (child$18 === a) {
             didFindChild = !0;
             a = parentB;
             b = parentA;
             break;
           }
-          if (child$15 === b) {
+          if (child$18 === b) {
             didFindChild = !0;
             b = parentB;
             a = parentA;
             break;
           }
-          child$15 = child$15.sibling;
+          child$18 = child$18.sibling;
         }
         if (!didFindChild) throw Error(formatProdErrorMessage(189));
       }
@@ -1669,8 +1699,8 @@ function prepareToHydrateHostInstance(fiber) {
       break;
     case "video":
     case "audio":
-      for (type = 0; type < mediaEventTypes.length; type++)
-        listenToNonDelegatedEvent(mediaEventTypes[type], instance);
+      for (var i = 0; i < mediaEventTypes.length; i++)
+        listenToNonDelegatedEvent(mediaEventTypes[i], instance);
       break;
     case "source":
       listenToNonDelegatedEvent("error", instance);
@@ -1697,20 +1727,28 @@ function prepareToHydrateHostInstance(fiber) {
         track(instance),
         initTextarea(instance, props);
   }
-  var updatePayload = null;
-  type = props.children;
-  ("string" !== typeof type && "number" !== typeof type) ||
-    instance.textContent === "" + type ||
-    (!0 !== props.suppressHydrationWarning &&
-      ((updatePayload = instance.textContent),
-      normalizeMarkupForTextOrAttribute(type),
-      normalizeMarkupForTextOrAttribute(updatePayload)),
-    (updatePayload = ["children", type]));
+  i = null;
+  var children = props.children;
+  if (
+    ("string" === typeof children || "number" === typeof children) &&
+    instance.textContent !== "" + children
+  ) {
+    if (!0 !== props.suppressHydrationWarning) {
+      var serverText = instance.textContent;
+      normalizeMarkupForTextOrAttribute(children);
+      normalizeMarkupForTextOrAttribute(serverText);
+    }
+    diffInCommitPhase
+      ? "body" !== type && (instance.textContent = children)
+      : (i = ["children", children]);
+  }
   null != props.onScroll && listenToNonDelegatedEvent("scroll", instance);
   null != props.onClick && (instance.onclick = noop$1);
-  instance = updatePayload;
-  fiber.updateQueue = instance;
-  return null !== instance ? !0 : !1;
+  instance = i;
+  return diffInCommitPhase ||
+    ((fiber.updateQueue = instance), null === instance)
+    ? !1
+    : !0;
 }
 function popToNextHostParent(fiber) {
   for (hydrationParentFiber = fiber.return; hydrationParentFiber; )
@@ -3185,10 +3223,10 @@ createFunctionComponentUpdateQueue = function () {
 function use(usable) {
   if (null !== usable && "object" === typeof usable) {
     if ("function" === typeof usable.then) {
-      var index$41 = thenableIndexCounter;
+      var index$44 = thenableIndexCounter;
       thenableIndexCounter += 1;
       null === thenableState && (thenableState = []);
-      usable = trackUsedThenable(thenableState, usable, index$41);
+      usable = trackUsedThenable(thenableState, usable, index$44);
       null === currentlyRenderingFiber$1.alternate &&
         (null === workInProgressHook
           ? null === currentlyRenderingFiber$1.memoizedState
@@ -3676,16 +3714,16 @@ function refreshCache(fiber, seedKey, seedValue) {
       case 3:
         var lane = requestUpdateLane(provider);
         fiber = createUpdate(lane);
-        var root$47 = enqueueUpdate(provider, fiber, lane);
-        if (null !== root$47) {
+        var root$50 = enqueueUpdate(provider, fiber, lane);
+        if (null !== root$50) {
           var eventTime = requestEventTime();
-          scheduleUpdateOnFiber(root$47, provider, lane, eventTime);
-          entangleTransitions(root$47, provider, lane);
+          scheduleUpdateOnFiber(root$50, provider, lane, eventTime);
+          entangleTransitions(root$50, provider, lane);
         }
         provider = createCache();
         null !== seedKey &&
           void 0 !== seedKey &&
-          null !== root$47 &&
+          null !== root$50 &&
           provider.data.set(seedKey, seedValue);
         fiber.payload = { cache: provider };
         return;
@@ -3892,15 +3930,15 @@ var HooksDispatcherOnMount = {
       getServerSnapshot = getServerSnapshot();
     } else {
       getServerSnapshot = getSnapshot();
-      var root$43 = workInProgressRoot;
-      if (null === root$43) throw Error(formatProdErrorMessage(349));
-      includesBlockingLane(root$43, renderLanes$1) ||
+      var root$46 = workInProgressRoot;
+      if (null === root$46) throw Error(formatProdErrorMessage(349));
+      includesBlockingLane(root$46, renderLanes$1) ||
         pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot);
     }
     hook.memoizedState = getServerSnapshot;
-    root$43 = { value: getServerSnapshot, getSnapshot: getSnapshot };
-    hook.queue = root$43;
-    mountEffect(subscribeToStore.bind(null, fiber, root$43, subscribe), [
+    root$46 = { value: getServerSnapshot, getSnapshot: getSnapshot };
+    hook.queue = root$46;
+    mountEffect(subscribeToStore.bind(null, fiber, root$46, subscribe), [
       subscribe
     ]);
     fiber.flags |= 2048;
@@ -3909,7 +3947,7 @@ var HooksDispatcherOnMount = {
       updateStoreInstance.bind(
         null,
         fiber,
-        root$43,
+        root$46,
         getServerSnapshot,
         getSnapshot
       ),
@@ -4393,10 +4431,10 @@ var markerInstanceStack = createCursor(null);
 function pushRootMarkerInstance(workInProgress) {
   if (enableTransitionTracing) {
     var transitions = workInProgressTransitions,
-      root$58 = workInProgress.stateNode;
+      root$61 = workInProgress.stateNode;
     null !== transitions &&
       transitions.forEach(function (transition) {
-        if (!root$58.incompleteTransitions.has(transition)) {
+        if (!root$61.incompleteTransitions.has(transition)) {
           var markerInstance = {
             tag: 0,
             transitions: new Set([transition]),
@@ -4404,11 +4442,11 @@ function pushRootMarkerInstance(workInProgress) {
             aborts: null,
             name: null
           };
-          root$58.incompleteTransitions.set(transition, markerInstance);
+          root$61.incompleteTransitions.set(transition, markerInstance);
         }
       });
     var markerInstances = [];
-    root$58.incompleteTransitions.forEach(function (markerInstance) {
+    root$61.incompleteTransitions.forEach(function (markerInstance) {
       markerInstances.push(markerInstance);
     });
     push(markerInstanceStack, markerInstances);
@@ -5073,14 +5111,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   }
   JSCompiler_temp = current.memoizedState;
   if (null !== JSCompiler_temp) {
-    var dehydrated$65 = JSCompiler_temp.dehydrated;
-    if (null !== dehydrated$65)
+    var dehydrated$68 = JSCompiler_temp.dehydrated;
+    if (null !== dehydrated$68)
       return updateDehydratedSuspenseComponent(
         current,
         workInProgress,
         didSuspend,
         nextProps,
-        dehydrated$65,
+        dehydrated$68,
         JSCompiler_temp,
         renderLanes
       );
@@ -5090,7 +5128,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
     showFallback = nextProps.fallback;
     didSuspend = workInProgress.mode;
     JSCompiler_temp = current.child;
-    dehydrated$65 = JSCompiler_temp.sibling;
+    dehydrated$68 = JSCompiler_temp.sibling;
     var primaryChildProps = { mode: "hidden", children: nextProps.children };
     0 === (didSuspend & 1) && workInProgress.child !== JSCompiler_temp
       ? ((nextProps = workInProgress.child),
@@ -5099,8 +5137,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         (workInProgress.deletions = null))
       : ((nextProps = createWorkInProgress(JSCompiler_temp, primaryChildProps)),
         (nextProps.subtreeFlags = JSCompiler_temp.subtreeFlags & 31457280));
-    null !== dehydrated$65
-      ? (showFallback = createWorkInProgress(dehydrated$65, showFallback))
+    null !== dehydrated$68
+      ? (showFallback = createWorkInProgress(dehydrated$68, showFallback))
       : ((showFallback = createFiberFromFragment(
           showFallback,
           didSuspend,
@@ -5119,10 +5157,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       ? (didSuspend = mountSuspenseOffscreenState(renderLanes))
       : ((JSCompiler_temp = didSuspend.cachePool),
         null !== JSCompiler_temp
-          ? ((dehydrated$65 = CacheContext._currentValue),
+          ? ((dehydrated$68 = CacheContext._currentValue),
             (JSCompiler_temp =
-              JSCompiler_temp.parent !== dehydrated$65
-                ? { parent: dehydrated$65, pool: dehydrated$65 }
+              JSCompiler_temp.parent !== dehydrated$68
+                ? { parent: dehydrated$68, pool: dehydrated$68 }
                 : JSCompiler_temp))
           : (JSCompiler_temp = getSuspendedCache()),
         (didSuspend = {
@@ -5136,23 +5174,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         ((JSCompiler_temp = enableTransitionTracing
           ? markerInstanceStack.current
           : null),
-        (dehydrated$65 = showFallback.updateQueue),
+        (dehydrated$68 = showFallback.updateQueue),
         (primaryChildProps = current.updateQueue),
-        null === dehydrated$65
+        null === dehydrated$68
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue: null
             })
-          : dehydrated$65 === primaryChildProps
+          : dehydrated$68 === primaryChildProps
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue:
                 null !== primaryChildProps ? primaryChildProps.retryQueue : null
             })
-          : ((dehydrated$65.transitions = didSuspend),
-            (dehydrated$65.markerInstances = JSCompiler_temp))));
+          : ((dehydrated$68.transitions = didSuspend),
+            (dehydrated$68.markerInstances = JSCompiler_temp))));
     showFallback.childLanes = current.childLanes & ~renderLanes;
     workInProgress.memoizedState = SUSPENDED_MARKER;
     return nextProps;
@@ -6111,62 +6149,67 @@ function markRef(workInProgress) {
 }
 function updateHostComponent(current, workInProgress, type, newProps) {
   current = current.memoizedProps;
-  if (current !== newProps) {
-    type = null;
-    var propKey,
-      styleName,
-      styleUpdates = null;
-    for (propKey in current)
-      if (
-        !newProps.hasOwnProperty(propKey) &&
-        current.hasOwnProperty(propKey) &&
-        null != current[propKey]
-      )
-        switch (propKey) {
-          case "style":
-            var lastStyle = current[propKey];
-            for (styleName in lastStyle)
-              lastStyle.hasOwnProperty(styleName) &&
-                (styleUpdates || (styleUpdates = {}),
-                (styleUpdates[styleName] = ""));
-            break;
-          default:
-            (type = type || []).push(propKey, null);
-        }
-    for (propKey in newProps) {
-      lastStyle = newProps[propKey];
-      var lastProp = null != current ? current[propKey] : void 0;
-      if (
-        newProps.hasOwnProperty(propKey) &&
-        lastStyle !== lastProp &&
-        (null != lastStyle || null != lastProp)
-      )
-        switch (propKey) {
-          case "style":
-            if (lastProp) {
-              for (styleName in lastProp)
-                !lastProp.hasOwnProperty(styleName) ||
-                  (lastStyle && lastStyle.hasOwnProperty(styleName)) ||
-                  (styleUpdates || (styleUpdates = {}),
-                  (styleUpdates[styleName] = ""));
-              for (styleName in lastStyle)
-                lastStyle.hasOwnProperty(styleName) &&
-                  lastProp[styleName] !== lastStyle[styleName] &&
-                  (styleUpdates || (styleUpdates = {}),
-                  (styleUpdates[styleName] = lastStyle[styleName]));
-            } else
-              styleUpdates ||
-                (type || (type = []), type.push(propKey, styleUpdates)),
-                (styleUpdates = lastStyle);
-            break;
-          default:
-            (type = type || []).push(propKey, lastStyle);
+  if (current !== newProps)
+    if (diffInCommitPhase) markUpdate(workInProgress);
+    else {
+      if (diffInCommitPhase) newProps = null;
+      else {
+        type = null;
+        var propKey,
+          styleName,
+          styleUpdates = null;
+        for (propKey in current)
+          if (
+            !newProps.hasOwnProperty(propKey) &&
+            current.hasOwnProperty(propKey) &&
+            null != current[propKey]
+          )
+            switch (propKey) {
+              case "style":
+                var lastStyle = current[propKey];
+                for (styleName in lastStyle)
+                  lastStyle.hasOwnProperty(styleName) &&
+                    (styleUpdates || (styleUpdates = {}),
+                    (styleUpdates[styleName] = ""));
+                break;
+              default:
+                (type = type || []).push(propKey, null);
+            }
+        for (propKey in newProps) {
+          lastStyle = newProps[propKey];
+          var lastProp = null != current ? current[propKey] : void 0;
+          if (
+            newProps.hasOwnProperty(propKey) &&
+            lastStyle !== lastProp &&
+            (null != lastStyle || null != lastProp)
+          )
+            switch (propKey) {
+              case "style":
+                if (lastProp) {
+                  for (styleName in lastProp)
+                    !lastProp.hasOwnProperty(styleName) ||
+                      (lastStyle && lastStyle.hasOwnProperty(styleName)) ||
+                      (styleUpdates || (styleUpdates = {}),
+                      (styleUpdates[styleName] = ""));
+                  for (styleName in lastStyle)
+                    lastStyle.hasOwnProperty(styleName) &&
+                      lastProp[styleName] !== lastStyle[styleName] &&
+                      (styleUpdates || (styleUpdates = {}),
+                      (styleUpdates[styleName] = lastStyle[styleName]));
+                } else
+                  styleUpdates ||
+                    (type || (type = []), type.push(propKey, styleUpdates)),
+                    (styleUpdates = lastStyle);
+                break;
+              default:
+                (type = type || []).push(propKey, lastStyle);
+            }
         }
+        styleUpdates && (type = type || []).push("style", styleUpdates);
+        newProps = type;
+      }
+      (workInProgress.updateQueue = newProps) && markUpdate(workInProgress);
     }
-    styleUpdates && (type = type || []).push("style", styleUpdates);
-    newProps = type;
-    (workInProgress.updateQueue = newProps) && markUpdate(workInProgress);
-  }
 }
 function preloadResourceAndSuspendIfNeeded(workInProgress, resource) {
   if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4))
@@ -6210,14 +6253,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) {
         break;
       case "collapsed":
         lastTailNode = renderState.tail;
-        for (var lastTailNode$96 = null; null !== lastTailNode; )
-          null !== lastTailNode.alternate && (lastTailNode$96 = lastTailNode),
+        for (var lastTailNode$99 = null; null !== lastTailNode; )
+          null !== lastTailNode.alternate && (lastTailNode$99 = lastTailNode),
             (lastTailNode = lastTailNode.sibling);
-        null === lastTailNode$96
+        null === lastTailNode$99
           ? hasRenderedATailFallback || null === renderState.tail
             ? (renderState.tail = null)
             : (renderState.tail.sibling = null)
-          : (lastTailNode$96.sibling = null);
+          : (lastTailNode$99.sibling = null);
     }
 }
 function bubbleProperties(completedWork) {
@@ -6227,19 +6270,19 @@ function bubbleProperties(completedWork) {
     newChildLanes = 0,
     subtreeFlags = 0;
   if (didBailout)
-    for (var child$97 = completedWork.child; null !== child$97; )
-      (newChildLanes |= child$97.lanes | child$97.childLanes),
-        (subtreeFlags |= child$97.subtreeFlags & 31457280),
-        (subtreeFlags |= child$97.flags & 31457280),
-        (child$97.return = completedWork),
-        (child$97 = child$97.sibling);
+    for (var child$100 = completedWork.child; null !== child$100; )
+      (newChildLanes |= child$100.lanes | child$100.childLanes),
+        (subtreeFlags |= child$100.subtreeFlags & 31457280),
+        (subtreeFlags |= child$100.flags & 31457280),
+        (child$100.return = completedWork),
+        (child$100 = child$100.sibling);
   else
-    for (child$97 = completedWork.child; null !== child$97; )
-      (newChildLanes |= child$97.lanes | child$97.childLanes),
-        (subtreeFlags |= child$97.subtreeFlags),
-        (subtreeFlags |= child$97.flags),
-        (child$97.return = completedWork),
-        (child$97 = child$97.sibling);
+    for (child$100 = completedWork.child; null !== child$100; )
+      (newChildLanes |= child$100.lanes | child$100.childLanes),
+        (subtreeFlags |= child$100.subtreeFlags),
+        (subtreeFlags |= child$100.flags),
+        (child$100.return = completedWork),
+        (child$100 = child$100.sibling);
   completedWork.subtreeFlags |= subtreeFlags;
   completedWork.childLanes = newChildLanes;
   return didBailout;
@@ -6958,8 +7001,8 @@ function safelyDetachRef(current, nearestMountedAncestor) {
     else if ("function" === typeof ref)
       try {
         ref(null);
-      } catch (error$126) {
-        captureCommitPhaseError(current, nearestMountedAncestor, error$126);
+      } catch (error$129) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error$129);
       }
     else ref.current = null;
 }
@@ -6996,7 +7039,7 @@ function commitBeforeMutationEffects(root, firstChild) {
           selection = selection.focusOffset;
           try {
             JSCompiler_temp.nodeType, focusNode.nodeType;
-          } catch (e$191) {
+          } catch (e$194) {
             JSCompiler_temp = null;
             break a;
           }
@@ -7275,11 +7318,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
               current,
               finishedRoot.__reactInternalSnapshotBeforeUpdate
             );
-          } catch (error$128) {
+          } catch (error$131) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$128
+              error$131
             );
           }
         }
@@ -7959,8 +8002,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         }
         try {
           commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-        } catch (error$141) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$141);
+        } catch (error$144) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$144);
         }
       }
       break;
@@ -8129,20 +8172,24 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         )
           try {
             var domElement = finishedWork.stateNode,
+              type = finishedWork.type,
+              oldProps = current.memoizedProps,
               newProps = finishedWork.memoizedProps;
-            updateProperties(
-              domElement,
-              flags,
-              finishedWork.type,
-              current.memoizedProps,
-              newProps
-            );
+            diffInCommitPhase
+              ? updateProperties(domElement, type, oldProps, newProps)
+              : updatePropertiesWithDiff(
+                  domElement,
+                  flags,
+                  type,
+                  oldProps,
+                  newProps
+                );
             domElement[internalPropsKey] = newProps;
-          } catch (error$142) {
+          } catch (error$145) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$142
+              error$145
             );
           }
       break;
@@ -8178,8 +8225,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         root = finishedWork.stateNode;
         try {
           setTextContent(root, "");
-        } catch (error$143) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$143);
+        } catch (error$146) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$146);
         }
       }
       if (
@@ -8191,13 +8238,21 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
           (hoistableRoot = finishedWork.type),
           (maybeNodes = finishedWork.updateQueue),
           (finishedWork.updateQueue = null),
-          null !== maybeNodes))
+          null !== maybeNodes || diffInCommitPhase))
       )
         try {
-          updateProperties(flags, maybeNodes, hoistableRoot, current, root),
+          diffInCommitPhase
+            ? updateProperties(flags, hoistableRoot, current, root)
+            : updatePropertiesWithDiff(
+                flags,
+                maybeNodes,
+                hoistableRoot,
+                current,
+                root
+              ),
             (flags[internalPropsKey] = root);
-        } catch (error$146) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$146);
+        } catch (error$149) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$149);
         }
       break;
     case 6:
@@ -8210,8 +8265,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         flags = finishedWork.memoizedProps;
         try {
           current.nodeValue = flags;
-        } catch (error$147) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$147);
+        } catch (error$150) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$150);
         }
       }
       break;
@@ -8225,8 +8280,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
       if (flags & 4 && null !== current && current.memoizedState.isDehydrated)
         try {
           retryIfBlockedOn(root.containerInfo);
-        } catch (error$148) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$148);
+        } catch (error$151) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$151);
         }
       break;
     case 4:
@@ -8256,8 +8311,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               null !== retryQueue && suspenseCallback(new Set(retryQueue));
             }
           }
-        } catch (error$150) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$150);
+        } catch (error$153) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$153);
         }
         current = finishedWork.updateQueue;
         null !== current &&
@@ -8270,15 +8325,15 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         null !== current &&
         safelyDetachRef(current, current.return);
       domElement = null !== finishedWork.memoizedState;
-      newProps = null !== current && null !== current.memoizedState;
+      type = null !== current && null !== current.memoizedState;
       finishedWork.mode & 1
-        ? ((suspenseCallback = offscreenSubtreeIsHidden),
-          (retryQueue = offscreenSubtreeWasHidden),
-          (offscreenSubtreeIsHidden = suspenseCallback || domElement),
-          (offscreenSubtreeWasHidden = retryQueue || newProps),
+        ? ((oldProps = offscreenSubtreeIsHidden),
+          (newProps = offscreenSubtreeWasHidden),
+          (offscreenSubtreeIsHidden = oldProps || domElement),
+          (offscreenSubtreeWasHidden = newProps || type),
           recursivelyTraverseMutationEffects(root, finishedWork),
-          (offscreenSubtreeWasHidden = retryQueue),
-          (offscreenSubtreeIsHidden = suspenseCallback))
+          (offscreenSubtreeWasHidden = newProps),
+          (offscreenSubtreeIsHidden = oldProps))
         : recursivelyTraverseMutationEffects(root, finishedWork);
       commitReconciliationEffects(finishedWork);
       root = finishedWork.stateNode;
@@ -8293,7 +8348,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         domElement &&
           ((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden),
           null === current ||
-            newProps ||
+            type ||
             root ||
             (0 !== (finishedWork.mode & 1) &&
               recursivelyTraverseDisappearLayoutEffects(finishedWork))),
@@ -8335,11 +8390,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
             if (null === current)
               try {
                 root.stateNode.nodeValue = domElement ? "" : root.memoizedProps;
-              } catch (error$131) {
+              } catch (error$134) {
                 captureCommitPhaseError(
                   finishedWork,
                   finishedWork.return,
-                  error$131
+                  error$134
                 );
               }
           } else if (
@@ -8414,21 +8469,21 @@ function commitReconciliationEffects(finishedWork) {
             insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0);
             break;
           case 5:
-            var parent$132 = JSCompiler_inline_result.stateNode;
+            var parent$135 = JSCompiler_inline_result.stateNode;
             JSCompiler_inline_result.flags & 32 &&
-              (setTextContent(parent$132, ""),
+              (setTextContent(parent$135, ""),
               (JSCompiler_inline_result.flags &= -33));
-            var before$133 = getHostSibling(finishedWork);
-            insertOrAppendPlacementNode(finishedWork, before$133, parent$132);
+            var before$136 = getHostSibling(finishedWork);
+            insertOrAppendPlacementNode(finishedWork, before$136, parent$135);
             break;
           case 3:
           case 4:
-            var parent$134 = JSCompiler_inline_result.stateNode.containerInfo,
-              before$135 = getHostSibling(finishedWork);
+            var parent$137 = JSCompiler_inline_result.stateNode.containerInfo,
+              before$138 = getHostSibling(finishedWork);
             insertOrAppendPlacementNodeIntoContainer(
               finishedWork,
-              before$135,
-              parent$134
+              before$138,
+              parent$137
             );
             break;
           default:
@@ -8898,9 +8953,9 @@ function recursivelyTraverseReconnectPassiveEffects(
           );
         break;
       case 22:
-        var instance$160 = finishedWork.stateNode;
+        var instance$163 = finishedWork.stateNode;
         null !== finishedWork.memoizedState
-          ? instance$160._visibility & 4
+          ? instance$163._visibility & 4
             ? recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -8913,7 +8968,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork
               )
-            : ((instance$160._visibility |= 4),
+            : ((instance$163._visibility |= 4),
               recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -8921,7 +8976,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 committedTransitions,
                 includeWorkInProgressEffects
               ))
-          : ((instance$160._visibility |= 4),
+          : ((instance$163._visibility |= 4),
             recursivelyTraverseReconnectPassiveEffects(
               finishedRoot,
               finishedWork,
@@ -8934,7 +8989,7 @@ function recursivelyTraverseReconnectPassiveEffects(
           commitOffscreenPassiveMountEffects(
             finishedWork.alternate,
             finishedWork,
-            instance$160
+            instance$163
           );
         break;
       case 24:
@@ -9475,13 +9530,13 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
     isFlushingWork = !0;
     do {
       var didPerformSomeWork = !1;
-      for (var root$169 = firstScheduledRoot; null !== root$169; ) {
+      for (var root$172 = firstScheduledRoot; null !== root$172; ) {
         if (
-          (!onlyLegacy || 0 === root$169.tag) &&
+          (!onlyLegacy || 0 === root$172.tag) &&
           0 !==
             (getNextLanes(
-              root$169,
-              root$169 === workInProgressRoot$jscomp$0
+              root$172,
+              root$172 === workInProgressRoot$jscomp$0
                 ? workInProgressRootRenderLanes$jscomp$0
                 : 0
             ) &
@@ -9489,7 +9544,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
         )
           try {
             didPerformSomeWork = !0;
-            var root = root$169;
+            var root = root$172;
             if (0 !== (executionContext & 6))
               throw Error(formatProdErrorMessage(327));
             flushPassiveEffects();
@@ -9532,7 +9587,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) {
           } catch (error) {
             null === errors ? (errors = [error]) : errors.push(error);
           }
-        root$169 = root$169.next;
+        root$172 = root$172.next;
       }
     } while (didPerformSomeWork);
     isFlushingWork = !1;
@@ -9858,16 +9913,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         exitStatus = renderRootSync(root, lanes);
         if (2 === exitStatus) {
           errorRetryLanes = lanes;
-          var errorRetryLanes$172 = getLanesToRetrySynchronouslyOnError(
+          var errorRetryLanes$175 = getLanesToRetrySynchronouslyOnError(
             root,
             errorRetryLanes
           );
-          0 !== errorRetryLanes$172 &&
-            ((lanes = errorRetryLanes$172),
+          0 !== errorRetryLanes$175 &&
+            ((lanes = errorRetryLanes$175),
             (exitStatus = recoverFromConcurrentError(
               root,
               errorRetryLanes,
-              errorRetryLanes$172
+              errorRetryLanes$175
             )));
         }
         if (1 === exitStatus)
@@ -9928,14 +9983,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
           if ((lanes & 8388480) === lanes) break;
           exitStatus = lanes;
           errorRetryLanes = root.eventTimes;
-          for (errorRetryLanes$172 = -1; 0 < exitStatus; ) {
+          for (errorRetryLanes$175 = -1; 0 < exitStatus; ) {
             var index$1 = 31 - clz32(exitStatus),
               lane = 1 << index$1;
             index$1 = errorRetryLanes[index$1];
-            index$1 > errorRetryLanes$172 && (errorRetryLanes$172 = index$1);
+            index$1 > errorRetryLanes$175 && (errorRetryLanes$175 = index$1);
             exitStatus &= ~lane;
           }
-          exitStatus = errorRetryLanes$172;
+          exitStatus = errorRetryLanes$175;
           exitStatus = now() - exitStatus;
           exitStatus =
             (120 > exitStatus
@@ -10267,8 +10322,8 @@ function renderRootSync(root, lanes) {
       }
       workLoopSync();
       break;
-    } catch (thrownValue$175) {
-      handleThrow(root, thrownValue$175);
+    } catch (thrownValue$178) {
+      handleThrow(root, thrownValue$178);
     }
   while (1);
   resetContextDependencies();
@@ -10374,8 +10429,8 @@ function renderRootConcurrent(root, lanes) {
       }
       workLoopConcurrent();
       break;
-    } catch (thrownValue$177) {
-      handleThrow(root, thrownValue$177);
+    } catch (thrownValue$180) {
+      handleThrow(root, thrownValue$180);
     }
   while (1);
   resetContextDependencies();
@@ -10538,10 +10593,10 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) {
                       };
                       suspenseBoundary.updateQueue = newOffscreenQueue;
                     } else {
-                      var retryQueue$53 = offscreenQueue.retryQueue;
-                      null === retryQueue$53
+                      var retryQueue$56 = offscreenQueue.retryQueue;
+                      null === retryQueue$56
                         ? (offscreenQueue.retryQueue = new Set([wakeable]))
-                        : retryQueue$53.add(wakeable);
+                        : retryQueue$56.add(wakeable);
                     }
                   }
                   break;
@@ -10738,12 +10793,12 @@ function commitRootImpl(
     var prevExecutionContext = executionContext;
     executionContext |= 4;
     ReactCurrentOwner.current = null;
-    var shouldFireAfterActiveInstanceBlur$181 = commitBeforeMutationEffects(
+    var shouldFireAfterActiveInstanceBlur$184 = commitBeforeMutationEffects(
       root,
       finishedWork
     );
     commitMutationEffectsOnFiber(finishedWork, root);
-    shouldFireAfterActiveInstanceBlur$181 &&
+    shouldFireAfterActiveInstanceBlur$184 &&
       ((_enabled = !0),
       dispatchAfterDetachedBlur(selectionInformation.focusedElem),
       (_enabled = !1));
@@ -10822,7 +10877,7 @@ function releaseRootPooledCache(root, remainingLanes) {
 }
 function flushPassiveEffects() {
   if (null !== rootWithPendingPassiveEffects) {
-    var root$182 = rootWithPendingPassiveEffects,
+    var root$185 = rootWithPendingPassiveEffects,
       remainingLanes = pendingPassiveEffectsRemainingLanes;
     pendingPassiveEffectsRemainingLanes = 0;
     var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
@@ -10838,7 +10893,7 @@ function flushPassiveEffects() {
     } finally {
       (currentUpdatePriority = previousPriority),
         (ReactCurrentBatchConfig$1.transition = prevTransition),
-        releaseRootPooledCache(root$182, remainingLanes);
+        releaseRootPooledCache(root$185, remainingLanes);
     }
   }
   return !1;
@@ -12027,12 +12082,12 @@ function updateContainer(element, container, parentComponent, callback) {
 function attemptSynchronousHydration(fiber) {
   switch (fiber.tag) {
     case 3:
-      var root$184 = fiber.stateNode;
-      if (root$184.current.memoizedState.isDehydrated) {
-        var lanes = getHighestPriorityLanes(root$184.pendingLanes);
+      var root$187 = fiber.stateNode;
+      if (root$187.current.memoizedState.isDehydrated) {
+        var lanes = getHighestPriorityLanes(root$187.pendingLanes);
         0 !== lanes &&
-          (markRootEntangled(root$184, lanes | 2),
-          ensureRootIsScheduled(root$184),
+          (markRootEntangled(root$187, lanes | 2),
+          ensureRootIsScheduled(root$187),
           0 === (executionContext & 6) &&
             ((workInProgressRootRenderTargetTime = now() + 500),
             flushSyncWorkAcrossRoots_impl(!1)));
@@ -13124,19 +13179,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$331;
+  var JSCompiler_inline_result$jscomp$368;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1578 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1578) {
-      var element$jscomp$inline_1579 = document.createElement("div");
-      element$jscomp$inline_1579.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1578 =
-        "function" === typeof element$jscomp$inline_1579.oninput;
+    var isSupported$jscomp$inline_1622 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1622) {
+      var element$jscomp$inline_1623 = document.createElement("div");
+      element$jscomp$inline_1623.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1622 =
+        "function" === typeof element$jscomp$inline_1623.oninput;
     }
-    JSCompiler_inline_result$jscomp$331 = isSupported$jscomp$inline_1578;
-  } else JSCompiler_inline_result$jscomp$331 = !1;
+    JSCompiler_inline_result$jscomp$368 = isSupported$jscomp$inline_1622;
+  } else JSCompiler_inline_result$jscomp$368 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$331 &&
+    JSCompiler_inline_result$jscomp$368 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -13445,20 +13500,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1619 = 0;
-  i$jscomp$inline_1619 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1619++
+  var i$jscomp$inline_1663 = 0;
+  i$jscomp$inline_1663 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1663++
 ) {
-  var eventName$jscomp$inline_1620 =
-      simpleEventPluginEvents[i$jscomp$inline_1619],
-    domEventName$jscomp$inline_1621 =
-      eventName$jscomp$inline_1620.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1622 =
-      eventName$jscomp$inline_1620[0].toUpperCase() +
-      eventName$jscomp$inline_1620.slice(1);
+  var eventName$jscomp$inline_1664 =
+      simpleEventPluginEvents[i$jscomp$inline_1663],
+    domEventName$jscomp$inline_1665 =
+      eventName$jscomp$inline_1664.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1666 =
+      eventName$jscomp$inline_1664[0].toUpperCase() +
+      eventName$jscomp$inline_1664.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1621,
-    "on" + capitalizedEvent$jscomp$inline_1622
+    domEventName$jscomp$inline_1665,
+    "on" + capitalizedEvent$jscomp$inline_1666
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -14290,7 +14345,7 @@ function normalizeMarkupForTextOrAttribute(markup) {
     .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, "");
 }
 function noop$1() {}
-function setProp(domElement, tag, key, value, props) {
+function setProp(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "children":
       "string" === typeof value
@@ -14315,7 +14370,7 @@ function setProp(domElement, tag, key, value, props) {
       setValueForKnownAttribute(domElement, key, value);
       break;
     case "style":
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     case "src":
     case "href":
@@ -14531,6 +14586,9 @@ function setProp(domElement, tag, key, value, props) {
         value
       );
       break;
+    case "is":
+      setValueForAttribute(domElement, "is", value);
+      break;
     case "innerText":
     case "textContent":
       if (enableCustomElementPropertySupport) break;
@@ -14544,10 +14602,10 @@ function setProp(domElement, tag, key, value, props) {
           setValueForAttribute(domElement, key, value);
   }
 }
-function setPropOnCustomElement(domElement, tag, key, value, props) {
+function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) {
   switch (key) {
     case "style":
-      setValueForStyles(domElement, value);
+      setValueForStyles(domElement, value, prevValue);
       break;
     case "dangerouslySetInnerHTML":
       if (null != value) {
@@ -14585,23 +14643,25 @@ function setPropOnCustomElement(domElement, tag, key, value, props) {
         if (enableCustomElementPropertySupport)
           a: {
             props = value;
-            if ("o" === key[0] && "n" === key[1]) {
-              tag = key.endsWith("Capture");
-              value = key.substr(2, tag ? key.length - 9 : void 0);
-              var prevProps = getFiberCurrentPropsFromNode(domElement);
-              prevProps = null != prevProps ? prevProps[key] : null;
-              "function" === typeof prevProps &&
-                domElement.removeEventListener(value, prevProps, tag);
-              if ("function" === typeof props) {
-                "function" !== typeof prevProps &&
-                  null !== prevProps &&
-                  (key in domElement
-                    ? (domElement[key] = null)
-                    : domElement.hasAttribute(key) &&
-                      domElement.removeAttribute(key));
-                domElement.addEventListener(value, props, tag);
-                break a;
-              }
+            if (
+              "o" === key[0] &&
+              "n" === key[1] &&
+              ((tag = key.endsWith("Capture")),
+              (value = key.substr(2, tag ? key.length - 9 : void 0)),
+              (prevValue = getFiberCurrentPropsFromNode(domElement)),
+              (prevValue = null != prevValue ? prevValue[key] : null),
+              "function" === typeof prevValue &&
+                domElement.removeEventListener(value, prevValue, tag),
+              "function" === typeof props)
+            ) {
+              "function" !== typeof prevValue &&
+                null !== prevValue &&
+                (key in domElement
+                  ? (domElement[key] = null)
+                  : domElement.hasAttribute(key) &&
+                    domElement.removeAttribute(key));
+              domElement.addEventListener(value, props, tag);
+              break a;
             }
             key in domElement
               ? (domElement[key] = props)
@@ -14655,7 +14715,7 @@ function setInitialProperties(domElement, tag, props) {
                   throw Error(formatProdErrorMessage(137, tag));
                 break;
               default:
-                setProp(domElement, tag, propKey, propValue, props);
+                setProp(domElement, tag, propKey, propValue, props, null);
             }
         }
       track(domElement);
@@ -14663,16 +14723,16 @@ function setInitialProperties(domElement, tag, props) {
       return;
     case "select":
       listenToNonDelegatedEvent("invalid", domElement);
-      for (var propKey$201 in props)
+      for (var propKey$204 in props)
         if (
-          props.hasOwnProperty(propKey$201) &&
-          ((propKey = props[propKey$201]), null != propKey)
+          props.hasOwnProperty(propKey$204) &&
+          ((propKey = props[propKey$204]), null != propKey)
         )
-          switch (propKey$201) {
+          switch (propKey$204) {
             case "value":
               break;
             default:
-              setProp(domElement, tag, propKey$201, propKey, props);
+              setProp(domElement, tag, propKey$204, propKey, props, null);
           }
       domElement.multiple = !!props.multiple;
       tag = props.value;
@@ -14683,12 +14743,12 @@ function setInitialProperties(domElement, tag, props) {
       return;
     case "textarea":
       listenToNonDelegatedEvent("invalid", domElement);
-      for (var propKey$203 in props)
+      for (var propKey$206 in props)
         if (
-          props.hasOwnProperty(propKey$203) &&
-          ((propKey = props[propKey$203]), null != propKey)
+          props.hasOwnProperty(propKey$206) &&
+          ((propKey = props[propKey$206]), null != propKey)
         )
-          switch (propKey$203) {
+          switch (propKey$206) {
             case "value":
               break;
             case "children":
@@ -14697,18 +14757,18 @@ function setInitialProperties(domElement, tag, props) {
               if (null != propKey) throw Error(formatProdErrorMessage(91));
               break;
             default:
-              setProp(domElement, tag, propKey$203, propKey, props);
+              setProp(domElement, tag, propKey$206, propKey, props);
           }
       track(domElement);
       initTextarea(domElement, props);
       return;
     case "option":
-      for (var propKey$205 in props)
+      for (var propKey$208 in props)
         if (
-          props.hasOwnProperty(propKey$205) &&
-          ((propKey = props[propKey$205]), null != propKey)
+          props.hasOwnProperty(propKey$208) &&
+          ((propKey = props[propKey$208]), null != propKey)
         )
-          switch (propKey$205) {
+          switch (propKey$208) {
             case "selected":
               domElement.selected =
                 propKey &&
@@ -14716,7 +14776,7 @@ function setInitialProperties(domElement, tag, props) {
                 "symbol" !== typeof propKey;
               break;
             default:
-              setProp(domElement, tag, propKey$205, propKey, props);
+              setProp(domElement, tag, propKey$208, propKey, props);
           }
       null != props.value &&
         domElement.setAttribute("value", "" + getToStringValue(props.value));
@@ -14758,31 +14818,32 @@ function setInitialProperties(domElement, tag, props) {
     case "track":
     case "wbr":
     case "menuitem":
-      for (var propKey$207 in props)
+      for (var propKey$210 in props)
         if (
-          props.hasOwnProperty(propKey$207) &&
-          ((propKey = props[propKey$207]), null != propKey)
+          props.hasOwnProperty(propKey$210) &&
+          ((propKey = props[propKey$210]), null != propKey)
         )
-          switch (propKey$207) {
+          switch (propKey$210) {
             case "children":
             case "dangerouslySetInnerHTML":
               throw Error(formatProdErrorMessage(137, tag));
             default:
-              setProp(domElement, tag, propKey$207, propKey, props);
+              setProp(domElement, tag, propKey$210, propKey, props, null);
           }
       return;
     default:
       if (isCustomElement(tag)) {
-        for (var propKey$209 in props)
-          props.hasOwnProperty(propKey$209) &&
-            ((propKey = props[propKey$209]),
+        for (var propKey$212 in props)
+          props.hasOwnProperty(propKey$212) &&
+            ((propKey = props[propKey$212]),
             null != propKey &&
               setPropOnCustomElement(
                 domElement,
                 tag,
-                propKey$209,
+                propKey$212,
                 propKey,
-                props
+                props,
+                null
               ));
         return;
       }
@@ -14790,9 +14851,317 @@ function setInitialProperties(domElement, tag, props) {
   for (propValue in props)
     props.hasOwnProperty(propValue) &&
       ((propKey = props[propValue]),
-      null != propKey && setProp(domElement, tag, propValue, propKey, props));
+      null != propKey &&
+        setProp(domElement, tag, propValue, propKey, props, null));
 }
-function updateProperties(
+function updateProperties(domElement, tag, lastProps, nextProps) {
+  switch (tag) {
+    case "div":
+    case "span":
+    case "svg":
+    case "path":
+    case "a":
+    case "g":
+    case "p":
+    case "li":
+      break;
+    case "input":
+      "radio" === nextProps.type &&
+        null != nextProps.name &&
+        updateInputChecked(domElement, nextProps);
+      for (var propKey in lastProps) {
+        var lastProp = lastProps[propKey];
+        if (
+          lastProps.hasOwnProperty(propKey) &&
+          null != lastProp &&
+          !nextProps.hasOwnProperty(propKey)
+        )
+          switch (propKey) {
+            case "checked":
+              lastProp = nextProps.defaultChecked;
+              domElement.checked =
+                !!lastProp &&
+                "function" !== typeof lastProp &&
+                "symbol" !== lastProp;
+              break;
+            case "value":
+              break;
+            default:
+              setProp(domElement, tag, propKey, null, nextProps, lastProp);
+          }
+      }
+      for (var propKey$216 in nextProps) {
+        lastProp = nextProps[propKey$216];
+        var lastProp$217 = lastProps[propKey$216];
+        if (
+          nextProps.hasOwnProperty(propKey$216) &&
+          lastProp !== lastProp$217 &&
+          (null != lastProp || null != lastProp$217)
+        )
+          switch (propKey$216) {
+            case "checked":
+              lastProp = null != lastProp ? lastProp : nextProps.defaultChecked;
+              domElement.checked =
+                !!lastProp &&
+                "function" !== typeof lastProp &&
+                "symbol" !== lastProp;
+              break;
+            case "value":
+              break;
+            case "children":
+            case "dangerouslySetInnerHTML":
+              if (null != lastProp)
+                throw Error(formatProdErrorMessage(137, tag));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$216,
+                lastProp,
+                nextProps,
+                lastProp$217
+              );
+          }
+      }
+      updateInput(domElement, nextProps);
+      return;
+    case "select":
+      for (var propKey$220 in lastProps)
+        if (
+          ((propKey$216 = lastProps[propKey$220]),
+          lastProps.hasOwnProperty(propKey$220) &&
+            null != propKey$216 &&
+            !nextProps.hasOwnProperty(propKey$220))
+        )
+          switch (propKey$220) {
+            case "value":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$220,
+                null,
+                nextProps,
+                propKey$216
+              );
+          }
+      for (lastProp in nextProps)
+        if (
+          ((propKey$216 = nextProps[lastProp]),
+          (lastProp$217 = lastProps[lastProp]),
+          nextProps.hasOwnProperty(lastProp) &&
+            propKey$216 !== lastProp$217 &&
+            (null != propKey$216 || null != lastProp$217))
+        )
+          switch (lastProp) {
+            case "value":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                lastProp,
+                propKey$216,
+                nextProps,
+                lastProp$217
+              );
+          }
+      updateSelect(domElement, lastProps, nextProps);
+      return;
+    case "textarea":
+      for (var propKey$225 in lastProps)
+        if (
+          ((propKey$216 = lastProps[propKey$225]),
+          lastProps.hasOwnProperty(propKey$225) &&
+            null != propKey$216 &&
+            !nextProps.hasOwnProperty(propKey$225))
+        )
+          switch (propKey$225) {
+            case "value":
+              break;
+            case "children":
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$225,
+                null,
+                nextProps,
+                propKey$216
+              );
+          }
+      for (lastProp$217 in nextProps)
+        if (
+          ((propKey$216 = nextProps[lastProp$217]),
+          (lastProp = lastProps[lastProp$217]),
+          nextProps.hasOwnProperty(lastProp$217) &&
+            propKey$216 !== lastProp &&
+            (null != propKey$216 || null != lastProp))
+        )
+          switch (lastProp$217) {
+            case "value":
+              break;
+            case "children":
+              break;
+            case "dangerouslySetInnerHTML":
+              if (null != propKey$216) throw Error(formatProdErrorMessage(91));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                lastProp$217,
+                propKey$216,
+                nextProps,
+                lastProp
+              );
+          }
+      updateTextarea(domElement, nextProps);
+      return;
+    case "option":
+      for (var propKey$230 in lastProps)
+        if (
+          ((propKey$216 = lastProps[propKey$230]),
+          lastProps.hasOwnProperty(propKey$230) &&
+            null != propKey$216 &&
+            !nextProps.hasOwnProperty(propKey$230))
+        )
+          switch (propKey$230) {
+            case "selected":
+              domElement.selected = !1;
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$230,
+                null,
+                nextProps,
+                propKey$216
+              );
+          }
+      for (var propKey$232 in nextProps)
+        if (
+          ((propKey$216 = nextProps[propKey$232]),
+          (lastProp = lastProps[propKey$232]),
+          nextProps.hasOwnProperty(propKey$232) &&
+            propKey$216 !== lastProp &&
+            (null != propKey$216 || null != lastProp))
+        )
+          switch (propKey$232) {
+            case "selected":
+              domElement.selected =
+                propKey$216 &&
+                "function" !== typeof propKey$216 &&
+                "symbol" !== typeof propKey$216;
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$232,
+                propKey$216,
+                nextProps,
+                lastProp
+              );
+          }
+      return;
+    case "img":
+    case "link":
+    case "area":
+    case "base":
+    case "br":
+    case "col":
+    case "embed":
+    case "hr":
+    case "keygen":
+    case "meta":
+    case "param":
+    case "source":
+    case "track":
+    case "wbr":
+    case "menuitem":
+      for (var propKey$235 in lastProps)
+        (propKey$216 = lastProps[propKey$235]),
+          lastProps.hasOwnProperty(propKey$235) &&
+            null != propKey$216 &&
+            !nextProps.hasOwnProperty(propKey$235) &&
+            setProp(domElement, tag, propKey$235, null, nextProps, propKey$216);
+      for (var propKey$237 in nextProps)
+        if (
+          ((propKey$216 = nextProps[propKey$237]),
+          (lastProp = lastProps[propKey$237]),
+          nextProps.hasOwnProperty(propKey$237) &&
+            propKey$216 !== lastProp &&
+            (null != propKey$216 || null != lastProp))
+        )
+          switch (propKey$237) {
+            case "children":
+            case "dangerouslySetInnerHTML":
+              if (null != propKey$216)
+                throw Error(formatProdErrorMessage(137, tag));
+              break;
+            default:
+              setProp(
+                domElement,
+                tag,
+                propKey$237,
+                propKey$216,
+                nextProps,
+                lastProp
+              );
+          }
+      return;
+    default:
+      if (isCustomElement(tag)) {
+        for (var propKey$240 in lastProps)
+          (propKey$216 = lastProps[propKey$240]),
+            lastProps.hasOwnProperty(propKey$240) &&
+              null != propKey$216 &&
+              !nextProps.hasOwnProperty(propKey$240) &&
+              setPropOnCustomElement(
+                domElement,
+                tag,
+                propKey$240,
+                null,
+                nextProps,
+                propKey$216
+              );
+        for (var propKey$242 in nextProps)
+          (propKey$216 = nextProps[propKey$242]),
+            (lastProp = lastProps[propKey$242]),
+            !nextProps.hasOwnProperty(propKey$242) ||
+              propKey$216 === lastProp ||
+              (null == propKey$216 && null == lastProp) ||
+              setPropOnCustomElement(
+                domElement,
+                tag,
+                propKey$242,
+                propKey$216,
+                nextProps,
+                lastProp
+              );
+        return;
+      }
+  }
+  for (var propKey$245 in lastProps)
+    (propKey$216 = lastProps[propKey$245]),
+      lastProps.hasOwnProperty(propKey$245) &&
+        null != propKey$216 &&
+        !nextProps.hasOwnProperty(propKey$245) &&
+        setProp(domElement, tag, propKey$245, null, nextProps, propKey$216);
+  for (var propKey$247 in nextProps)
+    (propKey$216 = nextProps[propKey$247]),
+      (lastProp = lastProps[propKey$247]),
+      !nextProps.hasOwnProperty(propKey$247) ||
+        propKey$216 === lastProp ||
+        (null == propKey$216 && null == lastProp) ||
+        setProp(domElement, tag, propKey$247, propKey$216, nextProps, lastProp);
+}
+function updatePropertiesWithDiff(
   domElement,
   updatePayload,
   tag,
@@ -14832,7 +15201,7 @@ function updateProperties(
               throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       }
       updateInput(domElement, nextProps);
@@ -14840,32 +15209,15 @@ function updateProperties(
     case "select":
       for (propKey = 0; propKey < updatePayload.length; propKey += 2) {
         propValue = updatePayload[propKey];
-        var propValue$215 = updatePayload[propKey + 1];
+        var propValue$252 = updatePayload[propKey + 1];
         switch (propValue) {
           case "value":
             break;
           default:
-            setProp(domElement, tag, propValue, propValue$215, nextProps);
+            setProp(domElement, tag, propValue, propValue$252, nextProps, null);
         }
       }
-      updatePayload = !!lastProps.multiple;
-      tag = nextProps.value;
-      null != tag
-        ? updateOptions(domElement, !!nextProps.multiple, tag, !1)
-        : updatePayload !== !!nextProps.multiple &&
-          (null != nextProps.defaultValue
-            ? updateOptions(
-                domElement,
-                !!nextProps.multiple,
-                nextProps.defaultValue,
-                !0
-              )
-            : updateOptions(
-                domElement,
-                !!nextProps.multiple,
-                nextProps.multiple ? [] : "",
-                !1
-              ));
+      updateSelect(domElement, lastProps, nextProps);
       return;
     case "textarea":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
@@ -14882,7 +15234,7 @@ function updateProperties(
             if (null != propValue) throw Error(formatProdErrorMessage(91));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       updateTextarea(domElement, nextProps);
       return;
@@ -14900,7 +15252,7 @@ function updateProperties(
               "symbol" !== typeof propValue;
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       return;
     case "img":
@@ -14930,7 +15282,7 @@ function updateProperties(
               throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propKey, propValue, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps, null);
         }
       return;
     default:
@@ -14941,7 +15293,8 @@ function updateProperties(
             tag,
             updatePayload[lastProps],
             updatePayload[lastProps + 1],
-            nextProps
+            nextProps,
+            null
           );
         return;
       }
@@ -14952,7 +15305,8 @@ function updateProperties(
       tag,
       updatePayload[lastProps],
       updatePayload[lastProps + 1],
-      nextProps
+      nextProps,
+      null
     );
 }
 var Dispatcher$1 = Internals.Dispatcher,
@@ -15326,14 +15680,14 @@ function preinit$1(href, options) {
       switch (as) {
         case "style":
           as = getResourcesFromRoot(resourceRoot).hoistableStyles;
-          var key$232 = getStyleKey(href),
+          var key$269 = getStyleKey(href),
             precedence = options.precedence || "default",
-            resource = as.get(key$232);
+            resource = as.get(key$269);
           if (resource) break;
           var state = { loading: 0, preload: null };
           if (
             (resource = resourceRoot.querySelector(
-              getStylesheetSelectorFromKey(key$232)
+              getStylesheetSelectorFromKey(key$269)
             ))
           )
             state.loading = 1;
@@ -15344,7 +15698,7 @@ function preinit$1(href, options) {
               "data-precedence": precedence,
               crossOrigin: options.crossOrigin
             };
-            (options = preloadPropsMap.get(key$232)) &&
+            (options = preloadPropsMap.get(key$269)) &&
               adoptPreloadPropsForStylesheet(href, options);
             var link = (resource = (
               resourceRoot.ownerDocument || resourceRoot
@@ -15370,15 +15724,15 @@ function preinit$1(href, options) {
             count: 1,
             state: state
           };
-          as.set(key$232, resource);
+          as.set(key$269, resource);
           break;
         case "script":
           (as = getResourcesFromRoot(resourceRoot).hoistableScripts),
-            (key$232 = getScriptKey(href)),
-            (precedence = as.get(key$232)),
+            (key$269 = getScriptKey(href)),
+            (precedence = as.get(key$269)),
             precedence ||
               ((precedence = resourceRoot.querySelector(
-                "script[async]" + key$232
+                "script[async]" + key$269
               )),
               precedence ||
                 ((href = {
@@ -15387,7 +15741,7 @@ function preinit$1(href, options) {
                   crossOrigin: options.crossOrigin,
                   integrity: options.integrity
                 }),
-                (options = preloadPropsMap.get(key$232)) &&
+                (options = preloadPropsMap.get(key$269)) &&
                   adoptPreloadPropsForScript(href, options),
                 (options = resourceRoot.ownerDocument || resourceRoot),
                 (precedence = options.createElement("script")),
@@ -15400,13 +15754,13 @@ function preinit$1(href, options) {
                 count: 1,
                 state: null
               }),
-              as.set(key$232, precedence));
+              as.set(key$269, precedence));
       }
     else if ("style" === as || "script" === as)
       if ((resourceRoot = getDocumentForPreloads())) {
-        key$232 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
-        precedence = key$232 =
-          'link[rel="preload"][as="' + as + '"][href="' + key$232 + '"]';
+        key$269 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
+        precedence = key$269 =
+          'link[rel="preload"][as="' + as + '"][href="' + key$269 + '"]';
         switch (as) {
           case "style":
             precedence = getStyleKey(href);
@@ -15423,7 +15777,7 @@ function preinit$1(href, options) {
             integrity: options.integrity
           }),
           preloadPropsMap.set(precedence, href),
-          null === resourceRoot.querySelector(key$232) &&
+          null === resourceRoot.querySelector(key$269) &&
             ((options = resourceRoot.createElement("link")),
             setInitialProperties(options, "link", href),
             markNodeAsHoistable(options),
@@ -15456,17 +15810,17 @@ function getResource(type, currentProps, pendingProps) {
         "string" === typeof pendingProps.precedence
       ) {
         type = getStyleKey(pendingProps.href);
-        var styles$241 = getResourcesFromRoot(currentProps).hoistableStyles,
-          resource$242 = styles$241.get(type);
-        resource$242 ||
+        var styles$278 = getResourcesFromRoot(currentProps).hoistableStyles,
+          resource$279 = styles$278.get(type);
+        resource$279 ||
           ((currentProps = currentProps.ownerDocument || currentProps),
-          (resource$242 = {
+          (resource$279 = {
             type: "stylesheet",
             instance: null,
             count: 0,
             state: { loading: 0, preload: null }
           }),
-          styles$241.set(type, resource$242),
+          styles$278.set(type, resource$279),
           preloadPropsMap.has(type) ||
             preloadStylesheet(
               currentProps,
@@ -15481,9 +15835,9 @@ function getResource(type, currentProps, pendingProps) {
                 hrefLang: pendingProps.hrefLang,
                 referrerPolicy: pendingProps.referrerPolicy
               },
-              resource$242.state
+              resource$279.state
             ));
-        return resource$242;
+        return resource$279;
       }
       return null;
     case "script":
@@ -15555,36 +15909,36 @@ function acquireResource(hoistableRoot, resource, props) {
         return (resource.instance = key);
       case "stylesheet":
         styleProps = getStyleKey(props.href);
-        var instance$247 = hoistableRoot.querySelector(
+        var instance$284 = hoistableRoot.querySelector(
           getStylesheetSelectorFromKey(styleProps)
         );
-        if (instance$247)
+        if (instance$284)
           return (
-            (resource.instance = instance$247),
-            markNodeAsHoistable(instance$247),
-            instance$247
+            (resource.instance = instance$284),
+            markNodeAsHoistable(instance$284),
+            instance$284
           );
         key = stylesheetPropsFromRawProps(props);
         (styleProps = preloadPropsMap.get(styleProps)) &&
           adoptPreloadPropsForStylesheet(key, styleProps);
-        instance$247 = (
+        instance$284 = (
           hoistableRoot.ownerDocument || hoistableRoot
         ).createElement("link");
-        markNodeAsHoistable(instance$247);
-        var linkInstance = instance$247;
+        markNodeAsHoistable(instance$284);
+        var linkInstance = instance$284;
         linkInstance._p = new Promise(function (resolve, reject) {
           linkInstance.onload = resolve;
           linkInstance.onerror = reject;
         });
-        setInitialProperties(instance$247, "link", key);
+        setInitialProperties(instance$284, "link", key);
         resource.state.loading |= 4;
-        insertStylesheet(instance$247, props.precedence, hoistableRoot);
-        return (resource.instance = instance$247);
+        insertStylesheet(instance$284, props.precedence, hoistableRoot);
+        return (resource.instance = instance$284);
       case "script":
-        instance$247 = getScriptKey(props.src);
+        instance$284 = getScriptKey(props.src);
         if (
           (styleProps = hoistableRoot.querySelector(
-            "script[async]" + instance$247
+            "script[async]" + instance$284
           ))
         )
           return (
@@ -15593,7 +15947,7 @@ function acquireResource(hoistableRoot, resource, props) {
             styleProps
           );
         key = props;
-        if ((styleProps = preloadPropsMap.get(instance$247)))
+        if ((styleProps = preloadPropsMap.get(instance$284)))
           (key = assign({}, props)),
             adoptPreloadPropsForScript(key, styleProps);
         hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot;
@@ -15963,17 +16317,17 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1799 = {
+var devToolsConfig$jscomp$inline_1836 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-0ed50ada",
+  version: "18.3.0-www-modern-82c50b6a",
   rendererPackageName: "react-dom"
 };
-var internals$jscomp$inline_2178 = {
-  bundleType: devToolsConfig$jscomp$inline_1799.bundleType,
-  version: devToolsConfig$jscomp$inline_1799.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1799.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1799.rendererConfig,
+var internals$jscomp$inline_2215 = {
+  bundleType: devToolsConfig$jscomp$inline_1836.bundleType,
+  version: devToolsConfig$jscomp$inline_1836.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1836.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1836.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -15990,26 +16344,26 @@ var internals$jscomp$inline_2178 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1799.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1836.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-0ed50ada"
+  reconcilerVersion: "18.3.0-www-modern-82c50b6a"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2179 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2216 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2179.isDisabled &&
-    hook$jscomp$inline_2179.supportsFiber
+    !hook$jscomp$inline_2216.isDisabled &&
+    hook$jscomp$inline_2216.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2179.inject(
-        internals$jscomp$inline_2178
+      (rendererID = hook$jscomp$inline_2216.inject(
+        internals$jscomp$inline_2215
       )),
-        (injectedHook = hook$jscomp$inline_2179);
+        (injectedHook = hook$jscomp$inline_2216);
     } catch (err) {}
 }
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
@@ -16317,4 +16671,4 @@ exports.unstable_createEventHandle = function (type, options) {
   return eventHandle;
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-modern-0ed50ada";
+exports.version = "18.3.0-www-modern-82c50b6a";
diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js
index 0efc75e3a9d47..f439711f19071 100644
--- a/compiled/facebook-www/ReactTestRenderer-dev.classic.js
+++ b/compiled/facebook-www/ReactTestRenderer-dev.classic.js
@@ -140,6 +140,7 @@ var enableProfilerNestedUpdatePhase = true;
 var createRootStrictEffectsByDefault = false;
 var enableLazyContextPropagation = false;
 var enableLegacyHidden = false;
+var diffInCommitPhase = true; // Flow magic to verify the exports of this file match the original version.
 
 var FunctionComponent = 0;
 var ClassComponent = 1;
@@ -1965,12 +1966,10 @@ function shim() {
 var suspendResource = shim;
 
 var NO_CONTEXT = {};
-var UPDATE_SIGNAL = {};
 var nodeToInstanceMap = new WeakMap();
 
 {
   Object.freeze(NO_CONTEXT);
-  Object.freeze(UPDATE_SIGNAL);
 }
 
 function getPublicInstance(inst) {
@@ -2061,16 +2060,6 @@ function appendInitialChild(parentInstance, child) {
 
   parentInstance.children.push(child);
 }
-function prepareUpdate(
-  testElement,
-  type,
-  oldProps,
-  newProps,
-  rootContainerInstance,
-  hostContext
-) {
-  return UPDATE_SIGNAL;
-}
 function shouldSetTextContent(type, props) {
   return false;
 }
@@ -15193,17 +15182,9 @@ function updateHostComponent(
       // In mutation mode, this is sufficient for a bailout because
       // we won't touch this node even if children changed.
       return;
-    } // If we get updated because one of our children updated, we don't
-    getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host
-    // component is hitting the resume path. Figure out why. Possibly
-    // related to `hidden`.
-
-    var updatePayload = prepareUpdate(); // TODO: Type this specific to this type of component.
-
-    workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
-    // is a new ref we mark this as an update. All the work is done in commitWork.
+    }
 
-    if (updatePayload) {
+    {
       markUpdate(workInProgress);
     }
   }
@@ -18370,7 +18351,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) {
             var _updatePayload = finishedWork.updateQueue;
             finishedWork.updateQueue = null;
 
-            if (_updatePayload !== null) {
+            if (_updatePayload !== null || diffInCommitPhase) {
               try {
                 commitUpdate(
                   _instance2,
@@ -24501,7 +24482,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-ce15662b";
+var ReactVersion = "18.3.0-www-classic-3b456806";
 
 // Might add PROFILE later.
 
diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js
index ccd7ecaeee0ac..ab6da32e17682 100644
--- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js
+++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js
@@ -140,6 +140,7 @@ var enableProfilerNestedUpdatePhase = true;
 var createRootStrictEffectsByDefault = false;
 var enableLazyContextPropagation = false;
 var enableLegacyHidden = false;
+var diffInCommitPhase = true; // Flow magic to verify the exports of this file match the original version.
 
 var FunctionComponent = 0;
 var ClassComponent = 1;
@@ -1965,12 +1966,10 @@ function shim() {
 var suspendResource = shim;
 
 var NO_CONTEXT = {};
-var UPDATE_SIGNAL = {};
 var nodeToInstanceMap = new WeakMap();
 
 {
   Object.freeze(NO_CONTEXT);
-  Object.freeze(UPDATE_SIGNAL);
 }
 
 function getPublicInstance(inst) {
@@ -2061,16 +2060,6 @@ function appendInitialChild(parentInstance, child) {
 
   parentInstance.children.push(child);
 }
-function prepareUpdate(
-  testElement,
-  type,
-  oldProps,
-  newProps,
-  rootContainerInstance,
-  hostContext
-) {
-  return UPDATE_SIGNAL;
-}
 function shouldSetTextContent(type, props) {
   return false;
 }
@@ -15193,17 +15182,9 @@ function updateHostComponent(
       // In mutation mode, this is sufficient for a bailout because
       // we won't touch this node even if children changed.
       return;
-    } // If we get updated because one of our children updated, we don't
-    getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host
-    // component is hitting the resume path. Figure out why. Possibly
-    // related to `hidden`.
-
-    var updatePayload = prepareUpdate(); // TODO: Type this specific to this type of component.
-
-    workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there
-    // is a new ref we mark this as an update. All the work is done in commitWork.
+    }
 
-    if (updatePayload) {
+    {
       markUpdate(workInProgress);
     }
   }
@@ -18370,7 +18351,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) {
             var _updatePayload = finishedWork.updateQueue;
             finishedWork.updateQueue = null;
 
-            if (_updatePayload !== null) {
+            if (_updatePayload !== null || diffInCommitPhase) {
               try {
                 commitUpdate(
                   _instance2,
@@ -24501,7 +24482,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-0ed50ada";
+var ReactVersion = "18.3.0-www-modern-82c50b6a";
 
 // Might add PROFILE later.