diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
new file mode 100644
index 00000000..6d856d22
--- /dev/null
+++ b/.github/workflows/eslint.yml
@@ -0,0 +1,47 @@
+name: Eslint Check
+
+on: [pull_request]
+
+jobs:
+  eslint_check_upload:
+    runs-on: ubuntu-latest
+    name: ESLint Check and Report Upload
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'yarn'
+      - name: Install Dependencies
+        run: YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn
+      - name: Build Packages
+        run: yarn build:all
+      - name: Test Code Linting
+        run: yarn turbo run lint
+      - name: Save Code Linting Report JSON
+        run: yarn lint:report
+        # Continue to the next step even if this fails
+        continue-on-error: true
+      - name: Upload ESLint report
+        uses: actions/upload-artifact@v3
+        with:
+          name: eslint_report.json
+          path: eslint_report.json
+
+  Annotation:
+    # Skip the annotation action in PRs from the forked repositories
+    if: github.event.pull_request.head.repo.full_name == 'rrweb-io/rrweb'
+    needs: eslint_check_upload
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/download-artifact@v3
+        with:
+          name: eslint_report.json
+      - name: Annotate Code Linting Results
+        uses: ataylorme/eslint-annotate-action@v2
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          report-json: 'eslint_report.json'
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 00000000..5026d620
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,29 @@
+name: Release Rrweb
+on: push
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16.15.0
+          registry-url: https://registry.npmjs.org
+      - name: Install
+        run: YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn
+      - name: Build all
+        run: yarn build:all
+      # - name: Test all
+      # run: yarn test
+      - name: Setup Publish Env
+        run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > ~/.npmrc
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Publish
+        if: github.ref == 'refs/heads/master'
+        run: yarn lerna publish from-package -y
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/style-check.yml b/.github/workflows/style-check.yml
index 50498ee9..054e7989 100644
--- a/.github/workflows/style-check.yml
+++ b/.github/workflows/style-check.yml
@@ -18,7 +18,7 @@ jobs:
           node-version: 16
           cache: 'yarn'
       - name: Install Dependencies
-        run: yarn
+        run: YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn
       - name: Build Packages
         run: yarn build:all
       - name: Eslint Check
@@ -56,16 +56,13 @@ jobs:
     name: Format Check
     steps:
       - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
         with:
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
-          ref: ${{ github.head_ref }}
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: 'yarn'
-      - name: Install Dependencies
-        run: yarn
+          node-version: 16.15.0
+          registry-url: https://registry.npmjs.org
+      - name: Install
+        run: YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn
       - name: Prettier Check
         run: yarn prettier --check '**/*.{ts,md}'
 
@@ -76,16 +73,13 @@ jobs:
     name: Format Code
     steps:
       - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
         with:
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
-          ref: ${{ github.head_ref }}
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: 'yarn'
-      - name: Install Dependencies
-        run: yarn
+          node-version: 16.15.0
+          registry-url: https://registry.npmjs.org
+      - name: Install
+        run: YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn
       - name: Prettify Code
         run: yarn prettier --write '**/*.{ts,md}'
       - name: Commit Changes
diff --git a/.vscode/rrweb-monorepo.code-workspace b/.vscode/rrweb-monorepo.code-workspace
index 6a1be41e..0785ef5c 100644
--- a/.vscode/rrweb-monorepo.code-workspace
+++ b/.vscode/rrweb-monorepo.code-workspace
@@ -25,7 +25,7 @@
       "path": "../packages/rrweb-snapshot"
     },
     {
-      "name": "@rrweb/types",
+      "name": "@highlight-run/rrweb-types",
       "path": "../packages/types"
     }
   ],
@@ -33,7 +33,7 @@
     "jest.disabledWorkspaceFolders": [
       " rrweb monorepo",
       "rrweb-player (package)",
-      "@rrweb/types"
+      "@highlight-run/rrweb-types"
     ]
   }
 }
diff --git a/README.md b/README.md
index 3e6490f1..ee3a7a31 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,14 @@ rrweb refers to 'record and replay the web', which is a tool for recording and r
 
 [**🍳 Recipes 🍳**](./docs/recipes/index.md)
 
+## Version History
+
+### 2.0.0
+
+This version updates the highlight rrweb fork on rrweb 1.1.3 April 2022 Release.
+Because this is a major update, it may not be suitable for customers looking for stable recording and replay functionality.
+However, the major update brings lots of rrweb features that have been in development. See the rrweb release notes for more details.
+
 ## Project Structure
 
 rrweb is mainly composed of 3 parts:
