diff --git a/.changeset/breezy-cats-heal.md b/.changeset/breezy-cats-heal.md
new file mode 100644
index 0000000000..6e1bc2fa46
--- /dev/null
+++ b/.changeset/breezy-cats-heal.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+fix: createImageBitmap throws DOMException if source is 0 width or height
diff --git a/.changeset/breezy-mice-breathe.md b/.changeset/breezy-mice-breathe.md
new file mode 100644
index 0000000000..b3b564243b
--- /dev/null
+++ b/.changeset/breezy-mice-breathe.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+safely capture BigInt values with the console log plugin"
diff --git a/.changeset/cold-hounds-teach.md b/.changeset/cold-hounds-teach.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/cold-hounds-teach.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/cool-grapes-hug.md b/.changeset/cool-grapes-hug.md
new file mode 100644
index 0000000000..cde43b29ff
--- /dev/null
+++ b/.changeset/cool-grapes-hug.md
@@ -0,0 +1,5 @@
+---
+'rrdom': patch
+---
+
+Support `loop` in `RRMediaElement`
diff --git a/.changeset/dirty-rules-dress.md b/.changeset/dirty-rules-dress.md
new file mode 100644
index 0000000000..19b2070ffc
--- /dev/null
+++ b/.changeset/dirty-rules-dress.md
@@ -0,0 +1,5 @@
+---
+'rrweb-snapshot': minor
+---
+
+Video and Audio elements now also capture `playbackRate`, `muted`, `loop`, `volume`.
diff --git a/.changeset/few-rockets-travel.md b/.changeset/few-rockets-travel.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/few-rockets-travel.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/fluffy-planes-retire.md b/.changeset/fluffy-planes-retire.md
new file mode 100644
index 0000000000..41e9601704
--- /dev/null
+++ b/.changeset/fluffy-planes-retire.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+Feat: Add support for replaying :defined pseudo-class of custom elements
diff --git a/.changeset/friendly-numbers-leave.md b/.changeset/friendly-numbers-leave.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/friendly-numbers-leave.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/gold-apples-joke.md b/.changeset/gold-apples-joke.md
new file mode 100644
index 0000000000..4ad27974b8
--- /dev/null
+++ b/.changeset/gold-apples-joke.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+ref: Avoid unnecessary cloning of objects or arrays
diff --git a/.changeset/hip-worms-relax.md b/.changeset/hip-worms-relax.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/hip-worms-relax.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/lazy-squids-draw.md b/.changeset/lazy-squids-draw.md
new file mode 100644
index 0000000000..45718e4cc8
--- /dev/null
+++ b/.changeset/lazy-squids-draw.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+export the canvasMutation function
diff --git a/.changeset/lemon-lamps-switch.md b/.changeset/lemon-lamps-switch.md
new file mode 100644
index 0000000000..b325dfe252
--- /dev/null
+++ b/.changeset/lemon-lamps-switch.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+export eventWithTime for consumption by typescript code
diff --git a/.changeset/light-fireants-exercise.md b/.changeset/light-fireants-exercise.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/light-fireants-exercise.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/mighty-ads-worry.md b/.changeset/mighty-ads-worry.md
new file mode 100644
index 0000000000..1906ac8945
--- /dev/null
+++ b/.changeset/mighty-ads-worry.md
@@ -0,0 +1,5 @@
+---
+'rrweb': minor
+---
+
+Full overhawl of `video` and `audio` element playback. More robust and fixes lots of bugs related to pausing/playing/skipping/muting/playbackRate etc.
diff --git a/.changeset/mighty-bulldogs-begin.md b/.changeset/mighty-bulldogs-begin.md
new file mode 100644
index 0000000000..b2623ab7c8
--- /dev/null
+++ b/.changeset/mighty-bulldogs-begin.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+Update `vite.config.ts` to account for all potential entry types.
diff --git a/.changeset/silver-pots-sit.md b/.changeset/silver-pots-sit.md
new file mode 100644
index 0000000000..b53a943825
--- /dev/null
+++ b/.changeset/silver-pots-sit.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/types': patch
+---
+
+Add `loop` to `mediaInteractionParam`
diff --git a/.changeset/silver-windows-float.md b/.changeset/silver-windows-float.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/silver-windows-float.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/smart-ears-refuse.md b/.changeset/smart-ears-refuse.md
new file mode 100644
index 0000000000..0aaaabcf0f
--- /dev/null
+++ b/.changeset/smart-ears-refuse.md
@@ -0,0 +1,7 @@
+---
+'rrweb-snapshot': patch
+---
+
+Feat: Add 'isCustom' flag to serialized elements.
+
+This flag is used to indicate whether the element is a custom element or not. This is useful for replaying the :defined pseudo-class of custom elements.
diff --git a/.changeset/smart-geckos-cover.md b/.changeset/smart-geckos-cover.md
new file mode 100644
index 0000000000..a5a0e0f44c
--- /dev/null
+++ b/.changeset/smart-geckos-cover.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+Record `loop` on `<audio>` & `<video>` elements.
diff --git a/.changeset/smooth-papayas-boil.md b/.changeset/smooth-papayas-boil.md
new file mode 100644
index 0000000000..dcf4d36899
--- /dev/null
+++ b/.changeset/smooth-papayas-boil.md
@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Capture stylesheets designated as `rel="preload"`
diff --git a/.changeset/spotty-bees-destroy.md b/.changeset/spotty-bees-destroy.md
new file mode 100644
index 0000000000..08e6f737a7
--- /dev/null
+++ b/.changeset/spotty-bees-destroy.md
@@ -0,0 +1,5 @@
+---
+'rrdom': patch
+---
+
+fix: scrolling may not be applied when fast-forwarding
diff --git a/.changeset/thin-vans-applaud.md b/.changeset/thin-vans-applaud.md
new file mode 100644
index 0000000000..e5d8d32a63
--- /dev/null
+++ b/.changeset/thin-vans-applaud.md
@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Snapshot performance when masking text: Avoid the repeated calls to `closest` when recursing through the DOM
diff --git a/.changeset/three-baboons-bow.md b/.changeset/three-baboons-bow.md
new file mode 100644
index 0000000000..4e419cc2bc
--- /dev/null
+++ b/.changeset/three-baboons-bow.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+fix: protect against missing parentNode
diff --git a/.changeset/tidy-swans-repair.md b/.changeset/tidy-swans-repair.md
new file mode 100644
index 0000000000..c0a2eeb212
--- /dev/null
+++ b/.changeset/tidy-swans-repair.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+🎈 perf(web-extension): conditional check in Player component
diff --git a/.changeset/tiny-candles-whisper.md b/.changeset/tiny-candles-whisper.md
new file mode 100644
index 0000000000..770cb86f51
--- /dev/null
+++ b/.changeset/tiny-candles-whisper.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+🐞 fix(web-extension): typo
diff --git a/.changeset/twenty-goats-kneel.md b/.changeset/twenty-goats-kneel.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/twenty-goats-kneel.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/wise-spiders-jog.md b/.changeset/wise-spiders-jog.md
new file mode 100644
index 0000000000..6bfa0b580a
--- /dev/null
+++ b/.changeset/wise-spiders-jog.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/types': patch
+---
+
+Fix type error when using `"moduleResolution": "NodeNext"`.
diff --git a/.changeset/witty-kids-talk.md b/.changeset/witty-kids-talk.md
new file mode 100644
index 0000000000..4a9d4f000a
--- /dev/null
+++ b/.changeset/witty-kids-talk.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+🐞 fix(web-extension): beforeunload logic
diff --git a/.eslintrc.js b/.eslintrc.js
index 8dac0c2368..6172eedf77 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,5 +21,6 @@ module.exports = {
   plugins: ['@typescript-eslint', 'eslint-plugin-tsdoc', 'jest', 'compat'],
   rules: {
     'tsdoc/syntax': 'warn',
+    '@typescript-eslint/prefer-as-const': 'warn',
   },
 };
diff --git a/.github/workflows/style-check.yml b/.github/workflows/style-check.yml
index 0f2fd01df9..2f628ceea0 100644
--- a/.github/workflows/style-check.yml
+++ b/.github/workflows/style-check.yml
@@ -15,7 +15,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: lts/*
           cache: 'yarn'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
@@ -62,7 +62,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: lts/*
           cache: 'yarn'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: lts/*
           cache: 'yarn'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
diff --git a/README.md b/README.md
index d198499df9..dc2ffef021 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,8 @@ rrweb refers to 'record and replay the web', which is a tool for recording and r
 
 [**🍳 Recipes 🍳**](./docs/recipes/index.md)
 
+[**📺 Presentation:** Hacking the browser to digital twin your users 📺](https://youtu.be/cWxpp9HwLYw)
+
 ## Project Structure
 
 rrweb is mainly composed of 3 parts:
@@ -138,6 +140,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
           alt=""
         />
         <br /><sub><b>Yuyz0112</b></sub>
+        <br /><br />
       </a>
     </td>
     <td align="center">
@@ -148,6 +151,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
           alt=""
         />
         <br /><sub><b>Yun Feng</b></sub>
+        <br /><br />
       </a>
     </td>
     <td align="center">
@@ -158,6 +162,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
           alt=""
         />
         <br /><sub><b>eoghanmurray</b></sub>
+        <br /><br />
       </a>
     </td>
     <td align="center">
@@ -168,6 +173,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
           alt=""
         />
         <br /><sub><b>Juice10</b></sub>
+        <br /><sub>open for rrweb consulting</sub>
       </a>
     </td>
   </tr>
@@ -226,5 +232,20 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
         <img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
       </a>
     </td>
+    <td align="center">
+      <a href="https://gleap.io" target="_blank">
+        <img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://uxwizz.com" target="_blank">
+        <img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://www.howdygo.com" target="_blank">
+        <img style="padding: 8px" alt="Interactive product demos for small marketing teams" width="195px" src="https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg">
+      </a>
+    </td>
   </tr>
 </table>
diff --git a/README.zh_CN.md b/README.zh_CN.md
index ffb90c581d..8e06fa8838 100644
--- a/README.zh_CN.md
+++ b/README.zh_CN.md
@@ -166,5 +166,10 @@ rrweb 主要由 3 部分组成：
         <img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
       </a>
     </td>
+    <td align="center">
+      <a href="https://uxwizz.com" target="_blank">
+        <img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
+      </a>
+    </td>
   </tr>
 </table>
diff --git a/docs/recipes/export-to-video.md b/docs/recipes/export-to-video.md
index 557ad9b0ca..4afc65100d 100644
--- a/docs/recipes/export-to-video.md
+++ b/docs/recipes/export-to-video.md
@@ -4,4 +4,4 @@ The event data recorded by rrweb is a performant, easy to compress, text-based f
 
 But if you really need to convert it into a video format, there are some tools that can do this work.
 
-Use [rrvideo](https://github.com/rrweb-io/rrvideo).
+Use [rrvideo](https://github.com/rrweb-io/rrweb/blob/master/packages/rrvideo/README.md).
diff --git a/docs/recipes/export-to-video.zh_CN.md b/docs/recipes/export-to-video.zh_CN.md
index c18c680b2c..458bf4f3b1 100644
--- a/docs/recipes/export-to-video.zh_CN.md
+++ b/docs/recipes/export-to-video.zh_CN.md
@@ -2,4 +2,4 @@
 
 rrweb 录制的数据是一种高效、易于压缩的文本格式，可以用于像素级的回放。但如果有进一步将录制数据转换为视频的需求，同样可以通过一些工具实现。
 
-使用 [rrvideo](https://github.com/rrweb-io/rrvideo)。
+使用 [rrvideo](https://github.com/rrweb-io/rrweb/blob/master/packages/rrvideo/README.zh_CN.md)。
diff --git a/guide.md b/guide.md
index d7807bf00d..5693b26d29 100644
--- a/guide.md
+++ b/guide.md
@@ -295,26 +295,27 @@ replayer.destroy();
 
 The replayer accepts options as its constructor's second parameter, and it has the following options:
 
-| key                 | default       | description                                                                                                                                                                                                                    |
-| ------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| speed               | 1             | replay speed ratio                                                                                                                                                                                                             |
-| root                | document.body | the root element of replayer                                                                                                                                                                                                   |
-| loadTimeout         | 0             | timeout of loading remote style sheet                                                                                                                                                                                          |
-| skipInactive        | false         | whether to skip inactive time                                                                                                                                                                                                  |
-| showWarning         | true          | whether to print warning messages during replay                                                                                                                                                                                |
-| showDebug           | false         | whether to print debug messages during replay                                                                                                                                                                                  |
-| blockClass          | 'rr-block'    | element with the class name will display as a blocked area                                                                                                                                                                     |
-| liveMode            | false         | whether to enable live mode                                                                                                                                                                                                    |
-| insertStyleRules    | []            | accepts multiple CSS rule string, which will be injected into the replay iframe                                                                                                                                                |
-| triggerFocus        | true          | whether to trigger focus during replay                                                                                                                                                                                         |
-| UNSAFE_replayCanvas | false         | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.**                                                                                                                                |
-| pauseAnimation      | true          | whether to pause CSS animation when the replayer is paused                                                                                                                                                                     |
-| mouseTail           | true          | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
-| unpackFn            | -             | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                                                 |
-| logConfig           | -             | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md)                                                                                                                             |
-| plugins             | []            | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md)                                                                                                                                |
-| useVirtualDom       | true          | whether to use Virtual Dom optimization in the process of skipping to a new point of time                                                                                                                                      |
-| logger              | console       | The logger object used by the replayer to print warnings or errors                                                                                                                                                             |
+| key                     | default       | description                                                                                                                                                                                                                    |
+| ----------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| speed                   | 1             | replay speed ratio                                                                                                                                                                                                             |
+| root                    | document.body | the root element of replayer                                                                                                                                                                                                   |
+| loadTimeout             | 0             | timeout of loading remote style sheet                                                                                                                                                                                          |
+| skipInactive            | false         | whether to skip inactive time                                                                                                                                                                                                  |
+| inactivePeriodThreshold | 10000         | the threshold in milliseconds for what should be considered an inactive period                                                                                                                                                 |
+| showWarning             | true          | whether to print warning messages during replay                                                                                                                                                                                |
+| showDebug               | false         | whether to print debug messages during replay                                                                                                                                                                                  |
+| blockClass              | 'rr-block'    | element with the class name will display as a blocked area                                                                                                                                                                     |
+| liveMode                | false         | whether to enable live mode                                                                                                                                                                                                    |
+| insertStyleRules        | []            | accepts multiple CSS rule string, which will be injected into the replay iframe                                                                                                                                                |
+| triggerFocus            | true          | whether to trigger focus during replay                                                                                                                                                                                         |
+| UNSAFE_replayCanvas     | false         | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.**                                                                                                                                |
+| pauseAnimation          | true          | whether to pause CSS animation when the replayer is paused                                                                                                                                                                     |
+| mouseTail               | true          | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
+| unpackFn                | -             | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                                                 |
+| logConfig               | -             | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md)                                                                                                                             |
+| plugins                 | []            | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md)                                                                                                                                |
+| useVirtualDom           | true          | whether to use Virtual Dom optimization in the process of skipping to a new point of time                                                                                                                                      |
+| logger                  | console       | The logger object used by the replayer to print warnings or errors                                                                                                                                                             |
 
 #### Use rrweb-player
 
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index 28c846c0ac..dda679006c 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -159,7 +159,7 @@ setInterval(save, 10 * 1000);
 | collectFonts             | false              | 是否记录页面中的字体文件                                                                                                                                                              |
 | userTriggeredOnInput     | false              | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495)                                                                                                                  |
 | plugins                  | []                 | 加载插件以获得额外的录制功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md)                                                                                                          |
-| errorHandler             | -                  | 一个可以定制化处理错误的毁掉函数，它的参数是错误对象。如果 rrweb recorder 内部的某些内容抛出错误，则会调用该回调。                                                                    |
+| errorHandler             | -                  | 一个可以定制化处理错误的回调函数，它的参数是错误对象。如果 rrweb recorder 内部的某些内容抛出错误，则会调用该回调。                                                                    |
 
 #### 隐私
 
diff --git a/package.json b/package.json
index 99b66d4fa9..ee49159b91 100644
--- a/package.json
+++ b/package.json
@@ -18,17 +18,17 @@
     "packages/*"
   ],
   "devDependencies": {
-    "@changesets/changelog-github": "^0.4.8",
-    "@changesets/cli": "^2.26.0",
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.1",
     "@monorepo-utils/workspaces-to-typescript-project-references": "^2.8.2",
-    "@typescript-eslint/eslint-plugin": "^5.25.0",
-    "@typescript-eslint/parser": "^5.25.0",
-    "browserslist": "^4.21.4",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "browserslist": "^4.22.1",
     "concurrently": "^7.1.0",
-    "eslint": "^8.19.0",
-    "eslint-plugin-compat": "^4.0.2",
-    "eslint-plugin-jest": "^27.1.3",
-    "eslint-plugin-tsdoc": "^0.2.16",
+    "eslint": "^8.53.0",
+    "eslint-plugin-compat": "^4.2.0",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-tsdoc": "^0.2.17",
     "markdownlint": "^0.25.1",
     "markdownlint-cli": "^0.31.1",
     "prettier": "2.8.4",
@@ -37,7 +37,7 @@
   },
   "scripts": {
     "build:all": "NODE_OPTIONS='--max-old-space-size=4096' yarn run concurrently --success=all -r -m=1 'yarn workspaces-to-typescript-project-references' 'yarn turbo run prepublish'",
-    "test": "yarn run concurrently --success=all -r -m=1 'yarn workspaces-to-typescript-project-references --check' 'yarn turbo run test'",
+    "test": "yarn run concurrently --success=all -r -m=1 'yarn workspaces-to-typescript-project-references --check' 'yarn turbo run test --concurrency=1'",
     "test:watch": "yarn turbo run test:watch",
     "test:update": "yarn turbo run test:update",
     "format": "yarn prettier --write '**/*.{ts,md}'",
diff --git a/packages/rrdom/src/diff.ts b/packages/rrdom/src/diff.ts
index 3438cb79ed..e785333445 100644
--- a/packages/rrdom/src/diff.ts
+++ b/packages/rrdom/src/diff.ts
@@ -118,7 +118,7 @@ export function diff(
 
   diffChildren(oldTree, newTree, replayer, rrnodeMirror);
 
-  diffAfterUpdatingChildren(oldTree, newTree, replayer, rrnodeMirror);
+  diffAfterUpdatingChildren(oldTree, newTree, replayer);
 }
 
 /**
@@ -194,6 +194,15 @@ function diffBeforeUpdatingChildren(
           rrnodeMirror,
         );
       }
+      /**
+       * Attributes and styles of the old element need to be updated before updating its children because of an edge case:
+       * `applyScroll` may fail in `diffAfterUpdatingChildren` when the height of a node when `applyScroll` is called may be incorrect if
+       * 1. its parent node contains styles that affects the targeted node's height
+       * 2. the CSS selector is targeting an attribute of the parent node
+       * by running `diffProps` on the parent node before `diffChildren` is called,
+       * we can ensure that the correct attributes (and therefore styles) have applied to parent nodes
+       */
+      diffProps(oldElement, newRRElement, rrnodeMirror);
       break;
     }
   }
@@ -207,7 +216,6 @@ function diffAfterUpdatingChildren(
   oldTree: Node,
   newTree: IRRNode,
   replayer: ReplayerHandler,
-  rrnodeMirror: Mirror,
 ) {
   switch (newTree.RRNodeType) {
     case RRNodeType.Document: {
@@ -218,7 +226,6 @@ function diffAfterUpdatingChildren(
     case RRNodeType.Element: {
       const oldElement = oldTree as HTMLElement;
       const newRRElement = newTree as RRElement;
-      diffProps(oldElement, newRRElement, rrnodeMirror);
       newRRElement.scrollData &&
         replayer.applyScroll(newRRElement.scrollData, true);
       /**
@@ -243,6 +250,8 @@ function diffAfterUpdatingChildren(
             oldMediaElement.currentTime = newMediaRRElement.currentTime;
           if (newMediaRRElement.playbackRate !== undefined)
             oldMediaElement.playbackRate = newMediaRRElement.playbackRate;
+          if (newMediaRRElement.loop !== undefined)
+            oldMediaElement.loop = newMediaRRElement.loop;
           break;
         }
         case 'CANVAS': {
diff --git a/packages/rrdom/src/document.ts b/packages/rrdom/src/document.ts
index 8a9a3c3b2e..ec30b19d22 100644
--- a/packages/rrdom/src/document.ts
+++ b/packages/rrdom/src/document.ts
@@ -563,6 +563,7 @@ export function BaseRRMediaElementImpl<
     public paused?: boolean;
     public muted?: boolean;
     public playbackRate?: number;
+    public loop?: boolean;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     attachShadow(_init: ShadowRootInit): IRRElement {
       throw new Error(
diff --git a/packages/rrdom/test/diff.test.ts b/packages/rrdom/test/diff.test.ts
index 0efc928f07..9f944978dd 100644
--- a/packages/rrdom/test/diff.test.ts
+++ b/packages/rrdom/test/diff.test.ts
@@ -280,6 +280,7 @@ describe('diff algorithm for rrdom', () => {
         rrMedia.muted = true;
         rrMedia.paused = false;
         rrMedia.playbackRate = 0.5;
+        rrMedia.loop = false;
 
         diff(element, rrMedia, replayer);
         expect(element.volume).toEqual(0.5);
@@ -287,6 +288,7 @@ describe('diff algorithm for rrdom', () => {
         expect(element.muted).toEqual(true);
         expect(element.paused).toEqual(false);
         expect(element.playbackRate).toEqual(0.5);
+        expect(element.loop).toEqual(false);
 
         rrMedia.paused = true;
         diff(element, rrMedia, replayer);
diff --git a/packages/rrdom/test/document.test.ts b/packages/rrdom/test/document.test.ts
index eba6e199c3..c16f8b7ded 100644
--- a/packages/rrdom/test/document.test.ts
+++ b/packages/rrdom/test/document.test.ts
@@ -1079,6 +1079,7 @@ describe('Basic RRDocument implementation', () => {
       expect(node.paused).toBeUndefined();
       expect(node.muted).toBeUndefined();
       expect(node.playbackRate).toBeUndefined();
+      expect(node.loop).toBeUndefined();
       expect(node.play).toBeDefined();
       expect(node.pause).toBeDefined();
       expect(node.toString()).toEqual('VIDEO ');
diff --git a/packages/rrweb-player/src/Controller.svelte b/packages/rrweb-player/src/Controller.svelte
index 25270f2cdd..9665bb01c1 100644
--- a/packages/rrweb-player/src/Controller.svelte
+++ b/packages/rrweb-player/src/Controller.svelte
@@ -114,7 +114,7 @@
       const totalEvents = context.events.length;
       const start = context.events[0].timestamp;
       const end = context.events[totalEvents - 1].timestamp;
-      const periods = getInactivePeriods(context.events);
+      const periods = getInactivePeriods(context.events, replayer.config.inactivePeriodThreshold);
       // calculate the indicator width.
       const getWidth = (
         startTime: number,
diff --git a/packages/rrweb-player/src/utils.ts b/packages/rrweb-player/src/utils.ts
index a4f10ec5f8..40aa514ff3 100644
--- a/packages/rrweb-player/src/utils.ts
+++ b/packages/rrweb-player/src/utils.ts
@@ -161,20 +161,21 @@ function isUserInteraction(event: eventWithTime): boolean {
   );
 }
 
-// Forked from '@amplitude/rrweb' replay/index.ts. A const threshold of inactive time.
-const SKIP_TIME_THRESHOLD = 10 * 1000;
-
 /**
  * Get periods of time when no user interaction happened from a list of events.
  * @param events - all events
+ * @param inactivePeriodThreshold - threshold of inactive time in milliseconds
  * @returns periods of time consist with [start time, end time]
  */
-export function getInactivePeriods(events: eventWithTime[]) {
+export function getInactivePeriods(
+  events: eventWithTime[],
+  inactivePeriodThreshold: number,
+) {
   const inactivePeriods: [number, number][] = [];
   let lastActiveTime = events[0].timestamp;
   for (const event of events) {
     if (!isUserInteraction(event)) continue;
-    if (event.timestamp - lastActiveTime > SKIP_TIME_THRESHOLD) {
+    if (event.timestamp - lastActiveTime > inactivePeriodThreshold) {
       inactivePeriods.push([lastActiveTime, event.timestamp]);
     }
     lastActiveTime = event.timestamp;
diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index e5b1eddac0..7c6ed948e6 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -169,6 +169,18 @@ function buildNode(
       if (n.isSVG) {
         node = doc.createElementNS('http://www.w3.org/2000/svg', tagName);
       } else {
+        if (
+          // If the tag name is a custom element name
+          n.isCustom &&
+          // If the browser supports custom elements
+          doc.defaultView?.customElements &&
+          // If the custom element hasn't been defined yet
+          !doc.defaultView.customElements.get(n.tagName)
+        )
+          doc.defaultView.customElements.define(
+            n.tagName,
+            class extends doc.defaultView.HTMLElement {},
+          );
         node = doc.createElement(tagName);
       }
       /**
@@ -330,6 +342,17 @@ function buildNode(
               break;
             default:
           }
+        } else if (
+          name === 'rr_mediaPlaybackRate' &&
+          typeof value === 'number'
+        ) {
+          (node as HTMLMediaElement).playbackRate = value;
+        } else if (name === 'rr_mediaMuted' && typeof value === 'boolean') {
+          (node as HTMLMediaElement).muted = value;
+        } else if (name === 'rr_mediaLoop' && typeof value === 'boolean') {
+          (node as HTMLMediaElement).loop = value;
+        } else if (name === 'rr_mediaVolume' && typeof value === 'number') {
+          (node as HTMLMediaElement).volume = value;
         }
       }
 
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 52144382ba..d323e1af8c 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -12,6 +12,7 @@ import {
   ICanvas,
   elementNode,
   serializedElementNodeWithId,
+  type mediaAttributes,
 } from './types';
 import {
   Mirror,
@@ -23,6 +24,7 @@ import {
   stringifyStylesheet,
   getInputType,
   toLowerCase,
+  extractFileExtension,
 } from './utils';
 
 let _id = 1;
@@ -311,6 +313,7 @@ export function needMaskingText(
   node: Node,
   maskTextClass: string | RegExp,
   maskTextSelector: string | null,
+  checkAncestors: boolean,
 ): boolean {
   try {
     const el: HTMLElement | null =
@@ -318,17 +321,21 @@ export function needMaskingText(
         ? (node as HTMLElement)
         : node.parentElement;
     if (el === null) return false;
-
     if (typeof maskTextClass === 'string') {
-      if (el.classList.contains(maskTextClass)) return true;
-      if (el.closest(`.${maskTextClass}`)) return true;
+      if (checkAncestors) {
+        if (el.closest(`.${maskTextClass}`)) return true;
+      } else {
+        if (el.classList.contains(maskTextClass)) return true;
+      }
     } else {
-      if (classMatchesRegex(el, maskTextClass, true)) return true;
+      if (classMatchesRegex(el, maskTextClass, checkAncestors)) return true;
     }
-
     if (maskTextSelector) {
-      if (el.matches(maskTextSelector)) return true;
-      if (el.closest(maskTextSelector)) return true;
+      if (checkAncestors) {
+        if (el.closest(maskTextSelector)) return true;
+      } else {
+        if (el.matches(maskTextSelector)) return true;
+      }
     }
   } catch (e) {
     //
@@ -427,8 +434,7 @@ function serializeNode(
     mirror: Mirror;
     blockClass: string | RegExp;
     blockSelector: string | null;
-    maskTextClass: string | RegExp;
-    maskTextSelector: string | null;
+    needsMask: boolean | undefined;
     inlineStylesheet: boolean;
     maskInputOptions: MaskInputOptions;
     maskTextFn: MaskTextFn | undefined;
@@ -448,8 +454,7 @@ function serializeNode(
     mirror,
     blockClass,
     blockSelector,
-    maskTextClass,
-    maskTextSelector,
+    needsMask,
     inlineStylesheet,
     maskInputOptions = {},
     maskTextFn,
@@ -501,8 +506,7 @@ function serializeNode(
       });
     case n.TEXT_NODE:
       return serializeTextNode(n as Text, {
-        maskTextClass,
-        maskTextSelector,
+        needsMask,
         maskTextFn,
         rootId,
       });
@@ -532,13 +536,12 @@ function getRootId(doc: Document, mirror: Mirror): number | undefined {
 function serializeTextNode(
   n: Text,
   options: {
-    maskTextClass: string | RegExp;
-    maskTextSelector: string | null;
+    needsMask: boolean | undefined;
     maskTextFn: MaskTextFn | undefined;
     rootId: number | undefined;
   },
 ): serializedNode {
-  const { maskTextClass, maskTextSelector, maskTextFn, rootId } = options;
+  const { needsMask, maskTextFn, rootId } = options;
   // The parent node may not be a html element which has a tagName attribute.
   // So just let it be undefined which is ok in this use case.
   const parentTagName = n.parentNode && (n.parentNode as HTMLElement).tagName;
@@ -569,12 +572,7 @@ function serializeTextNode(
   if (isScript) {
     textContent = 'SCRIPT_PLACEHOLDER';
   }
-  if (
-    !isStyle &&
-    !isScript &&
-    textContent &&
-    needMaskingText(n, maskTextClass, maskTextSelector)
-  ) {
+  if (!isStyle && !isScript && textContent && needsMask) {
     textContent = maskTextFn
       ? maskTextFn(textContent, n.parentElement)
       : textContent.replace(/[\S]/g, '*');
@@ -764,10 +762,15 @@ function serializeElementNode(
   }
   // media elements
   if (tagName === 'audio' || tagName === 'video') {
-    attributes.rr_mediaState = (n as HTMLMediaElement).paused
+    const mediaAttributes = attributes as mediaAttributes;
+    mediaAttributes.rr_mediaState = (n as HTMLMediaElement).paused
       ? 'paused'
       : 'played';
-    attributes.rr_mediaCurrentTime = (n as HTMLMediaElement).currentTime;
+    mediaAttributes.rr_mediaCurrentTime = (n as HTMLMediaElement).currentTime;
+    mediaAttributes.rr_mediaPlaybackRate = (n as HTMLMediaElement).playbackRate;
+    mediaAttributes.rr_mediaMuted = (n as HTMLMediaElement).muted;
+    mediaAttributes.rr_mediaLoop = (n as HTMLMediaElement).loop;
+    mediaAttributes.rr_mediaVolume = (n as HTMLMediaElement).volume;
   }
   // Scroll
   if (!newlyAddedElement) {
@@ -801,6 +804,13 @@ function serializeElementNode(
     delete attributes.src; // prevent auto loading
   }
 
+  let isCustomElement: true | undefined;
+  try {
+    if (customElements.get(tagName)) isCustomElement = true;
+  } catch (e) {
+    // In case old browsers don't support customElements
+  }
+
   return {
     type: NodeType.Element,
     tagName,
@@ -809,6 +819,7 @@ function serializeElementNode(
     isSVG: isSVGElement(n as Element) || undefined,
     needBlock,
     rootId,
+    isCustom: isCustomElement,
   };
 }
 
@@ -843,7 +854,7 @@ function slimDOMExcluded(
         (sn.tagName === 'link' &&
           sn.attributes.rel === 'prefetch' &&
           typeof sn.attributes.href === 'string' &&
-          sn.attributes.href.endsWith('.js')))
+          extractFileExtension(sn.attributes.href) === 'js'))
     ) {
       return true;
     } else if (
@@ -927,6 +938,7 @@ export function serializeNodeWithId(
     inlineStylesheet: boolean;
     newlyAddedElement?: boolean;
     maskInputOptions?: MaskInputOptions;
+    needsMask?: boolean;
     maskTextFn: MaskTextFn | undefined;
     maskInputFn: MaskInputFn | undefined;
     slimDOMOptions: SlimDOMOptions;
@@ -972,14 +984,29 @@ export function serializeNodeWithId(
     keepIframeSrcFn = () => false,
     newlyAddedElement = false,
   } = options;
+  let { needsMask } = options;
   let { preserveWhiteSpace = true } = options;
+
+  if (
+    !needsMask &&
+    n.childNodes // we can avoid the check on leaf elements, as masking is applied to child text nodes only
+  ) {
+    // perf: if needsMask = true, children won't also need to check
+    const checkAncestors = needsMask === undefined; // if false, we've already checked ancestors
+    needsMask = needMaskingText(
+      n as Element,
+      maskTextClass,
+      maskTextSelector,
+      checkAncestors,
+    );
+  }
+
   const _serializedNode = serializeNode(n, {
     doc,
     mirror,
     blockClass,
     blockSelector,
-    maskTextClass,
-    maskTextSelector,
+    needsMask,
     inlineStylesheet,
     maskInputOptions,
     maskTextFn,
@@ -1050,6 +1077,7 @@ export function serializeNodeWithId(
       mirror,
       blockClass,
       blockSelector,
+      needsMask,
       maskTextClass,
       maskTextSelector,
       skipChild,
@@ -1119,6 +1147,7 @@ export function serializeNodeWithId(
             mirror,
             blockClass,
             blockSelector,
+            needsMask,
             maskTextClass,
             maskTextSelector,
             skipChild: false,
@@ -1155,7 +1184,11 @@ export function serializeNodeWithId(
   if (
     serializedNode.type === NodeType.Element &&
     serializedNode.tagName === 'link' &&
-    serializedNode.attributes.rel === 'stylesheet'
+    typeof serializedNode.attributes.rel === 'string' &&
+    (serializedNode.attributes.rel === 'stylesheet' ||
+      (serializedNode.attributes.rel === 'preload' &&
+        typeof serializedNode.attributes.href === 'string' &&
+        extractFileExtension(serializedNode.attributes.href) === 'css'))
   ) {
     onceStylesheetLoaded(
       n as HTMLLinkElement,
@@ -1166,6 +1199,7 @@ export function serializeNodeWithId(
             mirror,
             blockClass,
             blockSelector,
+            needsMask,
             maskTextClass,
             maskTextSelector,
             skipChild: false,
diff --git a/packages/rrweb-snapshot/src/types.ts b/packages/rrweb-snapshot/src/types.ts
index e573dfc1e0..1abfe4d6c0 100644
--- a/packages/rrweb-snapshot/src/types.ts
+++ b/packages/rrweb-snapshot/src/types.ts
@@ -38,6 +38,8 @@ export type elementNode = {
   childNodes: serializedNodeWithId[];
   isSVG?: true;
   needBlock?: boolean;
+  // This is a custom element or not.
+  isCustom?: true;
 };
 
 export type textNode = {
@@ -80,6 +82,27 @@ export type tagMap = {
   [key: string]: string;
 };
 
+export type mediaAttributes = {
+  rr_mediaState: 'played' | 'paused';
+  rr_mediaCurrentTime: number;
+  /**
+   * for backwards compatibility this is optional but should always be set
+   */
+  rr_mediaPlaybackRate?: number;
+  /**
+   * for backwards compatibility this is optional but should always be set
+   */
+  rr_mediaMuted?: boolean;
+  /**
+   * for backwards compatibility this is optional but should always be set
+   */
+  rr_mediaLoop?: boolean;
+  /**
+   * for backwards compatibility this is optional but should always be set
+   */
+  rr_mediaVolume?: number;
+};
+
 // @deprecated
 export interface INode extends Node {
   __sn: serializedNodeWithId;
diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts
index 95444c18b3..5ccc9082ed 100644
--- a/packages/rrweb-snapshot/src/utils.ts
+++ b/packages/rrweb-snapshot/src/utils.ts
@@ -331,3 +331,23 @@ export function getInputType(element: HTMLElement): Lowercase<string> | null {
       toLowerCase(type)
     : null;
 }
+
+/**
+ * Extracts the file extension from an a path, considering search parameters and fragments.
+ * @param path - Path to file
+ * @param baseURL - [optional] Base URL of the page, used to resolve relative paths. Defaults to current page URL.
+ */
+export function extractFileExtension(
+  path: string,
+  baseURL?: string,
+): string | null {
+  let url;
+  try {
+    url = new URL(path, baseURL ?? window.location.href);
+  } catch (err) {
+    return null;
+  }
+  const regex = /\.([0-9a-z]+)(?:$)/i;
+  const match = url.pathname.match(regex);
+  return match?.[1] ?? null;
+}
diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
index d6c6cb6798..f537fc7b29 100644
--- a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
@@ -840,6 +840,7 @@ exports[`shadow DOM integration tests snapshot shadow DOM 1`] = `
                   \\"isShadow\\": true
                 }
               ],
+              \\"isCustom\\": true,
               \\"id\\": 16,
               \\"isShadowHost\\": true
             },
diff --git a/packages/rrweb-snapshot/test/utils.test.ts b/packages/rrweb-snapshot/test/utils.test.ts
index d635165c1f..96a5768d7d 100644
--- a/packages/rrweb-snapshot/test/utils.test.ts
+++ b/packages/rrweb-snapshot/test/utils.test.ts
@@ -3,7 +3,7 @@
  */
 import { serializedNodeWithId } from '@amplitude/rrweb-snapshot';
 import { NodeType, serializedNode } from '../src/types';
-import { isNodeMetaEqual } from '../src/utils';
+import { extractFileExtension, isNodeMetaEqual } from '../src/utils';
 
 describe('utils', () => {
   describe('isNodeMetaEqual()', () => {
@@ -147,4 +147,55 @@ describe('utils', () => {
       expect(isNodeMetaEqual(element2, element3)).toBeFalsy();
     });
   });
+  describe('extractFileExtension', () => {
+    test('absolute path', () => {
+      const path = 'https://example.com/styles/main.css';
+      const extension = extractFileExtension(path);
+      expect(extension).toBe('css');
+    });
+
+    test('relative path', () => {
+      const path = 'styles/main.css';
+      const baseURL = 'https://example.com/';
+      const extension = extractFileExtension(path, baseURL);
+      expect(extension).toBe('css');
+    });
+
+    test('path with search parameters', () => {
+      const path = 'https://example.com/scripts/app.js?version=1.0';
+      const extension = extractFileExtension(path);
+      expect(extension).toBe('js');
+    });
+
+    test('path with fragment', () => {
+      const path = 'https://example.com/styles/main.css#section1';
+      const extension = extractFileExtension(path);
+      expect(extension).toBe('css');
+    });
+
+    test('path with search parameters and fragment', () => {
+      const path = 'https://example.com/scripts/app.js?version=1.0#section1';
+      const extension = extractFileExtension(path);
+      expect(extension).toBe('js');
+    });
+
+    test('path without extension', () => {
+      const path = 'https://example.com/path/to/directory/';
+      const extension = extractFileExtension(path);
+      expect(extension).toBeNull();
+    });
+
+    test('invalid URL', () => {
+      const path = '!@#$%^&*()';
+      const baseURL = 'invalid';
+      const extension = extractFileExtension(path, baseURL);
+      expect(extension).toBeNull();
+    });
+
+    test('path with multiple dots', () => {
+      const path = 'https://example.com/scripts/app.min.js?version=1.0';
+      const extension = extractFileExtension(path);
+      expect(extension).toBe('js');
+    });
+  });
 });
diff --git a/packages/rrweb-snapshot/tsconfig.json b/packages/rrweb-snapshot/tsconfig.json
index 2766ca4a82..45e8df8efd 100644
--- a/packages/rrweb-snapshot/tsconfig.json
+++ b/packages/rrweb-snapshot/tsconfig.json
@@ -3,6 +3,7 @@
     "target": "ES6",
     "composite": true,
     "module": "ESNext",
+    "target": "ES6",
     "moduleResolution": "Node",
     "noImplicitAny": true,
     "strictNullChecks": true,
diff --git a/packages/rrweb/scripts/repl.js b/packages/rrweb/scripts/repl.js
index 0bf4a7de62..a36f34a285 100644
--- a/packages/rrweb/scripts/repl.js
+++ b/packages/rrweb/scripts/repl.js
@@ -22,40 +22,44 @@ void (async () => {
   let events = [];
 
   async function injectRecording(frame) {
-    await frame.evaluate((rrwebCode) => {
-      const win = window;
-      if (win.__IS_RECORDING__) return;
-      win.__IS_RECORDING__ = true;
+    try {
+      await frame.evaluate((rrwebCode) => {
+        const win = window;
+        if (win.__IS_RECORDING__) return;
+        win.__IS_RECORDING__ = true;
 
-      (async () => {
-        function loadScript(code) {
-          const s = document.createElement('script');
-          let r = false;
-          s.type = 'text/javascript';
-          s.innerHTML = code;
-          if (document.head) {
-            document.head.append(s);
-          } else {
-            requestAnimationFrame(() => {
+        (async () => {
+          function loadScript(code) {
+            const s = document.createElement('script');
+            let r = false;
+            s.type = 'text/javascript';
+            s.innerHTML = code;
+            if (document.head) {
               document.head.append(s);
-            });
+            } else {
+              requestAnimationFrame(() => {
+                document.head.append(s);
+              });
+            }
           }
-        }
-        loadScript(rrwebCode);
+          loadScript(rrwebCode);
 
-        win.events = [];
-        rrweb.record({
-          emit: (event) => {
-            win.events.push(event);
-            win._replLog(event);
-          },
-          plugins: [],
-          recordCanvas: true,
-          recordCrossOriginIframes: true,
-          collectFonts: true,
-        });
-      })();
-    }, code);
+          win.events = [];
+          rrweb.record({
+            emit: (event) => {
+              win.events.push(event);
+              win._replLog(event);
+            },
+            plugins: [],
+            recordCanvas: true,
+            recordCrossOriginIframes: true,
+            collectFonts: true,
+          });
+        })();
+      }, code);
+    } catch (e) {
+      console.error('failed to inject recording script:', e);
+    }
   }
 
   await start('https://react-redux.realworld.io');
diff --git a/packages/rrweb/scripts/stream.js b/packages/rrweb/scripts/stream.js
index 93e0a66d31..39693b1192 100644
--- a/packages/rrweb/scripts/stream.js
+++ b/packages/rrweb/scripts/stream.js
@@ -24,55 +24,58 @@ const pluginCode = fs.readFileSync(
 );
 
 async function injectRecording(frame) {
-  await frame.evaluate(
-    (rrwebCode, pluginCode) => {
-      const win = window;
-      if (win.__IS_RECORDING__) return;
-      win.__IS_RECORDING__ = true;
-
-      (async () => {
-        function loadScript(code) {
-          const s = document.createElement('script');
-          s.type = 'text/javascript';
-          s.innerHTML = code;
-          if (document.head) {
-            document.head.append(s);
-          } else {
-            requestAnimationFrame(() => {
+  try {
+    await frame.evaluate(
+      (rrwebCode, pluginCode) => {
+        const win = window;
+        if (win.__IS_RECORDING__) return;
+        win.__IS_RECORDING__ = true;
+
+        (async () => {
+          function loadScript(code) {
+            const s = document.createElement('script');
+            s.type = 'text/javascript';
+            s.innerHTML = code;
+            if (document.head) {
               document.head.append(s);
-            });
+            } else {
+              requestAnimationFrame(() => {
+                document.head.append(s);
+              });
+            }
           }
-        }
-        loadScript(rrwebCode);
-        loadScript(pluginCode);
-
-        win.events = [];
-        window.record = win.rrweb.record;
-        window.plugin = new rrwebCanvasWebRTCRecord.RRWebPluginCanvasWebRTCRecord(
-          {
-            signalSendCallback: (msg) => {
-              // [record#callback] provides canvas id, stream, and webrtc sdpOffer signal & connect message
-              _signal(msg);
+          loadScript(rrwebCode);
+          loadScript(pluginCode);
+
+          win.events = [];
+          window.record = win.rrweb.record;
+          window.plugin =
+            new rrwebCanvasWebRTCRecord.RRWebPluginCanvasWebRTCRecord({
+              signalSendCallback: (msg) => {
+                // [record#callback] provides canvas id, stream, and webrtc sdpOffer signal & connect message
+                _signal(msg);
+              },
+            });
+
+          window.record({
+            emit: (event) => {
+              win.events.push(event);
+              win._captureEvent(event);
             },
-          },
-        );
-
-        window.record({
-          emit: (event) => {
-            win.events.push(event);
-            win._captureEvent(event);
-          },
-          plugins: [window.plugin.initPlugin()],
-          recordCanvas: false,
-          recordCrossOriginIframes: true,
-          collectFonts: true,
-          inlineImages: true,
-        });
-      })();
-    },
-    code,
-    pluginCode,
-  );
+            plugins: [window.plugin.initPlugin()],
+            recordCanvas: false,
+            recordCrossOriginIframes: true,
+            collectFonts: true,
+            inlineImages: true,
+          });
+        })();
+      },
+      code,
+      pluginCode,
+    );
+  } catch (e) {
+    console.error('failed to inject script, error:', e);
+  }
 }
 
 async function startReplay(page, serverURL, recordedPage) {
diff --git a/packages/rrweb/src/index.ts b/packages/rrweb/src/index.ts
index 67b83cc32a..a18ae3fa9e 100644
--- a/packages/rrweb/src/index.ts
+++ b/packages/rrweb/src/index.ts
@@ -1,5 +1,6 @@
 import record from './record';
 import { Replayer } from './replay';
+import canvasMutation from './replay/canvas';
 import * as utils from './utils';
 import { _mirror } from './utils';
 
@@ -8,6 +9,7 @@ export {
   IncrementalSource,
   MouseInteractions,
   ReplayerEvents,
+  type eventWithTime,
 } from '@amplitude/rrweb-types';
 
 export type { recordOptions } from './types';
@@ -19,6 +21,7 @@ export {
   Replayer,
   addCustomEvent,
   freezePage,
+  canvasMutation,
   _mirror as mirror,
   record,
   utils,
diff --git a/packages/rrweb/src/plugins/console/record/stringify.ts b/packages/rrweb/src/plugins/console/record/stringify.ts
index a767793e8f..00b7245e32 100644
--- a/packages/rrweb/src/plugins/console/record/stringify.ts
+++ b/packages/rrweb/src/plugins/console/record/stringify.ts
@@ -91,7 +91,7 @@ export function stringify(
   const keys: unknown[] = [];
   return JSON.stringify(
     obj,
-    function (key, value: string | object | null | undefined) {
+    function (key, value: string | bigint | object | null | undefined) {
       /**
        * forked from https://github.com/moll/json-stringify-safe/blob/master/stringify.js
        * to deCycle the object
@@ -120,6 +120,9 @@ export function stringify(
       if (shouldIgnore(value as object)) {
         return toString(value as object);
       }
+      if (typeof value === 'bigint') {
+        return value.toString() + 'n';
+      }
       if (value instanceof Event) {
         const eventResult: Record<string, unknown> = {};
         for (const eventKey in value) {
@@ -158,7 +161,7 @@ export function stringify(
       return true;
     }
 
-    // is function
+    // is function or bigint
     if (typeof _obj === 'function') {
       return true;
     }
diff --git a/packages/rrweb/src/record/iframe-manager.ts b/packages/rrweb/src/record/iframe-manager.ts
index 00fbb42372..79818387ab 100644
--- a/packages/rrweb/src/record/iframe-manager.ts
+++ b/packages/rrweb/src/record/iframe-manager.ts
@@ -235,6 +235,7 @@ export class IframeManager {
         }
       }
     }
+    return false;
   }
 
   private replace<T extends Record<string, unknown>>(
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
index b09baf6139..f58d987a8b 100644
--- a/packages/rrweb/src/record/index.ts
+++ b/packages/rrweb/src/record/index.ts
@@ -528,6 +528,17 @@ function record<T = eventWithTime>(
               }),
             );
           },
+          customElementCb: (c) => {
+            wrappedEmit(
+              wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source: IncrementalSource.CustomElement,
+                  ...c,
+                },
+              }),
+            );
+          },
           blockClass,
           ignoreClass,
           ignoreSelector,
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index 02b1e0bb5b..860221e22f 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -190,6 +190,7 @@ export default class MutationBuffer {
   private shadowDomManager: observerParam['shadowDomManager'];
   private canvasManager: observerParam['canvasManager'];
   private processedNodeManager: observerParam['processedNodeManager'];
+  private unattachedDoc: HTMLDocument;
 
   public init(options: MutationBufferParam) {
     (
@@ -546,6 +547,7 @@ export default class MutationBuffer {
                 m.target,
                 this.maskTextClass,
                 this.maskTextSelector,
+                true, // checkAncestors
               ) && value
                 ? this.maskTextFn
                   ? this.maskTextFn(value, closestElementOfNode(m.target))
@@ -624,15 +626,17 @@ export default class MutationBuffer {
             value,
           );
           if (attributeName === 'style') {
-            let unattachedDoc;
-            try {
-              // avoid upsetting original document from a Content Security point of view
-              unattachedDoc = document.implementation.createHTMLDocument();
-            } catch (e) {
-              // fallback to more direct method
-              unattachedDoc = this.doc;
+            if (!this.unattachedDoc) {
+              try {
+                // avoid upsetting original document from a Content Security point of view
+                this.unattachedDoc =
+                  document.implementation.createHTMLDocument();
+              } catch (e) {
+                // fallback to more direct method
+                this.unattachedDoc = this.doc;
+              }
             }
-            const old = unattachedDoc.createElement('span');
+            const old = this.unattachedDoc.createElement('span');
             if (m.oldValue) {
               old.setAttribute('style', m.oldValue);
             }
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index 3081238129..69771215c0 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -31,6 +31,7 @@ import {
   styleDeclarationCallback,
   styleSheetRuleCallback,
   viewportResizeCallback,
+  customElementCallback,
 } from '@amplitude/rrweb-types';
 import type { FontFaceSet } from 'css-font-loading-module';
 import type { MutationBufferParam, observerParam } from '../types';
@@ -405,15 +406,6 @@ function initViewportResizeObserver(
   return on('resize', updateDimension, win);
 }
 
-function wrapEventWithUserTriggeredFlag(
-  v: inputValue,
-  enable: boolean,
-): inputValue {
-  const value = { ...v };
-  if (!enable) delete value.userTriggered;
-  return value;
-}
-
 export const INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];
 const lastInputValueMap: WeakMap<EventTarget, inputValue> = new WeakMap();
 function initInputObserver({
@@ -477,10 +469,9 @@ function initInputObserver({
     }
     cbWithDedup(
       target,
-      callbackWrapper(wrapEventWithUserTriggeredFlag)(
-        { text, isChecked, userTriggered },
-        userTriggeredOnInput,
-      ),
+      userTriggeredOnInput
+        ? { text, isChecked, userTriggered }
+        : { text, isChecked },
     );
     // if a radio was checked
     // the other radios with the same name attribute will be unchecked.
@@ -490,16 +481,12 @@ function initInputObserver({
         .querySelectorAll(`input[type="radio"][name="${name}"]`)
         .forEach((el) => {
           if (el !== target) {
+            const text = (el as HTMLInputElement).value;
             cbWithDedup(
               el,
-              callbackWrapper(wrapEventWithUserTriggeredFlag)(
-                {
-                  text: (el as HTMLInputElement).value,
-                  isChecked: !isChecked,
-                  userTriggered: false,
-                },
-                userTriggeredOnInput,
-              ),
+              userTriggeredOnInput
+                ? { text, isChecked: !isChecked, userTriggered: false }
+                : { text, isChecked: !isChecked },
             );
           }
         });
@@ -1059,7 +1046,7 @@ function initMediaInteractionObserver({
         ) {
           return;
         }
-        const { currentTime, volume, muted, playbackRate } =
+        const { currentTime, volume, muted, playbackRate, loop } =
           target as HTMLMediaElement;
         mediaInteractionCb({
           type,
@@ -1068,6 +1055,7 @@ function initMediaInteractionObserver({
           volume,
           muted,
           playbackRate,
+          loop,
         });
       }),
       sampling.media || 500,
@@ -1187,6 +1175,44 @@ function initSelectionObserver(param: observerParam): listenerHandler {
   return on('selectionchange', updateSelection);
 }
 
+function initCustomElementObserver({
+  doc,
+  customElementCb,
+}: observerParam): listenerHandler {
+  const win = doc.defaultView as IWindow;
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  if (!win || !win.customElements) return () => {};
+  const restoreHandler = patch(
+    win.customElements,
+    'define',
+    function (
+      original: (
+        name: string,
+        constructor: CustomElementConstructor,
+        options?: ElementDefinitionOptions,
+      ) => void,
+    ) {
+      return function (
+        name: string,
+        constructor: CustomElementConstructor,
+        options?: ElementDefinitionOptions,
+      ) {
+        try {
+          customElementCb({
+            define: {
+              name,
+            },
+          });
+        } catch (e) {
+          console.warn(`Custom element callback failed for ${name}`);
+        }
+        return original.apply(this, [name, constructor, options]);
+      };
+    },
+  );
+  return restoreHandler;
+}
+
 function mergeHooks(o: observerParam, hooks: hooksParam) {
   const {
     mutationCb,
@@ -1201,6 +1227,7 @@ function mergeHooks(o: observerParam, hooks: hooksParam) {
     canvasMutationCb,
     fontCb,
     selectionCb,
+    customElementCb,
   } = o;
   o.mutationCb = (...p: Arguments<mutationCallBack>) => {
     if (hooks.mutation) {
@@ -1274,6 +1301,12 @@ function mergeHooks(o: observerParam, hooks: hooksParam) {
     }
     selectionCb(...p);
   };
+  o.customElementCb = (...c: Arguments<customElementCallback>) => {
+    if (hooks.customElement) {
+      hooks.customElement(...c);
+    }
+    customElementCb(...c);
+  };
 }
 
 export function initObservers(
@@ -1301,9 +1334,13 @@ export function initObservers(
   const inputHandler = initInputObserver(o);
   const mediaInteractionHandler = initMediaInteractionObserver(o);
 
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   let styleSheetObserver = () => {};
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   let adoptedStyleSheetObserver = () => {};
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   let styleDeclarationObserver = () => {};
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   let fontObserver = () => {};
   if (o.recordDOM) {
     styleSheetObserver = initStyleSheetObserver(o, { win: currentWindow });
@@ -1316,6 +1353,7 @@ export function initObservers(
     }
   }
   const selectionObserver = initSelectionObserver(o);
+  const customElementObserver = initCustomElementObserver(o);
 
   // plugins
   const pluginHandlers: listenerHandler[] = [];
@@ -1339,6 +1377,7 @@ export function initObservers(
     styleDeclarationObserver();
     fontObserver();
     selectionObserver();
+    customElementObserver();
     pluginHandlers.forEach((h) => h());
   });
 }
diff --git a/packages/rrweb/src/record/observers/canvas/2d.ts b/packages/rrweb/src/record/observers/canvas/2d.ts
index 38c1e52c21..05228d8f7b 100644
--- a/packages/rrweb/src/record/observers/canvas/2d.ts
+++ b/packages/rrweb/src/record/observers/canvas/2d.ts
@@ -44,7 +44,7 @@ export default function initCanvas2DMutationObserver(
               // Using setTimeout as toDataURL can be heavy
               // and we'd rather not block the main thread
               setTimeout(() => {
-                const recordArgs = serializeArgs([...args], win, this);
+                const recordArgs = serializeArgs(args, win, this);
                 cb(this.canvas, {
                   type: CanvasContext['2D'],
                   property: prop,
diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
index 206ba477fe..cdac9d75c3 100644
--- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
+++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
@@ -188,6 +188,12 @@ export class CanvasManager {
         .forEach(async (canvas: HTMLCanvasElement) => {
           const id = this.mirror.getId(canvas);
           if (snapshotInProgressMap.get(id)) return;
+
+          // The browser throws if the canvas is 0 in size
+          // Uncaught (in promise) DOMException: Failed to execute 'createImageBitmap' on 'Window': The source image width is 0.
+          // Assuming the same happens with height
+          if (canvas.width === 0 || canvas.height === 0) return;
+
           snapshotInProgressMap.set(id, true);
           if (['webgl', 'webgl2'].includes((canvas as ICanvas).__context)) {
             // if the canvas hasn't been modified recently,
diff --git a/packages/rrweb/src/record/observers/canvas/serialize-args.ts b/packages/rrweb/src/record/observers/canvas/serialize-args.ts
index 10b97b8e24..19b5061b64 100644
--- a/packages/rrweb/src/record/observers/canvas/serialize-args.ts
+++ b/packages/rrweb/src/record/observers/canvas/serialize-args.ts
@@ -133,7 +133,7 @@ export const serializeArgs = (
   win: IWindow,
   ctx: RenderingContext,
 ) => {
-  return [...args].map((arg) => serializeArg(arg, win, ctx));
+  return args.map((arg) => serializeArg(arg, win, ctx));
 };
 
 export const isInstanceOfWebGLObject = (
diff --git a/packages/rrweb/src/record/observers/canvas/webgl.ts b/packages/rrweb/src/record/observers/canvas/webgl.ts
index 6345f5a918..7bdd6e4e7f 100644
--- a/packages/rrweb/src/record/observers/canvas/webgl.ts
+++ b/packages/rrweb/src/record/observers/canvas/webgl.ts
@@ -53,7 +53,7 @@ function patchGLPrototype(
               'tagName' in this.canvas &&
               !isBlocked(this.canvas, blockClass, blockSelector, true)
             ) {
-              const recordArgs = serializeArgs([...args], win, this);
+              const recordArgs = serializeArgs(args, win, this);
               const mutation: canvasMutationWithType = {
                 type,
                 property: prop,
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 863c41176e..aae389051a 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -81,8 +81,8 @@ import { polyfill as smoothscrollPolyfill } from './smoothscroll';
 import getInjectStyleRules from './styles/inject-style';
 import './styles/style.css';
 import { Timer } from './timer';
+import { MediaManager } from './media';
 
-const SKIP_TIME_THRESHOLD = 10 * 1000;
 const SKIP_TIME_INTERVAL = 5 * 1000;
 
 // https://github.com/rollup/rollup/issues/1267#issuecomment-296395734
@@ -143,6 +143,9 @@ export class Replayer {
   // Used to track StyleSheetObjects adopted on multiple document hosts.
   private styleMirror: StyleSheetMirror = new StyleSheetMirror();
 
+  // Used to track video & audio elements, and keep them in sync with general playback.
+  private mediaManager: MediaManager;
+
   private firstFullSnapshot: eventWithTime | true | null = null;
 
   private newDocumentQueue: addedNodeMutation[] = [];
@@ -179,6 +182,7 @@ export class Replayer {
       root: document.body,
       loadTimeout: 0,
       skipInactive: false,
+      inactivePeriodThreshold: 10 * 1000,
       showWarning: true,
       showDebug: false,
       blockClass: 'rr-block',
@@ -324,6 +328,7 @@ export class Replayer {
       this.firstFullSnapshot = null;
       this.mirror.reset();
       this.styleMirror.reset();
+      this.mediaManager.reset();
     });
 
     const timer = new Timer([], {
@@ -366,6 +371,13 @@ export class Replayer {
         speed: state,
       });
     });
+    this.mediaManager = new MediaManager({
+      warn: this.warn.bind(this),
+      service: this.service,
+      speedService: this.speedService,
+      emitter: this.emitter,
+      getCurrentTime: this.getCurrentTime.bind(this),
+    });
 
     // rebuild first full snapshot as the poster of the player
     // maybe we can cache it for performance optimization
@@ -464,10 +476,16 @@ export class Replayer {
     };
   }
 
+  /**
+   * Get the actual time offset the player is at now compared to the first event.
+   */
   public getCurrentTime(): number {
     return this.timer.timeOffset + this.getTimeOffset();
   }
 
+  /**
+   * Get the time offset the player is at now compared to the first event, but without regard for the timer.
+   */
   public getTimeOffset(): number {
     const { baselineTime, events } = this.service.state.context;
     return baselineTime - events[0].timestamp;
@@ -527,6 +545,9 @@ export class Replayer {
    */
   public destroy() {
     this.pause();
+    this.mirror.reset();
+    this.styleMirror.reset();
+    this.mediaManager.reset();
     this.config.root.removeChild(this.wrapper);
     this.emitter.emit(ReplayerEvents.Destroy);
   }
@@ -667,9 +688,10 @@ export class Replayer {
             // Timer (requestAnimationFrame) can be faster than setTimeout(..., 1)
             this.firstFullSnapshot = true;
           }
+          this.mediaManager.reset();
+          this.styleMirror.reset();
           this.rebuildFullSnapshot(event, isSync);
           this.iframe.contentWindow?.scrollTo(event.data.initialOffset);
-          this.styleMirror.reset();
         };
         break;
       case EventType.IncrementalSnapshot:
@@ -688,7 +710,7 @@ export class Replayer {
                 if (
                   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                   _event.delay! - event.delay! >
-                  SKIP_TIME_THRESHOLD *
+                  this.config.inactivePeriodThreshold *
                     this.speedService.state.context.timer.speed
                 ) {
                   this.nextUserInteractionEvent = _event;
@@ -768,6 +790,14 @@ export class Replayer {
     const collected: AppendedIframe[] = [];
     const afterAppend = (builtNode: Node, id: number) => {
       this.collectIframeAndAttachDocument(collected, builtNode);
+      if (this.mediaManager.isSupportedMediaElement(builtNode)) {
+        const { events } = this.service.state.context;
+        this.mediaManager.addMediaElements(
+          builtNode,
+          event.timestamp - events[0].timestamp,
+          this.mirror,
+        );
+      }
       for (const plugin of this.config.plugins || []) {
         if (plugin.onBuild)
           plugin.onBuild(builtNode, {
@@ -1151,8 +1181,8 @@ export class Replayer {
                 this.lastMouseDownEvent = null;
               }
               this.mousePos = {
-                x: d.x,
-                y: d.y,
+                x: d.x || 0,
+                y: d.y || 0,
                 id: d.id,
                 debugData: d,
               };
@@ -1161,7 +1191,7 @@ export class Replayer {
                 // don't draw a trail as user has lifted finger and is placing at a new point
                 this.tailPositions.length = 0;
               }
-              this.moveAndHover(d.x, d.y, d.id, isSync, d);
+              this.moveAndHover(d.x || 0, d.y || 0, d.id, isSync, d);
               if (d.type === MouseInteractions.Click) {
                 /*
                  * don't want target.click() here as could trigger an iframe navigation
@@ -1251,35 +1281,14 @@ export class Replayer {
           return this.debugNodeNotFound(d, d.id);
         }
         const mediaEl = target as HTMLMediaElement | RRMediaElement;
-        try {
-          if (d.currentTime !== undefined) {
-            mediaEl.currentTime = d.currentTime;
-          }
-          if (d.volume !== undefined) {
-            mediaEl.volume = d.volume;
-          }
-          if (d.muted !== undefined) {
-            mediaEl.muted = d.muted;
-          }
-          if (d.type === MediaInteractions.Pause) {
-            mediaEl.pause();
-          }
-          if (d.type === MediaInteractions.Play) {
-            // remove listener for 'canplay' event because play() is async and returns a promise
-            // i.e. media will evntualy start to play when data is loaded
-            // 'canplay' event fires even when currentTime attribute changes which may lead to
-            // unexpeted behavior
-            void mediaEl.play();
-          }
-          if (d.type === MediaInteractions.RateChange) {
-            mediaEl.playbackRate = d.playbackRate;
-          }
-        } catch (error) {
-          this.warn(
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions
-            `Failed to replay media interactions: ${error.message || error}`,
-          );
-        }
+        const { events } = this.service.state.context;
+
+        this.mediaManager.mediaMutation({
+          target: mediaEl,
+          timeOffset: e.timestamp - events[0].timestamp,
+          mutation: d,
+        });
+
         break;
       }
       case IncrementalSource.StyleSheetRule:
@@ -1356,6 +1365,11 @@ export class Replayer {
     }
   }
 
+  /**
+   * Apply the mutation to the virtual dom or the real dom.
+   * @param d - The mutation data.
+   * @param isSync - Whether the mutation should be applied synchronously (while fast-forwarding).
+   */
   private applyMutation(d: mutationData, isSync: boolean) {
     // Only apply virtual dom optimization if the fast-forward process has node mutation. Because the cost of creating a virtual dom tree and executing the diff algorithm is usually higher than directly applying other kind of events.
     if (this.config.useVirtualDom && !this.usingVirtualDom && isSync) {
diff --git a/packages/rrweb/src/replay/media/index.ts b/packages/rrweb/src/replay/media/index.ts
new file mode 100644
index 0000000000..3c137665df
--- /dev/null
+++ b/packages/rrweb/src/replay/media/index.ts
@@ -0,0 +1,294 @@
+import { Emitter, MediaInteractions, ReplayerEvents } from '@rrweb/types';
+import type { RRMediaElement } from 'rrdom/es';
+import type { createPlayerService, createSpeedService } from '../machine';
+import type { Mirror, mediaAttributes } from 'rrweb-snapshot';
+import type { mediaInteractionData } from '@rrweb/types';
+
+type MediaState = {
+  isPlaying: boolean;
+  currentTimeAtLastInteraction: number;
+  lastInteractionTimeOffset: number;
+  playbackRate: number;
+  loop: boolean;
+  volume: number;
+  muted: boolean;
+};
+
+export class MediaManager {
+  private mediaMap: Map<HTMLMediaElement | RRMediaElement, MediaState> =
+    new Map();
+  private warn: (...args: Parameters<typeof console.warn>) => void;
+  private service: ReturnType<typeof createPlayerService>;
+  private speedService: ReturnType<typeof createSpeedService>;
+  private emitter: Emitter;
+  private getCurrentTime: () => number;
+  private metadataCallbackMap: WeakMap<
+    HTMLMediaElement | RRMediaElement,
+    () => void
+  > = new Map();
+
+  constructor(options: {
+    warn: (...args: Parameters<typeof console.warn>) => void;
+    service: ReturnType<typeof createPlayerService>;
+    speedService: ReturnType<typeof createSpeedService>;
+    getCurrentTime: () => number;
+    emitter: Emitter;
+  }) {
+    this.warn = options.warn;
+    this.service = options.service;
+    this.speedService = options.speedService;
+    this.emitter = options.emitter;
+    this.getCurrentTime = options.getCurrentTime;
+
+    this.emitter.on(ReplayerEvents.Start, this.start.bind(this));
+    this.emitter.on(ReplayerEvents.SkipStart, this.start.bind(this));
+    this.emitter.on(ReplayerEvents.Pause, this.pause.bind(this));
+    this.emitter.on(ReplayerEvents.Finish, this.pause.bind(this));
+    this.speedService.subscribe(() => {
+      this.syncAllMediaElements();
+    });
+  }
+
+  private syncAllMediaElements(options = { pause: false }) {
+    this.mediaMap.forEach((mediaState, target) => {
+      this.syncTargetWithState(target);
+      if (options.pause) {
+        target.pause();
+      }
+    });
+  }
+
+  private start() {
+    this.syncAllMediaElements();
+  }
+
+  private pause() {
+    this.syncAllMediaElements({ pause: true });
+  }
+
+  private seekTo({
+    time,
+    target,
+    mediaState,
+  }: {
+    time: number;
+    target: HTMLMediaElement | RRMediaElement;
+    mediaState: MediaState;
+  }) {
+    if (mediaState.isPlaying) {
+      const differenceBetweenCurrentTimeAndMediaMutationTimestamp =
+        time - mediaState.lastInteractionTimeOffset;
+      const mediaPlaybackOffset =
+        (differenceBetweenCurrentTimeAndMediaMutationTimestamp / 1000) *
+        mediaState.playbackRate;
+
+      const duration = 'duration' in target && target.duration;
+
+      // Video hasn't loaded yet, wait for metadata
+      if (Number.isNaN(duration)) {
+        this.waitForMetadata(target);
+        return;
+      }
+
+      let seekToTime =
+        mediaState.currentTimeAtLastInteraction + mediaPlaybackOffset;
+
+      if (
+        target.loop &&
+        // RRMediaElement doesn't have a duration property
+        duration !== false
+      ) {
+        seekToTime = seekToTime % duration;
+      }
+
+      target.currentTime = seekToTime;
+    } else {
+      target.pause();
+      target.currentTime = mediaState.currentTimeAtLastInteraction;
+    }
+  }
+
+  private waitForMetadata(target: HTMLMediaElement | RRMediaElement) {
+    if (this.metadataCallbackMap.has(target)) return;
+    if (!('addEventListener' in target)) return;
+
+    const onLoadedMetadata = () => {
+      this.metadataCallbackMap.delete(target);
+      const mediaState = this.mediaMap.get(target);
+      if (!mediaState) return;
+      this.seekTo({
+        time: this.getCurrentTime(),
+        target,
+        mediaState,
+      });
+    };
+
+    this.metadataCallbackMap.set(target, onLoadedMetadata);
+    target.addEventListener('loadedmetadata', onLoadedMetadata, {
+      once: true,
+    });
+  }
+
+  private getMediaStateFromMutation({
+    target,
+    timeOffset,
+    mutation,
+  }: {
+    target: HTMLMediaElement | RRMediaElement;
+    timeOffset: number;
+    mutation: mediaInteractionData;
+  }): MediaState {
+    const lastState = this.mediaMap.get(target);
+    const { type, playbackRate, currentTime, muted, volume, loop } = mutation;
+
+    const isPlaying =
+      type === MediaInteractions.Play ||
+      (type !== MediaInteractions.Pause &&
+        (lastState?.isPlaying || target.getAttribute('autoplay') !== null));
+
+    const mediaState: MediaState = {
+      isPlaying,
+      currentTimeAtLastInteraction:
+        currentTime ?? lastState?.currentTimeAtLastInteraction ?? 0,
+      lastInteractionTimeOffset: timeOffset,
+      playbackRate: playbackRate ?? lastState?.playbackRate ?? 1,
+      volume: volume ?? lastState?.volume ?? 1,
+      muted: muted ?? lastState?.muted ?? target.getAttribute('muted') === null,
+      loop: loop ?? lastState?.loop ?? target.getAttribute('loop') === null,
+    };
+
+    return mediaState;
+  }
+
+  private syncTargetWithState(target: HTMLMediaElement | RRMediaElement) {
+    const mediaState = this.mediaMap.get(target);
+    if (!mediaState) return;
+    const { muted, loop, volume, isPlaying } = mediaState;
+    const playerIsPaused = this.service.state.matches('paused');
+    const playbackRate =
+      mediaState.playbackRate * this.speedService.state.context.timer.speed;
+
+    try {
+      this.seekTo({
+        time: this.getCurrentTime(),
+        target,
+        mediaState,
+      });
+
+      if (target.volume !== volume) {
+        target.volume = volume;
+      }
+      target.muted = muted;
+      target.loop = loop;
+
+      if (target.playbackRate !== playbackRate) {
+        // Avoid setting playbackRate when it's already the same
+        // Safari drops frames whenever playbackRate is set, even if it's the same
+        target.playbackRate = playbackRate;
+      }
+
+      if (isPlaying && !playerIsPaused) {
+        // remove listener for 'canplay' event because play() is async and returns a promise
+        // i.e. media will eventually start to play when data is loaded
+        // 'canplay' event fires even when currentTime attribute changes which may lead to
+        // unexpected behavior
+        void target.play();
+      } else {
+        target.pause();
+      }
+    } catch (error) {
+      this.warn(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions
+        `Failed to replay media interactions: ${error.message || error}`,
+      );
+    }
+  }
+
+  public addMediaElements(node: Node, timeOffset: number, mirror: Mirror) {
+    if (!['AUDIO', 'VIDEO'].includes(node.nodeName)) return;
+    const target = node as HTMLMediaElement;
+    const serializedNode = mirror.getMeta(target);
+    if (!serializedNode || !('attributes' in serializedNode)) return;
+    const playerIsPaused = this.service.state.matches('paused');
+    const mediaAttributes = serializedNode.attributes as
+      | mediaAttributes
+      | Record<string, never>;
+
+    let isPlaying = false;
+    if (mediaAttributes.rr_mediaState) {
+      isPlaying = mediaAttributes.rr_mediaState === 'played';
+    } else {
+      isPlaying = target.getAttribute('autoplay') !== null;
+    }
+    if (isPlaying && playerIsPaused) target.pause();
+
+    let playbackRate = 1;
+    if (typeof mediaAttributes.rr_mediaPlaybackRate === 'number') {
+      playbackRate = mediaAttributes.rr_mediaPlaybackRate;
+    }
+
+    let muted = false;
+    if (typeof mediaAttributes.rr_mediaMuted === 'boolean') {
+      muted = mediaAttributes.rr_mediaMuted;
+    } else {
+      muted = target.getAttribute('muted') !== null;
+    }
+
+    let loop = false;
+    if (typeof mediaAttributes.rr_mediaLoop === 'boolean') {
+      loop = mediaAttributes.rr_mediaLoop;
+    } else {
+      loop = target.getAttribute('loop') !== null;
+    }
+
+    let volume = 1;
+    if (typeof mediaAttributes.rr_mediaVolume === 'number') {
+      volume = mediaAttributes.rr_mediaVolume;
+    }
+
+    let currentTimeAtLastInteraction = 0;
+    if (typeof mediaAttributes.rr_mediaCurrentTime === 'number') {
+      currentTimeAtLastInteraction = mediaAttributes.rr_mediaCurrentTime;
+    }
+
+    this.mediaMap.set(target, {
+      isPlaying,
+      currentTimeAtLastInteraction,
+      lastInteractionTimeOffset: timeOffset,
+      playbackRate,
+      volume,
+      muted,
+      loop,
+    });
+    this.syncTargetWithState(target);
+  }
+
+  public mediaMutation({
+    target,
+    timeOffset,
+    mutation,
+  }: {
+    target: HTMLMediaElement | RRMediaElement;
+    timeOffset: number;
+    mutation: mediaInteractionData;
+  }) {
+    this.mediaMap.set(
+      target,
+      this.getMediaStateFromMutation({
+        target,
+        timeOffset,
+        mutation,
+      }),
+    );
+
+    this.syncTargetWithState(target);
+  }
+
+  public isSupportedMediaElement(node: Node): node is HTMLMediaElement {
+    return ['AUDIO', 'VIDEO'].includes(node.nodeName);
+  }
+
+  public reset() {
+    this.mediaMap.clear();
+  }
+}
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index 5c26322414..f452b82443 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -15,6 +15,7 @@ import type {
   addedNodeMutation,
   blockClass,
   canvasMutationCallback,
+  customElementCallback,
   eventWithTime,
   fontCallback,
   hooksParam,
@@ -97,6 +98,7 @@ export type observerParam = {
   styleSheetRuleCb: styleSheetRuleCallback;
   styleDeclarationCb: styleDeclarationCallback;
   canvasMutationCb: canvasMutationCallback;
+  customElementCb: customElementCallback;
   fontCb: fontCallback;
   sampling: SamplingStrategy;
   recordDOM: boolean;
@@ -168,6 +170,7 @@ export type playerConfig = {
   root: Element;
   loadTimeout: number;
   skipInactive: boolean;
+  inactivePeriodThreshold: number;
   showWarning: boolean;
   showDebug: boolean;
   blockClass: string;
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index a9ceeba5ee..ae1aa7bf54 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -793,6 +793,243 @@ exports[`record integration tests can mask character data mutations 1`] = `
         }
       ]
     }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [
+        {
+          \\"id\\": 22,
+          \\"value\\": \\"****** *******\\"
+        }
+      ],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
+  }
+]"
+`;
+
+exports[`record integration tests can mask character data mutations with regexp 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"p\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"mutation observer\\",
+                        \\"id\\": 8
+                      }
+                    ],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"ul\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 11
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"li\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [],
+                        \\"id\\": 12
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\",
+                        \\"id\\": 13
+                      }
+                    ],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 14
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"id\\": 15
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 16
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 18
+                      }
+                    ],
+                    \\"id\\": 17
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\",
+                    \\"id\\": 19
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 10,
+          \\"attributes\\": {
+            \\"class\\": \\"custom-mask\\"
+          }
+        },
+        {
+          \\"id\\": 7,
+          \\"attributes\\": {
+            \\"class\\": \\"custom-mask\\"
+          }
+        }
+      ],
+      \\"removes\\": [
+        {
+          \\"parentId\\": 7,
+          \\"id\\": 8
+        }
+      ],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 10,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"li\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 20
+          }
+        },
+        {
+          \\"parentId\\": 20,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"*** **** ****\\",
+            \\"id\\": 21
+          }
+        },
+        {
+          \\"parentId\\": 7,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"*******\\",
+            \\"id\\": 22
+          }
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [
+        {
+          \\"id\\": 21,
+          \\"value\\": \\"********** ****** ** ****** *** **** ****\\"
+        }
+      ],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
   }
 ]"
 `;
diff --git a/packages/rrweb/test/e2e/webgl.test.ts b/packages/rrweb/test/e2e/webgl.test.ts
index d40f834317..31c68e4505 100644
--- a/packages/rrweb/test/e2e/webgl.test.ts
+++ b/packages/rrweb/test/e2e/webgl.test.ts
@@ -3,16 +3,19 @@ import * as fs from 'fs';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 import * as path from 'path';
 import type * as puppeteer from 'puppeteer';
-import type { recordOptions } from '../../src/types';
 import {
-  ISuite,
-  generateRecordSnippet,
-  getServerURL,
+  startServer,
   launchPuppeteer,
+  getServerURL,
   replaceLast,
-  startServer,
   waitForRAF,
+  generateRecordSnippet,
+  ISuite,
+  hideMouseAnimation,
+  fakeGoto,
 } from '../utils';
+import type { recordOptions } from '../../src/types';
+
 expect.extend({ toMatchImageSnapshot });
 
 describe('e2e webgl', () => {
@@ -59,29 +62,6 @@ describe('e2e webgl', () => {
     );
   };
 
-  const fakeGoto = async (p: puppeteer.Page, url: string) => {
-    const intercept = async (request: puppeteer.HTTPRequest) => {
-      await request.respond({
-        status: 200,
-        contentType: 'text/html',
-        body: ' ', // non-empty string or page will load indefinitely
-      });
-    };
-    await p.setRequestInterception(true);
-    p.on('request', intercept);
-    await p.goto(url);
-    p.off('request', intercept);
-    await p.setRequestInterception(false);
-  };
-
-  const hideMouseAnimation = async (p: puppeteer.Page) => {
-    await p.addStyleTag({
-      content: `.replayer-mouse-tail{display: none !important;}
-                html, body { margin: 0; padding: 0; }
-                iframe { border: none; }`,
-    });
-  };
-
   it('will record and replay a webgl square', async () => {
     page = await browser.newPage();
     await fakeGoto(page, `${serverURL}/html/canvas-webgl-square.html`);
diff --git a/packages/rrweb/test/events/custom-element-define-class.ts b/packages/rrweb/test/events/custom-element-define-class.ts
new file mode 100644
index 0000000000..3f9bd9fa6b
--- /dev/null
+++ b/packages/rrweb/test/events/custom-element-define-class.ts
@@ -0,0 +1,89 @@
+import { EventType } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
+
+const now = Date.now();
+const events: eventWithTime[] = [
+  {
+    type: EventType.DomContentLoaded,
+    data: {},
+    timestamp: now,
+  },
+  {
+    type: EventType.Load,
+    data: {},
+    timestamp: now + 100,
+  },
+  {
+    type: EventType.Meta,
+    data: {
+      href: 'http://localhost',
+      width: 1000,
+      height: 800,
+    },
+    timestamp: now + 100,
+  },
+  // full snapshot:
+  {
+    data: {
+      node: {
+        id: 1,
+        type: 0,
+        childNodes: [
+          { id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
+          {
+            id: 3,
+            type: 2,
+            tagName: 'html',
+            attributes: { lang: 'en' },
+            childNodes: [
+              {
+                id: 4,
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [
+                  {
+                    id: 5,
+                    type: 2,
+                    tagName: 'style',
+                    childNodes: [
+                      {
+                        id: 6,
+                        type: 3,
+                        isStyle: true,
+                        // Set style of defined custom element to display: block
+                        // Set undefined custom element to display: none
+                        textContent:
+                          'custom-element:not(:defined) { display: none;} \n custom-element:defined { display: block; }',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: 7,
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [
+                  {
+                    id: 8,
+                    type: 2,
+                    tagName: 'custom-element',
+                    childNodes: [],
+                    isCustom: true,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      initialOffset: { top: 0, left: 0 },
+    },
+    type: EventType.FullSnapshot,
+    timestamp: now + 100,
+  },
+];
+
+export default events;
diff --git a/packages/rrweb/test/events/scroll-with-parent-styles.ts b/packages/rrweb/test/events/scroll-with-parent-styles.ts
new file mode 100644
index 0000000000..da9f1c01ef
--- /dev/null
+++ b/packages/rrweb/test/events/scroll-with-parent-styles.ts
@@ -0,0 +1,326 @@
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
+
+const now = Date.now();
+const events: eventWithTime[] = [
+  {
+    type: EventType.DomContentLoaded,
+    data: {},
+    timestamp: now,
+  },
+  {
+    type: EventType.Load,
+    data: {},
+    timestamp: now + 100,
+  },
+  {
+    type: EventType.Meta,
+    data: {
+      href: 'http://localhost',
+      width: 1200,
+      height: 500,
+    },
+    timestamp: now + 100,
+  },
+  // full snapshot:
+  {
+    type: EventType.FullSnapshot,
+    data: {
+      node: {
+        id: 1,
+        type: 0,
+        childNodes: [
+          {
+            type: 1,
+            name: 'html',
+            publicId: '',
+            systemId: '',
+            id: 2,
+          },
+          {
+            id: 3,
+            type: 2,
+            tagName: 'html',
+            attributes: {
+              lang: 'en',
+            },
+            childNodes: [
+              {
+                id: 4,
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [
+                  {
+                    id: 5,
+                    type: 2,
+                    tagName: 'style',
+                    attributes: {
+                      type: 'text/css',
+                    },
+                    childNodes: [
+                      {
+                        id: 6,
+                        type: 3,
+                        textContent:
+                          'main[data-v-7231068e] { position: fixed; top: 0px; right: 0px; height: calc(100% - 0px); overflow: auto; left: 0px; }.container[data-v-7231068e] { overflow: auto; overscroll-behavior-y: contain; position: relative; height: 100%; }.container .card[data-v-7231068e] { min-height: 170px; height: 100%; }',
+                        isStyle: true,
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: 7,
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [
+                  {
+                    type: 2,
+                    tagName: 'div',
+                    attributes: {},
+                    childNodes: [
+                      {
+                        type: 2,
+                        tagName: 'ul',
+                        attributes: {},
+                        childNodes: [
+                          {
+                            type: 2,
+                            tagName: 'li',
+                            attributes: {},
+                            childNodes: [
+                              {
+                                type: 2,
+                                tagName: 'a',
+                                attributes: {
+                                  href: 'https://localhost/page1',
+                                },
+                                childNodes: [
+                                  {
+                                    type: 3,
+                                    textContent: '\nGo to page 1\n',
+                                    id: 12,
+                                  },
+                                ],
+                                id: 11,
+                              },
+                            ],
+                            id: 10,
+                          },
+                          {
+                            type: 2,
+                            tagName: 'li',
+                            attributes: {},
+                            childNodes: [
+                              {
+                                type: 2,
+                                tagName: 'a',
+                                attributes: {
+                                  href: 'https://localhost/page2',
+                                },
+                                childNodes: [
+                                  {
+                                    type: 3,
+                                    textContent: '\nGo to page 2\n',
+                                    id: 15,
+                                  },
+                                ],
+                                id: 14,
+                              },
+                            ],
+                            id: 13,
+                          },
+                        ],
+                        id: 9,
+                      },
+                    ],
+                    id: 8,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      initialOffset: {
+        left: 0,
+        top: 0,
+      },
+    },
+    timestamp: now + 100,
+  },
+  // mutation that adds all of the new parent/child elements
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Mutation,
+      texts: [],
+      attributes: [],
+      removes: [],
+      adds: [
+        {
+          parentId: 8,
+          nextId: null,
+          node: {
+            type: 2,
+            tagName: 'main',
+            attributes: {
+              'data-v-7231068e': '',
+            },
+            childNodes: [],
+            id: 16,
+          },
+        },
+        {
+          parentId: 16,
+          nextId: null,
+          node: {
+            type: 2,
+            tagName: 'div',
+            attributes: {
+              'data-v-7231068e': '',
+              class: 'container',
+            },
+            childNodes: [],
+            id: 17,
+          },
+        },
+        {
+          parentId: 17,
+          nextId: null,
+          node: {
+            type: 2,
+            tagName: 'div',
+            attributes: {
+              'data-v-7231068e': '',
+              class: 'card',
+            },
+            childNodes: [],
+            id: 18,
+          },
+        },
+        {
+          parentId: 18,
+          nextId: null,
+          node: {
+            type: 2,
+            tagName: 'button',
+            attributes: {
+              'data-v-7231068e': '',
+            },
+            childNodes: [],
+            id: 19,
+          },
+        },
+        {
+          parentId: 19,
+          nextId: null,
+          node: {
+            type: 3,
+            textContent: '1',
+            id: 20,
+          },
+        },
+        {
+          parentId: 17,
+          nextId: 18,
+          node: {
+            type: 2,
+            tagName: 'div',
+            attributes: {
+              'data-v-7231068e': '',
+              class: 'card',
+            },
+            childNodes: [],
+            id: 21,
+          },
+        },
+        {
+          parentId: 21,
+          nextId: null,
+          node: {
+            type: 2,
+            tagName: 'button',
+            attributes: {
+              'data-v-7231068e': '',
+            },
+            childNodes: [],
+            id: 22,
+          },
+        },
+        {
+          parentId: 22,
+          nextId: null,
+          node: {
+            type: 3,
+            textContent: '2',
+            id: 23,
+          },
+        },
+        {
+          parentId: 17,
+          nextId: 21,
+          node: {
+            type: 2,
+            tagName: 'div',
+            attributes: {
+              'data-v-7231068e': '',
+              class: 'card',
+            },
+            childNodes: [],
+            id: 24,
+          },
+        },
+        {
+          parentId: 24,
+          nextId: null,
+          node: {
+            type: 2,
+            tagName: 'button',
+            attributes: {
+              'data-v-7231068e': '',
+            },
+            childNodes: [],
+            id: 25,
+          },
+        },
+        {
+          parentId: 25,
+          nextId: null,
+          node: {
+            type: 3,
+            textContent: '3',
+            id: 26,
+          },
+        },
+      ],
+    },
+    timestamp: now + 500,
+  },
+  // scroll event on the '.container' div
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Scroll,
+      id: 17,
+      x: 0,
+      y: 800,
+    },
+    timestamp: now + 1000,
+  },
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Mutation,
+      texts: [],
+      attributes: [],
+      removes: [{ parentId: 16, id: 17 }],
+      adds: [],
+    },
+    timestamp: now + 2000,
+  },
+];
+
+export default events;
diff --git a/packages/rrweb/test/events/video-playback-on-full-snapshot.ts b/packages/rrweb/test/events/video-playback-on-full-snapshot.ts
new file mode 100644
index 0000000000..b1e8b12f5f
--- /dev/null
+++ b/packages/rrweb/test/events/video-playback-on-full-snapshot.ts
@@ -0,0 +1,550 @@
+import type { eventWithTime } from '@rrweb/types';
+
+const events: eventWithTime[] = [
+  { type: 0, data: {}, timestamp: 1900000001 },
+  { type: 1, data: {}, timestamp: 1900000132 },
+  {
+    type: 4,
+    data: {
+      href: 'http://127.0.0.1:5500/test/html/video.html',
+      width: 1600,
+      height: 900,
+    },
+    timestamp: 1900000132,
+  },
+  {
+    type: 2,
+    data: {
+      node: {
+        type: 0,
+        childNodes: [
+          { type: 1, name: 'html', publicId: '', systemId: '', id: 2 },
+          {
+            type: 2,
+            tagName: 'html',
+            attributes: { lang: 'en' },
+            childNodes: [
+              {
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [
+                  { type: 3, textContent: '\n    ', id: 5 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: { charset: 'UTF-8' },
+                    childNodes: [],
+                    id: 6,
+                  },
+                  { type: 3, textContent: '\n    ', id: 7 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: {
+                      'http-equiv': 'X-UA-Compatible',
+                      content: 'IE=edge',
+                    },
+                    childNodes: [],
+                    id: 8,
+                  },
+                  { type: 3, textContent: '\n    ', id: 9 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: {
+                      name: 'viewport',
+                      content: 'width=device-width, initial-scale=1.0',
+                    },
+                    childNodes: [],
+                    id: 10,
+                  },
+                  { type: 3, textContent: '\n    ', id: 11 },
+                  {
+                    type: 2,
+                    tagName: 'title',
+                    attributes: {},
+                    childNodes: [{ type: 3, textContent: 'Video', id: 13 }],
+                    id: 12,
+                  },
+                  { type: 3, textContent: '\n  ', id: 14 },
+                  {
+                    type: 2,
+                    tagName: 'script',
+                    attributes: { type: 'text/javascript' },
+                    childNodes: [
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 16 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 17 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 18 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 19 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 20 },
+                    ],
+                    id: 15,
+                  },
+                ],
+                id: 4,
+              },
+              { type: 3, textContent: '\n  ', id: 21 },
+              {
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [
+                  { type: 3, textContent: '\n    ', id: 23 },
+                  {
+                    type: 2,
+                    tagName: 'h1',
+                    attributes: {},
+                    childNodes: [
+                      { type: 3, textContent: 'Big Buck Bunny', id: 25 },
+                    ],
+                    id: 24,
+                  },
+                  { type: 3, textContent: '\n    ', id: 26 },
+                  {
+                    type: 2,
+                    tagName: 'video',
+                    attributes: {
+                      muted: '',
+                      controls: '',
+                      loop: '',
+                      rr_mediaState: 'played',
+                      rr_mediaCurrentTime: 0,
+                      rr_mediaPlaybackRate: 1,
+                      rr_mediaMuted: true,
+                      rr_mediaVolume: 1,
+                      rr_mediaLoop: true,
+                    },
+                    childNodes: [
+                      { type: 3, textContent: '\n      ', id: 28 },
+                      {
+                        type: 2,
+                        tagName: 'source',
+                        attributes: {
+                          src: '/html/assets/bunny-video.webm',
+                          type: 'video/webm',
+                        },
+                        childNodes: [],
+                        id: 29,
+                      },
+                      {
+                        type: 3,
+                        textContent:
+                          '\n      Your browser does not support the video element.\n    ',
+                        id: 30,
+                      },
+                    ],
+                    id: 27,
+                  },
+                  { type: 3, textContent: '\n  ', id: 31 },
+                ],
+                id: 22,
+              },
+            ],
+            id: 3,
+          },
+        ],
+        id: 1,
+      },
+      initialOffset: { left: 0, top: 0 },
+    },
+    timestamp: 1900000136,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 955, y: 869, id: 3, timeOffset: 0 }] },
+    timestamp: 1900006165,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 902, y: 823, id: 3, timeOffset: -451 },
+        { x: 840, y: 765, id: 3, timeOffset: -400 },
+        { x: 796, y: 724, id: 3, timeOffset: -350 },
+        { x: 716, y: 673, id: 3, timeOffset: -267 },
+        { x: 660, y: 645, id: 3, timeOffset: -217 },
+        { x: 554, y: 593, id: 3, timeOffset: -167 },
+        { x: 466, y: 518, id: 3, timeOffset: -101 },
+        { x: 433, y: 413, id: 27, timeOffset: -51 },
+        { x: 432, y: 316, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900006665,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 444, y: 229, id: 27, timeOffset: -435 },
+        { x: 444, y: 210, id: 27, timeOffset: -385 },
+        { x: 444, y: 209, id: 27, timeOffset: -335 },
+        { x: 445, y: 214, id: 27, timeOffset: -235 },
+        { x: 460, y: 246, id: 27, timeOffset: -185 },
+        { x: 476, y: 273, id: 27, timeOffset: -134 },
+        { x: 482, y: 281, id: 27, timeOffset: -84 },
+      ],
+    },
+    timestamp: 1900007166,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 483, y: 281, id: 27, timeOffset: 0 }] },
+    timestamp: 1900007814,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 483, y: 281, id: 27, timeOffset: -417 },
+        { x: 484, y: 282, id: 27, timeOffset: -218 },
+      ],
+    },
+    timestamp: 1900008315,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 484, y: 281, id: 27, timeOffset: 0 }] },
+    timestamp: 1900010165,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 484, y: 281, id: 27, timeOffset: -322 },
+        { x: 485, y: 281, id: 27, timeOffset: -256 },
+        { x: 491, y: 282, id: 27, timeOffset: -205 },
+        { x: 515, y: 283, id: 27, timeOffset: -156 },
+        { x: 534, y: 285, id: 27, timeOffset: -106 },
+        { x: 562, y: 291, id: 27, timeOffset: -56 },
+        { x: 575, y: 295, id: 27, timeOffset: -6 },
+      ],
+    },
+    timestamp: 1900010670,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 576, y: 296, id: 27, timeOffset: 0 }] },
+    timestamp: 1900012714,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 576, y: 298, id: 27, timeOffset: -451 },
+        { x: 577, y: 301, id: 27, timeOffset: -400 },
+        { x: 578, y: 305, id: 27, timeOffset: -334 },
+        { x: 580, y: 313, id: 27, timeOffset: -284 },
+        { x: 582, y: 332, id: 27, timeOffset: -234 },
+        { x: 585, y: 346, id: 27, timeOffset: -184 },
+        { x: 587, y: 353, id: 27, timeOffset: -133 },
+      ],
+    },
+    timestamp: 1900013215,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [{ x: 587, y: 354, id: 27, timeOffset: -253 }],
+    },
+    timestamp: 1900013717,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 587, y: 355, id: 27, timeOffset: 0 }] },
+    timestamp: 1900014364,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 588, y: 358, id: 27, timeOffset: -451 },
+        { x: 589, y: 368, id: 27, timeOffset: -400 },
+        { x: 592, y: 386, id: 27, timeOffset: -334 },
+        { x: 596, y: 402, id: 27, timeOffset: -266 },
+        { x: 597, y: 410, id: 27, timeOffset: -202 },
+        { x: 595, y: 415, id: 27, timeOffset: -152 },
+        { x: 591, y: 417, id: 27, timeOffset: -101 },
+        { x: 585, y: 418, id: 27, timeOffset: -51 },
+        { x: 579, y: 418, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900014865,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 562, y: 420, id: 27, timeOffset: -433 },
+        { x: 547, y: 422, id: 27, timeOffset: -367 },
+        { x: 538, y: 423, id: 27, timeOffset: -317 },
+        { x: 525, y: 423, id: 27, timeOffset: -251 },
+        { x: 509, y: 423, id: 27, timeOffset: -201 },
+        { x: 488, y: 422, id: 27, timeOffset: -151 },
+        { x: 440, y: 421, id: 27, timeOffset: -101 },
+        { x: 373, y: 419, id: 27, timeOffset: -51 },
+        { x: 296, y: 415, id: 27, timeOffset: -1 },
+      ],
+    },
+    timestamp: 1900015365,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 225, y: 409, id: 27, timeOffset: -439 },
+        { x: 183, y: 408, id: 27, timeOffset: -389 },
+        { x: 138, y: 407, id: 27, timeOffset: -340 },
+        { x: 98, y: 406, id: 27, timeOffset: -290 },
+        { x: 79, y: 406, id: 27, timeOffset: -238 },
+        { x: 60, y: 406, id: 27, timeOffset: -173 },
+        { x: 53, y: 406, id: 27, timeOffset: -122 },
+        { x: 39, y: 405, id: 27, timeOffset: -55 },
+      ],
+    },
+    timestamp: 1900015870,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 34, y: 403, id: 27, timeOffset: -493 },
+        { x: 31, y: 401, id: 27, timeOffset: -442 },
+        { x: 29, y: 399, id: 27, timeOffset: -375 },
+        { x: 28, y: 399, id: 27, timeOffset: -325 },
+        { x: 28, y: 397, id: 27, timeOffset: -259 },
+        { x: 28, y: 394, id: 27, timeOffset: -209 },
+        { x: 28, y: 394, id: 27, timeOffset: -159 },
+        { x: 28, y: 393, id: 27, timeOffset: -109 },
+      ],
+    },
+    timestamp: 1900016373,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 29, y: 393, id: 27, timeOffset: 0 }] },
+    timestamp: 1900018598,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 30, y: 391, id: 27, timeOffset: -433 },
+        { x: 31, y: 392, id: 27, timeOffset: -251 },
+        { x: 30, y: 393, id: 27, timeOffset: -201 },
+        { x: 30, y: 394, id: 27, timeOffset: -151 },
+      ],
+    },
+    timestamp: 1900019098,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 30, y: 394, id: 27, timeOffset: -457 },
+        { x: 30, y: 394, id: 27, timeOffset: -391 },
+      ],
+    },
+    timestamp: 1900019605,
+  },
+  { type: 3, data: { source: 2, type: 5, id: 27 }, timestamp: 1900020571 },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 32, y: 394, id: 27, timeOffset: 0 }] },
+    timestamp: 1900021531,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 48, y: 394, id: 27, timeOffset: -449 },
+        { x: 286, y: 413, id: 27, timeOffset: -384 },
+        { x: 418, y: 419, id: 27, timeOffset: -334 },
+        { x: 474, y: 419, id: 27, timeOffset: -284 },
+        { x: 482, y: 418, id: 27, timeOffset: -233 },
+        { x: 482, y: 417, id: 27, timeOffset: -167 },
+        { x: 477, y: 416, id: 27, timeOffset: -116 },
+        { x: 439, y: 414, id: 27, timeOffset: -51 },
+        { x: 402, y: 412, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900022031,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 376, y: 413, id: 27, timeOffset: -450 },
+        { x: 366, y: 414, id: 27, timeOffset: -400 },
+        { x: 353, y: 416, id: 27, timeOffset: -334 },
+        { x: 346, y: 417, id: 27, timeOffset: -283 },
+        { x: 339, y: 419, id: 27, timeOffset: -233 },
+        { x: 322, y: 422, id: 27, timeOffset: -167 },
+        { x: 311, y: 422, id: 27, timeOffset: -117 },
+        { x: 308, y: 422, id: 27, timeOffset: -51 },
+        { x: 311, y: 420, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900022531,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 315, y: 419, id: 27, timeOffset: -448 },
+        { x: 316, y: 418, id: 27, timeOffset: -397 },
+        { x: 317, y: 417, id: 27, timeOffset: -347 },
+        { x: 317, y: 417, id: 27, timeOffset: -281 },
+      ],
+    },
+    timestamp: 1900023045,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 318, y: 418, id: 27, timeOffset: -466 },
+        { x: 326, y: 439, id: 27, timeOffset: -416 },
+        { x: 333, y: 473, id: 3, timeOffset: -365 },
+        { x: 334, y: 484, id: 3, timeOffset: -300 },
+        { x: 334, y: 485, id: 3, timeOffset: -50 },
+      ],
+    },
+    timestamp: 1900023547,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 333, y: 485, id: 3, timeOffset: -483 },
+        { x: 321, y: 481, id: 3, timeOffset: -433 },
+        { x: 265, y: 460, id: 3, timeOffset: -383 },
+        { x: 203, y: 433, id: 27, timeOffset: -332 },
+        { x: 135, y: 402, id: 27, timeOffset: -283 },
+        { x: 86, y: 387, id: 27, timeOffset: -216 },
+        { x: 70, y: 384, id: 27, timeOffset: -166 },
+        { x: 58, y: 381, id: 27, timeOffset: -100 },
+        { x: 53, y: 381, id: 27, timeOffset: -33 },
+      ],
+    },
+    timestamp: 1900024047,
+  },
+
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 49, y: 383, id: 27, timeOffset: -468 },
+        { x: 39, y: 387, id: 27, timeOffset: -418 },
+        { x: 31, y: 389, id: 27, timeOffset: -367 },
+        { x: 28, y: 390, id: 27, timeOffset: -301 },
+      ],
+    },
+    timestamp: 1900024548,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 28, y: 390, id: 27, timeOffset: 0 }] },
+    timestamp: 1900034631,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 29, y: 393, id: 27, timeOffset: -459 },
+        { x: 262, y: 474, id: 3, timeOffset: -376 },
+        { x: 562, y: 573, id: 3, timeOffset: -326 },
+        { x: 702, y: 603, id: 3, timeOffset: -260 },
+        { x: 714, y: 603, id: 3, timeOffset: -209 },
+        { x: 716, y: 600, id: 3, timeOffset: -159 },
+        { x: 717, y: 597, id: 3, timeOffset: -109 },
+      ],
+    },
+    timestamp: 1900035140,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 718, y: 596, id: 3, timeOffset: 0 }] },
+    timestamp: 1900035963,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [{ x: 719, y: 594, id: 3, timeOffset: -451 }],
+    },
+    timestamp: 1900036464,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 722, y: 594, id: 3, timeOffset: 0 }] },
+    timestamp: 1900037931,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 772, y: 588, id: 3, timeOffset: -438 },
+        { x: 850, y: 577, id: 3, timeOffset: -371 },
+        { x: 879, y: 576, id: 3, timeOffset: -321 },
+        { x: 914, y: 576, id: 3, timeOffset: -255 },
+        { x: 926, y: 577, id: 3, timeOffset: -205 },
+        { x: 932, y: 579, id: 3, timeOffset: -154 },
+        { x: 935, y: 582, id: 3, timeOffset: -88 },
+        { x: 945, y: 587, id: 3, timeOffset: -22 },
+      ],
+    },
+    timestamp: 1900038435,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 966, y: 593, id: 3, timeOffset: -483 },
+        { x: 1006, y: 601, id: 3, timeOffset: -433 },
+        { x: 1075, y: 608, id: 3, timeOffset: -383 },
+        { x: 1098, y: 610, id: 3, timeOffset: -333 },
+        { x: 1102, y: 611, id: 3, timeOffset: -283 },
+        { x: 1102, y: 611, id: 3, timeOffset: -217 },
+        { x: 1103, y: 612, id: 3, timeOffset: -166 },
+        { x: 1103, y: 616, id: 3, timeOffset: -100 },
+      ],
+    },
+    timestamp: 1900038947,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 1103, y: 616, id: 3, timeOffset: -151 },
+        { x: 1103, y: 616, id: 3, timeOffset: -52 },
+        { x: 1103, y: 614, id: 3, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900039448,
+  },
+];
+
+export default events;
diff --git a/packages/rrweb/test/events/video-playback.ts b/packages/rrweb/test/events/video-playback.ts
new file mode 100644
index 0000000000..b29841b66e
--- /dev/null
+++ b/packages/rrweb/test/events/video-playback.ts
@@ -0,0 +1,628 @@
+import type { eventWithTime } from '@rrweb/types';
+
+const events: eventWithTime[] = [
+  { type: 0, data: {}, timestamp: 1900000001 },
+  { type: 1, data: {}, timestamp: 1900000132 },
+  {
+    type: 4,
+    data: {
+      href: 'http://127.0.0.1:5500/test/html/video.html',
+      width: 1600,
+      height: 900,
+    },
+    timestamp: 1900000132,
+  },
+  {
+    type: 2,
+    data: {
+      node: {
+        type: 0,
+        childNodes: [
+          { type: 1, name: 'html', publicId: '', systemId: '', id: 2 },
+          {
+            type: 2,
+            tagName: 'html',
+            attributes: { lang: 'en' },
+            childNodes: [
+              {
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [
+                  { type: 3, textContent: '\n    ', id: 5 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: { charset: 'UTF-8' },
+                    childNodes: [],
+                    id: 6,
+                  },
+                  { type: 3, textContent: '\n    ', id: 7 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: {
+                      'http-equiv': 'X-UA-Compatible',
+                      content: 'IE=edge',
+                    },
+                    childNodes: [],
+                    id: 8,
+                  },
+                  { type: 3, textContent: '\n    ', id: 9 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: {
+                      name: 'viewport',
+                      content: 'width=device-width, initial-scale=1.0',
+                    },
+                    childNodes: [],
+                    id: 10,
+                  },
+                  { type: 3, textContent: '\n    ', id: 11 },
+                  {
+                    type: 2,
+                    tagName: 'title',
+                    attributes: {},
+                    childNodes: [{ type: 3, textContent: 'Video', id: 13 }],
+                    id: 12,
+                  },
+                  { type: 3, textContent: '\n  ', id: 14 },
+                  {
+                    type: 2,
+                    tagName: 'script',
+                    attributes: { type: 'text/javascript' },
+                    childNodes: [
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 16 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 17 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 18 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 19 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 20 },
+                    ],
+                    id: 15,
+                  },
+                ],
+                id: 4,
+              },
+              { type: 3, textContent: '\n  ', id: 21 },
+              {
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [
+                  { type: 3, textContent: '\n    ', id: 23 },
+                  {
+                    type: 2,
+                    tagName: 'h1',
+                    attributes: {},
+                    childNodes: [
+                      { type: 3, textContent: 'Big Buck Bunny', id: 25 },
+                    ],
+                    id: 24,
+                  },
+                  { type: 3, textContent: '\n    ', id: 26 },
+                  {
+                    type: 2,
+                    tagName: 'video',
+                    attributes: {
+                      muted: '',
+                      controls: '',
+                      rr_mediaState: 'played',
+                      rr_mediaCurrentTime: 0,
+                      rr_mediaPlaybackRate: 1,
+                      rr_mediaMuted: true,
+                      rr_mediaVolume: 1,
+                    },
+                    childNodes: [
+                      { type: 3, textContent: '\n      ', id: 28 },
+                      {
+                        type: 2,
+                        tagName: 'source',
+                        attributes: {
+                          src: '/html/assets/bunny-video.webm',
+                          type: 'video/webm',
+                        },
+                        childNodes: [],
+                        id: 29,
+                      },
+                      {
+                        type: 3,
+                        textContent:
+                          '\n      Your browser does not support the video element.\n    ',
+                        id: 30,
+                      },
+                    ],
+                    id: 27,
+                  },
+                  { type: 3, textContent: '\n  ', id: 31 },
+                  {
+                    type: 5,
+                    textContent: ' Code injected by live-server ',
+                    id: 32,
+                  },
+                  { type: 3, textContent: '\n', id: 33 },
+                  {
+                    type: 2,
+                    tagName: 'script',
+                    attributes: {},
+                    childNodes: [
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 35 },
+                    ],
+                    id: 34,
+                  },
+                  { type: 3, textContent: '\n\n\n', id: 36 },
+                ],
+                id: 22,
+              },
+            ],
+            id: 3,
+          },
+        ],
+        id: 1,
+      },
+      initialOffset: { left: 0, top: 0 },
+    },
+    timestamp: 1900000136,
+  },
+  {
+    type: 3,
+    data: {
+      source: 7,
+      type: 0,
+      id: 27,
+      currentTime: 0.000322,
+      volume: 1,
+      muted: true,
+      playbackRate: 1,
+    },
+    timestamp: 1900001500,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 955, y: 869, id: 3, timeOffset: 0 }] },
+    timestamp: 1900006165,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 902, y: 823, id: 3, timeOffset: -451 },
+        { x: 840, y: 765, id: 3, timeOffset: -400 },
+        { x: 796, y: 724, id: 3, timeOffset: -350 },
+        { x: 716, y: 673, id: 3, timeOffset: -267 },
+        { x: 660, y: 645, id: 3, timeOffset: -217 },
+        { x: 554, y: 593, id: 3, timeOffset: -167 },
+        { x: 466, y: 518, id: 3, timeOffset: -101 },
+        { x: 433, y: 413, id: 27, timeOffset: -51 },
+        { x: 432, y: 316, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900006665,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 444, y: 229, id: 27, timeOffset: -435 },
+        { x: 444, y: 210, id: 27, timeOffset: -385 },
+        { x: 444, y: 209, id: 27, timeOffset: -335 },
+        { x: 445, y: 214, id: 27, timeOffset: -235 },
+        { x: 460, y: 246, id: 27, timeOffset: -185 },
+        { x: 476, y: 273, id: 27, timeOffset: -134 },
+        { x: 482, y: 281, id: 27, timeOffset: -84 },
+      ],
+    },
+    timestamp: 1900007166,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 483, y: 281, id: 27, timeOffset: 0 }] },
+    timestamp: 1900007814,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 483, y: 281, id: 27, timeOffset: -417 },
+        { x: 484, y: 282, id: 27, timeOffset: -218 },
+      ],
+    },
+    timestamp: 1900008315,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 484, y: 281, id: 27, timeOffset: 0 }] },
+    timestamp: 1900010165,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 484, y: 281, id: 27, timeOffset: -322 },
+        { x: 485, y: 281, id: 27, timeOffset: -256 },
+        { x: 491, y: 282, id: 27, timeOffset: -205 },
+        { x: 515, y: 283, id: 27, timeOffset: -156 },
+        { x: 534, y: 285, id: 27, timeOffset: -106 },
+        { x: 562, y: 291, id: 27, timeOffset: -56 },
+        { x: 575, y: 295, id: 27, timeOffset: -6 },
+      ],
+    },
+    timestamp: 1900010670,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 576, y: 296, id: 27, timeOffset: 0 }] },
+    timestamp: 1900012714,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 576, y: 298, id: 27, timeOffset: -451 },
+        { x: 577, y: 301, id: 27, timeOffset: -400 },
+        { x: 578, y: 305, id: 27, timeOffset: -334 },
+        { x: 580, y: 313, id: 27, timeOffset: -284 },
+        { x: 582, y: 332, id: 27, timeOffset: -234 },
+        { x: 585, y: 346, id: 27, timeOffset: -184 },
+        { x: 587, y: 353, id: 27, timeOffset: -133 },
+      ],
+    },
+    timestamp: 1900013215,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [{ x: 587, y: 354, id: 27, timeOffset: -253 }],
+    },
+    timestamp: 1900013717,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 587, y: 355, id: 27, timeOffset: 0 }] },
+    timestamp: 1900014364,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 588, y: 358, id: 27, timeOffset: -451 },
+        { x: 589, y: 368, id: 27, timeOffset: -400 },
+        { x: 592, y: 386, id: 27, timeOffset: -334 },
+        { x: 596, y: 402, id: 27, timeOffset: -266 },
+        { x: 597, y: 410, id: 27, timeOffset: -202 },
+        { x: 595, y: 415, id: 27, timeOffset: -152 },
+        { x: 591, y: 417, id: 27, timeOffset: -101 },
+        { x: 585, y: 418, id: 27, timeOffset: -51 },
+        { x: 579, y: 418, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900014865,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 562, y: 420, id: 27, timeOffset: -433 },
+        { x: 547, y: 422, id: 27, timeOffset: -367 },
+        { x: 538, y: 423, id: 27, timeOffset: -317 },
+        { x: 525, y: 423, id: 27, timeOffset: -251 },
+        { x: 509, y: 423, id: 27, timeOffset: -201 },
+        { x: 488, y: 422, id: 27, timeOffset: -151 },
+        { x: 440, y: 421, id: 27, timeOffset: -101 },
+        { x: 373, y: 419, id: 27, timeOffset: -51 },
+        { x: 296, y: 415, id: 27, timeOffset: -1 },
+      ],
+    },
+    timestamp: 1900015365,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 225, y: 409, id: 27, timeOffset: -439 },
+        { x: 183, y: 408, id: 27, timeOffset: -389 },
+        { x: 138, y: 407, id: 27, timeOffset: -340 },
+        { x: 98, y: 406, id: 27, timeOffset: -290 },
+        { x: 79, y: 406, id: 27, timeOffset: -238 },
+        { x: 60, y: 406, id: 27, timeOffset: -173 },
+        { x: 53, y: 406, id: 27, timeOffset: -122 },
+        { x: 39, y: 405, id: 27, timeOffset: -55 },
+      ],
+    },
+    timestamp: 1900015870,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 34, y: 403, id: 27, timeOffset: -493 },
+        { x: 31, y: 401, id: 27, timeOffset: -442 },
+        { x: 29, y: 399, id: 27, timeOffset: -375 },
+        { x: 28, y: 399, id: 27, timeOffset: -325 },
+        { x: 28, y: 397, id: 27, timeOffset: -259 },
+        { x: 28, y: 394, id: 27, timeOffset: -209 },
+        { x: 28, y: 394, id: 27, timeOffset: -159 },
+        { x: 28, y: 393, id: 27, timeOffset: -109 },
+      ],
+    },
+    timestamp: 1900016373,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 29, y: 393, id: 27, timeOffset: 0 }] },
+    timestamp: 1900018598,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 30, y: 391, id: 27, timeOffset: -433 },
+        { x: 31, y: 392, id: 27, timeOffset: -251 },
+        { x: 30, y: 393, id: 27, timeOffset: -201 },
+        { x: 30, y: 394, id: 27, timeOffset: -151 },
+      ],
+    },
+    timestamp: 1900019098,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 30, y: 394, id: 27, timeOffset: -457 },
+        { x: 30, y: 394, id: 27, timeOffset: -391 },
+      ],
+    },
+    timestamp: 1900019605,
+  },
+  { type: 3, data: { source: 2, type: 5, id: 27 }, timestamp: 1900020571 },
+  {
+    type: 3,
+    data: {
+      source: 7,
+      type: 1,
+      id: 27,
+      currentTime: 20.088367,
+      volume: 1,
+      muted: true,
+      playbackRate: 1,
+    },
+    timestamp: 1900020661,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 32, y: 394, id: 27, timeOffset: 0 }] },
+    timestamp: 1900021531,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 48, y: 394, id: 27, timeOffset: -449 },
+        { x: 286, y: 413, id: 27, timeOffset: -384 },
+        { x: 418, y: 419, id: 27, timeOffset: -334 },
+        { x: 474, y: 419, id: 27, timeOffset: -284 },
+        { x: 482, y: 418, id: 27, timeOffset: -233 },
+        { x: 482, y: 417, id: 27, timeOffset: -167 },
+        { x: 477, y: 416, id: 27, timeOffset: -116 },
+        { x: 439, y: 414, id: 27, timeOffset: -51 },
+        { x: 402, y: 412, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900022031,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 376, y: 413, id: 27, timeOffset: -450 },
+        { x: 366, y: 414, id: 27, timeOffset: -400 },
+        { x: 353, y: 416, id: 27, timeOffset: -334 },
+        { x: 346, y: 417, id: 27, timeOffset: -283 },
+        { x: 339, y: 419, id: 27, timeOffset: -233 },
+        { x: 322, y: 422, id: 27, timeOffset: -167 },
+        { x: 311, y: 422, id: 27, timeOffset: -117 },
+        { x: 308, y: 422, id: 27, timeOffset: -51 },
+        { x: 311, y: 420, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900022531,
+  },
+  {
+    type: 3,
+    data: {
+      source: 7,
+      type: 2,
+      id: 27,
+      currentTime: 9.744288,
+      volume: 1,
+      muted: true,
+      playbackRate: 1,
+    },
+    timestamp: 19000602896,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 315, y: 419, id: 27, timeOffset: -448 },
+        { x: 316, y: 418, id: 27, timeOffset: -397 },
+        { x: 317, y: 417, id: 27, timeOffset: -347 },
+        { x: 317, y: 417, id: 27, timeOffset: -281 },
+      ],
+    },
+    timestamp: 1900023045,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 318, y: 418, id: 27, timeOffset: -466 },
+        { x: 326, y: 439, id: 27, timeOffset: -416 },
+        { x: 333, y: 473, id: 3, timeOffset: -365 },
+        { x: 334, y: 484, id: 3, timeOffset: -300 },
+        { x: 334, y: 485, id: 3, timeOffset: -50 },
+      ],
+    },
+    timestamp: 1900023547,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 333, y: 485, id: 3, timeOffset: -483 },
+        { x: 321, y: 481, id: 3, timeOffset: -433 },
+        { x: 265, y: 460, id: 3, timeOffset: -383 },
+        { x: 203, y: 433, id: 27, timeOffset: -332 },
+        { x: 135, y: 402, id: 27, timeOffset: -283 },
+        { x: 86, y: 387, id: 27, timeOffset: -216 },
+        { x: 70, y: 384, id: 27, timeOffset: -166 },
+        { x: 58, y: 381, id: 27, timeOffset: -100 },
+        { x: 53, y: 381, id: 27, timeOffset: -33 },
+      ],
+    },
+    timestamp: 1900024047,
+  },
+  {
+    type: 3,
+    data: {
+      source: 7,
+      type: 0,
+      id: 27,
+      currentTime: 9.744632,
+      volume: 1,
+      muted: true,
+      playbackRate: 1,
+    },
+    timestamp: 1900024475,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 49, y: 383, id: 27, timeOffset: -468 },
+        { x: 39, y: 387, id: 27, timeOffset: -418 },
+        { x: 31, y: 389, id: 27, timeOffset: -367 },
+        { x: 28, y: 390, id: 27, timeOffset: -301 },
+      ],
+    },
+    timestamp: 1900024548,
+  },
+  {
+    type: 3,
+    data: {
+      source: 7,
+      type: 1,
+      id: 27,
+      currentTime: 19.704312,
+      volume: 1,
+      muted: true,
+      playbackRate: 1,
+    },
+    timestamp: 1900034476,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 28, y: 390, id: 27, timeOffset: 0 }] },
+    timestamp: 1900034631,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 29, y: 393, id: 27, timeOffset: -459 },
+        { x: 262, y: 474, id: 3, timeOffset: -376 },
+        { x: 562, y: 573, id: 3, timeOffset: -326 },
+        { x: 702, y: 603, id: 3, timeOffset: -260 },
+        { x: 714, y: 603, id: 3, timeOffset: -209 },
+        { x: 716, y: 600, id: 3, timeOffset: -159 },
+        { x: 717, y: 597, id: 3, timeOffset: -109 },
+      ],
+    },
+    timestamp: 1900035140,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 718, y: 596, id: 3, timeOffset: 0 }] },
+    timestamp: 1900035963,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [{ x: 719, y: 594, id: 3, timeOffset: -451 }],
+    },
+    timestamp: 1900036464,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 722, y: 594, id: 3, timeOffset: 0 }] },
+    timestamp: 1900037931,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 772, y: 588, id: 3, timeOffset: -438 },
+        { x: 850, y: 577, id: 3, timeOffset: -371 },
+        { x: 879, y: 576, id: 3, timeOffset: -321 },
+        { x: 914, y: 576, id: 3, timeOffset: -255 },
+        { x: 926, y: 577, id: 3, timeOffset: -205 },
+        { x: 932, y: 579, id: 3, timeOffset: -154 },
+        { x: 935, y: 582, id: 3, timeOffset: -88 },
+        { x: 945, y: 587, id: 3, timeOffset: -22 },
+      ],
+    },
+    timestamp: 1900038435,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 966, y: 593, id: 3, timeOffset: -483 },
+        { x: 1006, y: 601, id: 3, timeOffset: -433 },
+        { x: 1075, y: 608, id: 3, timeOffset: -383 },
+        { x: 1098, y: 610, id: 3, timeOffset: -333 },
+        { x: 1102, y: 611, id: 3, timeOffset: -283 },
+        { x: 1102, y: 611, id: 3, timeOffset: -217 },
+        { x: 1103, y: 612, id: 3, timeOffset: -166 },
+        { x: 1103, y: 616, id: 3, timeOffset: -100 },
+      ],
+    },
+    timestamp: 1900038947,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 1103, y: 616, id: 3, timeOffset: -151 },
+        { x: 1103, y: 616, id: 3, timeOffset: -52 },
+        { x: 1103, y: 614, id: 3, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900039448,
+  },
+];
+
+export default events;
diff --git a/packages/rrweb/test/html/assets/bunny-video.webm b/packages/rrweb/test/html/assets/bunny-video.webm
new file mode 100644
index 0000000000..2a7fc3a63a
Binary files /dev/null and b/packages/rrweb/test/html/assets/bunny-video.webm differ
diff --git a/packages/rrweb/test/html/video.html b/packages/rrweb/test/html/video.html
new file mode 100644
index 0000000000..0506aee9d4
--- /dev/null
+++ b/packages/rrweb/test/html/video.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Video</title>
+  </head>
+  <body>
+    <h1>Big Buck Bunny</h1>
+    <video muted controls>
+      <source src="assets/bunny-video.webm" type="video/webm" />
+      Your browser does not support the video element.
+    </video>
+  </body>
+  <script>
+    document.querySelector('video').currentTime = 5;
+  </script>
+</html>
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index 6fd3e66360..a2537b4918 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -1270,6 +1270,45 @@ describe('record integration tests', function (this: ISuite) {
       p.innerText = 'mutated';
     });
 
+    await page.evaluate(() => {
+      // generate a characterData mutation; innerText doesn't do that
+      const p = document.querySelector('p') as HTMLParagraphElement;
+      (p.childNodes[0] as Text).insertData(0, 'doubly ');
+    });
+
+    const snapshots = (await page.evaluate(
+      'window.snapshots',
+    )) as eventWithTime[];
+    assertSnapshot(snapshots);
+  });
+
+  it('can mask character data mutations with regexp', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(
+      getHtml.call(this, 'mutation-observer.html', {
+        maskTextClass: /custom/,
+      }),
+    );
+
+    await page.evaluate(() => {
+      const li = document.createElement('li');
+      const ul = document.querySelector('ul') as HTMLUListElement;
+      const p = document.querySelector('p') as HTMLParagraphElement;
+      [ul, p].forEach((element) => {
+        element.className = 'custom-mask';
+      });
+      ul.appendChild(li);
+      li.innerText = 'new list item';
+      p.innerText = 'mutated';
+    });
+
+    await page.evaluate(() => {
+      // generate a characterData mutation; innerText doesn't do that
+      const li = document.querySelector('li:not(:empty)') as HTMLLIElement;
+      (li.childNodes[0] as Text).insertData(0, 'descendent should be masked ');
+    });
+
     const snapshots = (await page.evaluate(
       'window.snapshots',
     )) as eventWithTime[];
diff --git a/packages/rrweb/test/plugins/console/record.test.ts b/packages/rrweb/test/plugins/console/record.test.ts
new file mode 100644
index 0000000000..a864aaf178
--- /dev/null
+++ b/packages/rrweb/test/plugins/console/record.test.ts
@@ -0,0 +1,11 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { stringify } from '../../../src/plugins/console/record/stringify';
+
+describe('console record plugin', () => {
+  it('can stringify bigint', () => {
+    expect(stringify(BigInt(1))).toEqual('"1n"');
+  });
+});
diff --git a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
index a296b53be8..e160fb38d6 100644
--- a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
+++ b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
@@ -263,7 +263,11 @@ exports[`cross origin iframes audio.html should emit contents of iframe once 1`]
                         \\"attributes\\": {
                           \\"controls\\": \\"\\",
                           \\"rr_mediaState\\": \\"paused\\",
-                          \\"rr_mediaCurrentTime\\": 0
+                          \\"rr_mediaCurrentTime\\": 0,
+                          \\"rr_mediaPlaybackRate\\": 1,
+                          \\"rr_mediaMuted\\": false,
+                          \\"rr_mediaLoop\\": false,
+                          \\"rr_mediaVolume\\": 1
                         },
                         \\"childNodes\\": [
                           {
@@ -327,7 +331,8 @@ exports[`cross origin iframes audio.html should emit contents of iframe once 1`]
       \\"currentTime\\": 0,
       \\"volume\\": 1,
       \\"muted\\": false,
-      \\"playbackRate\\": 1
+      \\"playbackRate\\": 1,
+      \\"loop\\": false
     }
   }
 ]"
diff --git a/packages/rrweb/test/replay/ video.test.ts b/packages/rrweb/test/replay/ video.test.ts
new file mode 100644
index 0000000000..6950f0e10f
--- /dev/null
+++ b/packages/rrweb/test/replay/ video.test.ts	
@@ -0,0 +1,240 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import type * as puppeteer from 'puppeteer';
+import {
+  startServer,
+  launchPuppeteer,
+  getServerURL,
+  waitForRAF,
+  ISuite,
+  hideMouseAnimation,
+  fakeGoto,
+} from '../utils';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import videoPlaybackEvents from '../events/video-playback';
+import videoPlaybackOnFullSnapshotEvents from '../events/video-playback-on-full-snapshot';
+expect.extend({ toMatchImageSnapshot });
+
+describe('video', () => {
+  jest.setTimeout(100_000);
+  let code: ISuite['code'];
+  let page: ISuite['page'];
+  let browser: ISuite['browser'];
+  let server: ISuite['server'];
+  let serverURL: ISuite['serverURL'];
+
+  beforeAll(async () => {
+    server = await startServer();
+    serverURL = getServerURL(server);
+    browser = await launchPuppeteer();
+
+    const bundlePath = path.resolve(__dirname, '../../dist/rrweb.js');
+    code = fs.readFileSync(bundlePath, 'utf8');
+  });
+
+  afterEach(async () => {
+    await page.close();
+  });
+
+  afterAll(async () => {
+    await server.close();
+    await browser.close();
+  });
+
+  beforeEach(async () => {
+    page = await browser.newPage();
+
+    await fakeGoto(page, `${serverURL}/html/video.html`);
+    await page.evaluate(code);
+    await waitForRAF(page);
+    await hideMouseAnimation(page);
+  });
+
+  it('will seek to the correct moment', async () => {
+    await page.evaluate(`let events = ${JSON.stringify(videoPlaybackEvents)}`);
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events);
+    `);
+    await waitForRAF(page);
+    await page.evaluate(`
+      window.replayer.pause(6500);
+    `);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const frameImage = await page!.screenshot();
+    await waitForRAF(page);
+    expect(frameImage).toMatchImageSnapshot({
+      failureThreshold: 0.05,
+      failureThresholdType: 'percent',
+    });
+  });
+
+  it('will seek to the correct moment without media interaction events', async () => {
+    await page.evaluate(`
+      let events = ${JSON.stringify(videoPlaybackOnFullSnapshotEvents)};
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events);
+      window.replayer.pause(6500);
+    `);
+
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const frameImage = await page!.screenshot();
+    await waitForRAF(page);
+    expect(frameImage).toMatchImageSnapshot({
+      failureThreshold: 0.05,
+      failureThresholdType: 'percent',
+    });
+  });
+
+  it("will be paused when the player wasn't started yet", async () => {
+    await page.evaluate(`
+      let events = ${JSON.stringify(videoPlaybackEvents)};
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events);
+    `);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const frameImage = await page!.screenshot();
+
+    await waitForRAF(page);
+    expect(frameImage).toMatchImageSnapshot({
+      failureThreshold: 0.05,
+      failureThresholdType: 'percent',
+    });
+  });
+
+  it('will play from the correct moment', async () => {
+    await page.evaluate(`let events = ${JSON.stringify(videoPlaybackEvents)}`);
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events, {
+        UNSAFE_replayCanvas: true,
+      });
+    `);
+    await waitForRAF(page);
+    await page.evaluate(`
+      window.replayer.play(6500);
+    `);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const frameImage = await page!.screenshot();
+    await waitForRAF(page);
+    expect(frameImage).toMatchImageSnapshot({
+      failureThreshold: 0.05,
+      failureThresholdType: 'percent',
+    });
+
+    // TODO: check to see if video is same as basic replay
+  });
+
+  it('should play from the start', async () => {
+    await page.evaluate(`let events = ${JSON.stringify(videoPlaybackEvents)}`);
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events);
+      window.replayer.play();
+    `);
+    await waitForRAF(page);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const isPlaying = await page.evaluate(`
+      !document.querySelector('iframe').contentDocument.querySelector('video').paused && 
+      document.querySelector('iframe').contentDocument.querySelector('video').currentTime !== 0 && 
+      !document.querySelector('iframe').contentDocument.querySelector('video').ended;
+    `);
+    expect(isPlaying).toBe(true);
+  });
+
+  it('should play from the start without media events', async () => {
+    await page.evaluate(
+      `let events = ${JSON.stringify(videoPlaybackOnFullSnapshotEvents)}`,
+    );
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events);
+      window.replayer.play();
+    `);
+    await waitForRAF(page);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const isPlaying = await page.evaluate(`
+      !document.querySelector('iframe').contentDocument.querySelector('video').paused && 
+      document.querySelector('iframe').contentDocument.querySelector('video').currentTime !== 0 && 
+      !document.querySelector('iframe').contentDocument.querySelector('video').ended;
+    `);
+    expect(isPlaying).toBe(true);
+  });
+
+  it('should report the correct time for looping videos that have passed their total time', async () => {
+    await page.evaluate(
+      `let events = ${JSON.stringify(videoPlaybackOnFullSnapshotEvents)}`,
+    );
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events);
+    `);
+    await waitForRAF(page);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+    await page.evaluate(`
+    window.replayer.pause(25000); // 5 seconds after the video started a new loop
+    `);
+    await waitForRAF(page);
+
+    const time = await page.evaluate(`
+      document.querySelector('iframe').contentDocument.querySelector('video').currentTime;
+    `);
+    expect(time).toBeCloseTo(5, 0);
+  });
+
+  it('should set the correct time on loading videos', async () => {
+    await page.evaluate(
+      `let events = ${JSON.stringify(videoPlaybackOnFullSnapshotEvents)}`,
+    );
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events);
+      window.replayer.pause(25000); // 5 seconds after the video started a new loop
+    `);
+    await waitForRAF(page);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const time = await page.evaluate(`
+      document.querySelector('iframe').contentDocument.querySelector('video').currentTime;
+    `);
+    expect(time).toBeCloseTo(5, 0);
+  });
+
+  it('should set the correct playbackRate on faster playback', async () => {
+    page.on('console', (msg) => {
+      console.log(msg.text());
+    });
+    await page.evaluate(
+      `let events = ${JSON.stringify(videoPlaybackOnFullSnapshotEvents)}`,
+    );
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events, {
+        speed: 8,
+      });
+      window.replayer.play();
+    `);
+    await waitForRAF(page);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const time = await page.evaluate(`
+      document.querySelector('iframe').contentDocument.querySelector('video').playbackRate;
+    `);
+    expect(time).toBe(8);
+  });
+});
diff --git a/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-be-paused-when-the-player-wasnt-started-yet-1-snap.png b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-be-paused-when-the-player-wasnt-started-yet-1-snap.png
new file mode 100644
index 0000000000..b35e4648a3
Binary files /dev/null and b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-be-paused-when-the-player-wasnt-started-yet-1-snap.png differ
diff --git a/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-play-from-the-correct-moment-1-snap.png b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-play-from-the-correct-moment-1-snap.png
new file mode 100644
index 0000000000..d3247cd523
Binary files /dev/null and b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-play-from-the-correct-moment-1-snap.png differ
diff --git a/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-seek-to-the-correct-moment-1-snap.png b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-seek-to-the-correct-moment-1-snap.png
new file mode 100644
index 0000000000..f3e38918c5
Binary files /dev/null and b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-seek-to-the-correct-moment-1-snap.png differ
diff --git a/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-seek-to-the-correct-moment-without-media-interaction-events-1-snap.png b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-seek-to-the-correct-moment-without-media-interaction-events-1-snap.png
new file mode 100644
index 0000000000..38943d8a2f
Binary files /dev/null and b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-seek-to-the-correct-moment-without-media-interaction-events-1-snap.png differ
diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts
index cbf6ca75f2..54bd3fa11f 100644
--- a/packages/rrweb/test/replayer.test.ts
+++ b/packages/rrweb/test/replayer.test.ts
@@ -12,8 +12,10 @@ import hoverInIframeShadowDom from './events/iframe-shadowdom-hover';
 import inputEvents from './events/input';
 import orderingEvents from './events/ordering';
 import scrollEvents from './events/scroll';