diff --git a/guide.md b/guide.md
index 76f781d0..b1e65547 100644
--- a/guide.md
+++ b/guide.md
@@ -140,11 +140,11 @@ The parameter of `rrweb.record` accepts the following options.
 | emit                     | required           | the callback function to get emitted events                                                                                                                                                   |
 | checkoutEveryNth         | -                  | take a full snapshot after every N events<br />refer to the [checkout](#checkout) chapter                                                                                                     |
 | checkoutEveryNms         | -                  | take a full snapshot after every N ms<br />refer to the [checkout](#checkout) chapter                                                                                                         |
-| blockClass               | 'rr-block'         | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter                                                                                |
+| blockClass               | 'highlight-block'         | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter                                                                                |
 | blockSelector            | null               | Use a string to configure which selector should be blocked, refer to the [privacy](#privacy) chapter                                                                                          |
-| ignoreClass              | 'rr-ignore'        | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter                                                                                |
+| ignoreClass              | 'highlight-ignore'        | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter                                                                                |
 | ignoreCSSAttributes      | null               | array of CSS attributes that should be ignored                                                                                                                                                |
-| maskTextClass            | 'rr-mask'          | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter                                                                                 |
+| maskTextClass            | 'highlight-mask'          | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter                                                                                 |
 | maskTextSelector         | null               | Use a string to configure which selector should be masked, refer to the [privacy](#privacy) chapter                                                                                           |
 | maskAllInputs            | false              | mask all input content as \*                                                                                                                                                                  |
 | maskInputOptions         | { password: true } | mask some kinds of input \*<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95)            |
@@ -167,9 +167,9 @@ The parameter of `rrweb.record` accepts the following options.
 
 You may find some contents on the webpage which are not willing to be recorded, then you can use the following approaches:
 
-- An element with the class name `.rr-block` will not be recorded. Instead, it will replay as a placeholder with the same dimension.
-- An element with the class name `.rr-ignore` will not record its input events.
-- All text of elements with the class name `.rr-mask` and their children will be masked.
+- An element with the class name `.highlight-block` will not be recorded. Instead, it will replay as a placeholder with the same dimension.
+- An element with the class name `.highlight-ignore` will not record its input events.
+- All text of elements with the class name `.highlight-mask` and their children will be masked.
 - `input[type="password"]` will be masked by default.
 - Mask options to mask the content in input elements.
 
@@ -300,7 +300,7 @@ The replayer accepts options as its constructor's second parameter, and it has t
 | 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                                                                                                                                                                     |
+| blockClass          | 'highlight-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                                                                                                                                                                                         |
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index 1093dbb3..c9b9fd9a 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -136,11 +136,11 @@ setInterval(save, 10 * 1000);
 | emit                     | 必填               | 获取当前录制的数据                                                                                                                                                                    |
 | checkoutEveryNth         | -                  | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                                          |
 | checkoutEveryNms         | -                  | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                                            |
-| blockClass               | 'rr-block'         | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节                                                                                                               |
+| blockClass               | 'highlight-block'         | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节                                                                                                               |
 | blockSelector            | null               | 所有 element.matches(blockSelector)为 true 的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素                                                                               |
-| ignoreClass              | 'rr-ignore'        | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节                                                                                                               |
+| ignoreClass              | 'highlight-ignore'        | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节                                                                                                               |
 | ignoreCSSAttributes      | null               | 应该被忽略的 CSS 属性数组                                                                                                                                                             |
-| maskTextClass            | 'rr-mask'          | 字符串或正则表达式，可用于自定义忽略元素 text 内容的类名，详见[“隐私”](#隐私)章节                                                                                                     |
+| maskTextClass            | 'highlight-mask'          | 字符串或正则表达式，可用于自定义忽略元素 text 内容的类名，详见[“隐私”](#隐私)章节                                                                                                     |
 | maskTextSelector         | null               | 所有 element.matches(maskTextSelector)为 true 的元素及其子元素的 text 内容将会被屏蔽                                                                                                  |
 | maskAllInputs            | false              | 将所有输入内容记录为 \*                                                                                                                                                               |
 | maskInputOptions         | { password: true } | 选择将特定类型的输入框内容记录为 \*<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95) |
@@ -163,9 +163,9 @@ setInterval(save, 10 * 1000);
 
 页面中可能存在一些隐私相关的内容不希望被录制，rrweb 为此做了以下支持：
 
-- 在 HTML 元素中添加类名 `.rr-block` 将会避免该元素及其子元素被录制，回放时取而代之的是一个同等宽高的占位元素。
-- 在 HTML 元素中添加类名 `.rr-ignore` 将会避免录制该元素的输入事件。
-- 所有带有`.rr-mask`类名的元素及其子元素的 text 内容将会被屏蔽。
+- 在 HTML 元素中添加类名 `.highlight-block` 将会避免该元素及其子元素被录制，回放时取而代之的是一个同等宽高的占位元素。
+- 在 HTML 元素中添加类名 `.highlight-ignore` 将会避免录制该元素的输入事件。
+- 所有带有`.highlight-mask`类名的元素及其子元素的 text 内容将会被屏蔽。
 - `input[type="password"]` 类型的密码输入框默认不会录制输入事件。
 - 配置中还有更为丰富的隐私保护选项。
 
@@ -296,7 +296,7 @@ replayer.destroy();
 | skipInactive        | false         | 是否快速跳过无用户操作的阶段                                                                                                                                                                         |
 | showWarning         | true          | 是否在回放过程中打印警告信息                                                                                                                                                                         |
 | showDebug           | false         | 是否在回放过程中打印 debug 信息                                                                                                                                                                      |
-| blockClass          | 'rr-block'    | 需要在回放时展示为隐藏区域的元素类名                                                                                                                                                                 |
+| blockClass          | 'highlight-block'    | 需要在回放时展示为隐藏区域的元素类名                                                                                                                                                                 |
 | liveMode            | false         | 是否开启直播模式                                                                                                                                                                                     |
 | insertStyleRules    | []            | 可以传入多个 CSS rule string，用于自定义回放时 iframe 内的样式                                                                                                                                       |
 | triggerFocus        | true          | 回放时是否回放 focus 交互                                                                                                                                                                            |
diff --git a/packages/rrdom-nodejs/LICENSE b/packages/rrdom-nodejs/LICENSE
new file mode 100644
index 00000000..fce28eb8
--- /dev/null
+++ b/packages/rrdom-nodejs/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb/graphs/contributors) and SmartX Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/rrdom-nodejs/package.json b/packages/rrdom-nodejs/package.json
index f1be1665..9a2715b3 100644
--- a/packages/rrdom-nodejs/package.json
+++ b/packages/rrdom-nodejs/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "rrdom-nodejs",
-  "version": "0.1.7",
+  "name": "@highlight-run/rrdom-nodejs",
+  "version": "0.1.9",
   "scripts": {
     "dev": "rollup -c -w",
     "bundle": "rollup --config",
@@ -46,11 +46,11 @@
     "typescript": "^4.7.3"
   },
   "dependencies": {
+    "@highlight-run/rrdom": "^0.1.18",
+    "@highlight-run/rrweb-snapshot": "^2.0.1",
     "cssom": "^0.5.0",
     "cssstyle": "^2.3.0",
-    "nwsapi": "^2.2.0",
-    "rrdom": "^0.1.7",
-    "rrweb-snapshot": "^2.0.0-alpha.4"
+    "nwsapi": "^2.2.0"
   },
   "browserslist": [
     "supports es6-class"
diff --git a/packages/rrdom-nodejs/src/document-nodejs.ts b/packages/rrdom-nodejs/src/document-nodejs.ts
index 69f85b87..517167e5 100644
--- a/packages/rrdom-nodejs/src/document-nodejs.ts
+++ b/packages/rrdom-nodejs/src/document-nodejs.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { NodeType as RRNodeType } from 'rrweb-snapshot';
+import { NodeType as RRNodeType } from '@highlight-run/rrweb-snapshot';
 import type { NWSAPI } from 'nwsapi';
 import type { CSSStyleDeclaration as CSSStyleDeclarationType } from 'cssstyle';
 import {
@@ -14,7 +14,7 @@ import {
   ClassList,
   IRRDocument,
   CSSStyleDeclaration,
-} from 'rrdom';
+} from '@highlight-run/rrdom';
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires
 const nwsapi = require('nwsapi');
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires
diff --git a/packages/rrdom-nodejs/test/document-nodejs.test.ts b/packages/rrdom-nodejs/test/document-nodejs.test.ts
index ba3c6144..81469c87 100644
--- a/packages/rrdom-nodejs/test/document-nodejs.test.ts
+++ b/packages/rrdom-nodejs/test/document-nodejs.test.ts
@@ -3,7 +3,7 @@
  */
 import * as fs from 'fs';
 import * as path from 'path';
-import { NodeType as RRNodeType } from 'rrweb-snapshot';
+import { NodeType as RRNodeType } from '@highlight-run/rrweb-snapshot';
 import {
   RRCanvasElement,
   RRCDATASection,
@@ -16,7 +16,7 @@ import {
   RRStyleElement,
   RRText,
 } from '../src/document-nodejs';
-import { buildFromDom } from 'rrdom';
+import { buildFromDom } from '@highlight-run/rrdom';
 
 describe('RRDocument for nodejs environment', () => {
   describe('RRDocument API', () => {
diff --git a/packages/rrdom/LICENSE b/packages/rrdom/LICENSE
new file mode 100644
index 00000000..fce28eb8
--- /dev/null
+++ b/packages/rrdom/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb/graphs/contributors) and SmartX Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json
index 440358d1..b9b8c0b1 100644
--- a/packages/rrdom/package.json
+++ b/packages/rrdom/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "rrdom",
-  "version": "0.1.7",
+  "name": "@highlight-run/rrdom",
+  "version": "0.1.19",
   "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/rrdom#readme",
   "license": "MIT",
   "main": "lib/rrdom.js",
@@ -30,8 +30,8 @@
     "url": "https://github.com/rrweb-io/rrweb/issues"
   },
   "devDependencies": {
+    "@highlight-run/rrweb-types": "^2.0.0-alpha.4",
     "@rollup/plugin-commonjs": "^20.0.0",
-    "@rrweb/types": "^2.0.0-alpha.4",
     "@types/jest": "^27.4.1",
     "@types/puppeteer": "^5.4.4",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
@@ -47,6 +47,6 @@
     "typescript": "^4.7.3"
   },
   "dependencies": {
-    "rrweb-snapshot": "^2.0.0-alpha.4"
+    "@highlight-run/rrweb-snapshot": "^2.0.1"
   }
 }
diff --git a/packages/rrdom/rollup.config.js b/packages/rrdom/rollup.config.js
index 5bd34667..a69dc3ad 100644
--- a/packages/rrdom/rollup.config.js
+++ b/packages/rrdom/rollup.config.js
@@ -24,8 +24,8 @@ const basePlugins = [
 const baseConfigs = [
   {
     input: './src/index.ts',
-    name: pkg.name,
-    path: pkg.name,
+    name: 'rrdom',
+    path: 'rrdom',
   },
 ];
 
@@ -40,7 +40,7 @@ for (let config of baseConfigs) {
       output: [
         {
           format: 'esm',
-          file: pkg.module.replace(pkg.name, config.path),
+          file: pkg.module.replace('rrdom', config.path),
         },
       ],
     },
diff --git a/packages/rrdom/src/diff.ts b/packages/rrdom/src/diff.ts
index f03557e7..4e9df330 100644
--- a/packages/rrdom/src/diff.ts
+++ b/packages/rrdom/src/diff.ts
@@ -1,4 +1,4 @@
-import { NodeType as RRNodeType, Mirror as NodeMirror } from 'rrweb-snapshot';
+import { NodeType as RRNodeType, Mirror as NodeMirror } from '@highlight-run/rrweb-snapshot';
 import type {
   canvasMutationData,
   canvasEventWithTime,
@@ -6,7 +6,7 @@ import type {
   scrollData,
   styleDeclarationData,
   styleSheetRuleData,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import type {
   IRRCDATASection,
   IRRComment,
diff --git a/packages/rrdom/src/document.ts b/packages/rrdom/src/document.ts
index f8ee5b86..b2f0310e 100644
--- a/packages/rrdom/src/document.ts
+++ b/packages/rrdom/src/document.ts
@@ -1,4 +1,4 @@
-import { NodeType as RRNodeType } from 'rrweb-snapshot';
+import { NodeType as RRNodeType } from '@highlight-run/rrweb-snapshot';
 import { parseCSSText, camelize, toCSSText } from './style';
 export interface IRRNode {
   parentElement: IRRNode | null;
diff --git a/packages/rrdom/src/index.ts b/packages/rrdom/src/index.ts
index 2b90840d..c4c9cf18 100644
--- a/packages/rrdom/src/index.ts
+++ b/packages/rrdom/src/index.ts
@@ -1,12 +1,12 @@
 import {
   NodeType as RRNodeType,
   createMirror as createNodeMirror,
-} from 'rrweb-snapshot';
+} from '@highlight-run/rrweb-snapshot';
 import type {
   Mirror as NodeMirror,
   IMirror,
   serializedNodeWithId,
-} from 'rrweb-snapshot';
+} from '@highlight-run/rrweb-snapshot';
 import type {
   canvasMutationData,
   canvasEventWithTime,
@@ -14,7 +14,7 @@ import type {
   scrollData,
   styleSheetRuleData,
   styleDeclarationData,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import {
   BaseRRNode as RRNode,
   BaseRRCDATASectionImpl,
diff --git a/packages/rrdom/test/diff.test.ts b/packages/rrdom/test/diff.test.ts
index 6e02577f..ab52c3cb 100644
--- a/packages/rrdom/test/diff.test.ts
+++ b/packages/rrdom/test/diff.test.ts
@@ -8,16 +8,16 @@ import {
   serializedNodeWithId,
   createMirror,
   Mirror,
-} from 'rrweb-snapshot';
+} from '@highlight-run/rrweb-snapshot';
 import type { IRRNode } from '../src/document';
-import { Replayer } from 'rrweb';
+import { Replayer } from '@highlight-run/rrweb';
 import type {
   eventWithTime,
   canvasMutationData,
   styleDeclarationData,
   styleSheetRuleData,
-} from '@rrweb/types';
-import { EventType, IncrementalSource } from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
 
 const elementSn = {
   type: RRNodeType.Element,
diff --git a/packages/rrdom/test/document.test.ts b/packages/rrdom/test/document.test.ts
index c9ee13c3..1b75e2aa 100644
--- a/packages/rrdom/test/document.test.ts
+++ b/packages/rrdom/test/document.test.ts
@@ -1,7 +1,7 @@
 /**
  * @jest-environment jsdom
  */
-import { NodeType as RRNodeType } from 'rrweb-snapshot';
+import { NodeType as RRNodeType } from '@highlight-run/rrweb-snapshot';
 import {
   BaseRRDocumentImpl,
   BaseRRDocumentTypeImpl,
diff --git a/packages/rrdom/test/virtual-dom.test.ts b/packages/rrdom/test/virtual-dom.test.ts
index e414e230..2a9cfc37 100644
--- a/packages/rrdom/test/virtual-dom.test.ts
+++ b/packages/rrdom/test/virtual-dom.test.ts
@@ -18,7 +18,7 @@ import {
   NodeType,
   NodeType as RRNodeType,
   textNode,
-} from 'rrweb-snapshot';
+} from '@highlight-run/rrweb-snapshot';
 import {
   buildFromDom,
   buildFromNode,
diff --git a/packages/rrweb-player/LICENSE b/packages/rrweb-player/LICENSE
new file mode 100644
index 00000000..fce28eb8
--- /dev/null
+++ b/packages/rrweb-player/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb/graphs/contributors) and SmartX Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index 224dbdd1..66385983 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -1,10 +1,10 @@
 {
-  "name": "rrweb-player",
-  "version": "1.0.0-alpha.4",
+  "name": "@highlight-run/rrweb-player",
+  "version": "1.0.1",
   "devDependencies": {
+    "@highlight-run/rrweb-types": "^2.0.0-alpha.4",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
-    "@rrweb/types": "^2.0.0-alpha.4",
     "@types/offscreencanvas": "^2019.6.4",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-svelte3": "^4.0.0",
@@ -24,8 +24,8 @@
     "typescript": "^4.7.3"
   },
   "dependencies": {
-    "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^2.0.0-alpha.4"
+    "@highlight-run/rrweb": "2.1.10",
+    "@tsconfig/svelte": "^1.0.1"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/packages/rrweb-player/src/Controller.svelte b/packages/rrweb-player/src/Controller.svelte
index 1025e453..6a8eaef9 100644
--- a/packages/rrweb-player/src/Controller.svelte
+++ b/packages/rrweb-player/src/Controller.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { EventType } from 'rrweb';
   import type { Replayer } from 'rrweb';
-  import type { playerMetaData } from '@rrweb/types';
+  import type { playerMetaData } from '@highlight-run/rrweb-types';
   import type {
     PlayerMachineState,
     SpeedMachineState,
diff --git a/packages/rrweb-player/src/Player.svelte b/packages/rrweb-player/src/Player.svelte
index feb9dfec..fe7eb10c 100644
--- a/packages/rrweb-player/src/Player.svelte
+++ b/packages/rrweb-player/src/Player.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import { Replayer, unpack } from 'rrweb';
-  import type { eventWithTime } from '@rrweb/types';
+  import type { eventWithTime } from '@highlight-run/rrweb-types';
   import {
     inlineCss,
     openFullscreen,
diff --git a/packages/rrweb-player/src/main.ts b/packages/rrweb-player/src/main.ts
index df056891..17addf61 100644
--- a/packages/rrweb-player/src/main.ts
+++ b/packages/rrweb-player/src/main.ts
@@ -1,4 +1,4 @@
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 import _Player from './Player.svelte';
 
 type PlayerProps = {
diff --git a/packages/rrweb-player/src/utils.ts b/packages/rrweb-player/src/utils.ts
index 2a3f2921..4d08d103 100644
--- a/packages/rrweb-player/src/utils.ts
+++ b/packages/rrweb-player/src/utils.ts
@@ -16,7 +16,7 @@ declare global {
 }
 
 import { EventType, IncrementalSource } from 'rrweb';
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 export function inlineCss(cssObj: Record<string, string>): string {
   let style = '';
diff --git a/packages/rrweb-player/typings/index.d.ts b/packages/rrweb-player/typings/index.d.ts
index b27799aa..61937aea 100755
--- a/packages/rrweb-player/typings/index.d.ts
+++ b/packages/rrweb-player/typings/index.d.ts
@@ -1,6 +1,6 @@
-import { playerConfig } from 'rrweb/typings/types';
-import { eventWithTime } from '@rrweb/types';
-import { Replayer, mirror } from 'rrweb';
+import { playerConfig } from '@highlight-run/rrweb/typings/types';
+import { eventWithTime } from '@highlight-run/rrweb-types';
+import { Replayer, mirror } from '@highlight-run/rrweb';
 import { SvelteComponent } from 'svelte';
 
 export type RRwebPlayerOptions = {
diff --git a/packages/rrweb-snapshot/LICENSE b/packages/rrweb-snapshot/LICENSE
new file mode 100644
index 00000000..fce28eb8
--- /dev/null
+++ b/packages/rrweb-snapshot/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb/graphs/contributors) and SmartX Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/rrweb-snapshot/jest.config.js b/packages/rrweb-snapshot/jest.config.js
index 46cb05c3..9749329f 100644
--- a/packages/rrweb-snapshot/jest.config.js
+++ b/packages/rrweb-snapshot/jest.config.js
@@ -3,4 +3,7 @@ module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',
   testMatch: ['**/**.test.ts'],
+  globals: {
+    window: {}
+  }
 };
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index e16df047..361b8678 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "rrweb-snapshot",
-  "version": "2.0.0-alpha.4",
+  "name": "@highlight-run/rrweb-snapshot",
+  "version": "2.0.1",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",
diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index a491122d..6792a217 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -63,9 +63,22 @@ function escapeRegExp(str: string) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
 
+declare global {
+  interface Window {
+    HIG_CONFIGURATION?: {
+      enableOnHoverClass?: boolean;
+    };
+  }
+}
+
 const HOVER_SELECTOR = /([^\\]):hover/;
 const HOVER_SELECTOR_GLOBAL = new RegExp(HOVER_SELECTOR.source, 'g');
 export function addHoverClass(cssText: string, cache: BuildCache): string {
+  /* Begin Highlight Code */
+  if (!window?.HIG_CONFIGURATION?.enableOnHoverClass) {
+    return cssText;
+  }
+  /* End Highlight Code */
   const cachedStyle = cache?.stylesWithHoverClass.get(cssText);
   if (cachedStyle) return cachedStyle;
 
@@ -181,6 +194,49 @@ function buildNode(
         const isRemoteOrDynamicCss = tagName === 'style' && name === '_cssText';
         if (isRemoteOrDynamicCss && hackCss && typeof value === 'string') {
           value = addHoverClass(value, cache);
+
+          /** Start of Highlight Code */
+          /**
+           * Find all remote fonts in the style tag.
+           * We need to find and replace the URLs with a proxy URL so we can bypass CORS.
+           */
+          if (typeof value === 'string') {
+            const regex = /url\(\"https:\/\/\S*(.eot|.woff2|.ttf|.woff)\S*\"\)/gm;
+            let m;
+            const fontUrls: { originalUrl: string; proxyUrl: string }[] = [];
+
+            const PROXY_URL = 'https://replay-cors-proxy.highlightrun.workers.dev' as const;
+            while ((m = regex.exec(value)) !== null) {
+              // This is necessary to avoid infinite loops with zero-width matches
+              if (m.index === regex.lastIndex) {
+                regex.lastIndex++;
+              }
+
+              // The result can be accessed through the `m`-variable.
+              m.forEach((match, groupIndex) => {
+                if (groupIndex === 0) {
+                  // Trim the start and end
+                  // example: url("https://app.boardgent.com/fonts/MaterialIcons-Regular.53354891.woff2")
+                  // gets trimmed to https://app.boardgent.com/fonts/MaterialIcons-Regular.53354891.woff2
+                  const url = match.slice(5, match.length - 2);
+
+                  fontUrls.push({
+                    originalUrl: url,
+                    proxyUrl: url.replace(url, `${PROXY_URL}?url=${url}`),
+                  });
+                }
+              });
+            }
+
+            // Replace all references to the old URL to our proxy URL in the stylesheet.
+            fontUrls.forEach((urlPair) => {
+              value = (value as string).replace(
+                  urlPair.originalUrl,
+                  urlPair.proxyUrl,
+              );
+            });
+          }
+          /** End of Highlight Code */
         }
         if ((isTextarea || isRemoteOrDynamicCss) && typeof value === 'string') {
           const child = doc.createTextNode(value);
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 99a23ff7..cae9075f 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -18,6 +18,7 @@ import {
   isElement,
   isShadowRoot,
   maskInputValue,
+  obfuscateText,
   isNativeShadowDom,
   getCssRulesString,
 } from './utils';
@@ -426,6 +427,9 @@ function serializeNode(
      * `newlyAddedElement: true` skips scrollTop and scrollLeft check
      */
     newlyAddedElement?: boolean;
+    /** Highlight Options Start */
+    enableStrictPrivacy: boolean;
+    /** Highlight Options End */
   },
 ): serializedNode | false {
   const {
@@ -444,6 +448,7 @@ function serializeNode(
     recordCanvas,
     keepIframeSrcFn,
     newlyAddedElement = false,
+    enableStrictPrivacy,
   } = options;
   // Only record root id when document object is not the base document
   const rootId = getRootId(doc, mirror);
@@ -477,11 +482,13 @@ function serializeNode(
         inlineStylesheet,
         maskInputOptions,
         maskInputFn,
+        maskTextClass,
         dataURLOptions,
         inlineImages,
         recordCanvas,
         keepIframeSrcFn,
         newlyAddedElement,
+        enableStrictPrivacy,
         rootId,
       });
     case n.TEXT_NODE:
@@ -489,6 +496,7 @@ function serializeNode(
         maskTextClass,
         maskTextSelector,
         maskTextFn,
+        enableStrictPrivacy,
         rootId,
       });
     case n.CDATA_SECTION_NODE:
@@ -520,16 +528,25 @@ function serializeTextNode(
     maskTextClass: string | RegExp;
     maskTextSelector: string | null;
     maskTextFn: MaskTextFn | undefined;
+    enableStrictPrivacy: boolean;
     rootId: number | undefined;
   },
 ): serializedNode {
-  const { maskTextClass, maskTextSelector, maskTextFn, rootId } = options;
+  const {
+    maskTextClass,
+    maskTextSelector,
+    maskTextFn,
+    enableStrictPrivacy,
+    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;
   let textContent = n.textContent;
   const isStyle = parentTagName === 'STYLE' ? true : undefined;
   const isScript = parentTagName === 'SCRIPT' ? true : undefined;
+  /** Determines if this node has been handled already. */
+  let textContentHandled = false;
   if (isStyle && textContent) {
     try {
       // try to read style sheet
@@ -550,9 +567,14 @@ function serializeTextNode(
       );
     }
     textContent = absoluteToStylesheet(textContent, getHref());
+    textContentHandled = true;
   }
   if (isScript) {
     textContent = 'SCRIPT_PLACEHOLDER';
+    textContentHandled = true;
+  } else if (parentTagName === 'NOSCRIPT') {
+    textContent = '';
+    textContentHandled = true;
   }
   if (
     !isStyle &&
@@ -565,6 +587,24 @@ function serializeTextNode(
       : textContent.replace(/[\S]/g, '*');
   }
 
+  /* Start of Highlight */
+  // Randomizes the text content to a string of the same length.
+  if (enableStrictPrivacy && !textContentHandled && parentTagName) {
+    const IGNORE_TAG_NAMES = new Set([
+      'HEAD',
+      'TITLE',
+      'STYLE',
+      'SCRIPT',
+      'HTML',
+      'BODY',
+      'NOSCRIPT',
+    ]);
+    if (!IGNORE_TAG_NAMES.has(parentTagName) && textContent) {
+      textContent = obfuscateText(textContent);
+    }
+  }
+  /* End of Highlight */
+
   return {
     type: NodeType.Text,
     textContent: textContent || '',
@@ -582,6 +622,7 @@ function serializeElementNode(
     inlineStylesheet: boolean;
     maskInputOptions: MaskInputOptions;
     maskInputFn: MaskInputFn | undefined;
+    maskTextClass: string | RegExp;
     dataURLOptions?: DataURLOptions;
     inlineImages: boolean;
     recordCanvas: boolean;
@@ -590,6 +631,7 @@ function serializeElementNode(
      * `newlyAddedElement: true` skips scrollTop and scrollLeft check
      */
     newlyAddedElement?: boolean;
+    enableStrictPrivacy: boolean;
     rootId: number | undefined;
   },
 ): serializedNode | false {
@@ -600,14 +642,17 @@ function serializeElementNode(
     inlineStylesheet,
     maskInputOptions = {},
     maskInputFn,
+    maskTextClass,
     dataURLOptions = {},
     inlineImages,
     recordCanvas,
     keepIframeSrcFn,
     newlyAddedElement = false,
+    enableStrictPrivacy,
     rootId,
   } = options;
-  const needBlock = _isBlockedElement(n, blockClass, blockSelector);
+  let needBlock = _isBlockedElement(n, blockClass, blockSelector);
+  const needMask = _isBlockedElement(n, maskTextClass, null);
   const tagName = getValidTagName(n);
   let attributes: attributes = {};
   const len = n.attributes.length;
@@ -713,7 +758,13 @@ function serializeElementNode(
     }
   }
   // save image offline
-  if (tagName === 'img' && inlineImages) {
+  if (
+    tagName === 'img' &&
+    inlineImages &&
+    !needBlock &&
+    !needMask &&
+    !enableStrictPrivacy
+  ) {
     if (!canvasService) {
       canvasService = doc.createElement('canvas');
       canvasCtx = canvasService.getContext('2d');
@@ -764,13 +815,16 @@ function serializeElementNode(
     }
   }
   // block element
-  if (needBlock) {
+  if (needBlock || needMask || (tagName === 'img' && enableStrictPrivacy)) {
     const { width, height } = n.getBoundingClientRect();
     attributes = {
       class: attributes.class,
       rr_width: `${width}px`,
       rr_height: `${height}px`,
     };
+    if (enableStrictPrivacy) {
+      needBlock = true;
+    }
   }
   // iframe
   if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src as string)) {
@@ -789,6 +843,7 @@ function serializeElementNode(
     childNodes: [],
     isSVG: isSVGElement(n as Element) || undefined,
     needBlock,
+    needMask,
     rootId,
   };
 }
@@ -919,6 +974,7 @@ export function serializeNodeWithId(
       node: serializedElementNodeWithId,
     ) => unknown;
     iframeLoadTimeout?: number;
+    enableStrictPrivacy: boolean;
     onStylesheetLoad?: (
       linkNode: HTMLLinkElement,
       node: serializedElementNodeWithId,
@@ -949,6 +1005,7 @@ export function serializeNodeWithId(
     stylesheetLoadTimeout = 5000,
     keepIframeSrcFn = () => false,
     newlyAddedElement = false,
+    enableStrictPrivacy,
   } = options;
   let { preserveWhiteSpace = true } = options;
   const _serializedNode = serializeNode(n, {
@@ -967,6 +1024,7 @@ export function serializeNodeWithId(
     recordCanvas,
     keepIframeSrcFn,
     newlyAddedElement,
+    enableStrictPrivacy,
   });
   if (!_serializedNode) {
     // TODO: dev only
@@ -1002,10 +1060,26 @@ export function serializeNodeWithId(
     onSerialize(n);
   }
   let recordChild = !skipChild;
+  let strictPrivacy = enableStrictPrivacy;
   if (serializedNode.type === NodeType.Element) {
     recordChild = recordChild && !serializedNode.needBlock;
-    // this property was not needed in replay side
+    strictPrivacy =
+      enableStrictPrivacy ||
+      !!serializedNode.needBlock ||
+      !!serializedNode.needMask;
+
+    /** Highlight Code Begin */
+    // Remove the image's src if enableStrictPrivacy.
+    if (strictPrivacy && serializedNode.tagName === 'img') {
+      const clone = n.cloneNode();
+      ((clone as unknown) as HTMLImageElement).src = '';
+      mirror.add(clone, serializedNode);
+    }
+    /** Highlight Code End */
+
+    // these properties was not needed in replay side
     delete serializedNode.needBlock;
+    delete serializedNode.needMask;
     const shadowRoot = (n as HTMLElement).shadowRoot;
     if (shadowRoot && isNativeShadowDom(shadowRoot))
       serializedNode.isShadowHost = true;
@@ -1046,6 +1120,7 @@ export function serializeNodeWithId(
       onStylesheetLoad,
       stylesheetLoadTimeout,
       keepIframeSrcFn,
+      enableStrictPrivacy: strictPrivacy,
     };
     for (const childN of Array.from(n.childNodes)) {
       const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
@@ -1106,6 +1181,7 @@ export function serializeNodeWithId(
             onStylesheetLoad,
             stylesheetLoadTimeout,
             keepIframeSrcFn,
+            enableStrictPrivacy,
           });
 
           if (serializedIframeNode) {
@@ -1153,6 +1229,7 @@ export function serializeNodeWithId(
             onStylesheetLoad,
             stylesheetLoadTimeout,
             keepIframeSrcFn,
+            enableStrictPrivacy,
           });
 
           if (serializedLinkNode) {
@@ -1199,13 +1276,14 @@ function snapshot(
     ) => unknown;
     stylesheetLoadTimeout?: number;
     keepIframeSrcFn?: KeepIframeSrcFn;
+    enableStrictPrivacy: boolean;
   },
 ): serializedNodeWithId | null {
   const {
     mirror = new Mirror(),
-    blockClass = 'rr-block',
+    blockClass = 'highlight-block',
     blockSelector = null,
-    maskTextClass = 'rr-mask',
+    maskTextClass = 'highlight-mask',
     maskTextSelector = null,
     inlineStylesheet = true,
     inlineImages = false,
@@ -1222,6 +1300,7 @@ function snapshot(
     onStylesheetLoad,
     stylesheetLoadTimeout,
     keepIframeSrcFn = () => false,
+    enableStrictPrivacy = false,
   } = options || {};
   const maskInputOptions: MaskInputOptions =
     maskAllInputs === true
@@ -1290,6 +1369,7 @@ function snapshot(
     stylesheetLoadTimeout,
     keepIframeSrcFn,
     newlyAddedElement: false,
+    enableStrictPrivacy,
   });
 }
 
diff --git a/packages/rrweb-snapshot/src/types.ts b/packages/rrweb-snapshot/src/types.ts
index dcbf0439..01b59378 100644
--- a/packages/rrweb-snapshot/src/types.ts
+++ b/packages/rrweb-snapshot/src/types.ts
@@ -38,6 +38,7 @@ export type elementNode = {
   childNodes: serializedNodeWithId[];
   isSVG?: true;
   needBlock?: boolean;
+  needMask?: boolean;
 };
 
 export type textNode = {
diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts
index 75e9a180..17c8f863 100644
--- a/packages/rrweb-snapshot/src/utils.ts
+++ b/packages/rrweb-snapshot/src/utils.ts
@@ -213,3 +213,21 @@ export function is2DCanvasBlank(canvas: HTMLCanvasElement): boolean {
   }
   return true;
 }
+
+/** Start of Highlight Code
+ * Returns a string of the same length that has been obfuscated.
+ */
+export function obfuscateText(text: string): string {
+  // We remove non-printing characters.
+  // For example: '&zwnj;' is a character that isn't shown visibly or takes up layout space on the screen. However if you take the length of the string, it's counted as 1.
+  // For example: "&zwnj;1"'s length is 2 but visually it's only taking up 1 character width.
+  // If we don't filter does out, our string obfuscation could have more characters than what was originally presented.
+  text = text.replace(/[^ -~]+/g, '');
+  text =
+      text
+          ?.split(' ')
+          .map((word) => Math.random().toString(20).substr(2, word.length))
+          .join(' ') || '';
+  return text;
+}
+/* End of Highlight Code */
diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
index 29acb2b9..71729233 100644
--- a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
@@ -181,10 +181,10 @@ exports[`integration tests [html file]: block-element.html 1`] = `
     <title>Document</title>
     <style>.big { width: 50px; height: 50px; }.small { width: 50px; height: 100px; float: left; }</style>
   </head>  <body>
-    <div class=\\"rr-block big\\" style=\\"width: 50px; height: 50px;\\"></div>
+    <div class=\\"highlight-block big\\" style=\\"width: 50px; height: 50px;\\"></div>
     <div>record 2</div>
-    <div class=\\"rr-block small\\" style=\\"width: 50px; height: 100px;\\"></div>
-    <div class=\\"rr-block\\" style=\\"width: 100px; height: 200px;\\"></div>
+    <div class=\\"highlight-block small\\" style=\\"width: 50px; height: 100px;\\"></div>
+    <div class=\\"highlight-block\\" style=\\"width: 100px; height: 200px;\\"></div>
   </body></html>"
 `;
 
@@ -326,11 +326,11 @@ exports[`integration tests [html file]: mask-text.html 1`] = `
     <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
     <title>Document</title>
   </head>  <body>
-    <p class=\\"rr-mask\\">**** *</p>
-    <div class=\\"rr-mask\\">
+    <p class=\\"highlight-mask\\">**** *</p>
+    <div class=\\"highlight-mask\\">
       <span>**** *</span>
     </div>
-    <div class=\\"rr-mask\\">**** *</div>
+    <div class=\\"highlight-mask\\">**** *</div>
   </body></html>"
 `;
 
diff --git a/packages/rrweb-snapshot/test/html/block-element.html b/packages/rrweb-snapshot/test/html/block-element.html
index f9671d2a..573c4fa2 100644
--- a/packages/rrweb-snapshot/test/html/block-element.html
+++ b/packages/rrweb-snapshot/test/html/block-element.html
@@ -19,9 +19,9 @@
   </head>
 
   <body>
-    <div class="rr-block big">block 1</div>
+    <div class="highlight-block big">block 1</div>
     <div>record 2</div>
-    <div class="rr-block small">block 3</div>
-    <div class="rr-block" style="height: 200px; width: 100px">block 3</div>
+    <div class="highlight-block small">block 3</div>
+    <div class="highlight-block" style="height: 200px; width: 100px">block 3</div>
   </body>
 </html>
diff --git a/packages/rrweb-snapshot/test/html/mask-text.html b/packages/rrweb-snapshot/test/html/mask-text.html
index fe177a61..e31eab8f 100644
--- a/packages/rrweb-snapshot/test/html/mask-text.html
+++ b/packages/rrweb-snapshot/test/html/mask-text.html
@@ -8,10 +8,10 @@
   </head>
 
   <body>
-    <p class="rr-mask">mask 1</p>
-    <div class="rr-mask">
+    <p class="highlight-mask">mask 1</p>
+    <div class="highlight-mask">
       <span>mask 2</span>
     </div>
-    <div class="rr-mask">mask 3</div>
+    <div class="highlight-mask">mask 3</div>
   </body>
 </html>
diff --git a/packages/rrweb-snapshot/test/snapshot.test.ts b/packages/rrweb-snapshot/test/snapshot.test.ts
index 75d635e0..e23e6962 100644
--- a/packages/rrweb-snapshot/test/snapshot.test.ts
+++ b/packages/rrweb-snapshot/test/snapshot.test.ts
@@ -112,7 +112,7 @@ describe('absolute url to stylesheet', () => {
 
 describe('isBlockedElement()', () => {
   const subject = (html: string, opt: any = {}) =>
-    _isBlockedElement(render(html), 'rr-block', opt.blockSelector);
+    _isBlockedElement(render(html), 'highlight-block', opt.blockSelector);
 
   const render = (html: string): HTMLElement =>
     JSDOM.fragment(html).querySelector('div')!;
@@ -122,16 +122,18 @@ describe('isBlockedElement()', () => {
   });
 
   it('blocks prohibited className', () => {
-    expect(subject('<div class="foo rr-block bar" />')).toEqual(true);
+    expect(subject('<div class="foo highlight-block bar" />')).toEqual(true);
   });
 
   it('does not block random data selector', () => {
-    expect(subject('<div data-rr-block />')).toEqual(false);
+    expect(subject('<div data-highlight-block />')).toEqual(false);
   });
 
   it('blocks blocked selector', () => {
     expect(
-      subject('<div data-rr-block />', { blockSelector: '[data-rr-block]' }),
+      subject('<div data-highlight-block />', {
+        blockSelector: '[data-highlight-block]',
+      }),
     ).toEqual(true);
   });
 });
diff --git a/packages/rrweb/LICENSE b/packages/rrweb/LICENSE
new file mode 100644
index 00000000..fce28eb8
--- /dev/null
+++ b/packages/rrweb/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb/graphs/contributors) and SmartX Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 7295020d..6553f738 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "rrweb",
-  "version": "2.0.0-alpha.4",
+  "name": "@highlight-run/rrweb",
+  "version": "2.1.10",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -80,13 +80,13 @@
     "typescript": "^4.7.3"
   },
   "dependencies": {
-    "@rrweb/types": "^2.0.0-alpha.4",
+    "@highlight-run/rrdom": "^0.1.18",
+    "@highlight-run/rrweb-snapshot": "^2.0.1",
+    "@highlight-run/rrweb-types": "^2.0.0-alpha.4",
     "@types/css-font-loading-module": "0.0.7",
     "@xstate/fsm": "^1.4.0",
     "base64-arraybuffer": "^1.0.1",
     "fflate": "^0.4.4",
-    "mitt": "^3.0.0",
-    "rrdom": "^0.1.7",
-    "rrweb-snapshot": "^2.0.0-alpha.4"
+    "mitt": "^3.0.0"
   }
 }
diff --git a/packages/rrweb/rollup.config.js b/packages/rrweb/rollup.config.js
index 79f17e03..c8beb85c 100644
--- a/packages/rrweb/rollup.config.js
+++ b/packages/rrweb/rollup.config.js
@@ -119,7 +119,7 @@ const baseConfigs = [
 let configs = [];
 
 function getPlugins(options = {}) {
-  const { minify = false, sourceMap = false } = options;
+  const { minify = true, sourceMap = false } = options;
   return [
     resolve({ browser: true }),
     webWorkerLoader({
@@ -152,6 +152,7 @@ for (const c of baseConfigs) {
     postcss({
       extract: false,
       inject: false,
+      minimize: true,
     }),
   );
   // browser
@@ -229,19 +230,38 @@ if (process.env.BROWSER_ONLY) {
       name: 'rrwebCanvasWebRTCReplay',
       pathFn: toPluginPath('canvas-webrtc', 'replay'),
     },
+    {
+      input: './src/plugins/sequential-id/record/index.ts',
+      name: 'rrwebSequentialIdRecord',
+      pathFn: toPluginPath('sequential-id', 'record'),
+    },
   ];
 
   configs = [];
 
+  // browser record + replay, unminified (for profiling and performance testing)
+  configs.push({
+    input: './src/index.ts',
+    plugins: getPlugins(),
+    output: [
+      {
+        name: 'rrweb',
+        format: 'iife',
+        file: pkg.unpkg,
+      },
+    ],
+  });
+
   for (const c of browserOnlyBaseConfigs) {
     configs.push({
       input: c.input,
-      plugins: getPlugins(),
+      plugins: getPlugins({ sourceMap: true, minify: true }),
       output: [
         {
           name: c.name,
           format: 'iife',
           file: c.pathFn(pkg.unpkg),
+          sourcemap: true,
         },
       ],
     });
diff --git a/packages/rrweb/src/entries/all.ts b/packages/rrweb/src/entries/all.ts
index d67ff924..43668271 100644
--- a/packages/rrweb/src/entries/all.ts
+++ b/packages/rrweb/src/entries/all.ts
@@ -2,3 +2,5 @@ export * from '../index';
 export * from '../packer';
 export * from '../plugins/console/record';
 export * from '../plugins/console/replay';
+export { getRecordSequentialIdPlugin } from '../plugins/sequential-id/record';
+export { getReplaySequentialIdPlugin } from '../plugins/sequential-id/replay';
diff --git a/packages/rrweb/src/index.ts b/packages/rrweb/src/index.ts
index c8b0940c..95358a08 100644
--- a/packages/rrweb/src/index.ts
+++ b/packages/rrweb/src/index.ts
@@ -8,11 +8,9 @@ export {
   IncrementalSource,
   MouseInteractions,
   ReplayerEvents,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 
-export type {
-  recordOptions,
-} from './types';
+export type { recordOptions } from './types';
 
 const { addCustomEvent } = record;
 const { freezePage } = record;
diff --git a/packages/rrweb/src/packer/base.ts b/packages/rrweb/src/packer/base.ts
index ac6ee9a3..b2f3bb21 100644
--- a/packages/rrweb/src/packer/base.ts
+++ b/packages/rrweb/src/packer/base.ts
@@ -1,4 +1,4 @@
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 export type PackFn = (event: eventWithTime) => string;
 export type UnpackFn = (raw: string) => eventWithTime;
diff --git a/packages/rrweb/src/packer/unpack.ts b/packages/rrweb/src/packer/unpack.ts
index 0c4bf252..7333d179 100644
--- a/packages/rrweb/src/packer/unpack.ts
+++ b/packages/rrweb/src/packer/unpack.ts
@@ -1,6 +1,6 @@
 import { strFromU8, strToU8, unzlibSync } from 'fflate';
 import { UnpackFn, eventWithTimeAndPacker, MARK } from './base';
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 export const unpack: UnpackFn = (raw: string) => {
   if (typeof raw !== 'string') {
diff --git a/packages/rrweb/src/plugins/canvas-webrtc/record/index.ts b/packages/rrweb/src/plugins/canvas-webrtc/record/index.ts
index 03aad10c..dac6f016 100644
--- a/packages/rrweb/src/plugins/canvas-webrtc/record/index.ts
+++ b/packages/rrweb/src/plugins/canvas-webrtc/record/index.ts
@@ -1,6 +1,9 @@
-import type { Mirror } from 'rrweb-snapshot';
+import type { Mirror } from '@highlight-run/rrweb-snapshot';
 import SimplePeer from 'simple-peer-light';
-import type { RecordPlugin, ICrossOriginIframeMirror } from '@rrweb/types';
+import type {
+  RecordPlugin,
+  ICrossOriginIframeMirror,
+} from '@highlight-run/rrweb-types';
 import type { WebRTCDataChannel } from '../types';
 
 export const PLUGIN_NAME = 'rrweb/canvas-webrtc@1';
diff --git a/packages/rrweb/src/plugins/canvas-webrtc/replay/index.ts b/packages/rrweb/src/plugins/canvas-webrtc/replay/index.ts
index 45a12970..c94f2ac5 100644
--- a/packages/rrweb/src/plugins/canvas-webrtc/replay/index.ts
+++ b/packages/rrweb/src/plugins/canvas-webrtc/replay/index.ts
@@ -1,5 +1,5 @@
-import type { RRNode } from 'rrdom';
-import type { Mirror } from 'rrweb-snapshot';
+import type { RRNode } from '@highlight-run/rrdom';
+import type { Mirror } from '@highlight-run/rrweb-snapshot';
 import SimplePeer from 'simple-peer-light';
 import type { Replayer } from '../../../replay';
 import type { ReplayPlugin } from '../../../types';
diff --git a/packages/rrweb/src/plugins/console/record/index.ts b/packages/rrweb/src/plugins/console/record/index.ts
index 47cd5136..1a6dfdcd 100644
--- a/packages/rrweb/src/plugins/console/record/index.ts
+++ b/packages/rrweb/src/plugins/console/record/index.ts
@@ -1,4 +1,8 @@
-import type { listenerHandler, RecordPlugin, IWindow } from '@rrweb/types';
+import type {
+  listenerHandler,
+  RecordPlugin,
+  IWindow,
+} from '@highlight-run/rrweb-types';
 import { patch } from '../../../utils';
 import { ErrorStackParser, StackFrame } from './error-stack-parser';
 import { stringify } from './stringify';
@@ -90,9 +94,9 @@ function initLogObserver(
   win: IWindow, // top window or in an iframe
   options: LogRecordOptions,
 ): listenerHandler {
-  const logOptions = (options
-    ? Object.assign({}, defaultLogOptions, options)
-    : defaultLogOptions) as {
+  const logOptions = (
+    options ? Object.assign({}, defaultLogOptions, options) : defaultLogOptions
+  ) as {
     level: LogLevel[];
     lengthThreshold: number;
     stringifyOptions?: StringifyOptions;
@@ -118,9 +122,9 @@ function initLogObserver(
       const errorHandler = (event: ErrorEvent) => {
         const message = event.message,
           error = event.error as Error;
-        const trace: string[] = ErrorStackParser.parse(
-          error,
-        ).map((stackFrame: StackFrame) => stackFrame.toString());
+        const trace: string[] = ErrorStackParser.parse(error).map(
+          (stackFrame: StackFrame) => stackFrame.toString(),
+        );
         const payload = [stringify(message, logOptions.stringifyOptions)];
         cb({
           level: 'error',
diff --git a/packages/rrweb/src/plugins/console/replay/index.ts b/packages/rrweb/src/plugins/console/replay/index.ts
index db56e18c..5ae2b74d 100644
--- a/packages/rrweb/src/plugins/console/replay/index.ts
+++ b/packages/rrweb/src/plugins/console/replay/index.ts
@@ -1,6 +1,6 @@
 import { LogLevel, LogData, PLUGIN_NAME } from '../record';
-import type { eventWithTime } from '@rrweb/types';
-import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
 import type { ReplayPlugin } from '../../../types';
 
 /**
@@ -59,10 +59,10 @@ class LogReplayPlugin {
     for (const level of this.config.level!) {
       if (level === 'trace') {
         replayLogger[level] = (data: LogData) => {
-          const logger = ((console.log as unknown) as PatchedConsoleLog)[
+          const logger = (console.log as unknown as PatchedConsoleLog)[
             ORIGINAL_ATTRIBUTE_NAME
           ]
-            ? ((console.log as unknown) as PatchedConsoleLog)[
+            ? (console.log as unknown as PatchedConsoleLog)[
                 ORIGINAL_ATTRIBUTE_NAME
               ]
             : console.log;
@@ -73,10 +73,10 @@ class LogReplayPlugin {
         };
       } else {
         replayLogger[level] = (data: LogData) => {
-          const logger = ((console[level] as unknown) as PatchedConsoleLog)[
+          const logger = (console[level] as unknown as PatchedConsoleLog)[
             ORIGINAL_ATTRIBUTE_NAME
           ]
-            ? ((console[level] as unknown) as PatchedConsoleLog)[
+            ? (console[level] as unknown as PatchedConsoleLog)[
                 ORIGINAL_ATTRIBUTE_NAME
               ]
             : console[level];
@@ -118,7 +118,7 @@ export const getReplayConsolePlugin: (
         event.type === EventType.IncrementalSnapshot &&
         event.data.source === (IncrementalSource.Log as IncrementalSource)
       ) {
-        logData = (event.data as unknown) as LogData;
+        logData = event.data as unknown as LogData;
       } else if (
         event.type === EventType.Plugin &&
         event.data.plugin === PLUGIN_NAME
diff --git a/packages/rrweb/src/plugins/sequential-id/record/index.ts b/packages/rrweb/src/plugins/sequential-id/record/index.ts
index 140b9c70..c2f6f599 100644
--- a/packages/rrweb/src/plugins/sequential-id/record/index.ts
+++ b/packages/rrweb/src/plugins/sequential-id/record/index.ts
@@ -1,4 +1,4 @@
-import type { RecordPlugin } from '@rrweb/types';
+import type { RecordPlugin } from '@highlight-run/rrweb-types';
 
 export type SequentialIdOptions = {
   key: string;
diff --git a/packages/rrweb/src/plugins/sequential-id/replay/index.ts b/packages/rrweb/src/plugins/sequential-id/replay/index.ts
index a41edb84..9685f357 100644
--- a/packages/rrweb/src/plugins/sequential-id/replay/index.ts
+++ b/packages/rrweb/src/plugins/sequential-id/replay/index.ts
@@ -1,6 +1,6 @@
 import type { SequentialIdOptions } from '../record';
 import type { ReplayPlugin } from '../../../types';
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 type Options = SequentialIdOptions & {
   warnOnMissingId: boolean;
@@ -22,7 +22,7 @@ export const getReplaySequentialIdPlugin: (
   return {
     handler(event: eventWithTime) {
       if (key in event) {
-        const id = ((event as unknown) as Record<string, number>)[key];
+        const id = (event as unknown as Record<string, number>)[key];
         if (id !== currentId) {
           console.error(
             `[sequential-id-plugin]: expect to get an id with value "${currentId}", but got "${id}"`,
diff --git a/packages/rrweb/src/record/cross-origin-iframe-mirror.ts b/packages/rrweb/src/record/cross-origin-iframe-mirror.ts
index cec73808..8f2e66cf 100644
--- a/packages/rrweb/src/record/cross-origin-iframe-mirror.ts
+++ b/packages/rrweb/src/record/cross-origin-iframe-mirror.ts
@@ -1,6 +1,7 @@
-import type { ICrossOriginIframeMirror } from '@rrweb/types';
+import type { ICrossOriginIframeMirror } from '@highlight-run/rrweb-types';
 export default class CrossOriginIframeMirror
-  implements ICrossOriginIframeMirror {
+  implements ICrossOriginIframeMirror
+{
   private iframeIdToRemoteIdMap: WeakMap<
     HTMLIFrameElement,
     Map<number, number>
diff --git a/packages/rrweb/src/record/iframe-manager.ts b/packages/rrweb/src/record/iframe-manager.ts
index 775aa650..2b0878d9 100644
--- a/packages/rrweb/src/record/iframe-manager.ts
+++ b/packages/rrweb/src/record/iframe-manager.ts
@@ -1,9 +1,9 @@
-import type { Mirror, serializedNodeWithId } from 'rrweb-snapshot';
-import { genId } from 'rrweb-snapshot';
+import type { Mirror, serializedNodeWithId } from '@highlight-run/rrweb-snapshot';
+import { genId } from '@highlight-run/rrweb-snapshot';
 import type { CrossOriginIframeMessageEvent } from '../types';
 import CrossOriginIframeMirror from './cross-origin-iframe-mirror';
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime, mutationCallBack } from '@rrweb/types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
+import type { eventWithTime, mutationCallBack } from '@highlight-run/rrweb-types';
 import type { StylesheetManager } from './stylesheet-manager';
 
 export class IframeManager {
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
index e40d9716..79cac5d5 100644
--- a/packages/rrweb/src/record/index.ts
+++ b/packages/rrweb/src/record/index.ts
@@ -3,7 +3,7 @@ import {
   MaskInputOptions,
   SlimDOMOptions,
   createMirror,
-} from 'rrweb-snapshot';
+} from '@highlight-run/rrweb-snapshot';
 import { initObservers, mutationBuffers } from './observer';
 import {
   on,
@@ -25,12 +25,13 @@ import {
   scrollCallback,
   canvasMutationParam,
   adoptedStyleSheetParam,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import type { CrossOriginIframeMessageEventContent } from '../types';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
 import { CanvasManager } from './observers/canvas/canvas-manager';
 import { StylesheetManager } from './stylesheet-manager';
+import { obfuscateText } from '@highlight-run/rrweb-snapshot';
 
 function wrapEvent(e: event): eventWithTime {
   return {
@@ -53,17 +54,17 @@ function record<T = eventWithTime>(
     emit,
     checkoutEveryNms,
     checkoutEveryNth,
-    blockClass = 'rr-block',
+    blockClass = 'highlight-block',
     blockSelector = null,
-    ignoreClass = 'rr-ignore',
-    maskTextClass = 'rr-mask',
+    ignoreClass = 'highlight-ignore',
+    maskTextClass = 'highlight-mask',
     maskTextSelector = null,
     inlineStylesheet = true,
     maskAllInputs,
     maskInputOptions: _maskInputOptions,
     slimDOMOptions: _slimDOMOptions,
     maskInputFn,
-    maskTextFn,
+    maskTextFn = obfuscateText,
     hooks,
     packFn,
     sampling = {},
@@ -76,6 +77,7 @@ function record<T = eventWithTime>(
     inlineImages = false,
     plugins,
     keepIframeSrcFn = () => false,
+    enableStrictPrivacy = false,
     ignoreCSSAttributes = new Set([]),
   } = options;
 
@@ -161,9 +163,9 @@ function record<T = eventWithTime>(
       }
     }
     if (packFn) {
-      e = (packFn(e) as unknown) as eventWithTime;
+      e = packFn(e) as unknown as eventWithTime;
     }
-    return (e as unknown) as T;
+    return e as unknown as T;
   };
   wrappedEmit = (e: eventWithTime, isCheckout?: boolean) => {
     if (
@@ -290,8 +292,11 @@ function record<T = eventWithTime>(
     blockClass,
     blockSelector,
     mirror,
-    sampling: sampling.canvas,
+    sampling: sampling?.canvas?.fps,
     dataURLOptions,
+    resizeQuality: sampling?.canvas?.resizeQuality,
+    resizeFactor: sampling?.canvas?.resizeFactor,
+    maxSnapshotDimension: sampling?.canvas?.maxSnapshotDimension,
   });
 
   const shadowDomManager = new ShadowDomManager({
@@ -315,6 +320,7 @@ function record<T = eventWithTime>(
       stylesheetManager,
       canvasManager,
       keepIframeSrcFn,
+      enableStrictPrivacy,
     },
     mirror,
   });
@@ -349,6 +355,7 @@ function record<T = eventWithTime>(
       dataURLOptions,
       recordCanvas,
       inlineImages,
+      enableStrictPrivacy,
       onSerialize: (n) => {
         if (isSerializedIframe(n, mirror)) {
           iframeManager.addIframe(n as HTMLIFrameElement);
@@ -542,6 +549,7 @@ function record<T = eventWithTime>(
           shadowDomManager,
           canvasManager,
           ignoreCSSAttributes,
+          enableStrictPrivacy,
           plugins:
             plugins
               ?.filter((p) => p.observer)
@@ -607,7 +615,9 @@ function record<T = eventWithTime>(
 
 record.addCustomEvent = <T>(tag: string, payload: T) => {
   if (!recording) {
-    throw new Error('please add custom event after start recording');
+    /* Highlight Code - disable this warning */
+    // throw new Error('please add custom event after start recording');
+    return;
   }
   wrappedEmit(
     wrapEvent({
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index 179272c0..6d2359dc 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -5,9 +5,10 @@ import {
   isShadowRoot,
   needMaskingText,
   maskInputValue,
+  obfuscateText,
   Mirror,
   isNativeShadowDom,
-} from 'rrweb-snapshot';
+} from '@highlight-run/rrweb-snapshot';
 import type { observerParam, MutationBufferParam } from '../types';
 import type {
   mutationRecord,
@@ -17,7 +18,7 @@ import type {
   addedNodeMutation,
   styleAttributeValue,
   Optional,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import {
   isBlocked,
   isAncestorRemoved,
@@ -175,6 +176,7 @@ export default class MutationBuffer {
   private stylesheetManager: observerParam['stylesheetManager'];
   private shadowDomManager: observerParam['shadowDomManager'];
   private canvasManager: observerParam['canvasManager'];
+  private enableStrictPrivacy: observerParam['enableStrictPrivacy'];
 
   public init(options: MutationBufferParam) {
     ([
@@ -198,6 +200,7 @@ export default class MutationBuffer {
       'stylesheetManager',
       'shadowDomManager',
       'canvasManager',
+      'enableStrictPrivacy',
     ] as const).forEach((key) => {
       // just a type trick, the runtime result is correct
       this[key] = options[key] as never;
@@ -310,6 +313,7 @@ export default class MutationBuffer {
         dataURLOptions: this.dataURLOptions,
         recordCanvas: this.recordCanvas,
         inlineImages: this.inlineImages,
+        enableStrictPrivacy: this.enableStrictPrivacy,
         onSerialize: (currentN) => {
           if (isSerializedIframe(currentN, this.mirror)) {
             this.iframeManager.addIframe(currentN as HTMLIFrameElement);
@@ -430,10 +434,18 @@ export default class MutationBuffer {
 
     const payload = {
       texts: this.texts
-        .map((text) => ({
-          id: this.mirror.getId(text.node),
-          value: text.value,
-        }))
+        .map((text) => {
+          /* Begin Highlight Code */
+          let value = text.value;
+          if (this.enableStrictPrivacy && value) {
+            value = obfuscateText(value);
+          }
+          return {
+            id: this.mirror.getId(text.node),
+            value,
+          };
+          /* End Highlight Code */
+        })
         // text mutation's id was not in the mirror map means the target node has been removed
         .filter((text) => this.mirror.has(text.id)),
       attributes: this.attributes
@@ -570,6 +582,16 @@ export default class MutationBuffer {
             }
           }
         } else {
+          /* Begin Highlight Code */
+          const tagName = (m.target as HTMLElement).tagName;
+          if (tagName === 'INPUT') {
+            const node = m.target as HTMLInputElement;
+            if (node.type === 'password') {
+              item.attributes['value'] = '*'.repeat(node.value.length);
+              break;
+            }
+          }
+          /* End Highlight Code */
           // overwrite attribute if the mutations was triggered in same time
           item.attributes[m.attributeName!] = transformAttribute(
             this.doc,
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index 975f8fa3..bbea0388 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -1,4 +1,8 @@
-import { MaskInputOptions, maskInputValue, Mirror } from 'rrweb-snapshot';
+import {
+  MaskInputOptions,
+  maskInputValue,
+  Mirror,
+} from '@highlight-run/rrweb-snapshot';
 import type { FontFaceSet } from 'css-font-loading-module';
 import {
   throttle,
@@ -9,6 +13,7 @@ import {
   isBlocked,
   isTouchEvent,
   patch,
+  isCanvasNode,
   StyleSheetMirror,
 } from '../utils';
 import type { observerParam, MutationBufferParam } from '../types';
@@ -37,7 +42,7 @@ import {
   IWindow,
   SelectionRange,
   selectionCallback,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import MutationBuffer from './mutation';
 
 type WindowWithStoredMutationObserver = IWindow & {
@@ -96,19 +101,18 @@ export function initMutationObserver(
      * window.__rrMutationObserver = MutationObserver
      */
     (window as WindowWithStoredMutationObserver).__rrMutationObserver;
-  const angularZoneSymbol = (window as WindowWithAngularZone)?.Zone?.__symbol__?.(
-    'MutationObserver',
-  );
+  const angularZoneSymbol = (
+    window as WindowWithAngularZone
+  )?.Zone?.__symbol__?.('MutationObserver');
   if (
     angularZoneSymbol &&
-    ((window as unknown) as Record<string, typeof MutationObserver>)[
+    (window as unknown as Record<string, typeof MutationObserver>)[
       angularZoneSymbol
     ]
   ) {
-    mutationObserverCtor = ((window as unknown) as Record<
-      string,
-      typeof MutationObserver
-    >)[angularZoneSymbol];
+    mutationObserverCtor = (
+      window as unknown as Record<string, typeof MutationObserver>
+    )[angularZoneSymbol];
   }
   const observer = new (mutationObserverCtor as new (
     callback: MutationCallback,
@@ -228,9 +232,15 @@ function initMouseInteractionObserver({
   const getHandler = (eventKey: keyof typeof MouseInteractions) => {
     return (event: MouseEvent | TouchEvent) => {
       const target = getEventTarget(event) as Node;
-      if (isBlocked(target, blockClass, blockSelector, true)) {
+      /* Start of Highlight Code */
+      if (
+        isBlocked(target, blockClass, blockSelector, true) ||
+        // We ignore canvas elements for rage click detection because we cannot infer what inside the canvas is getting interacted with.
+        isCanvasNode(target)
+      ) {
         return;
       }
+      /* End of Highlight Code */
       const e = isTouchEvent(event) ? event.changedTouches[0] : event;
       if (!e) {
         return;
@@ -425,9 +435,9 @@ function initInputObserver({
     }
   }
   const events = sampling.input === 'last' ? ['change'] : ['input', 'change'];
-  const handlers: Array<
-    listenerHandler | hookResetter
-  > = events.map((eventName) => on(eventName, eventHandler, doc));
+  const handlers: Array<listenerHandler | hookResetter> = events.map(
+    (eventName) => on(eventName, eventHandler, doc),
+  );
   const currentWindow = doc.defaultView;
   if (!currentWindow) {
     return () => {
@@ -886,12 +896,8 @@ function initMediaInteractionObserver({
       ) {
         return;
       }
-      const {
-        currentTime,
-        volume,
-        muted,
-        playbackRate,
-      } = target as HTMLMediaElement;
+      const { currentTime, volume, muted, playbackRate } =
+        target as HTMLMediaElement;
       mediaInteractionCb({
         type,
         id: mirror.getId(target as Node),
@@ -926,7 +932,7 @@ function initFontObserver({ fontCb, doc }: observerParam): listenerHandler {
   const fontMap = new WeakMap<FontFace, fontParam>();
 
   const originalFontFace = win.FontFace;
-  win.FontFace = (function FontFace(
+  win.FontFace = function FontFace(
     family: string,
     source: string | ArrayBufferLike,
     descriptors?: FontFaceDescriptors,
@@ -942,7 +948,7 @@ function initFontObserver({ fontCb, doc }: observerParam): listenerHandler {
           : JSON.stringify(Array.from(new Uint8Array(source))),
     });
     return fontFace;
-  } as unknown) as typeof FontFace;
+  } as unknown as typeof FontFace;
 
   const restoreHandler = patch(
     doc.fonts,
diff --git a/packages/rrweb/src/record/observers/canvas/2d.ts b/packages/rrweb/src/record/observers/canvas/2d.ts
index d74a4edc..4cfe48f6 100644
--- a/packages/rrweb/src/record/observers/canvas/2d.ts
+++ b/packages/rrweb/src/record/observers/canvas/2d.ts
@@ -1,11 +1,10 @@
-import type { Mirror } from 'rrweb-snapshot';
 import {
   blockClass,
   CanvasContext,
   canvasManagerMutationCallback,
   IWindow,
   listenerHandler,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import { hookSetter, isBlocked, patch } from '../../../utils';
 import { serializeArgs } from './serialize-args';
 
diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
index a27bac8d..d597a4b7 100644
--- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
+++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
@@ -1,4 +1,8 @@
-import type { ICanvas, Mirror, DataURLOptions } from 'rrweb-snapshot';
+import type {
+  ICanvas,
+  Mirror,
+  DataURLOptions,
+} from '@highlight-run/rrweb-snapshot';
 import type {
   blockClass,
   canvasManagerMutationCallback,
@@ -8,9 +12,9 @@ import type {
   IWindow,
   listenerHandler,
   CanvasArg,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import { isBlocked } from '../../../utils';
-import { CanvasContext } from '@rrweb/types';
+import { CanvasContext } from '@highlight-run/rrweb-types';
 import initCanvas2DMutationObserver from './2d';
 import initCanvasContextObserver from './canvas';
 import initCanvasWebGLMutationObserver from './webgl';
@@ -64,6 +68,9 @@ export class CanvasManager {
     mirror: Mirror;
     sampling?: 'all' | number;
     dataURLOptions: DataURLOptions;
+    resizeQuality?: 'pixelated' | 'low' | 'medium' | 'high';
+    resizeFactor?: number;
+    maxSnapshotDimension?: number;
   }) {
     const {
       sampling = 'all',
@@ -79,9 +86,18 @@ export class CanvasManager {
     if (recordCanvas && sampling === 'all')
       this.initCanvasMutationObserver(win, blockClass, blockSelector);
     if (recordCanvas && typeof sampling === 'number')
-      this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, {
-        dataURLOptions,
-      });
+      this.initCanvasFPSObserver(
+        sampling,
+        win,
+        blockClass,
+        blockSelector,
+        {
+          dataURLOptions,
+        },
+        options.resizeQuality,
+        options.resizeFactor,
+        options.maxSnapshotDimension,
+      );
   }
 
   private processMutation: canvasManagerMutationCallback = (
@@ -109,6 +125,9 @@ export class CanvasManager {
     options: {
       dataURLOptions: DataURLOptions;
     },
+    resizeQuality?: 'pixelated' | 'low' | 'medium' | 'high',
+    resizeFactor?: number,
+    maxSnapshotDimension?: number,
   ) {
     const canvasContextReset = initCanvasContextObserver(
       win,
@@ -116,21 +135,22 @@ export class CanvasManager {
       blockSelector,
     );
     const snapshotInProgressMap: Map<number, boolean> = new Map();
-    const worker = new ImageBitmapDataURLWorker() as ImageBitmapDataURLRequestWorker;
+    const worker =
+      new ImageBitmapDataURLWorker() as ImageBitmapDataURLRequestWorker;
     worker.onmessage = (e) => {
       const { id } = e.data;
       snapshotInProgressMap.set(id, false);
 
       if (!('base64' in e.data)) return;
 
-      const { base64, type, width, height } = e.data;
+      const { base64, type, canvasWidth, canvasHeight } = e.data;
       this.mutationCb({
         id,
         type: CanvasContext['2D'],
         commands: [
           {
             property: 'clearRect', // wipe canvas
-            args: [0, 0, width, height],
+            args: [0, 0, canvasWidth, canvasHeight],
           },
           {
             property: 'drawImage', // draws (semi-transparent) image
@@ -147,6 +167,8 @@ export class CanvasManager {
               } as CanvasArg,
               0,
               0,
+              canvasWidth,
+              canvasHeight,
             ],
           },
         ],
@@ -202,13 +224,32 @@ export class CanvasManager {
               context?.clear(context.COLOR_BUFFER_BIT);
             }
           }
-          const bitmap = await createImageBitmap(canvas);
+          // canvas is not yet ready... this retry on the next sampling iteration.
+          // we don't want to crash the worker if the canvas is not yet rendered.
+          if (canvas.width === 0 || canvas.height === 0) {
+            return;
+          }
+          let scale = resizeFactor || 1;
+          if (maxSnapshotDimension) {
+            const maxDim = Math.max(canvas.width, canvas.height);
+            scale = Math.min(scale, maxSnapshotDimension / maxDim);
+          }
+          const width = canvas.width * scale;
+          const height = canvas.height * scale;
+
+          const bitmap = await createImageBitmap(canvas, {
+            resizeQuality: resizeQuality || 'low',
+            resizeWidth: width,
+            resizeHeight: height,
+          });
           worker.postMessage(
             {
               id,
               bitmap,
-              width: canvas.width,
-              height: canvas.height,
+              width,
+              height,
+              canvasWidth: canvas.width,
+              canvasHeight: canvas.height,
               dataURLOptions: options.dataURLOptions,
             },
             [bitmap],
diff --git a/packages/rrweb/src/record/observers/canvas/canvas.ts b/packages/rrweb/src/record/observers/canvas/canvas.ts
index 36408ec8..dc4854e3 100644
--- a/packages/rrweb/src/record/observers/canvas/canvas.ts
+++ b/packages/rrweb/src/record/observers/canvas/canvas.ts
@@ -1,5 +1,5 @@
-import type { ICanvas } from 'rrweb-snapshot';
-import type { blockClass, IWindow, listenerHandler } from '@rrweb/types';
+import type { ICanvas } from '@highlight-run/rrweb-snapshot';
+import type { blockClass, IWindow, listenerHandler } from '@highlight-run/rrweb-types';
 import { isBlocked, patch } from '../../../utils';
 
 export default function initCanvasContextObserver(
diff --git a/packages/rrweb/src/record/observers/canvas/serialize-args.ts b/packages/rrweb/src/record/observers/canvas/serialize-args.ts
index 32806fef..ed46950e 100644
--- a/packages/rrweb/src/record/observers/canvas/serialize-args.ts
+++ b/packages/rrweb/src/record/observers/canvas/serialize-args.ts
@@ -1,5 +1,5 @@
 import { encode } from 'base64-arraybuffer';
-import type { IWindow, CanvasArg } from '@rrweb/types';
+import type { IWindow, CanvasArg } from '@highlight-run/rrweb-types';
 
 // TODO: unify with `replay/webgl.ts`
 type CanvasVarMap = Map<string, unknown[]>;
diff --git a/packages/rrweb/src/record/observers/canvas/webgl.ts b/packages/rrweb/src/record/observers/canvas/webgl.ts
index a5b026ab..b527119e 100644
--- a/packages/rrweb/src/record/observers/canvas/webgl.ts
+++ b/packages/rrweb/src/record/observers/canvas/webgl.ts
@@ -1,4 +1,4 @@
-import type { Mirror } from 'rrweb-snapshot';
+import type { Mirror } from '@highlight-run/rrweb-snapshot';
 import {
   blockClass,
   CanvasContext,
@@ -6,7 +6,7 @@ import {
   canvasMutationWithType,
   IWindow,
   listenerHandler,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import { hookSetter, isBlocked, patch } from '../../../utils';
 import { saveWebGLVar, serializeArgs } from './serialize-args';
 
diff --git a/packages/rrweb/src/record/shadow-dom-manager.ts b/packages/rrweb/src/record/shadow-dom-manager.ts
index 807f6220..74095667 100644
--- a/packages/rrweb/src/record/shadow-dom-manager.ts
+++ b/packages/rrweb/src/record/shadow-dom-manager.ts
@@ -3,15 +3,15 @@ import type {
   mutationCallBack,
   scrollCallback,
   SamplingStrategy,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import {
   initMutationObserver,
   initScrollObserver,
   initAdoptedStyleSheetObserver,
 } from './observer';
 import { patch } from '../utils';
-import type { Mirror } from 'rrweb-snapshot';
-import { isNativeShadowDom } from 'rrweb-snapshot';
+import type { Mirror } from '@highlight-run/rrweb-snapshot';
+import { isNativeShadowDom } from '@highlight-run/rrweb-snapshot';
 
 type BypassOptions = Omit<
   MutationBufferParam,
@@ -77,7 +77,7 @@ export class ShadowDomManager {
       scrollCb: this.scrollCb,
       // https://gist.github.com/praveenpuglia/0832da687ed5a5d7a0907046c9ef1813
       // scroll is not allowed to pass the boundary, so we need to listen the shadow document
-      doc: (shadowRoot as unknown) as Document,
+      doc: shadowRoot as unknown as Document,
       mirror: this.mirror,
     });
     // Defer this to avoid adoptedStyleSheet events being created before the full snapshot is created or attachShadow action is recorded.
@@ -109,9 +109,11 @@ export class ShadowDomManager {
       const manager = this;
       this.restorePatches.push(
         patch(
-          (iframeElement.contentWindow as Window & {
-            HTMLElement: { prototype: HTMLElement };
-          }).HTMLElement.prototype,
+          (
+            iframeElement.contentWindow as Window & {
+              HTMLElement: { prototype: HTMLElement };
+            }
+          ).HTMLElement.prototype,
           'attachShadow',
           function (original: (init: ShadowRootInit) => ShadowRoot) {
             return function (this: HTMLElement, option: ShadowRootInit) {
diff --git a/packages/rrweb/src/record/stylesheet-manager.ts b/packages/rrweb/src/record/stylesheet-manager.ts
index 89c62876..0ee4fcc4 100644
--- a/packages/rrweb/src/record/stylesheet-manager.ts
+++ b/packages/rrweb/src/record/stylesheet-manager.ts
@@ -1,11 +1,14 @@
-import type { elementNode, serializedNodeWithId } from 'rrweb-snapshot';
-import { getCssRuleString } from 'rrweb-snapshot';
+import type {
+  elementNode,
+  serializedNodeWithId,
+} from '@highlight-run/rrweb-snapshot';
+import { getCssRuleString } from '@highlight-run/rrweb-snapshot';
 import type {
   adoptedStyleSheetCallback,
   adoptedStyleSheetParam,
   attributeMutation,
   mutationCallBack,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import { StyleSheetMirror } from '../utils';
 
 export class StylesheetManager {
diff --git a/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts b/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts
index 374edfe1..b2813cbf 100644
--- a/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts
+++ b/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts
@@ -1,9 +1,9 @@
 import { encode } from 'base64-arraybuffer';
-import type { DataURLOptions } from 'rrweb-snapshot';
+import type { DataURLOptions } from '@highlight-run/rrweb-snapshot';
 import type {
   ImageBitmapDataURLWorkerParams,
   ImageBitmapDataURLWorkerResponse,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 
 const lastBlobMap: Map<number, string> = new Map();
 const transparentBlobMap: Map<string, string> = new Map();
@@ -49,7 +49,15 @@ const worker: ImageBitmapDataURLResponseWorker = self;
 // eslint-disable-next-line @typescript-eslint/no-misused-promises
 worker.onmessage = async function (e) {
   if ('OffscreenCanvas' in globalThis) {
-    const { id, bitmap, width, height, dataURLOptions } = e.data;
+    const {
+      id,
+      bitmap,
+      width,
+      height,
+      canvasWidth,
+      canvasHeight,
+      dataURLOptions,
+    } = e.data;
 
     const transparentBase64 = getTransparentBlobFor(
       width,
@@ -60,7 +68,7 @@ worker.onmessage = async function (e) {
     const offscreen = new OffscreenCanvas(width, height);
     const ctx = offscreen.getContext('2d')!;
 
-    ctx.drawImage(bitmap, 0, 0);
+    ctx.drawImage(bitmap, 0, 0, width, height);
     bitmap.close();
     const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while
     const type = blob.type;
@@ -81,6 +89,8 @@ worker.onmessage = async function (e) {
       base64,
       width,
       height,
+      canvasWidth,
+      canvasHeight,
     });
     lastBlobMap.set(id, base64);
   } else {
diff --git a/packages/rrweb/src/replay/canvas/2d.ts b/packages/rrweb/src/replay/canvas/2d.ts
index ac6fdf41..bf8ba35c 100644
--- a/packages/rrweb/src/replay/canvas/2d.ts
+++ b/packages/rrweb/src/replay/canvas/2d.ts
@@ -1,5 +1,5 @@
 import type { Replayer } from '../';
-import type { canvasMutationCommand } from '@rrweb/types';
+import type { canvasMutationCommand } from '@highlight-run/rrweb-types';
 import { deserializeArg } from './deserialize-args';
 
 export default async function canvasMutation({
@@ -20,7 +20,7 @@ export default async function canvasMutation({
 
     if (mutation.setter) {
       // skip some read-only type checks
-      ((ctx as unknown) as Record<string, unknown>)[mutation.property] =
+      (ctx as unknown as Record<string, unknown>)[mutation.property] =
         mutation.args[0];
       return;
     }
diff --git a/packages/rrweb/src/replay/canvas/deserialize-args.ts b/packages/rrweb/src/replay/canvas/deserialize-args.ts
index a690d798..adac12ce 100644
--- a/packages/rrweb/src/replay/canvas/deserialize-args.ts
+++ b/packages/rrweb/src/replay/canvas/deserialize-args.ts
@@ -1,6 +1,9 @@
 import { decode } from 'base64-arraybuffer';
 import type { Replayer } from '../';
-import type { CanvasArg, SerializedCanvasArg } from '@rrweb/types';
+import type {
+  CanvasArg,
+  SerializedCanvasArg,
+} from '@highlight-run/rrweb-types';
 
 // TODO: add ability to wipe this list
 type GLVarMap = Map<string, any[]>;
diff --git a/packages/rrweb/src/replay/canvas/index.ts b/packages/rrweb/src/replay/canvas/index.ts
index 27cd165c..0f90484a 100644
--- a/packages/rrweb/src/replay/canvas/index.ts
+++ b/packages/rrweb/src/replay/canvas/index.ts
@@ -4,7 +4,7 @@ import {
   canvasMutationCommand,
   canvasMutationData,
   canvasMutationParam,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import webglMutation from './webgl';
 import canvas2DMutation from './2d';
 
diff --git a/packages/rrweb/src/replay/canvas/webgl.ts b/packages/rrweb/src/replay/canvas/webgl.ts
index 85ff81f8..fd9f8537 100644
--- a/packages/rrweb/src/replay/canvas/webgl.ts
+++ b/packages/rrweb/src/replay/canvas/webgl.ts
@@ -1,5 +1,8 @@
 import type { Replayer } from '../';
-import { CanvasContext, canvasMutationCommand } from '@rrweb/types';
+import {
+  CanvasContext,
+  canvasMutationCommand,
+} from '@highlight-run/rrweb-types';
 import { deserializeArg, variableListFor } from './deserialize-args';
 
 function getContext(
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index ca387986..a04415a5 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -8,7 +8,7 @@ import {
   createMirror,
   attributes,
   serializedElementNodeWithId,
-} from 'rrweb-snapshot';
+} from '@highlight-run/rrweb-snapshot';
 import {
   RRDocument,
   createOrGetNode,
@@ -16,7 +16,7 @@ import {
   buildFromDom,
   diff,
   getDefaultSN,
-} from 'rrdom';
+} from '@highlight-run/rrdom';
 import type {
   RRNode,
   RRElement,
@@ -26,7 +26,7 @@ import type {
   RRCanvasElement,
   ReplayerHandler,
   Mirror as RRDOMMirror,
-} from 'rrdom';
+} from '@highlight-run/rrdom';
 import * as mittProxy from 'mitt';
 import { polyfill as smoothscrollPolyfill } from './smoothscroll';
 import { Timer } from './timer';
@@ -58,11 +58,12 @@ import {
   canvasMutationCommand,
   canvasMutationParam,
   canvasEventWithTime,
+  SessionInterval,
   selectionData,
   styleSheetRuleData,
   styleDeclarationData,
   adoptedStyleSheetData,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import {
   polyfill,
   queueToResolveTrees,
@@ -83,6 +84,8 @@ import { deserializeArg } from './canvas/deserialize-args';
 
 const SKIP_TIME_THRESHOLD = 10 * 1000;
 const SKIP_TIME_INTERVAL = 5 * 1000;
+const SKIP_TIME_MIN = 1 * 1000;
+const SKIP_DURATION_LIMIT = 60 * 60 * 1000;
 
 // https://github.com/rollup/rollup/issues/1267#issuecomment-296395734
 const mitt = mittProxy.default || mittProxy;
@@ -128,6 +131,8 @@ export class Replayer {
   private emitter: Emitter = mitt();
 
   private nextUserInteractionEvent: eventWithTime | null;
+  private activityIntervals: Array<SessionInterval> = [];
+  private inactiveEndTimestamp: number | null;
 
   private legacy_missingNodeRetryMap: missingNodeMap = {};
 
@@ -176,7 +181,7 @@ export class Replayer {
       skipInactive: false,
       showWarning: true,
       showDebug: false,
-      blockClass: 'rr-block',
+      blockClass: 'highlight-block',
       liveMode: false,
       insertStyleRules: [],
       triggerFocus: true,
@@ -184,6 +189,8 @@ export class Replayer {
       pauseAnimation: true,
       mouseTail: defaultMouseTailConfig,
       useVirtualDom: true, // Virtual-dom optimization is enabled by default.
+      inactiveThreshold: 0.02,
+      inactiveSkipTime: SKIP_TIME_INTERVAL,
     };
     this.config = Object.assign({}, defaultConfig, config);
 
@@ -424,11 +431,108 @@ export class Replayer {
     }
   }
 
+  /* Start Highlight Code */
+  public getActivityIntervals(): Array<SessionInterval> {
+    if (this.activityIntervals.length == 0) {
+      // Preprocessing to get all active/inactive segments in a session
+      const allIntervals: Array<SessionInterval> = [];
+      const metadata = this.getMetaData();
+      const userInteractionEvents = [
+        { timestamp: metadata.startTime },
+        ...this.service.state.context.events.filter((ev) =>
+          this.isUserInteraction(ev),
+        ),
+        { timestamp: metadata.endTime },
+      ];
+      for (let i = 1; i < userInteractionEvents.length; i++) {
+        const currentInterval = userInteractionEvents[i - 1];
+        const _event = userInteractionEvents[i];
+        if (
+          _event.timestamp! - currentInterval.timestamp! >
+          SKIP_TIME_THRESHOLD
+        ) {
+          allIntervals.push({
+            startTime: currentInterval.timestamp!,
+            endTime: _event.timestamp!,
+            duration: _event.timestamp! - currentInterval.timestamp!,
+            active: false,
+          });
+        } else {
+          allIntervals.push({
+            startTime: currentInterval.timestamp!,
+            endTime: _event.timestamp!,
+            duration: _event.timestamp! - currentInterval.timestamp!,
+            active: true,
+          });
+        }
+      }
+      // Merges continuous active/inactive ranges
+      const mergedIntervals: Array<SessionInterval> = [];
+      let currentInterval = allIntervals[0];
+      for (let i = 1; i < allIntervals.length; i++) {
+        if (allIntervals[i].active != allIntervals[i - 1].active) {
+          mergedIntervals.push({
+            startTime: currentInterval.startTime,
+            endTime: allIntervals[i - 1].endTime,
+            duration: allIntervals[i - 1].endTime - currentInterval.startTime,
+            active: allIntervals[i - 1].active,
+          });
+          currentInterval = allIntervals[i];
+        }
+      }
+      if (currentInterval && allIntervals.length > 0) {
+        mergedIntervals.push({
+          startTime: currentInterval.startTime,
+          endTime: allIntervals[allIntervals.length - 1].endTime,
+          duration:
+            allIntervals[allIntervals.length - 1].endTime -
+            currentInterval.startTime,
+          active: allIntervals[allIntervals.length - 1].active,
+        });
+      }
+      // Merges inactive segments that are less than a threshold into surrounding active sessions
+      // TODO: Change this from a 3n pass to n
+      currentInterval = mergedIntervals[0];
+      for (let i = 1; i < mergedIntervals.length; i++) {
+        if (
+          (!mergedIntervals[i].active &&
+            mergedIntervals[i].duration >
+              this.config.inactiveThreshold * metadata.totalTime) ||
+          (!mergedIntervals[i - 1].active &&
+            mergedIntervals[i - 1].duration >
+              this.config.inactiveThreshold * metadata.totalTime)
+        ) {
+          this.activityIntervals.push({
+            startTime: currentInterval.startTime,
+            endTime: mergedIntervals[i - 1].endTime,
+            duration:
+              mergedIntervals[i - 1].endTime - currentInterval.startTime,
+            active: mergedIntervals[i - 1].active,
+          });
+          currentInterval = mergedIntervals[i];
+        }
+      }
+      if (currentInterval && mergedIntervals.length > 0) {
+        this.activityIntervals.push({
+          startTime: currentInterval.startTime,
+          endTime: mergedIntervals[mergedIntervals.length - 1].endTime,
+          duration:
+            mergedIntervals[mergedIntervals.length - 1].endTime -
+            currentInterval.startTime,
+          active: mergedIntervals[mergedIntervals.length - 1].active,
+        });
+      }
+    }
+    return this.activityIntervals;
+  }
+  /* End Highlight Code */
+
   public getMetaData(): playerMetaData {
     const firstEvent = this.service.state.context.events[0];
-    const lastEvent = this.service.state.context.events[
-      this.service.state.context.events.length - 1
-    ];
+    const lastEvent =
+      this.service.state.context.events[
+        this.service.state.context.events.length - 1
+      ];
     return {
       startTime: firstEvent.timestamp,
       endTime: lastEvent.timestamp,
@@ -519,6 +623,16 @@ export class Replayer {
     );
   }
 
+  public replaceEvents(events: eventWithTime[]) {
+    for (const event of events) {
+      if (indicatesTouchDevice(event)) {
+        this.mouse.classList.add('touch-device');
+        break;
+      }
+    }
+    this.service.send({ type: 'REPLACE_EVENTS', payload: { events } });
+  }
+
   public enableInteract() {
     this.iframe.setAttribute('scrolling', 'auto');
     this.iframe.style.pointerEvents = 'auto';
@@ -657,6 +771,7 @@ export class Replayer {
             // do not check skip in sync
             return;
           }
+          this.handleInactivity(event.timestamp);
           if (event === this.nextUserInteractionEvent) {
             this.nextUserInteractionEvent = null;
             this.backToNormal();
@@ -738,6 +853,42 @@ export class Replayer {
     return wrappedCastFn;
   };
 
+  /* Start of Highlight Code */
+  private handleInactivity(timestamp: number, resetNext?: boolean) {
+    if (timestamp === this.inactiveEndTimestamp || resetNext) {
+      this.inactiveEndTimestamp = null;
+      this.backToNormal();
+    }
+    if (this.config.skipInactive && !this.inactiveEndTimestamp) {
+      for (const interval of this.getActivityIntervals()) {
+        if (
+          timestamp >= interval.startTime! &&
+          timestamp < interval.endTime! &&
+          !interval.active
+        ) {
+          this.inactiveEndTimestamp = interval.endTime;
+          break;
+        }
+      }
+      if (this.inactiveEndTimestamp) {
+        const skipTime = this.inactiveEndTimestamp! - timestamp!;
+        const payload = {
+          speed:
+            (skipTime / SKIP_DURATION_LIMIT) * this.config.inactiveSkipTime <
+            SKIP_TIME_MIN
+              ? skipTime / SKIP_TIME_MIN
+              : Math.round(
+                  Math.max(skipTime, SKIP_DURATION_LIMIT) /
+                    this.config.inactiveSkipTime,
+                ),
+        };
+        this.speedService.send({ type: 'FAST_FORWARD', payload });
+        this.emitter.emit(ReplayerEvents.SkipStart, payload);
+      }
+    }
+  }
+  /* End of Highlight Code */
+
   private rebuildFullSnapshot(
     event: fullSnapshotEvent & { timestamp: number },
     isSync = false,
@@ -845,7 +996,7 @@ export class Replayer {
     const collected: AppendedIframe[] = [];
     const afterAppend = (builtNode: Node, id: number) => {
       this.collectIframeAndAttachDocument(collected, builtNode);
-      const sn = (mirror as TMirror).getMeta((builtNode as unknown) as TNode);
+      const sn = (mirror as TMirror).getMeta(builtNode as unknown as TNode);
       if (
         sn?.type === NodeType.Element &&
         sn?.tagName.toUpperCase() === 'HTML'
@@ -1253,9 +1404,9 @@ export class Replayer {
         if (this.usingVirtualDom) {
           if (d.styleId) this.constructedStyleMutations.push(d);
           else if (d.id)
-            (this.virtualDom.mirror.getNode(
-              d.id,
-            ) as RRStyleElement | null)?.rules.push(d);
+            (
+              this.virtualDom.mirror.getNode(d.id) as RRStyleElement | null
+            )?.rules.push(d);
         } else this.applyStyleSheetMutation(d);
         break;
       }
@@ -1895,10 +2046,10 @@ export class Replayer {
     styleSheet: CSSStyleSheet,
   ) {
     if (data.set) {
-      const rule = (getNestedRule(
+      const rule = getNestedRule(
         styleSheet.rules,
         data.index,
-      ) as unknown) as CSSStyleRule;
+      ) as unknown as CSSStyleRule;
       rule.style.setProperty(
         data.set.property,
         data.set.value,
@@ -1907,10 +2058,10 @@ export class Replayer {
     }
 
     if (data.remove) {
-      const rule = (getNestedRule(
+      const rule = getNestedRule(
         styleSheet.rules,
         data.index,
-      ) as unknown) as CSSStyleRule;
+      ) as unknown as CSSStyleRule;
       rule.style.removeProperty(data.remove.property);
     }
   }
@@ -1956,7 +2107,8 @@ export class Replayer {
         .filter((style) => style !== null) as CSSStyleSheet[];
       if (hasShadowRoot(targetHost))
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        (targetHost as HTMLElement).shadowRoot!.adoptedStyleSheets = stylesToAdopt;
+        (targetHost as HTMLElement).shadowRoot!.adoptedStyleSheets =
+          stylesToAdopt;
       else if (targetHost.nodeName === '#document')
         (targetHost as Document).adoptedStyleSheets = stylesToAdopt;
 
diff --git a/packages/rrweb/src/replay/machine.ts b/packages/rrweb/src/replay/machine.ts
index 9d09123f..9b5f2cfb 100644
--- a/packages/rrweb/src/replay/machine.ts
+++ b/packages/rrweb/src/replay/machine.ts
@@ -6,7 +6,7 @@ import {
   EventType,
   Emitter,
   IncrementalSource,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import { Timer, addDelay } from './timer';
 
 export type PlayerContext = {
@@ -37,6 +37,10 @@ export type PlayerEvent =
         event: eventWithTime;
       };
     }
+  | {
+      type: 'REPLACE_EVENTS';
+      payload: { events: eventWithTime[] };
+    }
   | {
       type: 'END';
     };
@@ -106,6 +110,10 @@ export function createPlayerService(
               target: 'playing',
               actions: ['addEvent'],
             },
+            REPLACE_EVENTS: {
+              target: 'playing',
+              actions: ['replaceEvents'],
+            },
           },
         },
         paused: {
@@ -126,6 +134,10 @@ export function createPlayerService(
               target: 'paused',
               actions: ['addEvent'],
             },
+            REPLACE_EVENTS: {
+              target: 'paused',
+              actions: ['replaceEvents'],
+            },
           },
         },
         live: {
@@ -231,6 +243,34 @@ export function createPlayerService(
             return Date.now();
           },
         }),
+        /* Highlight Code Start */
+        replaceEvents: assign((ctx, machineEvent) => {
+          const { events: curEvents, timer, baselineTime } = ctx;
+          if (machineEvent.type === 'REPLACE_EVENTS') {
+            const { events: newEvents } = machineEvent.payload;
+            curEvents.length = 0;
+            const actions: actionWithDelay[] = [];
+            for (const event of newEvents) {
+              addDelay(event, baselineTime);
+              curEvents.push(event);
+              if (event.timestamp >= timer.timeOffset + baselineTime) {
+                const castFn = getCastFn(event, false);
+                actions.push({
+                  doAction: () => {
+                    castFn();
+                  },
+                  delay: event.delay!,
+                });
+              }
+            }
+
+            if (timer.isActive()) {
+              timer.replaceActions(actions);
+            }
+          }
+          return { ...ctx, events: curEvents };
+        }),
+        /* Highlight Code End */
         addEvent: assign((ctx, machineEvent) => {
           const { baselineTime, timer, events } = ctx;
           if (machineEvent.type === 'ADD_EVENT') {
diff --git a/packages/rrweb/src/replay/styles/inject-style.ts b/packages/rrweb/src/replay/styles/inject-style.ts
index f5018561..2ba28dfb 100644
--- a/packages/rrweb/src/replay/styles/inject-style.ts
+++ b/packages/rrweb/src/replay/styles/inject-style.ts
@@ -1,6 +1,7 @@
 const rules: (blockClass: string) => string[] = (blockClass: string) => [
-  `.${blockClass} { background: currentColor }`,
   'noscript { display: none !important; }',
+  `.${blockClass} { background: currentColor; border-radius: 5px; }`,
+  `.${blockClass}:hover::after {content: 'Redacted'; color: white; background: black; text-align: center; width: 100%; display: block;}`,
 ];
 
 export default rules;
diff --git a/packages/rrweb/src/replay/styles/style.css b/packages/rrweb/src/replay/styles/style.css
index b459e515..5a394de4 100644
--- a/packages/rrweb/src/replay/styles/style.css
+++ b/packages/rrweb/src/replay/styles/style.css
@@ -77,3 +77,15 @@
     height: 10px;
   }
 }
+
+.rr-player {
+  position: relative;
+  background: white;
+  float: left;
+  border-radius: 5px;
+  box-shadow: 0 24px 48px rgba(17, 16, 62, 0.12);
+}
+
+.rr-player__frame {
+  overflow: hidden;
+}
diff --git a/packages/rrweb/src/replay/timer.ts b/packages/rrweb/src/replay/timer.ts
index e25e6a46..a4f5e366 100644
--- a/packages/rrweb/src/replay/timer.ts
+++ b/packages/rrweb/src/replay/timer.ts
@@ -3,7 +3,7 @@ import {
   eventWithTime,
   EventType,
   IncrementalSource,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 
 export class Timer {
   public timeOffset = 0;
@@ -41,6 +41,20 @@ export class Timer {
     this.actions.splice(index, 0, action);
   }
 
+  /* Begin Highlight Code */
+  /**
+   * Add all actions before the timer starts
+   */
+  public addActions(actions: actionWithDelay[]) {
+    this.actions = this.actions.concat(actions);
+  }
+
+  public replaceActions(actions: actionWithDelay[]) {
+    this.actions.length = 0;
+    this.actions.splice(0, 0, ...actions);
+  }
+  /* End Highlight Code */
+
   public start() {
     this.timeOffset = 0;
     let lastTimestamp = performance.now();
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index 4548717c..61748ac6 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -5,12 +5,12 @@ import type {
   MaskInputFn,
   MaskTextFn,
   DataURLOptions,
-} from 'rrweb-snapshot';
+} from '@highlight-run/rrweb-snapshot';
 import type { PackFn, UnpackFn } from './packer/base';
 import type { IframeManager } from './record/iframe-manager';
 import type { ShadowDomManager } from './record/shadow-dom-manager';
 import type { Replayer } from './replay';
-import type { RRNode } from 'rrdom';
+import type { RRNode } from '@highlight-run/rrdom';
 import type { CanvasManager } from './record/observers/canvas/canvas-manager';
 import type { StylesheetManager } from './record/stylesheet-manager';
 import type {
@@ -36,7 +36,7 @@ import type {
   styleDeclarationCallback,
   styleSheetRuleCallback,
   viewportResizeCallback,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 
 export type recordOptions<T> = {
   emit?: (e: T, isCheckout?: boolean) => void;
@@ -67,6 +67,11 @@ export type recordOptions<T> = {
   // departed, please use sampling options
   mousemoveWait?: number;
   keepIframeSrcFn?: KeepIframeSrcFn;
+  /**
+   * Enabling this will disable recording of text data on the page. This is useful if you do not want to record personally identifiable information.
+   * Text will be randomized. Instead of seeing "Hello World" in a recording, you will see "1fds1 j59a0".
+   */
+  enableStrictPrivacy?: boolean;
 };
 
 export type observerParam = {
@@ -105,6 +110,7 @@ export type observerParam = {
   stylesheetManager: StylesheetManager;
   shadowDomManager: ShadowDomManager;
   canvasManager: CanvasManager;
+  enableStrictPrivacy: boolean;
   ignoreCSSAttributes: Set<string>;
   plugins: Array<{
     observer: (
@@ -139,6 +145,7 @@ export type MutationBufferParam = Pick<
   | 'stylesheetManager'
   | 'shadowDomManager'
   | 'canvasManager'
+  | 'enableStrictPrivacy'
 >;
 
 export type ReplayPlugin = {
@@ -178,6 +185,8 @@ export type playerConfig = {
   unpackFn?: UnpackFn;
   useVirtualDom: boolean;
   plugins?: ReplayPlugin[];
+  inactiveThreshold: number;
+  inactiveSkipTime: number;
 };
 
 export type missingNode = {
@@ -199,4 +208,5 @@ export type CrossOriginIframeMessageEventContent<T = eventWithTime> = {
   event: T;
   isCheckout?: boolean;
 };
-export type CrossOriginIframeMessageEvent = MessageEvent<CrossOriginIframeMessageEventContent>;
+export type CrossOriginIframeMessageEvent =
+  MessageEvent<CrossOriginIframeMessageEventContent>;
diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
index f52a6bb8..46a5f743 100644
--- a/packages/rrweb/src/utils.ts
+++ b/packages/rrweb/src/utils.ts
@@ -8,10 +8,10 @@ import type {
   IWindow,
   DeprecatedMirror,
   textMutation,
-} from '@rrweb/types';
-import type { IMirror, Mirror } from 'rrweb-snapshot';
-import { isShadowRoot, IGNORED_NODE, classMatchesRegex } from 'rrweb-snapshot';
-import type { RRNode, RRIFrameElement } from 'rrdom';
+} from '@highlight-run/rrweb-types';
+import type { IMirror, Mirror } from '@highlight-run/rrweb-snapshot';
+import { isShadowRoot, IGNORED_NODE, classMatchesRegex } from '@highlight-run/rrweb-snapshot';
+import type { RRNode, RRIFrameElement } from '@highlight-run/rrdom';
 
 export function on(
   type: string,
@@ -183,6 +183,23 @@ export function getWindowWidth(): number {
   );
 }
 
+/**
+ * Start of Highlight Code
+ */
+export const isCanvasNode = (node: Node | null): boolean => {
+  try {
+    if (node instanceof HTMLElement) {
+      return node.tagName === 'CANVAS';
+    }
+  } catch {
+    return false;
+  }
+  return false;
+};
+/**
+ * End of Highlight Code
+ */
+
 /**
  * Checks if the given element set to be blocked by rrweb
  * @param node - node to check
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index f2d86c86..e68bae8f 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -755,7 +755,7 @@ exports[`record integration tests can mask character data mutations 1`] = `
         {
           \\"id\\": 7,
           \\"attributes\\": {
-            \\"class\\": \\"rr-mask\\"
+            \\"class\\": \\"highlight-mask\\"
           }
         }
       ],
@@ -773,7 +773,7 @@ exports[`record integration tests can mask character data mutations 1`] = `
             \\"type\\": 2,
             \\"tagName\\": \\"li\\",
             \\"attributes\\": {
-              \\"class\\": \\"rr-mask\\"
+              \\"class\\": \\"highlight-mask\\"
             },
             \\"childNodes\\": [],
             \\"id\\": 20
@@ -4194,7 +4194,7 @@ exports[`record integration tests mutations should work when blocked class is un
                         \\"type\\": 2,
                         \\"tagName\\": \\"div\\",
                         \\"attributes\\": {
-                          \\"class\\": \\"rr-block\\",
+                          \\"class\\": \\"highlight-block\\",
                           \\"rr_width\\": \\"200px\\",
                           \\"rr_height\\": \\"33px\\"
                         },
@@ -4366,7 +4366,7 @@ exports[`record integration tests mutations should work when blocked class is un
                         \\"type\\": 2,
                         \\"tagName\\": \\"div\\",
                         \\"attributes\\": {
-                          \\"class\\": \\"rr-block\\",
+                          \\"class\\": \\"highlight-block\\",
                           \\"rr_width\\": \\"200px\\",
                           \\"rr_height\\": \\"33px\\"
                         },
@@ -4855,7 +4855,7 @@ exports[`record integration tests should mask texts 1`] = `
                     \\"type\\": 2,
                     \\"tagName\\": \\"p\\",
                     \\"attributes\\": {
-                      \\"class\\": \\"rr-mask\\"
+                      \\"class\\": \\"highlight-mask\\"
                     },
                     \\"childNodes\\": [
                       {
@@ -4875,7 +4875,7 @@ exports[`record integration tests should mask texts 1`] = `
                     \\"type\\": 2,
                     \\"tagName\\": \\"div\\",
                     \\"attributes\\": {
-                      \\"class\\": \\"rr-mask\\"
+                      \\"class\\": \\"highlight-mask\\"
                     },
                     \\"childNodes\\": [
                       {
@@ -5133,7 +5133,7 @@ exports[`record integration tests should mask texts using maskTextFn 1`] = `
                     \\"type\\": 2,
                     \\"tagName\\": \\"p\\",
                     \\"attributes\\": {
-                      \\"class\\": \\"rr-mask\\"
+                      \\"class\\": \\"highlight-mask\\"
                     },
                     \\"childNodes\\": [
                       {
@@ -5153,7 +5153,7 @@ exports[`record integration tests should mask texts using maskTextFn 1`] = `
                     \\"type\\": 2,
                     \\"tagName\\": \\"div\\",
                     \\"attributes\\": {
-                      \\"class\\": \\"rr-mask\\"
+                      \\"class\\": \\"highlight-mask\\"
                     },
                     \\"childNodes\\": [
                       {
@@ -6531,7 +6531,7 @@ exports[`record integration tests should not record blocked elements and its chi
                     \\"type\\": 2,
                     \\"tagName\\": \\"div\\",
                     \\"attributes\\": {
-                      \\"class\\": \\"rr-block\\",
+                      \\"class\\": \\"highlight-block\\",
                       \\"rr_width\\": \\"50px\\",
                       \\"rr_height\\": \\"50px\\"
                     },
@@ -6711,7 +6711,7 @@ exports[`record integration tests should not record blocked elements dynamically
                     \\"type\\": 2,
                     \\"tagName\\": \\"div\\",
                     \\"attributes\\": {
-                      \\"class\\": \\"rr-block\\",
+                      \\"class\\": \\"highlight-block\\",
                       \\"rr_width\\": \\"50px\\",
                       \\"rr_height\\": \\"50px\\"
                     },
@@ -6771,7 +6771,7 @@ exports[`record integration tests should not record blocked elements dynamically
             \\"type\\": 2,
             \\"tagName\\": \\"button\\",
             \\"attributes\\": {
-              \\"class\\": \\"rr-block\\",
+              \\"class\\": \\"highlight-block\\",
               \\"rr_width\\": \\"100px\\",
               \\"rr_height\\": \\"100px\\"
             },
@@ -6940,7 +6940,7 @@ exports[`record integration tests should not record input events on ignored elem
                             \\"tagName\\": \\"input\\",
                             \\"attributes\\": {
                               \\"type\\": \\"text\\",
-                              \\"class\\": \\"rr-ignore\\"
+                              \\"class\\": \\"highlight-ignore\\"
                             },
                             \\"childNodes\\": [],
                             \\"id\\": 22
diff --git a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
index 66234059..ec4cca57 100644
--- a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
@@ -46,7 +46,7 @@ file-frame-5
 file-cid-0
 @charset \\"utf-8\\";
 
-.rr-block { background: currentcolor; }
+.highlight-block { background: currentcolor; }
 
 noscript { display: none !important; }
 
@@ -126,7 +126,7 @@ file-frame-5
 file-cid-0
 @charset \\"utf-8\\";
 
-.rr-block { background: currentcolor; }
+.highlight-block { background: currentcolor; }
 
 noscript { display: none !important; }
 
@@ -198,7 +198,7 @@ file-frame-2
 file-cid-0
 @charset \\"utf-8\\";
 
-.rr-block { background: currentcolor; }
+.highlight-block { background: currentcolor; }
 
 noscript { display: none !important; }
 
@@ -249,7 +249,7 @@ file-frame-2
 file-cid-0
 @charset \\"utf-8\\";
 
-.rr-block { background: currentcolor; }
+.highlight-block { background: currentcolor; }
 
 noscript { display: none !important; }
 
@@ -300,7 +300,7 @@ file-frame-2
 file-cid-0
 @charset \\"utf-8\\";
 
-.rr-block { background: currentcolor; }
+.highlight-block { background: currentcolor; }
 
 noscript { display: none !important; }
 
diff --git a/packages/rrweb/test/e2e/webgl.test.ts b/packages/rrweb/test/e2e/webgl.test.ts
index 09521b54..7e5ec6ab 100644
--- a/packages/rrweb/test/e2e/webgl.test.ts
+++ b/packages/rrweb/test/e2e/webgl.test.ts
@@ -11,7 +11,7 @@ import {
   ISuite,
 } from '../utils';
 import type { recordOptions } from '../../src/types';
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 expect.extend({ toMatchImageSnapshot });
 
diff --git a/packages/rrweb/test/events/adopted-style-sheet-modification.ts b/packages/rrweb/test/events/adopted-style-sheet-modification.ts
index fd26ea9c..e3113a23 100644
--- a/packages/rrweb/test/events/adopted-style-sheet-modification.ts
+++ b/packages/rrweb/test/events/adopted-style-sheet-modification.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/adopted-style-sheet.ts b/packages/rrweb/test/events/adopted-style-sheet.ts
index 70ddc430..79b110b6 100644
--- a/packages/rrweb/test/events/adopted-style-sheet.ts
+++ b/packages/rrweb/test/events/adopted-style-sheet.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 const now = Date.now();
 
diff --git a/packages/rrweb/test/events/canvas-in-iframe.ts b/packages/rrweb/test/events/canvas-in-iframe.ts
index 28abee2c..70730b40 100644
--- a/packages/rrweb/test/events/canvas-in-iframe.ts
+++ b/packages/rrweb/test/events/canvas-in-iframe.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 const now = Date.now();
 
diff --git a/packages/rrweb/test/events/iframe.ts b/packages/rrweb/test/events/iframe.ts
index 7288b7ad..b14b390b 100644
--- a/packages/rrweb/test/events/iframe.ts
+++ b/packages/rrweb/test/events/iframe.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 const now = Date.now();
 
diff --git a/packages/rrweb/test/events/input.ts b/packages/rrweb/test/events/input.ts
index e53f8dcc..2c6191cb 100644
--- a/packages/rrweb/test/events/input.ts
+++ b/packages/rrweb/test/events/input.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/ordering.ts b/packages/rrweb/test/events/ordering.ts
index 53dbfc2b..b01015d9 100644
--- a/packages/rrweb/test/events/ordering.ts
+++ b/packages/rrweb/test/events/ordering.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/scroll.ts b/packages/rrweb/test/events/scroll.ts
index baf6d1e0..dc828c3b 100644
--- a/packages/rrweb/test/events/scroll.ts
+++ b/packages/rrweb/test/events/scroll.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/selection.ts b/packages/rrweb/test/events/selection.ts
index 2d166555..4a879360 100644
--- a/packages/rrweb/test/events/selection.ts
+++ b/packages/rrweb/test/events/selection.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 const now = Date.now();
 
diff --git a/packages/rrweb/test/events/shadow-dom.ts b/packages/rrweb/test/events/shadow-dom.ts
index 106e848f..d717bb5e 100644
--- a/packages/rrweb/test/events/shadow-dom.ts
+++ b/packages/rrweb/test/events/shadow-dom.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 const now = Date.now();
 
diff --git a/packages/rrweb/test/events/style-sheet-rule-events.ts b/packages/rrweb/test/events/style-sheet-rule-events.ts
index b3d50a99..799338be 100644
--- a/packages/rrweb/test/events/style-sheet-rule-events.ts
+++ b/packages/rrweb/test/events/style-sheet-rule-events.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
@@ -147,8 +147,7 @@ const events: eventWithTime[] = [
       id: 101,
       adds: [
         {
-          rule:
-            '.css-added-at-500-overwritten-at-3000 {border: 1px solid blue;}',
+          rule: '.css-added-at-500-overwritten-at-3000 {border: 1px solid blue;}',
           index: 1,
         },
       ],
@@ -163,8 +162,7 @@ const events: eventWithTime[] = [
       id: 105,
       adds: [
         {
-          rule:
-            '.css-added-at-1000-deleted-at-2500{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:60rem;min-height:100vh;color:blue;}',
+          rule: '.css-added-at-1000-deleted-at-2500{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:60rem;min-height:100vh;color:blue;}',
           index: 2,
         },
       ],
diff --git a/packages/rrweb/test/events/style-sheet-text-mutation.ts b/packages/rrweb/test/events/style-sheet-text-mutation.ts
index d6dcc6de..5860158d 100644
--- a/packages/rrweb/test/events/style-sheet-text-mutation.ts
+++ b/packages/rrweb/test/events/style-sheet-text-mutation.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
+import type { eventWithTime } from '@highlight-run/rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/html/block.html b/packages/rrweb/test/html/block.html
index 6fee77f7..4cef3cb6 100644
--- a/packages/rrweb/test/html/block.html
+++ b/packages/rrweb/test/html/block.html
@@ -7,7 +7,7 @@
     <title>Block record</title>
   </head>
   <body>
-    <div class="rr-block" style="width: 50px; height: 50px;">
+    <div class="highlight-block" style="width: 50px; height: 50px;">
       <input type="text" /> <span id="text"></span>
     </div>
   </body>
diff --git a/packages/rrweb/test/html/blocked-unblocked.html b/packages/rrweb/test/html/blocked-unblocked.html
index 5d82c6cd..38d26696 100644
--- a/packages/rrweb/test/html/blocked-unblocked.html
+++ b/packages/rrweb/test/html/blocked-unblocked.html
@@ -71,7 +71,7 @@ <h1>Verify that block class bugs are fixed</h1>
       <button>VISIBLE</button>
     </div>
     <br /><br /><br />
-    <div class="rr-block" id="b-class">
+    <div class="highlight-block" id="b-class">
       <button id="remove">BLOCKED</button>
     </div>
     <br /><br /><br />
@@ -83,7 +83,7 @@ <h1>Verify that block class bugs are fixed</h1>
       <button>VISIBLE</button>
     </div>
     <br /><br /><br />
-    <div class="rr-block" id="b-class-2">
+    <div class="highlight-block" id="b-class-2">
       <button id="remove2">BLOCKED</button>
     </div>
     <br /><br /><br />
diff --git a/packages/rrweb/test/html/ignore.html b/packages/rrweb/test/html/ignore.html
index f46c2efd..30c4a29c 100644
--- a/packages/rrweb/test/html/ignore.html
+++ b/packages/rrweb/test/html/ignore.html
@@ -9,7 +9,7 @@
 
   <body>
     <form>
-      <label for="ignore text"> <input type="text" class="rr-ignore" /> </label>
+      <label for="ignore text"> <input type="text" class="highlight-ignore" /> </label>
     </form>
   </body>
 </html>
diff --git a/packages/rrweb/test/html/mask-text.html b/packages/rrweb/test/html/mask-text.html
index 2abaaaa5..f27e656d 100644
--- a/packages/rrweb/test/html/mask-text.html
+++ b/packages/rrweb/test/html/mask-text.html
@@ -7,8 +7,8 @@
     <title>Mask text</title>
   </head>
   <body>
-    <p class="rr-mask">mask1</p>
-    <div class="rr-mask">
+    <p class="highlight-mask">mask1</p>
+    <div class="highlight-mask">
       <span>mask2</span>
     </div>
     <div data-masking="true">
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index 82ce7d19..4a87feab 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -12,8 +12,8 @@ import {
   ISuite,
 } from './utils';
 import type { recordOptions } from '../src/types';
-import { eventWithTime, EventType, RecordPlugin } from '@rrweb/types';
-import { visitSnapshot, NodeType } from 'rrweb-snapshot';
+import { eventWithTime, EventType, RecordPlugin } from '@highlight-run/rrweb-types';
+import { visitSnapshot, NodeType } from '@highlight-run/rrweb-snapshot';
 
 describe('record integration tests', function (this: ISuite) {
   jest.setTimeout(10_000);
@@ -201,7 +201,7 @@ describe('record integration tests', function (this: ISuite) {
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'ignore.html'));
 
-    await page.type('.rr-ignore', 'secret');
+    await page.type('.highlight-ignore', 'secret');
 
     const snapshots = (await page.evaluate(
       'window.snapshots',
@@ -316,12 +316,12 @@ describe('record integration tests', function (this: ISuite) {
 
     await page.evaluate(() => {
       const el = document.createElement('button');
-      el.className = 'rr-block';
+      el.className = 'highlight-block';
       el.style.width = '100px';
       el.style.height = '100px';
       el.innerText = 'Should not be recorded';
 
-      const nextElement = document.querySelector('.rr-block')!;
+      const nextElement = document.querySelector('.highlight-block')!;
       nextElement.parentNode!.insertBefore(el, nextElement);
     });
 
@@ -502,7 +502,8 @@ describe('record integration tests', function (this: ISuite) {
     await page.goto('about:blank');
     await page.setContent(
       getHtml('log.html', {
-        plugins: ('[rrwebConsoleRecord.getRecordConsolePlugin()]' as unknown) as RecordPlugin<unknown>[],
+        plugins:
+          '[rrwebConsoleRecord.getRecordConsolePlugin()]' as unknown as RecordPlugin<unknown>[],
       }),
     );
 
@@ -677,8 +678,8 @@ describe('record integration tests', function (this: ISuite) {
 
     await page.evaluate(() => {
       // get contentDocument of iframe five
-      const contentDocument1 = document.querySelector('iframe')!
-        .contentDocument!;
+      const contentDocument1 =
+        document.querySelector('iframe')!.contentDocument!;
       // create shadow dom #1
       contentDocument1.body.attachShadow({ mode: 'open' });
       contentDocument1.body.shadowRoot!.appendChild(
@@ -859,7 +860,7 @@ describe('record integration tests', function (this: ISuite) {
       const ul = document.querySelector('ul') as HTMLUListElement;
       const p = document.querySelector('p') as HTMLParagraphElement;
       [li, p].forEach((element) => {
-        element.className = 'rr-mask';
+        element.className = 'highlight-mask';
       });
       ul.appendChild(li);
       li.innerText = 'new list item';
diff --git a/packages/rrweb/test/machine.test.ts b/packages/rrweb/test/machine.test.ts
index bf96a317..9c2e56d8 100644
--- a/packages/rrweb/test/machine.test.ts
+++ b/packages/rrweb/test/machine.test.ts
@@ -1,6 +1,6 @@
 import { discardPriorSnapshots } from '../src/replay/machine';
 import { sampleEvents } from './utils';
-import { EventType } from '@rrweb/types';
+import { EventType } from '@highlight-run/rrweb-types';
 
 const events = sampleEvents.filter(
   (e) => ![EventType.DomContentLoaded, EventType.Load].includes(e.type),
diff --git a/packages/rrweb/test/packer.test.ts b/packages/rrweb/test/packer.test.ts
index ed2fbadf..c4624ed7 100644
--- a/packages/rrweb/test/packer.test.ts
+++ b/packages/rrweb/test/packer.test.ts
@@ -1,5 +1,5 @@
 import { pack, unpack } from '../src/packer';
-import { eventWithTime, EventType } from '@rrweb/types';
+import { eventWithTime, EventType } from '@highlight-run/rrweb-types';
 import { MARK } from '../src/packer/base';
 
 const event: eventWithTime = {
@@ -17,7 +17,7 @@ describe('pack', () => {
 
 describe('unpack', () => {
   it('is compatible with unpacked data 1', () => {
-    const result = unpack((event as unknown) as string);
+    const result = unpack(event as unknown as string);
     expect(result).toEqual(event);
   });
 
diff --git a/packages/rrweb/test/record.test.ts b/packages/rrweb/test/record.test.ts
index 215067d2..2c82422a 100644
--- a/packages/rrweb/test/record.test.ts
+++ b/packages/rrweb/test/record.test.ts
@@ -10,7 +10,7 @@ import {
   IncrementalSource,
   styleSheetRuleData,
   selectionData,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import {
   assertSnapshot,
   getServerURL,
@@ -93,9 +93,9 @@ describe('record', function (this: ISuite) {
 
   it('will only have one full snapshot without checkout config', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
     });
     let count = 30;
@@ -117,9 +117,9 @@ describe('record', function (this: ISuite) {
 
   it('can checkout full snapshot by count', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
         checkoutEveryNth: 10,
       });
     });
@@ -146,9 +146,9 @@ describe('record', function (this: ISuite) {
 
   it('can checkout full snapshot by time', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
         checkoutEveryNms: 500,
       });
     });
@@ -179,9 +179,9 @@ describe('record', function (this: ISuite) {
 
   it('is safe to checkout during async callbacks', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
         checkoutEveryNth: 2,
       });
       const p = document.createElement('p');
@@ -205,9 +205,9 @@ describe('record', function (this: ISuite) {
 
   it('should record scroll position', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
       const p = document.createElement('p');
       p.innerText = 'testtesttesttesttesttesttesttesttesttest';
@@ -222,9 +222,9 @@ describe('record', function (this: ISuite) {
 
   it('should record selection event', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
       const startNode = document.createElement('p');
 
@@ -263,9 +263,9 @@ describe('record', function (this: ISuite) {
 
   it('can add custom event', async () => {
     await ctx.page.evaluate(() => {
-      const { record, addCustomEvent } = ((window as unknown) as IWindow).rrweb;
+      const { record, addCustomEvent } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
       addCustomEvent<number>('tag1', 1);
       addCustomEvent<{ a: string }>('tag2', {
@@ -278,10 +278,10 @@ describe('record', function (this: ISuite) {
 
   it('captures stylesheet rules', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
 
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
 
       const styleElement = document.createElement('style');
@@ -328,10 +328,10 @@ describe('record', function (this: ISuite) {
 
   const captureNestedStylesheetRulesTest = async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
 
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
 
       const styleElement = document.createElement('style');
@@ -389,10 +389,10 @@ describe('record', function (this: ISuite) {
 
   it('captures style property changes', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
 
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
         ignoreCSSAttributes: new Set(['color']),
       });
 
@@ -425,7 +425,7 @@ describe('record', function (this: ISuite) {
 
   it('captures inserted style text nodes correctly', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
 
       const styleEl = document.createElement(`style`);
       styleEl.append(document.createTextNode('div { color: red; }'));
@@ -433,7 +433,7 @@ describe('record', function (this: ISuite) {
       document.head.appendChild(styleEl);
 
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
 
       styleEl.append(document.createTextNode('span { color: orange; }'));
@@ -459,11 +459,11 @@ describe('record', function (this: ISuite) {
     });
     await waitForRAF(ctx.page);
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
 
       record({
         inlineStylesheet: true,
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
     });
     await waitForRAF(ctx.page);
@@ -484,16 +484,17 @@ describe('record', function (this: ISuite) {
         document.adoptedStyleSheets = [sheet];
 
         const iframe = document.querySelector('iframe');
-        const sheet2 = new (iframe!.contentWindow! as Window &
-          typeof globalThis).CSSStyleSheet();
+        const sheet2 = new (
+          iframe!.contentWindow! as Window & typeof globalThis
+        ).CSSStyleSheet();
 
         // Add stylesheet to an IFrame document.
         iframe!.contentDocument!.adoptedStyleSheets = [sheet2];
         iframe!.contentDocument!.body.innerHTML = '<h1>h1 in iframe</h1>';
 
-        const { record } = ((window as unknown) as IWindow).rrweb;
+        const { record } = (window as unknown as IWindow).rrweb;
         record({
-          emit: ((window as unknown) as IWindow).emit,
+          emit: (window as unknown as IWindow).emit,
         });
 
         setTimeout(() => {
@@ -565,9 +566,9 @@ describe('record', function (this: ISuite) {
       sheet2.replaceSync!('div {font-size: large;}');
       shadowHost.shadowRoot!.adoptedStyleSheets = [sheet2];
 
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
 
       setTimeout(() => {
@@ -607,11 +608,11 @@ describe('record', function (this: ISuite) {
     });
     await waitForRAF(ctx.page);
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
 
       record({
         inlineStylesheet: true,
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
     });
     await waitForRAF(ctx.page);
@@ -651,11 +652,11 @@ describe('record', function (this: ISuite) {
 
     it('captures stylesheets that are still loading', async () => {
       ctx.page.evaluate((serverURL) => {
-        const { record } = ((window as unknown) as IWindow).rrweb;
+        const { record } = (window as unknown as IWindow).rrweb;
 
         record({
           inlineStylesheet: true,
-          emit: ((window as unknown) as IWindow).emit,
+          emit: (window as unknown as IWindow).emit,
         });
 
         const link1 = document.createElement('link');
@@ -676,11 +677,11 @@ describe('record', function (this: ISuite) {
         iframe.setAttribute('src', `/html/hello-world.html?2`);
         document.body.appendChild(iframe);
 
-        const { record } = ((window as unknown) as IWindow).rrweb;
+        const { record } = (window as unknown as IWindow).rrweb;
 
         record({
           inlineStylesheet: true,
-          emit: ((window as unknown) as IWindow).emit,
+          emit: (window as unknown as IWindow).emit,
         });
       });
 
@@ -711,11 +712,11 @@ describe('record', function (this: ISuite) {
 
     // do not `await` the following function, otherwise `waitForResponse` _might_ not be called
     void ctx.page.evaluate((corsStylesheetURL) => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
 
       record({
         inlineStylesheet: true,
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
 
       const link1 = document.createElement('link');
@@ -761,8 +762,9 @@ describe('record', function (this: ISuite) {
 
         // Add stylesheet to an IFrame document.
         const iframe = document.querySelector('iframe');
-        const sheet3 = new (iframe!.contentWindow! as IWindow &
-          typeof globalThis).CSSStyleSheet();
+        const sheet3 = new (
+          iframe!.contentWindow! as IWindow & typeof globalThis
+        ).CSSStyleSheet();
         sheet3.replaceSync!('h1 { color: blue; }');
 
         iframe!.contentDocument!.adoptedStyleSheets = [sheet3];
@@ -771,8 +773,8 @@ describe('record', function (this: ISuite) {
         ele.innerText = 'h1 in iframe';
         iframe!.contentDocument!.body.appendChild(ele);
 
-        ((window as unknown) as IWindow).rrweb.record({
-          emit: ((window.top as unknown) as IWindow).emit,
+        (window as unknown as IWindow).rrweb.record({
+          emit: (window.top as unknown as IWindow).emit,
         });
 
         // Make incremental changes to shadow dom.
@@ -787,8 +789,9 @@ describe('record', function (this: ISuite) {
 
           document.adoptedStyleSheets = [sheet4, sheet, sheet2];
 
-          const sheet5 = new (iframe!.contentWindow! as IWindow &
-            typeof globalThis).CSSStyleSheet();
+          const sheet5 = new (
+            iframe!.contentWindow! as IWindow & typeof globalThis
+          ).CSSStyleSheet();
           sheet5.replaceSync!('h2 { color: purple; }');
           iframe!.contentDocument!.adoptedStyleSheets = [sheet5, sheet3];
         }, 10);
@@ -821,9 +824,9 @@ describe('record iframes', function (this: ISuite) {
 
   it('captures iframe content in correct order', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
     });
     await waitForRAF(ctx.page);
@@ -845,10 +848,10 @@ describe('record iframes', function (this: ISuite) {
 
   it('captures stylesheet mutations in iframes', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
         // need to reference window.top for when we are in an iframe!
-        emit: ((window.top as unknown) as IWindow).emit,
+        emit: (window.top as unknown as IWindow).emit,
       });
 
       const iframe = document.querySelector('iframe');
diff --git a/packages/rrweb/test/record/cross-origin-iframes.test.ts b/packages/rrweb/test/record/cross-origin-iframes.test.ts
index b580ba8a..7afdb6c8 100644
--- a/packages/rrweb/test/record/cross-origin-iframes.test.ts
+++ b/packages/rrweb/test/record/cross-origin-iframes.test.ts
@@ -6,8 +6,8 @@ import type {
   listenerHandler,
   eventWithTime,
   mutationData,
-} from '@rrweb/types';
-import { EventType, IncrementalSource } from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
+import { EventType, IncrementalSource } from '@highlight-run/rrweb-types';
 import {
   assertSnapshot,
   getServerURL,
@@ -43,14 +43,14 @@ async function injectRecordScript(frame: puppeteer.Frame) {
     path: path.resolve(__dirname, '../../dist/rrweb.js'),
   });
   await frame.evaluate(() => {
-    ((window as unknown) as IWindow).snapshots = [];
-    const { record } = ((window as unknown) as IWindow).rrweb;
+    (window as unknown as IWindow).snapshots = [];
+    const { record } = (window as unknown as IWindow).rrweb;
     record({
       recordCrossOriginIframes: true,
       recordCanvas: true,
       emit(event) {
-        ((window as unknown) as IWindow).snapshots.push(event);
-        ((window as unknown) as IWindow).emit(event);
+        (window as unknown as IWindow).snapshots.push(event);
+        (window as unknown as IWindow).emit(event);
       },
     });
   });
@@ -129,21 +129,21 @@ describe('cross origin iframes', function (this: ISuite) {
 
       const frame = await el.contentFrame();
       const events = await frame?.evaluate(
-        () => ((window as unknown) as IWindow).snapshots,
+        () => (window as unknown as IWindow).snapshots,
       );
       expect(events).toMatchObject([]);
     });
 
     it('will emit events if it is in the top level iframe', async () => {
       const events = await ctx.page.evaluate(
-        () => ((window as unknown) as IWindow).snapshots,
+        () => (window as unknown as IWindow).snapshots,
       );
       expect(events.length).not.toBe(0);
     });
 
     it('should emit contents of iframe', async () => {
       const events = await ctx.page.evaluate(
-        () => ((window as unknown) as IWindow).snapshots,
+        () => (window as unknown as IWindow).snapshots,
       );
       await waitForRAF(ctx.page);
       // two events (full snapshot + meta) from main frame, and one full snapshot from iframe
@@ -152,7 +152,7 @@ describe('cross origin iframes', function (this: ISuite) {
 
     it('should emit full snapshot event from iframe as mutation event', async () => {
       const events = await ctx.page.evaluate(
-        () => ((window as unknown) as IWindow).snapshots,
+        () => (window as unknown as IWindow).snapshots,
       );
       await waitForRAF(ctx.page);
       // two events from main frame, and two from iframe
@@ -174,7 +174,7 @@ describe('cross origin iframes', function (this: ISuite) {
 
     it('should use unique id for child of iframes', async () => {
       const events: eventWithTime[] = await ctx.page.evaluate(
-        () => ((window as unknown) as IWindow).snapshots,
+        () => (window as unknown as IWindow).snapshots,
       );
       await waitForRAF(ctx.page);
       expect(
@@ -192,7 +192,7 @@ describe('cross origin iframes', function (this: ISuite) {
       await injectRecordScript(ctx.page.mainFrame().childFrames()[0]); // injects script into new iframe
 
       const events: eventWithTime[] = await ctx.page.evaluate(
-        () => ((window as unknown) as IWindow).snapshots,
+        () => (window as unknown as IWindow).snapshots,
       );
       expect(
         (events[events.length - 1].data as mutationData).removes,
@@ -324,7 +324,7 @@ describe('cross origin iframes', function (this: ISuite) {
     it('should record custom events', async () => {
       const frame = ctx.page.mainFrame().childFrames()[0];
       await frame.evaluate(() => {
-        ((window as unknown) as IWindow).rrweb.addCustomEvent('test', {
+        (window as unknown as IWindow).rrweb.addCustomEvent('test', {
           id: 1,
           parentId: 1,
           nextId: 2,
@@ -369,18 +369,17 @@ describe('cross origin iframes', function (this: ISuite) {
       });
       await waitForRAF(ctx.page);
       await ctx.page.evaluate(() => {
-        (document.adoptedStyleSheets![0]
-          .cssRules[0] as CSSStyleRule).style.setProperty('color', 'green');
-        (document.adoptedStyleSheets![0]
-          .cssRules[0] as CSSStyleRule).style.removeProperty('display');
+        (
+          document.adoptedStyleSheets![0].cssRules[0] as CSSStyleRule
+        ).style.setProperty('color', 'green');
+        (
+          document.adoptedStyleSheets![0].cssRules[0] as CSSStyleRule
+        ).style.removeProperty('display');
       });
       await frame.evaluate(() => {
-        (document.adoptedStyleSheets![0]
-          .cssRules[0] as CSSStyleRule).style.setProperty(
-          'font-size',
-          'medium',
-          'important',
-        );
+        (
+          document.adoptedStyleSheets![0].cssRules[0] as CSSStyleRule
+        ).style.setProperty('font-size', 'medium', 'important');
         document.adoptedStyleSheets![0].insertRule('h2 { color: red; }');
       });
       await waitForRAF(ctx.page);
@@ -426,8 +425,9 @@ describe('cross origin iframes', function (this: ISuite) {
           'color',
           'green',
         );
-        (document.styleSheets[0]
-          .cssRules[0] as CSSStyleRule).style.removeProperty('display');
+        (
+          document.styleSheets[0].cssRules[0] as CSSStyleRule
+        ).style.removeProperty('display');
       });
       await frame.evaluate(() => {
         (document.styleSheets[0].cssRules[0] as CSSStyleRule).style.setProperty(
@@ -503,7 +503,7 @@ describe('same origin iframes', function (this: ISuite) {
 
   it('should emit contents of iframe once', async () => {
     const events = await ctx.page.evaluate(
-      () => ((window as unknown) as IWindow).snapshots,
+      () => (window as unknown as IWindow).snapshots,
     );
     await waitForRAF(ctx.page);
     // two events (full snapshot + meta) from main frame,
diff --git a/packages/rrweb/test/record/webgl.test.ts b/packages/rrweb/test/record/webgl.test.ts
index c9dc782b..a794d518 100644
--- a/packages/rrweb/test/record/webgl.test.ts
+++ b/packages/rrweb/test/record/webgl.test.ts
@@ -8,14 +8,14 @@ import {
   EventType,
   IncrementalSource,
   CanvasContext,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import {
   assertSnapshot,
   launchPuppeteer,
   stripBase64,
   waitForRAF,
 } from '../utils';
-import type { ICanvas } from 'rrweb-snapshot';
+import type { ICanvas } from '@highlight-run/rrweb-snapshot';
 
 interface ISuite {
   code: string;
@@ -64,13 +64,13 @@ const setup = function (
     ctx.page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
 
     await ctx.page.evaluate((canvasSample) => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
         recordCanvas: true,
         sampling: {
           canvas: canvasSample,
         },
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
     }, canvasSample);
   });
diff --git a/packages/rrweb/test/replay/preload-all-images.test.ts b/packages/rrweb/test/replay/preload-all-images.test.ts
index 36133d3a..10ac5cbc 100644
--- a/packages/rrweb/test/replay/preload-all-images.test.ts
+++ b/packages/rrweb/test/replay/preload-all-images.test.ts
@@ -11,7 +11,7 @@ import {
   IncrementalSource,
   EventType,
   eventWithTime,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 
 let replayer: Replayer;
 
diff --git a/packages/rrweb/test/replay/webgl-mutation.test.ts b/packages/rrweb/test/replay/webgl-mutation.test.ts
index f1ca523c..d6e3b388 100644
--- a/packages/rrweb/test/replay/webgl-mutation.test.ts
+++ b/packages/rrweb/test/replay/webgl-mutation.test.ts
@@ -6,7 +6,7 @@ import { polyfillWebGLGlobals } from '../utils';
 polyfillWebGLGlobals();
 
 import webglMutation from '../../src/replay/canvas/webgl';
-import { CanvasContext } from '@rrweb/types';
+import { CanvasContext } from '@highlight-run/rrweb-types';
 import { variableListFor } from '../../src/replay/canvas/deserialize-args';
 
 let canvas: HTMLCanvasElement;
@@ -22,9 +22,9 @@ describe('webglMutation', () => {
     const createShaderMock = jest.fn().mockImplementation(() => {
       return new WebGLShader();
     });
-    const context = ({
+    const context = {
       createShader: createShaderMock,
-    } as unknown) as WebGLRenderingContext;
+    } as unknown as WebGLRenderingContext;
     jest.spyOn(canvas, 'getContext').mockImplementation(() => {
       return context;
     });
diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts
index b1c79949..0f750718 100644
--- a/packages/rrweb/test/utils.ts
+++ b/packages/rrweb/test/utils.ts
@@ -1,4 +1,4 @@
-import { NodeType } from 'rrweb-snapshot';
+import { NodeType } from '@highlight-run/rrweb-snapshot';
 import {
   EventType,
   IncrementalSource,
@@ -7,7 +7,7 @@ import {
   Optional,
   mouseInteractionData,
   event,
-} from '@rrweb/types';
+} from '@highlight-run/rrweb-types';
 import type { recordOptions } from '../src/types';
 import * as puppeteer from 'puppeteer';
 import { format } from 'prettier';
@@ -119,7 +119,8 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
           s.data.href = 'about:blank';
         }
         // FIXME: travis coordinates seems different with my laptop
-        const coordinatesReg = /(bottom|top|left|right|width|height): \d+(\.\d+)?px/g;
+        const coordinatesReg =
+          /(bottom|top|left|right|width|height): \d+(\.\d+)?px/g;
         if (
           s.type === EventType.IncrementalSnapshot &&
           s.data.source === IncrementalSource.MouseInteraction
@@ -178,10 +179,8 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
                 add.node.attributes.rr_dataURL &&
                 typeof add.node.attributes.rr_dataURL === 'string'
               ) {
-                add.node.attributes.rr_dataURL = add.node.attributes.rr_dataURL.replace(
-                  /,.+$/,
-                  ',...',
-                );
+                add.node.attributes.rr_dataURL =
+                  add.node.attributes.rr_dataURL.replace(/,.+$/, ',...');
               }
             }
           });
@@ -276,7 +275,7 @@ export function stripBase64(events: eventWithTime[]) {
   const base64Strings: string[] = [];
   function walk<T>(obj: T): T {
     if (!obj || typeof obj !== 'object') return obj;
-    if (Array.isArray(obj)) return (obj.map((e) => walk(e)) as unknown) as T;
+    if (Array.isArray(obj)) return obj.map((e) => walk(e)) as unknown as T;
     const newObj: Partial<T> = {};
     for (const prop in obj) {
       const value = obj[prop];
diff --git a/packages/types/package.json b/packages/types/package.json
index a6060cd1..03fcae02 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@rrweb/types",
+  "name": "@highlight-run/rrweb-types",
   "version": "2.0.0-alpha.4",
   "publishConfig": {
     "access": "public"
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index d2ed8ded..508f9c76 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -3,7 +3,7 @@ import type {
   Mirror,
   INode,
   DataURLOptions,
-} from 'rrweb-snapshot';
+} from '@highlight-run/rrweb-snapshot';
 
 export enum EventType {
   DomContentLoaded,
@@ -176,10 +176,43 @@ export type canvasEventWithTime = eventWithTime & {
   data: canvasMutationData;
 };
 
+export type SessionInterval = {
+  startTime: number;
+  endTime: number;
+  duration: number;
+  active: boolean;
+};
+
 export type blockClass = string | RegExp;
 
 export type maskTextClass = string | RegExp;
 
+export type CanvasSamplingStrategy = Partial<{
+  /**
+   * 'all' will record every single canvas call
+   * number between 1 and 60, will record an image snapshots in a web-worker a (maximum) number of times per second.
+   *                          Number only supported where [`OffscreenCanvas`](http://mdn.io/offscreencanvas) is supported.
+   */
+  fps: 'all' | number;
+  /**
+   * A scaling to apply to canvas shapshotting. Adjusts the resolution at which
+   * canvases are recorded by this multiple.
+   */
+  resizeFactor: number;
+  /**
+   * The quality of canvas snapshots
+   */
+  resizeQuality: 'pixelated' | 'low' | 'medium' | 'high';
+  /**
+   * The maximum dimension to take canvas snapshots at.
+   * This setting takes precedence over resizeFactor if the resulting image size
+   * from the resizeFactor calculation is larger than this value.
+   * Eg: set to 600 to ensure that the canvas is saved with images no larger than 600px
+   * in either dimension (while preserving the original canvas aspect ratio).
+   */
+  maxSnapshotDimension: number;
+}>;
+
 export type SamplingStrategy = Partial<{
   /**
    * false means not to record mouse/touch move events
@@ -213,7 +246,7 @@ export type SamplingStrategy = Partial<{
    * number between 1 and 60, will record an image snapshots in a web-worker a (maximum) number of times per second.
    *                          Number only supported where [`OffscreenCanvas`](http://mdn.io/offscreencanvas) is supported.
    */
-  canvas: 'all' | number;
+  canvas: CanvasSamplingStrategy;
 }>;
 
 export interface ICrossOriginIframeMirror {
@@ -500,6 +533,8 @@ export type ImageBitmapDataURLWorkerParams = {
   width: number;
   height: number;
   dataURLOptions: DataURLOptions;
+  canvasWidth: number;
+  canvasHeight: number;
 };
 
 export type ImageBitmapDataURLWorkerResponse =
@@ -512,6 +547,8 @@ export type ImageBitmapDataURLWorkerResponse =
       base64: string;
       width: number;
       height: number;
+      canvasWidth: number;
+      canvasHeight: number;
     };
 
 export type fontParam = {