+import scrollWithParentStylesEvents from './events/scroll-with-parent-styles';
 import selectionEvents from './events/selection';
 import shadowDomEvents from './events/shadow-dom';
+import textareaEvents from './events/bad-textarea';
 import styleSheetRuleEvents from './events/style-sheet-rule-events';
 import StyleSheetTextMutation from './events/style-sheet-text-mutation';
 import {
@@ -23,6 +25,7 @@ import {
   sampleStyleSheetRemoveEvents as stylesheetRemoveEvents,
   waitForRAF,
 } from './utils';
+import customElementDefineClass from './events/custom-element-define-class';
 
 interface ISuite {
   code: string;
@@ -409,6 +412,51 @@ describe('replayer', function () {
     ).toEqual(0);
   });
 
+  it('can fast forward scroll events w/ a parent node that affects a child nodes height', async () => {
+    await page.evaluate(`
+      events = ${JSON.stringify(scrollWithParentStylesEvents)};
+      const { Replayer } = rrweb;
+      var replayer = new Replayer(events,{showDebug:true});
+      replayer.pause(550);
+    `);
+    // add the ".container" element at 500
+    const iframe = await page.$('iframe');
+    const contentDocument = await iframe!.contentFrame()!;
+    expect(await contentDocument!.$('.container')).not.toBeNull();
+    expect(
+      await contentDocument!.$eval(
+        '.container',
+        (element: Element) => element.scrollTop,
+      ),
+    ).toEqual(0);
+
+    // restart the replayer
+    await page.evaluate('replayer.play(0);');
+    await waitForRAF(page);
+
+    await page.evaluate('replayer.pause(1050);');
+    // scroll the ".container" div' at 1000
+    expect(
+      await contentDocument!.$eval(
+        '.container',
+        (element: Element) => element.scrollTop,
+      ),
+    ).toEqual(800);
+
+    await page.evaluate('replayer.play(0);');
+    await waitForRAF(page);
+    await page.evaluate('replayer.pause(2050);');
+    // remove the ".container" element at 2000
+    expect(await contentDocument!.$('.container')).toBeNull();
+    expect(
+      await page.$eval(
+        'iframe',
+        (element: Element) =>
+          (element as HTMLIFrameElement)!.contentWindow!.scrollY,
+      ),
+    ).toEqual(0);
+  });
+
   it('can fast forward input events', async () => {
     await page.evaluate(`
       events = ${JSON.stringify(inputEvents)};
@@ -1076,4 +1124,34 @@ describe('replayer', function () {
       ),
     ).toBe(':hover');
   });
+
+  it('should replay styles with :define pseudo-class', async () => {
+    await page.evaluate(`events = ${JSON.stringify(customElementDefineClass)}`);
+
+    const displayValue = await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.pause(200);
+      const customElement = replayer.iframe.contentDocument.querySelector('custom-element');
+      window.getComputedStyle(customElement).display;
+    `);
+    // If the custom element is not defined, the display value will be 'none'.
+    // If the custom element is defined, the display value will be 'block'.
+    expect(displayValue).toEqual('block');
+  });
+
+  it('can deal with legacy duplicate/conflicting values on textareas', async () => {
+    await page.evaluate(`events = ${JSON.stringify(textareaEvents)}`);
+
+    const displayValue = await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.pause(100);
+      const textarea = replayer.iframe.contentDocument.querySelector('textarea');
+      textarea.value;
+    `);
+    // If the custom element is not defined, the display value will be 'none'.
+    // If the custom element is defined, the display value will be 'block'.
+    expect(displayValue).toEqual('this value is used for replay');
+  });
 });
diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts
index b8cabb2668..169dd243a7 100644
--- a/packages/rrweb/test/utils.ts
+++ b/packages/rrweb/test/utils.ts
@@ -50,6 +50,7 @@ export const startServer = (defaultPort: number = 3030) =>
       '.html': 'text/html',
       '.js': 'text/javascript',
       '.css': 'text/css',
+      '.webm': 'video/webm',
     };
     const s = http.createServer((req, res) => {
       const parsedUrl = url.parse(req.url!);
@@ -69,6 +70,7 @@ export const startServer = (defaultPort: number = 3030) =>
         res.setHeader('Access-Control-Allow-Origin', '*');
         res.setHeader('Access-Control-Allow-Methods', 'GET');
         res.setHeader('Access-Control-Allow-Headers', 'Content-type');
+        if (ext === '.webm') res.setHeader('Accept-Ranges', 'bytes');
         setTimeout(() => {
           res.end(data);
           // mock delay
@@ -693,6 +695,7 @@ export function generateRecordSnippet(options: recordOptions<eventWithTime>) {
     maskAllInputs: ${options.maskAllInputs},
     maskInputOptions: ${JSON.stringify(options.maskAllInputs)},
     userTriggeredOnInput: ${options.userTriggeredOnInput},
+    maskTextClass: ${options.maskTextClass},
     maskTextFn: ${options.maskTextFn},
     maskInputFn: ${options.maskInputFn},
     recordCanvas: ${options.recordCanvas},
@@ -702,3 +705,26 @@ export function generateRecordSnippet(options: recordOptions<eventWithTime>) {
   });
   `;
 }
+
+export async function hideMouseAnimation(p: puppeteer.Page): Promise<void> {
+  await p.addStyleTag({
+    content: `.replayer-mouse-tail{display: none !important;}
+                html, body { margin: 0; padding: 0; }
+                iframe { border: none; }`,
+  });
+}
+
+export const fakeGoto = async (p: puppeteer.Page, url: string) => {
+  const intercept = async (request: puppeteer.HTTPRequest) => {
+    await request.respond({
+      status: 200,
+      contentType: 'text/html',
+      body: ' ', // non-empty string or page will load indefinitely
+    });
+  };
+  await p.setRequestInterception(true);
+  p.on('request', intercept);
+  await p.goto(url);
+  p.off('request', intercept);
+  await p.setRequestInterception(false);
+};
diff --git a/packages/types/package.json b/packages/types/package.json
index 022d574539..1fead215a6 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -31,7 +31,8 @@
   "exports": {
     ".": {
       "import": "./dist/rrweb-types.js",
-      "require": "./dist/rrweb-types.umd.cjs"
+      "require": "./dist/rrweb-types.umd.cjs",
+      "types": "./dist/index.d.ts"
     }
   },
   "files": [
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 85e0efd5c6..74fba484ee 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -83,6 +83,7 @@ export enum IncrementalSource {
   StyleDeclaration,
   Selection,
   AdoptedStyleSheet,
+  CustomElement,
 }
 
 export type mutationData = {
@@ -142,6 +143,10 @@ export type adoptedStyleSheetData = {
   source: IncrementalSource.AdoptedStyleSheet;
 } & adoptedStyleSheetParam;
 
+export type customElementData = {
+  source: IncrementalSource.CustomElement;
+} & customElementParam;
+
 export type incrementalData =
   | mutationData
   | mousemoveData
@@ -155,7 +160,8 @@ export type incrementalData =
   | fontData
   | selectionData
   | styleDeclarationData
-  | adoptedStyleSheetData;
+  | adoptedStyleSheetData
+  | customElementData;
 
 export type event =
   | domContentLoadedEvent
@@ -262,6 +268,7 @@ export type hooksParam = {
   canvasMutation?: canvasMutationCallback;
   font?: fontCallback;
   selection?: selectionCallback;
+  customElement?: customElementCallback;
 };
 
 // https://dom.spec.whatwg.org/#interface-mutationrecord
@@ -410,8 +417,8 @@ export type CanvasArg =
 type mouseInteractionParam = {
   type: MouseInteractions;
   id: number;
-  x: number;
-  y: number;
+  x?: number;
+  y?: number;
   pointerType?: PointerTypes;
 };
 
@@ -566,6 +573,7 @@ export type mediaInteractionParam = {
   currentTime?: number;
   volume?: number;
   muted?: boolean;
+  loop?: boolean;
   playbackRate?: number;
 };
 
@@ -593,6 +601,14 @@ export type selectionParam = {
 
 export type selectionCallback = (p: selectionParam) => void;
 
+export type customElementParam = {
+  define?: {
+    name: string;
+  };
+};
+
+export type customElementCallback = (c: customElementParam) => void;
+
 export type DeprecatedMirror = {
   map: {
     [key: number]: INode;
@@ -638,6 +654,9 @@ export type Arguments<T> = T extends (...payload: infer U) => unknown
 export enum ReplayerEvents {
   Start = 'start',
   Pause = 'pause',
+  /**
+   * @deprecated use Play instead
+   */
   Resume = 'resume',
   Resize = 'resize',
   Finish = 'finish',
diff --git a/packages/web-extension/src/content/index.ts b/packages/web-extension/src/content/index.ts
index 49f08055b0..a277518167 100644
--- a/packages/web-extension/src/content/index.ts
+++ b/packages/web-extension/src/content/index.ts
@@ -155,8 +155,8 @@ async function initMainPage() {
 
   // Before unload pages, cache the new events in the local storage.
   window.addEventListener('beforeunload', (event) => {
+    if (!newEvents.length) return;
     event.preventDefault();
-    if (newEvents.length === 0) return;
     void Browser.storage.local.set({
       [LocalDataKey.bufferedEvents]: bufferedEvents.concat(newEvents),
     });
diff --git a/packages/web-extension/src/pages/Player.tsx b/packages/web-extension/src/pages/Player.tsx
index f88647b304..42c789b610 100644
--- a/packages/web-extension/src/pages/Player.tsx
+++ b/packages/web-extension/src/pages/Player.tsx
@@ -27,7 +27,7 @@ export default function Player() {
       });
     getEvents(sessionId)
       .then((events) => {
-        if (!playerElRef.current || !sessionId) return;
+        if (!playerElRef.current) return;
 
         const linkEl = document.createElement('link');
         linkEl.href =
diff --git a/packages/web-extension/src/utils/channel.ts b/packages/web-extension/src/utils/channel.ts
index 4268811eac..1a8e9b2a82 100644
--- a/packages/web-extension/src/utils/channel.ts
+++ b/packages/web-extension/src/utils/channel.ts
@@ -33,7 +33,7 @@ class Channel {
   private emitter = mitt();
   constructor() {
     /**
-     * Register massage listener.
+     * Register message listener.
      */
     Browser.runtime.onMessage.addListener(
       ((message: string, sender: Runtime.MessageSender) => {
diff --git a/packages/web-extension/vite.config.ts b/packages/web-extension/vite.config.ts
index 95809cb727..76d2c631a3 100644
--- a/packages/web-extension/vite.config.ts
+++ b/packages/web-extension/vite.config.ts
@@ -1,9 +1,4 @@
-import {
-  defineConfig,
-  LibraryFormats,
-  LibraryOptions,
-  PluginOption,
-} from 'vite';
+import { defineConfig, LibraryFormats, PluginOption } from 'vite';
 import webExtension, { readJsonFile } from 'vite-plugin-web-extension';
 import zip from 'vite-plugin-zip-pack';
 import * as path from 'path';
@@ -17,9 +12,19 @@ function useSpecialFormat(
   return {
     name: 'use-special-format',
     config(config) {
-      const shouldUse = entriesToUse.includes(
-        (config.build?.lib as LibraryOptions)?.entry,
-      );
+      // entry can be string | string[] | {[entryAlias: string]: string}
+      const entry = config.build?.lib && config.build.lib.entry;
+      let shouldUse = false;
+
+      if (typeof entry === 'string') {
+        shouldUse = entriesToUse.includes(entry);
+      } else if (Array.isArray(entry)) {
+        shouldUse = entriesToUse.some((e) => entry.includes(e));
+      } else if (entry && typeof entry === 'object') {
+        const entryKeys = Object.keys(entry);
+        shouldUse = entriesToUse.some((e) => entryKeys.includes(e));
+      }
+
       if (shouldUse) {
         config.build = config.build ?? {};
         // @ts-expect-error: lib needs to be an object, forcing it.
diff --git a/yarn.lock b/yarn.lock
index 784f857d42..40f8fd25f3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@aashutoshrathi/word-wrap@^1.2.3":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
+  integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
+
 "@ampproject/remapping@^2.1.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
@@ -1675,16 +1680,16 @@
   resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-2.0.11.tgz#b2eb236e803451b39cdfcce3c5ab52e773c066a3"
   integrity sha512-e+5amYvnsmEQdiWH4XMyvrtGTdwz//+48vwj5CsNWWcselzkwqodmciy5rIrT71/SCQDOtmgnL7ZWAUOffxfsQ==
 
-"@changesets/apply-release-plan@^6.1.3":
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-6.1.3.tgz#3bcc0bd57ba00d50d20df7d0141f1a9b2134eaf7"
-  integrity sha512-ECDNeoc3nfeAe1jqJb5aFQX7CqzQhD2klXRez2JDb/aVpGUbX673HgKrnrgJRuQR/9f2TtLoYIzrGB9qwD77mg==
+"@changesets/apply-release-plan@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-7.0.0.tgz#ce3c3dfc5720550a5d592b54ad2f411f816ec5ff"
+  integrity sha512-vfi69JR416qC9hWmFGSxj7N6wA5J222XNBmezSVATPWDVPIF7gkd4d8CpbEbXmRWbVrkoli3oerGS6dcL/BGsQ==
   dependencies:
     "@babel/runtime" "^7.20.1"
-    "@changesets/config" "^2.3.0"
-    "@changesets/get-version-range-type" "^0.3.2"
-    "@changesets/git" "^2.0.0"
-    "@changesets/types" "^5.2.1"
+    "@changesets/config" "^3.0.0"
+    "@changesets/get-version-range-type" "^0.4.0"
+    "@changesets/git" "^3.0.0"
+    "@changesets/types" "^6.0.0"
     "@manypkg/get-packages" "^1.1.3"
     detect-indent "^6.0.0"
     fs-extra "^7.0.1"
@@ -1692,181 +1697,180 @@
     outdent "^0.5.0"
     prettier "^2.7.1"
     resolve-from "^5.0.0"
-    semver "^5.4.1"
+    semver "^7.5.3"
 
-"@changesets/assemble-release-plan@^5.2.3":
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.3.tgz#5ce6191c6e193d40b566a7b0e01690cfb106f4db"
-  integrity sha512-g7EVZCmnWz3zMBAdrcKhid4hkHT+Ft1n0mLussFMcB1dE2zCuwcvGoy9ec3yOgPGF4hoMtgHaMIk3T3TBdvU9g==
+"@changesets/assemble-release-plan@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@changesets/assemble-release-plan/-/assemble-release-plan-6.0.0.tgz#c69969b4bef7c32a8544b6941d1053260ca47e05"
+  integrity sha512-4QG7NuisAjisbW4hkLCmGW2lRYdPrKzro+fCtZaILX+3zdUELSvYjpL4GTv0E4aM9Mef3PuIQp89VmHJ4y2bfw==
   dependencies:
     "@babel/runtime" "^7.20.1"
-    "@changesets/errors" "^0.1.4"
-    "@changesets/get-dependents-graph" "^1.3.5"
-    "@changesets/types" "^5.2.1"
+    "@changesets/errors" "^0.2.0"
+    "@changesets/get-dependents-graph" "^2.0.0"
+    "@changesets/types" "^6.0.0"
     "@manypkg/get-packages" "^1.1.3"
-    semver "^5.4.1"
+    semver "^7.5.3"
 
-"@changesets/changelog-git@^0.1.14":
-  version "0.1.14"
-  resolved "https://registry.yarnpkg.com/@changesets/changelog-git/-/changelog-git-0.1.14.tgz#852caa7727dcf91497c131d05bc2cd6248532ada"
-  integrity sha512-+vRfnKtXVWsDDxGctOfzJsPhaCdXRYoe+KyWYoq5X/GqoISREiat0l3L8B0a453B2B4dfHGcZaGyowHbp9BSaA==
+"@changesets/changelog-git@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@changesets/changelog-git/-/changelog-git-0.2.0.tgz#1f3de11becafff5a38ebe295038a602403c93a86"
+  integrity sha512-bHOx97iFI4OClIT35Lok3sJAwM31VbUM++gnMBV16fdbtBhgYu4dxsphBF/0AZZsyAHMrnM0yFcj5gZM1py6uQ==
   dependencies:
-    "@changesets/types" "^5.2.1"
+    "@changesets/types" "^6.0.0"
 
-"@changesets/changelog-github@^0.4.8":
-  version "0.4.8"
-  resolved "https://registry.yarnpkg.com/@changesets/changelog-github/-/changelog-github-0.4.8.tgz#b7f8ae85d0c0ff08028d924c5e59a1cbd3742634"
-  integrity sha512-jR1DHibkMAb5v/8ym77E4AMNWZKB5NPzw5a5Wtqm1JepAuIF+hrKp2u04NKM14oBZhHglkCfrla9uq8ORnK/dw==
+"@changesets/changelog-github@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@changesets/changelog-github/-/changelog-github-0.5.0.tgz#ae96e5029209f7386527b3821d9c988b1ab16662"
+  integrity sha512-zoeq2LJJVcPJcIotHRJEEA2qCqX0AQIeFE+L21L8sRLPVqDhSXY8ZWAt2sohtBpFZkBwu+LUwMSKRr2lMy3LJA==
   dependencies:
-    "@changesets/get-github-info" "^0.5.2"
-    "@changesets/types" "^5.2.1"
+    "@changesets/get-github-info" "^0.6.0"
+    "@changesets/types" "^6.0.0"
     dotenv "^8.1.0"
 
-"@changesets/cli@^2.26.0":
-  version "2.26.0"
-  resolved "https://registry.yarnpkg.com/@changesets/cli/-/cli-2.26.0.tgz#f215ddb2b41574ffd0dda9cd77fac927ba048fd3"
-  integrity sha512-0cbTiDms+ICTVtEwAFLNW0jBNex9f5+fFv3I771nBvdnV/mOjd1QJ4+f8KtVSOrwD9SJkk9xbDkWFb0oXd8d1Q==
+"@changesets/cli@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@changesets/cli/-/cli-2.27.1.tgz#abce480fd30b9abbe2cfcf07d5d668c364ce2804"
+  integrity sha512-iJ91xlvRnnrJnELTp4eJJEOPjgpF3NOh4qeQehM6Ugiz9gJPRZ2t+TsXun6E3AMN4hScZKjqVXl0TX+C7AB3ZQ==
   dependencies:
     "@babel/runtime" "^7.20.1"
-    "@changesets/apply-release-plan" "^6.1.3"
-    "@changesets/assemble-release-plan" "^5.2.3"
-    "@changesets/changelog-git" "^0.1.14"
-    "@changesets/config" "^2.3.0"
-    "@changesets/errors" "^0.1.4"
-    "@changesets/get-dependents-graph" "^1.3.5"
-    "@changesets/get-release-plan" "^3.0.16"
-    "@changesets/git" "^2.0.0"
-    "@changesets/logger" "^0.0.5"
-    "@changesets/pre" "^1.0.14"
-    "@changesets/read" "^0.5.9"
-    "@changesets/types" "^5.2.1"
-    "@changesets/write" "^0.2.3"
+    "@changesets/apply-release-plan" "^7.0.0"
+    "@changesets/assemble-release-plan" "^6.0.0"
+    "@changesets/changelog-git" "^0.2.0"
+    "@changesets/config" "^3.0.0"
+    "@changesets/errors" "^0.2.0"
+    "@changesets/get-dependents-graph" "^2.0.0"
+    "@changesets/get-release-plan" "^4.0.0"
+    "@changesets/git" "^3.0.0"
+    "@changesets/logger" "^0.1.0"
+    "@changesets/pre" "^2.0.0"
+    "@changesets/read" "^0.6.0"
+    "@changesets/types" "^6.0.0"
+    "@changesets/write" "^0.3.0"
     "@manypkg/get-packages" "^1.1.3"
-    "@types/is-ci" "^3.0.0"
-    "@types/semver" "^6.0.0"
+    "@types/semver" "^7.5.0"
     ansi-colors "^4.1.3"
     chalk "^2.1.0"
+    ci-info "^3.7.0"
     enquirer "^2.3.0"
     external-editor "^3.1.0"
     fs-extra "^7.0.1"
     human-id "^1.0.2"
-    is-ci "^3.0.1"
     meow "^6.0.0"
     outdent "^0.5.0"
     p-limit "^2.2.0"
     preferred-pm "^3.0.0"
     resolve-from "^5.0.0"
-    semver "^5.4.1"
+    semver "^7.5.3"
     spawndamnit "^2.0.0"
     term-size "^2.1.0"
     tty-table "^4.1.5"
 
-"@changesets/config@^2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@changesets/config/-/config-2.3.0.tgz#bff074d6492fa772cee139f9a04efa4cd56445bb"
-  integrity sha512-EgP/px6mhCx8QeaMAvWtRrgyxW08k/Bx2tpGT+M84jEdX37v3VKfh4Cz1BkwrYKuMV2HZKeHOh8sHvja/HcXfQ==
+"@changesets/config@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@changesets/config/-/config-3.0.0.tgz#a1a1cafc77134b117b4a9266459c84fdd360a6be"
+  integrity sha512-o/rwLNnAo/+j9Yvw9mkBQOZySDYyOr/q+wptRLcAVGlU6djOeP9v1nlalbL9MFsobuBVQbZCTp+dIzdq+CLQUA==
   dependencies:
-    "@changesets/errors" "^0.1.4"
-    "@changesets/get-dependents-graph" "^1.3.5"
-    "@changesets/logger" "^0.0.5"
-    "@changesets/types" "^5.2.1"
+    "@changesets/errors" "^0.2.0"
+    "@changesets/get-dependents-graph" "^2.0.0"
+    "@changesets/logger" "^0.1.0"
+    "@changesets/types" "^6.0.0"
     "@manypkg/get-packages" "^1.1.3"
     fs-extra "^7.0.1"
     micromatch "^4.0.2"
 
-"@changesets/errors@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@changesets/errors/-/errors-0.1.4.tgz#f79851746c43679a66b383fdff4c012f480f480d"
-  integrity sha512-HAcqPF7snsUJ/QzkWoKfRfXushHTu+K5KZLJWPb34s4eCZShIf8BFO3fwq6KU8+G7L5KdtN2BzQAXOSXEyiY9Q==
+"@changesets/errors@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@changesets/errors/-/errors-0.2.0.tgz#3c545e802b0f053389cadcf0ed54e5636ff9026a"
+  integrity sha512-6BLOQUscTpZeGljvyQXlWOItQyU71kCdGz7Pi8H8zdw6BI0g3m43iL4xKUVPWtG+qrrL9DTjpdn8eYuCQSRpow==
   dependencies:
     extendable-error "^0.1.5"
 
-"@changesets/get-dependents-graph@^1.3.5":
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.5.tgz#f94c6672d2f9a87aa35512eea74550585ba41c21"
-  integrity sha512-w1eEvnWlbVDIY8mWXqWuYE9oKhvIaBhzqzo4ITSJY9hgoqQ3RoBqwlcAzg11qHxv/b8ReDWnMrpjpKrW6m1ZTA==
+"@changesets/get-dependents-graph@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@changesets/get-dependents-graph/-/get-dependents-graph-2.0.0.tgz#97f0cc9fbec436e0d6ab95a6a59c08acf21ac714"
+  integrity sha512-cafUXponivK4vBgZ3yLu944mTvam06XEn2IZGjjKc0antpenkYANXiiE6GExV/yKdsCnE8dXVZ25yGqLYZmScA==
   dependencies:
-    "@changesets/types" "^5.2.1"
+    "@changesets/types" "^6.0.0"
     "@manypkg/get-packages" "^1.1.3"
     chalk "^2.1.0"
     fs-extra "^7.0.1"
-    semver "^5.4.1"
+    semver "^7.5.3"
 
-"@changesets/get-github-info@^0.5.2":
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/@changesets/get-github-info/-/get-github-info-0.5.2.tgz#0cde2cadba57db85c714dc303c077da919a574e5"
-  integrity sha512-JppheLu7S114aEs157fOZDjFqUDpm7eHdq5E8SSR0gUBTEK0cNSHsrSR5a66xs0z3RWuo46QvA3vawp8BxDHvg==
+"@changesets/get-github-info@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@changesets/get-github-info/-/get-github-info-0.6.0.tgz#faba66a20a3a5a0cbabea28efd43c9ede7429f11"
+  integrity sha512-v/TSnFVXI8vzX9/w3DU2Ol+UlTZcu3m0kXTjTT4KlAdwSvwutcByYwyYn9hwerPWfPkT2JfpoX0KgvCEi8Q/SA==
   dependencies:
     dataloader "^1.4.0"
     node-fetch "^2.5.0"
 
-"@changesets/get-release-plan@^3.0.16":
-  version "3.0.16"
-  resolved "https://registry.yarnpkg.com/@changesets/get-release-plan/-/get-release-plan-3.0.16.tgz#5d9cfc4ffda02c496ef0fde407210de8e3a0fb19"
-  integrity sha512-OpP9QILpBp1bY2YNIKFzwigKh7Qe9KizRsZomzLe6pK8IUo8onkAAVUD8+JRKSr8R7d4+JRuQrfSSNlEwKyPYg==
+"@changesets/get-release-plan@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@changesets/get-release-plan/-/get-release-plan-4.0.0.tgz#8cb057da90a08796a335dfd18073234d33902069"
+  integrity sha512-9L9xCUeD/Tb6L/oKmpm8nyzsOzhdNBBbt/ZNcjynbHC07WW4E1eX8NMGC5g5SbM5z/V+MOrYsJ4lRW41GCbg3w==
   dependencies:
     "@babel/runtime" "^7.20.1"
-    "@changesets/assemble-release-plan" "^5.2.3"
-    "@changesets/config" "^2.3.0"
-    "@changesets/pre" "^1.0.14"
-    "@changesets/read" "^0.5.9"
-    "@changesets/types" "^5.2.1"
+    "@changesets/assemble-release-plan" "^6.0.0"
+    "@changesets/config" "^3.0.0"
+    "@changesets/pre" "^2.0.0"
+    "@changesets/read" "^0.6.0"
+    "@changesets/types" "^6.0.0"
     "@manypkg/get-packages" "^1.1.3"
 
-"@changesets/get-version-range-type@^0.3.2":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@changesets/get-version-range-type/-/get-version-range-type-0.3.2.tgz#8131a99035edd11aa7a44c341cbb05e668618c67"
-  integrity sha512-SVqwYs5pULYjYT4op21F2pVbcrca4qA/bAA3FmFXKMN7Y+HcO8sbZUTx3TAy2VXulP2FACd1aC7f2nTuqSPbqg==
+"@changesets/get-version-range-type@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@changesets/get-version-range-type/-/get-version-range-type-0.4.0.tgz#429a90410eefef4368502c41c63413e291740bf5"
+  integrity sha512-hwawtob9DryoGTpixy1D3ZXbGgJu1Rhr+ySH2PvTLHvkZuQ7sRT4oQwMh0hbqZH1weAooedEjRsbrWcGLCeyVQ==
 
-"@changesets/git@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@changesets/git/-/git-2.0.0.tgz#8de57649baf13a86eb669a25fa51bcad5cea517f"
-  integrity sha512-enUVEWbiqUTxqSnmesyJGWfzd51PY4H7mH9yUw0hPVpZBJ6tQZFMU3F3mT/t9OJ/GjyiM4770i+sehAn6ymx6A==
+"@changesets/git@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@changesets/git/-/git-3.0.0.tgz#e71d003752a97bc27988db6d410e0038a4a88055"
+  integrity sha512-vvhnZDHe2eiBNRFHEgMiGd2CT+164dfYyrJDhwwxTVD/OW0FUD6G7+4DIx1dNwkwjHyzisxGAU96q0sVNBns0w==
   dependencies:
     "@babel/runtime" "^7.20.1"
-    "@changesets/errors" "^0.1.4"
-    "@changesets/types" "^5.2.1"
+    "@changesets/errors" "^0.2.0"
+    "@changesets/types" "^6.0.0"
     "@manypkg/get-packages" "^1.1.3"
     is-subdir "^1.1.1"
     micromatch "^4.0.2"
     spawndamnit "^2.0.0"
 
-"@changesets/logger@^0.0.5":
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/@changesets/logger/-/logger-0.0.5.tgz#68305dd5a643e336be16a2369cb17cdd8ed37d4c"
-  integrity sha512-gJyZHomu8nASHpaANzc6bkQMO9gU/ib20lqew1rVx753FOxffnCrJlGIeQVxNWCqM+o6OOleCo/ivL8UAO5iFw==
+"@changesets/logger@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@changesets/logger/-/logger-0.1.0.tgz#2d2a58536c5beeeaef52ab464931d99fcf24f17b"
+  integrity sha512-pBrJm4CQm9VqFVwWnSqKEfsS2ESnwqwH+xR7jETxIErZcfd1u2zBSqrHbRHR7xjhSgep9x2PSKFKY//FAshA3g==
   dependencies:
     chalk "^2.1.0"
 
-"@changesets/parse@^0.3.16":
-  version "0.3.16"
-  resolved "https://registry.yarnpkg.com/@changesets/parse/-/parse-0.3.16.tgz#f8337b70aeb476dc81745ab3294022909bc4a84a"
-  integrity sha512-127JKNd167ayAuBjUggZBkmDS5fIKsthnr9jr6bdnuUljroiERW7FBTDNnNVyJ4l69PzR57pk6mXQdtJyBCJKg==
+"@changesets/parse@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@changesets/parse/-/parse-0.4.0.tgz#5cabbd9844b3b213cb83f5edb5768454c70dd2b4"
+  integrity sha512-TS/9KG2CdGXS27S+QxbZXgr8uPsP4yNJYb4BC2/NeFUj80Rni3TeD2qwWmabymxmrLo7JEsytXH1FbpKTbvivw==
   dependencies:
-    "@changesets/types" "^5.2.1"
+    "@changesets/types" "^6.0.0"
     js-yaml "^3.13.1"
 
-"@changesets/pre@^1.0.14":
-  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/@changesets/pre/-/pre-1.0.14.tgz#9df73999a4d15804da7381358d77bb37b00ddf0f"
-  integrity sha512-dTsHmxQWEQekHYHbg+M1mDVYFvegDh9j/kySNuDKdylwfMEevTeDouR7IfHNyVodxZXu17sXoJuf2D0vi55FHQ==
+"@changesets/pre@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@changesets/pre/-/pre-2.0.0.tgz#ad3edf3d6ac287991d7ef5e26cf280d03c9e3764"
+  integrity sha512-HLTNYX/A4jZxc+Sq8D1AMBsv+1qD6rmmJtjsCJa/9MSRybdxh0mjbTvE6JYZQ/ZiQ0mMlDOlGPXTm9KLTU3jyw==
   dependencies:
     "@babel/runtime" "^7.20.1"
-    "@changesets/errors" "^0.1.4"
-    "@changesets/types" "^5.2.1"
+    "@changesets/errors" "^0.2.0"
+    "@changesets/types" "^6.0.0"
     "@manypkg/get-packages" "^1.1.3"
     fs-extra "^7.0.1"
 
-"@changesets/read@^0.5.9":
-  version "0.5.9"
-  resolved "https://registry.yarnpkg.com/@changesets/read/-/read-0.5.9.tgz#a1b63a82b8e9409738d7a0f9cc39b6d7c28cbab0"
-  integrity sha512-T8BJ6JS6j1gfO1HFq50kU3qawYxa4NTbI/ASNVVCBTsKquy2HYwM9r7ZnzkiMe8IEObAJtUVGSrePCOxAK2haQ==
+"@changesets/read@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@changesets/read/-/read-0.6.0.tgz#27e13b58d0b0eb3b0a5cba48a3f4f71f05ef4610"
+  integrity sha512-ZypqX8+/im1Fm98K4YcZtmLKgjs1kDQ5zHpc2U1qdtNBmZZfo/IBiG162RoP0CUF05tvp2y4IspH11PLnPxuuw==
   dependencies:
     "@babel/runtime" "^7.20.1"
-    "@changesets/git" "^2.0.0"
-    "@changesets/logger" "^0.0.5"
-    "@changesets/parse" "^0.3.16"
-    "@changesets/types" "^5.2.1"
+    "@changesets/git" "^3.0.0"
+    "@changesets/logger" "^0.1.0"
+    "@changesets/parse" "^0.4.0"
+    "@changesets/types" "^6.0.0"
     chalk "^2.1.0"
     fs-extra "^7.0.1"
     p-filter "^2.1.0"
@@ -1876,18 +1880,18 @@
   resolved "https://registry.yarnpkg.com/@changesets/types/-/types-4.1.0.tgz#fb8f7ca2324fd54954824e864f9a61a82cb78fe0"
   integrity sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw==
 
-"@changesets/types@^5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@changesets/types/-/types-5.2.1.tgz#a228c48004aa8a93bce4be2d1d31527ef3bf21f6"
-  integrity sha512-myLfHbVOqaq9UtUKqR/nZA/OY7xFjQMdfgfqeZIBK4d0hA6pgxArvdv8M+6NUzzBsjWLOtvApv8YHr4qM+Kpfg==
+"@changesets/types@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@changesets/types/-/types-6.0.0.tgz#e46abda9890610dd1fbe1617730173d2267544bd"
+  integrity sha512-b1UkfNulgKoWfqyHtzKS5fOZYSJO+77adgL7DLRDr+/7jhChN+QcHnbjiQVOz/U+Ts3PGNySq7diAItzDgugfQ==
 
-"@changesets/write@^0.2.3":
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@changesets/write/-/write-0.2.3.tgz#baf6be8ada2a67b9aba608e251bfea4fdc40bc63"
-  integrity sha512-Dbamr7AIMvslKnNYsLFafaVORx4H0pvCA2MHqgtNCySMe1blImEyAEOzDmcgKAkgz4+uwoLz7demIrX+JBr/Xw==
+"@changesets/write@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@changesets/write/-/write-0.3.0.tgz#c6c5bc390cce4031da20eab8a4ca2d71453a1985"
+  integrity sha512-slGLb21fxZVUYbyea+94uFiD6ntQW0M2hIKNznFizDhZPDgn2c/fv1UzzlW43RVzh1BEDuIqW6hzlJ1OflNmcw==
   dependencies:
     "@babel/runtime" "^7.20.1"
-    "@changesets/types" "^5.2.1"
+    "@changesets/types" "^6.0.0"
     fs-extra "^7.0.1"
     human-id "^1.0.2"
     prettier "^2.7.1"
@@ -2059,6 +2063,18 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.11.tgz#2f4f9a1083dcb4fc65233b6f59003c406abf32e5"
   integrity sha512-geWp637tUhNmhL3Xgy4Bj703yXB9dqiLJe05lCUfjSFDrQf9C/8pArusyPUbUbPwlC/EAUjBw32sxuIl/11dZw==
 
+"@eslint-community/eslint-utils@^4.2.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
+"@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1":
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
+  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
+
 "@eslint/eslintrc@^1.2.1":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95"
@@ -2089,21 +2105,35 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/eslintrc@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz#29f92c30bb3e771e4a2048c95fa6855392dfac4f"
-  integrity sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==
+"@eslint/eslintrc@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.3.tgz#797470a75fe0fbd5a53350ee715e85e87baff22d"
+  integrity sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.3.2"
-    globals "^13.15.0"
+    espree "^9.6.0"
+    globals "^13.19.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
     js-yaml "^4.1.0"
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@eslint/js@8.53.0":
+  version "8.53.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.53.0.tgz#bea56f2ed2b5baea164348ff4d5a879f6f81f20d"
+  integrity sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==
+
+"@humanwhocodes/config-array@^0.11.13":
+  version "0.11.13"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"
+  integrity sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==
+  dependencies:
+    "@humanwhocodes/object-schema" "^2.0.1"
+    debug "^4.1.1"
+    minimatch "^3.0.5"
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.5"
   resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz"
@@ -2113,11 +2143,21 @@
     debug "^4.1.1"
     minimatch "^3.0.4"
 
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
 "@humanwhocodes/object-schema@^1.2.1":
   version "1.2.1"
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@humanwhocodes/object-schema@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
+  integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz"
@@ -2759,15 +2799,10 @@
   resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-4.1.12.tgz#d266138c24295440619ea562ce3f4ec22600e897"
   integrity sha512-y3Ntio6hb5+m6asxcA3nnIN6URjAFMji2EZZVYGd2Ag5On4mmvPhMnXdiIScCMXgHjFX+5qXuKaojLLhJHZPAg==
 
-"@mdn/browser-compat-data@^3.3.14":
-  version "3.3.14"
-  resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-3.3.14.tgz#b72a37c654e598f9ae6f8335faaee182bebc6b28"
-  integrity sha512-n2RC9d6XatVbWFdHLimzzUJxJ1KY8LdjqrW6YvGPiRmsHkhOUx74/Ct10x5Yo7bC/Jvqx7cDEW8IMPv/+vwEzA==
-
-"@mdn/browser-compat-data@^4.1.5":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-4.2.1.tgz#1fead437f3957ceebe2e8c3f46beccdb9bc575b8"
-  integrity sha512-EWUguj2kd7ldmrF9F+vI5hUOralPd+sdsUnYbRy33vZTuZkduC1shE9TtEMEjAQwyfyMb4ole5KtjF8MsnQOlA==
+"@mdn/browser-compat-data@^5.2.34", "@mdn/browser-compat-data@^5.3.13":
+  version "5.3.31"
+  resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.3.31.tgz#2591bf6812befe7288cc3c392149f983ed86bddd"
+  integrity sha512-y+vtoPN3LqQrfQWu7GItqMjv1WvMHlc6lTywu0L8ZMu9IcIssfQcze16LcKFcjRD+OM6EDTd/RACJ/5agXMsTQ==
 
 "@microsoft/api-extractor-model@7.26.9":
   version "7.26.9"
@@ -2796,17 +2831,7 @@
     source-map "~0.6.1"
     typescript "~4.8.4"
 
-"@microsoft/tsdoc-config@0.16.1":
-  version "0.16.1"
-  resolved "https://registry.yarnpkg.com/@microsoft/tsdoc-config/-/tsdoc-config-0.16.1.tgz#4de11976c1202854c4618f364bf499b4be33e657"
-  integrity sha512-2RqkwiD4uN6MLnHFljqBlZIXlt/SaUT6cuogU1w2ARw4nKuuppSmR0+s+NC+7kXBQykd9zzu0P4HtBpZT5zBpQ==
-  dependencies:
-    "@microsoft/tsdoc" "0.14.1"
-    ajv "~6.12.6"
-    jju "~1.4.0"
-    resolve "~1.19.0"
-
-"@microsoft/tsdoc-config@~0.16.1":
+"@microsoft/tsdoc-config@0.16.2", "@microsoft/tsdoc-config@~0.16.1":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@microsoft/tsdoc-config/-/tsdoc-config-0.16.2.tgz#b786bb4ead00d54f53839a458ce626c8548d3adf"
   integrity sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==
@@ -2816,11 +2841,6 @@
     jju "~1.4.0"
     resolve "~1.19.0"
 
-"@microsoft/tsdoc@0.14.1":
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/@microsoft/tsdoc/-/tsdoc-0.14.1.tgz#155ef21065427901994e765da8a0ba0eaae8b8bd"
-  integrity sha512-6Wci+Tp3CgPt/B9B0a3J4s3yMgLNSku6w5TV6mN+61C71UqsRBv2FUibBf3tPGlNxebgPHMEUzKpb1ggE8KCKw==
-
 "@microsoft/tsdoc@0.14.2":
   version "0.14.2"
   resolved "https://registry.yarnpkg.com/@microsoft/tsdoc/-/tsdoc-0.14.2.tgz#c3ec604a0b54b9a9b87e9735dfc59e1a5da6a5fb"
@@ -2912,7 +2932,7 @@
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
-"@nodelib/fs.walk@^1.2.3":
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
   version "1.2.8"
   resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
@@ -3324,13 +3344,6 @@
     "@types/through" "*"
     rxjs "^7.2.0"
 
-"@types/is-ci@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/is-ci/-/is-ci-3.0.0.tgz#7e8910af6857601315592436f030aaa3ed9783c3"
-  integrity sha512-Q0Op0hdWbYd1iahB+IFNQcWXFq4O0Q5MwQP7uN0souuQ4rPg1vEYcnIOfr1gY+M+6rc8FGoRaBO1mOOvL29sEQ==
-  dependencies:
-    ci-info "^3.1.0"
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.3"
   resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz"
@@ -3530,10 +3543,15 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
-"@types/semver@^6.0.0":
-  version "6.2.3"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.2.3.tgz#5798ecf1bec94eaa64db39ee52808ec0693315aa"
-  integrity sha512-KQf+QAMWKMrtBMsB8/24w53tEsxllMj6TuA80TT/5igJalLI/zm0L3oXRbIAl4Ohfc85gyHX/jhMwsVkmhLU4A==
+"@types/semver@^7.3.12":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.5.tgz#deed5ab7019756c9c90ea86139106b0346223f35"
+  integrity sha512-+d+WYC1BxJ6yVOgUgzK8gWvp5qF8ssV5r4nsDcZWKRWcDQLQ619tvWAxJQYGgBrO1MnLJC7a5GtiYsAoQ47dJg==
+
+"@types/semver@^7.5.0":
+  version "7.5.6"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.6.tgz#c65b2bfce1bec346582c07724e3f8c1017a20339"
+  integrity sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==
 
 "@types/stack-utils@^2.0.0":
   version "2.0.1"
@@ -3598,18 +3616,19 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/eslint-plugin@^5.25.0":
-  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.25.0.tgz#e8ce050990e4d36cc200f2de71ca0d3eb5e77a31"
-  integrity sha512-icYrFnUzvm+LhW0QeJNKkezBu6tJs9p/53dpPLFH8zoM9w1tfaKzVurkPotEpAqQ8Vf8uaFyL5jHd0Vs6Z0ZQg==
+"@typescript-eslint/eslint-plugin@^5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db"
+  integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.25.0"
-    "@typescript-eslint/type-utils" "5.25.0"
-    "@typescript-eslint/utils" "5.25.0"
+    "@eslint-community/regexpp" "^4.4.0"
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/type-utils" "5.62.0"
+    "@typescript-eslint/utils" "5.62.0"
     debug "^4.3.4"
-    functional-red-black-tree "^1.0.1"
+    graphemer "^1.4.0"
     ignore "^5.2.0"
-    regexpp "^3.2.0"
+    natural-compare-lite "^1.4.0"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
@@ -3623,14 +3642,14 @@
     "@typescript-eslint/typescript-estree" "5.23.0"
     debug "^4.3.2"
 
-"@typescript-eslint/parser@^5.25.0":
-  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.25.0.tgz#fb533487147b4b9efd999a4d2da0b6c263b64f7f"
-  integrity sha512-r3hwrOWYbNKP1nTcIw/aZoH+8bBnh/Lh1iDHoFpyG4DnCpvEdctrSl6LOo19fZbzypjQMHdajolxs6VpYoChgA==
+"@typescript-eslint/parser@^5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.62.0.tgz#1b63d082d849a2fcae8a569248fbe2ee1b8a56c7"
+  integrity sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.25.0"
-    "@typescript-eslint/types" "5.25.0"
-    "@typescript-eslint/typescript-estree" "5.25.0"
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/typescript-estree" "5.62.0"
     debug "^4.3.4"
 
 "@typescript-eslint/scope-manager@5.23.0":
@@ -3641,14 +3660,6 @@
     "@typescript-eslint/types" "5.23.0"
     "@typescript-eslint/visitor-keys" "5.23.0"
 
-"@typescript-eslint/scope-manager@5.25.0":
-  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.25.0.tgz#e78f1484bca7e484c48782075219c82c6b77a09f"
-  integrity sha512-p4SKTFWj+2VpreUZ5xMQsBMDdQ9XdRvODKXN4EksyBjFp2YvQdLkyHqOffakYZPuWJUDNu3jVXtHALDyTv3cww==
-  dependencies:
-    "@typescript-eslint/types" "5.25.0"
-    "@typescript-eslint/visitor-keys" "5.25.0"
-
 "@typescript-eslint/scope-manager@5.30.4":
   version "5.30.4"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.30.4.tgz#8140efd2bc12d41d74e8af23872a89f3edbe552e"
@@ -3657,6 +3668,14 @@
     "@typescript-eslint/types" "5.30.4"
     "@typescript-eslint/visitor-keys" "5.30.4"
 
+"@typescript-eslint/scope-manager@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
+  integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
+
 "@typescript-eslint/type-utils@5.23.0":
   version "5.23.0"
   resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.23.0.tgz"
@@ -3666,12 +3685,13 @@
     debug "^4.3.2"
     tsutils "^3.21.0"
 
-"@typescript-eslint/type-utils@5.25.0":
-  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.25.0.tgz#5750d26a5db4c4d68d511611e0ada04e56f613bc"
-  integrity sha512-B6nb3GK3Gv1Rsb2pqalebe/RyQoyG/WDy9yhj8EE0Ikds4Xa8RR28nHz+wlt4tMZk5bnAr0f3oC8TuDAd5CPrw==
+"@typescript-eslint/type-utils@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz#286f0389c41681376cdad96b309cedd17d70346a"
+  integrity sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==
   dependencies:
-    "@typescript-eslint/utils" "5.25.0"
+    "@typescript-eslint/typescript-estree" "5.62.0"
+    "@typescript-eslint/utils" "5.62.0"
     debug "^4.3.4"
     tsutils "^3.21.0"
 
@@ -3680,16 +3700,16 @@
   resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.23.0.tgz"
   integrity sha512-NfBsV/h4dir/8mJwdZz7JFibaKC3E/QdeMEDJhiAE3/eMkoniZ7MjbEMCGXw6MZnZDMN3G9S0mH/6WUIj91dmw==
 
-"@typescript-eslint/types@5.25.0":
-  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.25.0.tgz#dee51b1855788b24a2eceeae54e4adb89b088dd8"
-  integrity sha512-7fWqfxr0KNHj75PFqlGX24gWjdV/FDBABXL5dyvBOWHpACGyveok8Uj4ipPX/1fGU63fBkzSIycEje4XsOxUFA==
-
 "@typescript-eslint/types@5.30.4":
   version "5.30.4"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.30.4.tgz#3bc99eca8ba3fcfd6a21480e216b09dab81c3999"
   integrity sha512-NTEvqc+Vvu8Q6JeAKryHk2eqLKqsr2St3xhIjhOjQv5wQUBhaTuix4WOSacqj0ONWfKVU12Eug3LEAB95GBkMA==
 
+"@typescript-eslint/types@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
+  integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
+
 "@typescript-eslint/typescript-estree@5.23.0":
   version "5.23.0"
   resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.23.0.tgz"
@@ -3703,26 +3723,26 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@5.25.0":
-  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.25.0.tgz#a7ab40d32eb944e3fb5b4e3646e81b1bcdd63e00"
-  integrity sha512-MrPODKDych/oWs/71LCnuO7NyR681HuBly2uLnX3r5i4ME7q/yBqC4hW33kmxtuauLTM0OuBOhhkFaxCCOjEEw==
+"@typescript-eslint/typescript-estree@5.30.4":
+  version "5.30.4"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.4.tgz#ac4be8a2f8fb1f1c3b346d5992a36163121ddb3f"
+  integrity sha512-V4VnEs6/J9/nNizaA12IeU4SAeEYaiKr7XndLNfV5+3zZSB4hIu6EhHJixTKhvIqA+EEHgBl6re8pivBMLLO1w==
   dependencies:
-    "@typescript-eslint/types" "5.25.0"
-    "@typescript-eslint/visitor-keys" "5.25.0"
+    "@typescript-eslint/types" "5.30.4"
+    "@typescript-eslint/visitor-keys" "5.30.4"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@5.30.4":
-  version "5.30.4"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.4.tgz#ac4be8a2f8fb1f1c3b346d5992a36163121ddb3f"
-  integrity sha512-V4VnEs6/J9/nNizaA12IeU4SAeEYaiKr7XndLNfV5+3zZSB4hIu6EhHJixTKhvIqA+EEHgBl6re8pivBMLLO1w==
+"@typescript-eslint/typescript-estree@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
+  integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
   dependencies:
-    "@typescript-eslint/types" "5.30.4"
-    "@typescript-eslint/visitor-keys" "5.30.4"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
@@ -3741,17 +3761,19 @@
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/utils@5.25.0":
-  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.25.0.tgz#272751fd737733294b4ab95e16c7f2d4a75c2049"
-  integrity sha512-qNC9bhnz/n9Kba3yI6HQgQdBLuxDoMgdjzdhSInZh6NaDnFpTUlwNGxplUFWfY260Ya0TRPvkg9dd57qxrJI9g==
+"@typescript-eslint/utils@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
+  integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
   dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
     "@types/json-schema" "^7.0.9"
-    "@typescript-eslint/scope-manager" "5.25.0"
-    "@typescript-eslint/types" "5.25.0"
-    "@typescript-eslint/typescript-estree" "5.25.0"
+    "@types/semver" "^7.3.12"
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/typescript-estree" "5.62.0"
     eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
+    semver "^7.3.7"
 
 "@typescript-eslint/utils@^5.10.0":
   version "5.30.4"
@@ -3773,14 +3795,6 @@
     "@typescript-eslint/types" "5.23.0"
     eslint-visitor-keys "^3.0.0"
 
-"@typescript-eslint/visitor-keys@5.25.0":
-  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.25.0.tgz#33aa5fdcc5cedb9f4c8828c6a019d58548d4474b"
-  integrity sha512-yd26vFgMsC4h2dgX4+LR+GeicSKIfUvZREFLf3DDjZPtqgLx5AJZr6TetMNwFP9hcKreTTeztQYBTNbNoOycwA==
-  dependencies:
-    "@typescript-eslint/types" "5.25.0"
-    eslint-visitor-keys "^3.3.0"
-
 "@typescript-eslint/visitor-keys@5.30.4":
   version "5.30.4"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.4.tgz#b4969df1a440cc999d4bb7f7b7932dce05537089"
@@ -3789,6 +3803,19 @@
     "@typescript-eslint/types" "5.30.4"
     eslint-visitor-keys "^3.3.0"
 
+"@typescript-eslint/visitor-keys@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
+  integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    eslint-visitor-keys "^3.3.0"
+
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
+  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
+
 "@vitejs/plugin-react@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-2.1.0.tgz#4c99df15e71d2630601bd3018093bdc787d40e55"
@@ -3895,6 +3922,11 @@ acorn@^8.7.0, acorn@^8.8.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
+acorn@^8.9.0:
+  version "8.11.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
+  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
+
 addons-linter@4.14.0:
   version "4.14.0"
   resolved "https://registry.yarnpkg.com/addons-linter/-/addons-linter-4.14.0.tgz#e8a5b99665a7e7df3fda2da42d73593fea8db3f9"
@@ -4189,12 +4221,12 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
   resolved "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz"
   integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
 
-ast-metadata-inferer@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/ast-metadata-inferer/-/ast-metadata-inferer-0.7.0.tgz#c45d874cbdecabea26dc5de11fc6fa1919807c66"
-  integrity sha512-OkMLzd8xelb3gmnp6ToFvvsHLtS6CbagTkFQvQ+ZYFe3/AIl9iKikNR9G7pY3GfOR/2Xc222hwBjzI7HLkE76Q==
+ast-metadata-inferer@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/ast-metadata-inferer/-/ast-metadata-inferer-0.8.0.tgz#0f94c3425e310d8da45823ab2161142e3f134343"
+  integrity sha512-jOMKcHht9LxYIEQu+RVd22vtgrPaVCtDRQ/16IGmurdzxvYbDd5ynxjnyrzLnieG96eTcAyaoj/wN/4/1FyyeA==
   dependencies:
-    "@mdn/browser-compat-data" "^3.3.14"
+    "@mdn/browser-compat-data" "^5.2.34"
 
 ast-types@^0.13.4:
   version "0.13.4"
@@ -4589,16 +4621,6 @@ browserslist@^4.16.6:
     node-releases "^1.1.77"
     picocolors "^0.2.1"
 
-browserslist@^4.16.8, browserslist@^4.21.3, browserslist@^4.21.4:
-  version "4.21.4"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987"
-  integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
-  dependencies:
-    caniuse-lite "^1.0.30001400"
-    electron-to-chromium "^1.4.251"
-    node-releases "^2.0.6"
-    update-browserslist-db "^1.0.9"
-
 browserslist@^4.17.5:
   version "4.19.1"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz"
@@ -4610,6 +4632,26 @@ browserslist@^4.17.5:
     node-releases "^2.0.1"
     picocolors "^1.0.0"
 
+browserslist@^4.21.10, browserslist@^4.22.1:
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619"
+  integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==
+  dependencies:
+    caniuse-lite "^1.0.30001541"
+    electron-to-chromium "^1.4.535"
+    node-releases "^2.0.13"
+    update-browserslist-db "^1.0.13"
+
+browserslist@^4.21.3:
+  version "4.21.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987"
+  integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
+  dependencies:
+    caniuse-lite "^1.0.30001400"
+    electron-to-chromium "^1.4.251"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.9"
+
 browserslist@^4.21.9:
   version "4.21.10"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0"
@@ -4764,7 +4806,7 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001264, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001304, caniuse-lite@^1.0.30001400:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001264, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001400:
   version "1.0.30001402"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001402.tgz"
   integrity sha512-Mx4MlhXO5NwuvXGgVb+hg65HZ+bhUYsz8QtDGDo2QmaJS2GBX47Xfi2koL86lc8K+l+htXeTEB/Aeqvezoo6Ew==
@@ -4774,6 +4816,11 @@ caniuse-lite@^1.0.30001517:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001518.tgz#b3ca93904cb4699c01218246c4d77a71dbe97150"
   integrity sha512-rup09/e3I0BKjncL+FesTayKtPrdwKhUufQFd3riFw1hHg8JmIFoInYfB102cFcY/pPgGmdyl/iy+jgiDi2vdA==
 
+caniuse-lite@^1.0.30001524, caniuse-lite@^1.0.30001541:
+  version "1.0.30001563"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001563.tgz#aa68a64188903e98f36eb9c56e48fba0c1fe2a32"
+  integrity sha512-na2WUmOxnwIZtwnFI2CZ/3er0wdNzU7hN+cPYz/z2ajHThnkWjNBOpEPP4n+4r2WPM847JaMotaJE3bnfzjyKw==
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz"
@@ -4901,11 +4948,6 @@ ci-info@^2.0.0:
   resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
-ci-info@^3.1.0:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.7.1.tgz#708a6cdae38915d597afdf3b145f2f8e1ff55f3f"
-  integrity sha512-4jYS4MOAaCIStSRwiuxc4B8MYhIe676yO1sYGzARnjXkWpmzZMMYxY6zu8WYWDhSuth5zhrQ1rhNSibyyvv4/w==
-
 ci-info@^3.1.1:
   version "3.2.0"
   resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.2.0.tgz"
@@ -4916,6 +4958,11 @@ ci-info@^3.2.0:
   resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz"
   integrity sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==
 
+ci-info@^3.7.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
+  integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
+
 cjs-module-lexer@^1.0.0:
   version "1.2.2"
   resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz"
@@ -5232,11 +5279,6 @@ core-js@^2.4.0:
   resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
-core-js@^3.16.2:
-  version "3.25.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.25.1.tgz#5818e09de0db8956e16bf10e2a7141e931b7c69c"
-  integrity sha512-sr0FY4lnO1hkQ4gLDr24K0DGnweGO1QwSj5BpfQjpSJPdqWalja4cTps29Y/PJVG/P7FYlPDkH3hO+Tr0CvDgQ==
-
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
@@ -5522,15 +5564,10 @@ csso@^4.0.2:
   dependencies:
     css-tree "^1.1.2"
 
-cssom@^0.4.4, "cssom@https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz":
+cssom@^0.4.4, cssom@^0.5.0, "cssom@https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz":
   version "0.6.0"
   resolved "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1"
 
-cssom@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
-  integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==
-
 cssom@~0.3.6:
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
@@ -5987,6 +6024,11 @@ electron-to-chromium@^1.4.477:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.479.tgz#ec9f676f23d3a0b0e429bc454d25e0b3253d2118"
   integrity sha512-ABv1nHMIR8I5n3O3Een0gr6i0mfM+YcTZqjHy3pAYaOjgFG+BMquuKrSyfYf5CbEkLr9uM05RA3pOk4udNB/aQ==
 
+electron-to-chromium@^1.4.535:
+  version "1.4.587"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.587.tgz#d8b864f21338b60798d447a3d83b90753f701d07"
+  integrity sha512-RyJX0q/zOkAoefZhB9XHghGeATVP0Q3mwA253XD/zj2OeXc+JZB9pCaEv6R578JUYaWM9PRhye0kXvd/V1cQ3Q==
+
 emittery@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
@@ -6507,24 +6549,23 @@ eslint-config-google@^0.14.0:
   resolved "https://registry.yarnpkg.com/eslint-config-google/-/eslint-config-google-0.14.0.tgz#4f5f8759ba6e11b424294a219dbfa18c508bcc1a"
   integrity sha512-WsbX4WbjuMvTdeVL6+J3rK1RGhCTqjsFjX7UMSMgZiyxxaNLkoJENbrGExzERFeoTpGw3F3FypTiWAP9ZXzkEw==
 
-eslint-plugin-compat@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-compat/-/eslint-plugin-compat-4.0.2.tgz#b058627a7d25d352adf0ec16dca8fcf92d9c7af7"
-  integrity sha512-xqvoO54CLTVaEYGMzhu35Wzwk/As7rCvz/2dqwnFiWi0OJccEtGIn+5qq3zqIu9nboXlpdBN579fZcItC73Ycg==
-  dependencies:
-    "@mdn/browser-compat-data" "^4.1.5"
-    ast-metadata-inferer "^0.7.0"
-    browserslist "^4.16.8"
-    caniuse-lite "^1.0.30001304"
-    core-js "^3.16.2"
+eslint-plugin-compat@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-compat/-/eslint-plugin-compat-4.2.0.tgz#eeaf80daa1afe495c88a47e9281295acae45c0aa"
+  integrity sha512-RDKSYD0maWy5r7zb5cWQS+uSPc26mgOzdORJ8hxILmWM7S/Ncwky7BcAtXVY5iRbKjBdHsWU8Yg7hfoZjtkv7w==
+  dependencies:
+    "@mdn/browser-compat-data" "^5.3.13"
+    ast-metadata-inferer "^0.8.0"
+    browserslist "^4.21.10"
+    caniuse-lite "^1.0.30001524"
     find-up "^5.0.0"
-    lodash.memoize "4.1.2"
-    semver "7.3.5"
+    lodash.memoize "^4.1.2"
+    semver "^7.5.4"
 
-eslint-plugin-jest@^27.1.3:
-  version "27.2.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-27.2.3.tgz#6f8a4bb2ca82c0c5d481d1b3be256ab001f5a3ec"
-  integrity sha512-sRLlSCpICzWuje66Gl9zvdF6mwD5X86I4u55hJyFBsxYOsBCmT5+kSUjf+fkFWVMMgpzNEupjW8WzUqi83hJAQ==
+eslint-plugin-jest@^27.6.0:
+  version "27.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-27.6.0.tgz#e5c0cf735b3c8cad0ef9db5b565b2fc99f5e55ed"
+  integrity sha512-MTlusnnDMChbElsszJvrwD1dN3x6nZl//s4JD23BxB6MgR66TZlL064su24xEIS3VACfAoHV1vgyMgPw8nkdng==
   dependencies:
     "@typescript-eslint/utils" "^5.10.0"
 
@@ -6538,13 +6579,13 @@ eslint-plugin-svelte3@^4.0.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-svelte3/-/eslint-plugin-svelte3-4.0.0.tgz#3d4f3dcaec5761dac8bc697f81de3613b485b4e3"
   integrity sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==
 
-eslint-plugin-tsdoc@^0.2.16:
-  version "0.2.16"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-tsdoc/-/eslint-plugin-tsdoc-0.2.16.tgz#a3d31fb9c7955faa3c66a43dd43da7635f1c5e0d"
-  integrity sha512-F/RWMnyDQuGlg82vQEFHQtGyWi7++XJKdYNn0ulIbyMOFqYIjoJOUdE6olORxgwgLkpJxsCJpJbTHgxJ/ggfXw==
+eslint-plugin-tsdoc@^0.2.17:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-tsdoc/-/eslint-plugin-tsdoc-0.2.17.tgz#27789495bbd8778abbf92db1707fec2ed3dfe281"
+  integrity sha512-xRmVi7Zx44lOBuYqG8vzTXuL6IdGOeF9nHX17bjJ8+VE6fsxpdGem0/SBTmAwgYMKYB1WBkqRJVQ+n8GK041pA==
   dependencies:
-    "@microsoft/tsdoc" "0.14.1"
-    "@microsoft/tsdoc-config" "0.16.1"
+    "@microsoft/tsdoc" "0.14.2"
+    "@microsoft/tsdoc-config" "0.16.2"
 
 eslint-scope@^5.1.1:
   version "5.1.1"
@@ -6562,6 +6603,14 @@ eslint-scope@^7.1.1:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
 eslint-utils@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz"
@@ -6579,6 +6628,11 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
+eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
 eslint@8.11.0:
   version "8.11.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.11.0.tgz#88b91cfba1356fc10bb9eb592958457dfe09fb37"
@@ -6661,46 +6715,49 @@ eslint@^8.15.0:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-eslint@^8.19.0:
-  version "8.19.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.19.0.tgz#7342a3cbc4fbc5c106a1eefe0fd0b50b6b1a7d28"
-  integrity sha512-SXOPj3x9VKvPe81TjjUJCYlV4oJjQw68Uek+AM0X4p+33dj2HY5bpTZOgnQHcG2eAm1mtCU9uNMnJi7exU/kYw==
-  dependencies:
-    "@eslint/eslintrc" "^1.3.0"
-    "@humanwhocodes/config-array" "^0.9.2"
-    ajv "^6.10.0"
+eslint@^8.53.0:
+  version "8.53.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.53.0.tgz#14f2c8244298fcae1f46945459577413ba2697ce"
+  integrity sha512-N4VuiPjXDUa4xVeV/GC/RV3hQW9Nw+Y463lkWaKKXKYMvmRiRDAtfpuPFLN+E1/6ZhyR8J2ig+eVREnYgUsiag==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.3"
+    "@eslint/js" "8.53.0"
+    "@humanwhocodes/config-array" "^0.11.13"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
     debug "^4.3.2"
     doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^7.1.1"
-    eslint-utils "^3.0.0"
-    eslint-visitor-keys "^3.3.0"
-    espree "^9.3.2"
-    esquery "^1.4.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^6.0.1"
-    globals "^13.15.0"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
     ignore "^5.2.0"
-    import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
     js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
     lodash.merge "^4.6.2"
     minimatch "^3.1.2"
     natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    regexpp "^3.2.0"
+    optionator "^0.9.3"
     strip-ansi "^6.0.1"
-    strip-json-comments "^3.1.0"
     text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
 
 espree@9.3.1:
   version "9.3.1"
@@ -6729,6 +6786,15 @@ espree@^9.3.2:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.3.0"
 
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+  dependencies:
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
+
 esprima@4.0.1, esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz"
@@ -6741,6 +6807,13 @@ esquery@^1.4.0:
   dependencies:
     estraverse "^5.1.0"
 
+esquery@^1.4.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
+  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
+  dependencies:
+    estraverse "^5.1.0"
+
 esrecurse@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
@@ -7551,9 +7624,9 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.1:
+glob-parent@^6.0.1, glob-parent@^6.0.2:
   version "6.0.2"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
   dependencies:
     is-glob "^4.0.3"
@@ -7629,6 +7702,13 @@ globals@^13.15.0, globals@^13.6.0, globals@^13.9.0:
   dependencies:
     type-fest "^0.20.2"
 
+globals@^13.19.0:
+  version "13.23.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.23.0.tgz#ef31673c926a0976e1f61dab4dca57e0c0a8af02"
+  integrity sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==
+  dependencies:
+    type-fest "^0.20.2"
+
 globalthis@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
@@ -7735,6 +7815,11 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -8329,13 +8414,6 @@ is-ci@^3.0.0:
   dependencies:
     ci-info "^3.1.1"
 
-is-ci@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867"
-  integrity sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==
-  dependencies:
-    ci-info "^3.2.0"
-
 is-color-stop@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz"
@@ -8507,7 +8585,7 @@ is-obj@^2.0.0:
   resolved "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz"
   integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
 
-is-path-inside@^3.0.2:
+is-path-inside@^3.0.2, is-path-inside@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
@@ -10510,7 +10588,7 @@ lodash.isstring@^4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
   integrity sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==
 
-lodash.memoize@4.1.2, lodash.memoize@4.x, lodash.memoize@^4.1.2:
+lodash.memoize@4.x, lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
@@ -10886,7 +10964,7 @@ min-indent@^1.0.0:
   resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-"minimatch@2 || 3", minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
+"minimatch@2 || 3", minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -11027,6 +11105,11 @@ nanoid@^4.0.0:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-4.0.0.tgz#6e144dee117609232c3f415c34b0e550e64999a5"
   integrity sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==
 
+natural-compare-lite@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
+  integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
@@ -11339,6 +11422,18 @@ optionator@^0.9.1:
     type-check "^0.4.0"
     word-wrap "^1.2.3"
 
+optionator@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
+  integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
+  dependencies:
+    "@aashutoshrathi/word-wrap" "^1.2.3"
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+
 "opts@>= 1.2.0":
   version "2.0.2"
   resolved "https://registry.npmjs.org/opts/-/opts-2.0.2.tgz"
@@ -13197,7 +13292,7 @@ semver-match@0.1.1:
   dependencies:
     semver "^5.1.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.5.0, semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -13226,7 +13321,7 @@ semver@^7.3.7:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^7.5.3, semver@~7.5.4:
+semver@^7.5.3, semver@^7.5.4, semver@~7.5.4:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
@@ -14620,6 +14715,14 @@ update-browserslist-db@^1.0.11:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+update-browserslist-db@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 update-browserslist-db@^1.0.9:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.9.tgz#2924d3927367a38d5c555413a7ce138fc95fcb18"